Add workflow

.gitea/workflows/deploy.yaml

@@ -7,58 +7,50 @@ on:
       - master
 
 jobs:
+  # 1. PASO INTELIGENTE: Obtiene el contexto y lee apps.conf usando la ruta actual
   get-context:
     runs-on: host
     outputs:
       node_version: ${{ steps.setup.outputs.version }}
       target_app: ${{ steps.setup.outputs.app }}
     steps:
-      - name: Resolver Aplicación desde apps.conf
+      - name: Resolver Aplicación desde apps.conf por Ruta
         id: setup
         run: |
-          # 1. Obtener el nombre del repositorio actual en Gitea (ej: front-Censo)
+          # 1. Obtener la ruta absoluta donde está clonado este proyecto en el runner (ej: /var/www/html/front/pruebas/presupuesto)
-          REPO_NAME="${{ github.event.repository.name }}"
+          CURRENT_PATH=$(pwd)
-
+          
-          # 2. Determinar si buscamos un entorno -dev (develop) o producción (master)
+          echo "Buscando qué sección de apps.conf coincide con la ruta: $CURRENT_PATH"
-          if [ "${{ github.ref_name }}" = "develop" ]; then
+          
-            SUFFIX="-dev"
+          # 2. Buscar en apps.conf el bloque que tenga exactamente ese APP_PATH
-          else
+          # Usamos awk para encontrar el bloque [nombre] asociado a esa ruta
-            SUFFIX=""
+          TARGET_APP=$(awk -v path="$CURRENT_PATH" '
-          fi
-
-          echo "Buscando qué sección de apps.conf tiene REPO=$REPO_NAME y termina en '$SUFFIX'..."
-
-          # 3. Buscar en /etc/apps.conf el bloque que contenga REPO=nombre_del_repo
-          TARGET_APP=$(awk -v repo="REPO=$REPO_NAME" -v suf="$SUFFIX" '
             /^\[/ { gsub(/[\[\]]/, "", $0); current_box=$0; next }
-            $0 == repo {
+            $0 ~ "^APP_PATH="path"$" { print current_box; exit }
-              if ((suf == "-dev" && current_box ~ /-dev$/) || (suf == "" && current_box !~ /-dev$/)) {
+          ' /home/deploy/apps.conf)
-                print current_box;
+          
-                exit
-              }
-            }
-          ' /etc/apps.conf)
-
           if [ -z "$TARGET_APP" ]; then
-            echo "ERROR: No se encontró ninguna sección en /etc/apps.conf para el repositorio $REPO_NAME con el sufijo correcto."
+            echo "ERROR: No se encontró ninguna aplicación en apps.conf que coincida con la ruta $CURRENT_PATH"
             exit 1
           fi
-
+          
-          # 4. Leer la versión de Node del bloque encontrado
+          # 3. Una vez que sabemos el nombre del bloque (ej: presupuesto-dev), leemos su versión de Node
           VERSION=$(awk -v app="$TARGET_APP" '
             $0=="["app"]" { found=1; next }
             /^\[/ && found { exit }
             found && /^NODE=/ { split($0, a, "="); print a[2]; exit }
-          ' /etc/apps.conf)
+          ' /home/deploy/apps.conf)
-
+          
           MAJOR_VERSION=$(echo "$VERSION" | tr -d '[:space:]' | grep -oE '[0-9]+' | head -n1)
-
+          
           echo "-> ID de Aplicación encontrado: $TARGET_APP"
           echo "-> Versión Mayor de Node resuelta: $MAJOR_VERSION"
-
+          
+          # Exportar variables para los siguientes pasos
           echo "app=${TARGET_APP}" >> $GITHUB_OUTPUT
           echo "version=${MAJOR_VERSION}" >> $GITHUB_OUTPUT
 
+  # 2. PASO DE COMPILACIÓN: Se ejecuta seguro en Docker con la versión correcta
   build:
     needs: get-context
     runs-on: ubuntu-latest
@@ -73,6 +65,7 @@ jobs:
       - run: npm ci
       - run: npm run build
 
+  # 3. PASO DE DESPLIEGUE: Invoca tu script enviando el ID dinámico
   deploy:
     needs: [get-context, build]
     runs-on: host
@@ -81,5 +74,8 @@ jobs:
         run: |
           TARGET_APP="${{ needs.get-context.outputs.target_app }}"
           BRANCH_NAME="${{ github.ref_name }}"
-
+          
+          echo "Iniciando script de despliegue para el identificador: $TARGET_APP"
+          
+          # Llama a tu script pasándole el ID que descubrimos en el primer paso
           sudo -u deploy /home/deploy/scripts/deploy-front.sh "$TARGET_APP" "$BRANCH_NAME"

package-lock.json

@@ -12,7 +12,6 @@
         "@zxing/browser": "^0.1.5",
         "@zxing/library": "^0.21.3",
         "axios": "^1.13.2",
-        "chart.js": "^4.5.1",
         "js-cookie": "^3.0.5",
         "jwt-decode": "^4.0.0",
         "leaflet": "^1.9.4",
@@ -1179,12 +1178,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@kurkle/color": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
-      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
-      "license": "MIT"
-    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -3024,18 +3017,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/chart.js": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
-      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
-      "license": "MIT",
-      "dependencies": {
-        "@kurkle/color": "^0.3.0"
-      },
-      "engines": {
-        "pnpm": ">=8"
-      }
-    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",

package.json

@@ -13,7 +13,6 @@
     "@zxing/browser": "^0.1.5",
     "@zxing/library": "^0.21.3",
     "axios": "^1.13.2",
-    "chart.js": "^4.5.1",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
@@ -39,4 +38,4 @@
     "sass": "^1.94.0",
     "typescript": "^5"
   }
-}
+}

src/app/(Administrador)/reportesGraficas/page.tsx

@@ -1,17 +1,52 @@
 "use client";
 
+import { useState } from "react";
 import Reporte from "@/components/reporteGraficas/reporte";
 
 import "../../styles/layout/reporte.scss";
 
-export default function Page() {
+type PreguntaKey = "antiguedad";
 
+const LABELS: Record<PreguntaKey, string> = {
+  antiguedad: "Antigüedad",
+};
+
+export default function Page() {
+  const [activeTab, setActiveTab] = useState<PreguntaKey>("antiguedad");
+
+  const renderPregunta = () => {
+    switch (activeTab) {
+      case "antiguedad":
+        return (
+          <Reporte />
+        );
+      default:
+        return (
+          <div className="p-6 text-center text-gray-500">
+            Contenido no disponible aún.
+          </div>
+        );
+    }
+  };
 
   return (
     <div className="scanView_reporte">
       <div className="container_reporte">
         <div className="main-content_reporte">
-          <div className={`data-table_reporte`}><Reporte /></div>
+          <div className="tabs_reporte">
+            {Object.entries(LABELS).map(([key, label]) => (
+              <button
+                key={key}
+                className={`tab_reporte ${activeTab === key ? "active" : ""}`}
+                onClick={() => setActiveTab(key as PreguntaKey)}
+                aria-selected={activeTab === key}
+                role="tab"
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div className={`data-table_reporte`}>{renderPregunta()}</div>
         </div>
       </div>
     </div>

src/app/(Administrador)/reportes_graficas_perifericos/page.tsx

@@ -1,19 +0,0 @@
-"use client";
-
-
-import "../../styles/layout/reporte.scss";
-import ReportePerifericos from "@/components/reporte_graficas_perifericos/reporte";
-
-export default function Page() {
-
-
-  return (
-    <div className="scanView_reporte">
-      <div className="container_reporte">
-        <div className="main-content_reporte">
-          <div className={`data-table_reporte`}><ReportePerifericos /></div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/layout.tsx

@@ -24,9 +24,7 @@ export default function RootLayout({
       <body>
         <Header />
         <Toaster position="top-left" reverseOrder={false} />
-        <main>
         {children}
-        </main>
       </body>
     </html>
   );

src/app/styles/base/globales.scss

@@ -28,33 +28,6 @@ body {
   color: $color-text;
 }
 
-main {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-}
-
-main::before {
-  content: '';
-  position: absolute;
-
-  top: 50%;
-  left: 50%;
-
-  width: 200%;
-  height: 200%;
-
-  background-image:
-    linear-gradient(#003f7906 1px, transparent 1px),
-    linear-gradient(90deg, #003f7906 1px, transparent 1px);
-
-  background-size: 48px 48px;
-  pointer-events: none;
-
-  transform: translate(-50%, -50%) rotate(15deg);
-  transform-origin: center;
-}
-
 p {
   font-size: 2rem;
   line-height: 1.5;

src/app/styles/layout/ForgotPasswordPage.scss

@@ -9,7 +9,6 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  height: 100%;
   padding: 2rem;
   color: #222;
 

src/app/styles/layout/agregarEquipo.scss

@@ -2,7 +2,6 @@
   padding: 0;
   margin: 0;
   width: 100%;
-  height: 100%;
   max-width: 100%;
   display: flex;
   align-items: center;

src/app/styles/layout/escaner.scss

@@ -4,7 +4,6 @@
   padding: 0;
   margin: 0;
   width: 100vw;
-  height: 100%;
 }
 
 .header {

src/app/styles/layout/login.scss

@@ -3,7 +3,6 @@
   justify-content: space-evenly;
   align-items: center;
   width: 100vw;
-  height: 100%;
 }
 
 .login-container {

src/components/BarNavigationAdmin.tsx

@@ -41,17 +41,17 @@ function BarNavigation() {
         </li> */}
         <li className="subMenu" onClick={toggleMenu}>
           <Link href="/equipoComputo" className="links">
-            <span>Equipo de Cómputo</span>
+            <span>Equipo de Computo</span>
           </Link>
         </li>
         <li className="subMenu" onClick={toggleMenu}>
           <Link href="/perifericos" className="links">
-            <span>Periféricos</span>
+            <span>Perifericos</span>
           </Link>
         </li>
         <li className="subMenu" onClick={toggleMenu}>
           <Link href="/reportesGraficas" className="links">
-            <span>Reportes y Gráficas</span>
+            <span>Reportes y Graficas</span>
           </Link>
         </li>
         <li className="subMenu">

src/components/Dowload/tabla.tsx

@@ -10,31 +10,33 @@ interface Props {
   count?: boolean;
 }
 
-export default function DownloadTable({ filtros, count }: Props) {
+export default function DownloadTable({ filtros,count }: Props) {
   const [loading, setLoading] = useState(false);
 
   const handleDownload = async () => {
-    if (!filtros) { return }
+    if(!filtros.length){return}
     setLoading(true);
 
-    try {
+    const token = Cookies.get("token");
-      const token = Cookies.get("token");
-      const headers = { Authorization: `Bearer ${token}` };
 
+    try {
       const endpoint = count
-        ? "/equipos/excel/tabla/count"
+  ? "/equipos/excel/tabla/count"
-        : "/equipos/excel/tabla";
+  : "/equipos/excel/tabla";
+
 
       const response = await axios.post(
         `${process.env.NEXT_PUBLIC_API_URL}${endpoint}`,
         filtros,
         {
-          headers,
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
           responseType: "blob",
         }
       );
       const url = window.URL.createObjectURL(new Blob([response.data]));
-      console.log(url)
+
       const a = document.createElement("a");
       a.href = url;
       a.download = "reporte.xlsx";

src/components/Dowload/tablaCount.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import styles from "./style.module.css";
+import Cookies from "js-cookie";
+import { useState } from "react";
+
+export default function DownloadTableCount() {
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    setLoading(true);
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/equipos/excel/tabla/count`,
+        { headers }
+      );
+
+      if (!response.ok) {
+        throw new Error("Error al descargar el archivo");
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "reporte.xlsx";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error(error);
+      alert("Hubo un problema al descargar el archivo.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      className={styles.downloadBtn}
+      onClick={handleDownload}
+      disabled={loading} 
+    >
+      {loading ? (
+        <div className={styles.loader}></div>
+      ) : (
+        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
+      )}
+    </button>
+  );
+}

src/components/Equipo_Computo/MapaCalor.tsx

@@ -95,7 +95,7 @@ function HeatLayer() {
 
     Object.entries(edificios).forEach(([nombre, coords]: any) => {
       L.polygon((coords), {
-        color: "#77ee9f00",
+        color: "#77ee9f",
         weight: 2,
         fillOpacity: 0.25
       })
@@ -129,7 +129,7 @@ export default function MapaCalor() {
     <div style={{
       width: "100%",
       height: "650px",
-      marginTop: "10px",
+      marginTop: "40px",
       borderRadius: "12px",
       overflow: "hidden",
       boxShadow: "0 6px 25px rgba(0,0,0,0.3)"

src/components/Equipo_Computo/Pregunta1.tsx

@@ -25,11 +25,12 @@ const CATEGORIA_MAP: Record<string, { tabla: number }> = {
   "ESCRITORIO PC": { tabla: 0 },
   "ESCRITORIO MAC OS": { tabla: 0 },
   "ESCRITORIO MAC OS ": { tabla: 0 },
+
   "ESCRITORIO LINUX": { tabla: 0 },
 
   "PORTÁTILES WINDOWS": { tabla: 2 },
-  "PORTÁTILES CHROMEBOOK": { tabla: 2 },
   "PORTÁTILES MAC OS": { tabla: 2 },
+  "PORTÁTILES LINUX": { tabla: 2 },
 
   "TABLETA IPAD OS": { tabla: 1 },
   "TABLETA ANDROID": { tabla: 1 },
@@ -47,7 +48,7 @@ const TITULOS_TABLAS = [
 const SISTEMAS_POR_TABLA: Record<number, readonly string[]> = {
   0: ["Windows", "Linux", "Mac OS"],
   1: ["Android", "iPad OS"],
-  2: ["Windows", "Chrome OS", "Mac OS"],
+  2: ["Windows", "Linux", "Mac OS"],
   3: ["Servidor"],
 };
 
@@ -57,9 +58,7 @@ function normalizarSO(soRaw: string): string {
   if (so.includes("WINDOWS")) return "Windows";
   if (so.includes("LINUX")) return "Linux";
   if (so.includes("MAC")) return "Mac OS";
-  if (so.includes("CHROME OS")) return "Chrome OS";
+  if (so.includes("CHROME")) return "Chrome OS";
-  if (so.includes("ANDROID")) return "Android";
-
   if (so.includes("IOS") || so.includes("IPAD")) return "iPad OS";
 
   if (so.includes("SERVER") || so.includes("UNIX")) return "Servidor";
@@ -176,8 +175,9 @@ export default function Pregunta1() {
                   {valores.map((valor, colIndex) => (
                     <td key={colIndex}>
                       <div
-                        className={`${style["input-contenedor"]} ${loading ? "skeleton" : ""
+                        className={`${style["input-contenedor"]} ${
-                          }`}
+                          loading ? "skeleton" : ""
+                        }`}
                       >
                         {!loading ? (
                           <input type="number" value={valor} readOnly />
@@ -201,8 +201,9 @@ export default function Pregunta1() {
               {totalesColumnas.map((t, i) => (
                 <td key={i}>
                   <div
-                    className={`${style["input-contenedor"]} ${loading ? "skeleton" : ""
+                    className={`${style["input-contenedor"]} ${
-                      }`}
+                      loading ? "skeleton" : ""
+                    }`}
                   >
                     {!loading && t}
                   </div>

src/components/Ranking.tsx

@@ -42,7 +42,7 @@ export default function Ranking() {
   }, [year, api_url]);
 
   return (
-    <section style={{width:'100%'}}>
+    <section>
       <div className="year-selector">
         <div>
           <label>Año:</label>

src/components/reporteGraficas/Graficas/Antiguedad.tsx

@@ -95,13 +95,13 @@ export default function Antiguedad({ filtros }: Props) {
             }}
         >
 
-            <h1 style={{ margin: "0" }}>Antigüedad por equipo</h1>
+            <h1 style={{ margin: "0" }}>Antigüedad</h1>
 
             <ResponsiveContainer width="100%" aspect={2.5}>
 
                 <BarChart
                     data={dataTransformada}
-                    margin={{ top: 20 }}   
+                    margin={{ top: 20 }}
                 >
                     <CartesianGrid strokeDasharray="3 3" />
 
@@ -111,7 +111,7 @@ export default function Antiguedad({ filtros }: Props) {
                     <Tooltip
                         formatter={(value) => [`${value}`]}
                     />
-                    <Legend wrapperStyle={{ fontSize: 12 }}/>
+                    <Legend />
                     {tieneAdscripciones ? (
 
                         adscripciones.map((ads, i) => (

src/components/reporteGraficas/Graficas/Polar.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { Chart } from "chart.js/auto";
-import axios from "axios";
-import Cookies from "js-cookie";
-
-interface Props {
-    tipo: "ALUMNO" | "PROFESOR" | "ADMINISTRATIVO";
-    filtros: any
-}
-
-const api_url = process.env.NEXT_PUBLIC_API_URL;
-
-export default function Polar({ tipo, filtros }: Props) {
-    const canvasRef = useRef<HTMLCanvasElement | null>(null);
-    const chartRef = useRef<Chart | null>(null);
-
-    useEffect(() => {
-        if (!canvasRef.current) return;
-
-        const fetchData = async () => {
-            const token = Cookies.get("token");
-            const headers = { Authorization: `Bearer ${token}` };
-
-            try {
-                const res = await axios.post(
-                    `${api_url}/equipos/graficaPolar/${tipo}`, filtros, { headers }
-                );
-
-                const apiData = res.data;
-
-                // Orden fijo
-                const labels = [
-                    "Menor a 2 años",
-                    "Entre 2 y 3 años",
-                    "Entre 4 y 5 años",
-                    "Mayor a 6 años",
-                ];
-
-                // Mapear datos
-                const data = labels.map((label) => {
-                    const found = apiData.find(
-                        (item: any) => item.antiguedad === label
-                    );
-                    return found ? Number(found.total) : 0;
-                });
-
-                // Destruir gráfica previa (importante en React)
-                if (chartRef.current) {
-                    chartRef.current.destroy();
-                }
-
-                // Crear gráfica
-                chartRef.current = new Chart(canvasRef.current!, {
-                    type: "polarArea",
-                    data: {
-                        labels,
-                        datasets: [
-                            {
-                                data,
-                                borderWidth: 1,
-                                backgroundColor: [
-                                    "rgb(75, 192, 192)",
-                                    "rgb(255, 206, 86)",
-                                    "rgb(235, 157, 54)",
-                                    "rgb(255, 99, 132)",
-                                ],
-                            },
-                        ],
-                    },
-                });
-            } catch (error) {
-                console.error("Error al obtener datos:", error);
-            }
-        };
-
-        fetchData();
-
-        return () => {
-            if (chartRef.current) {
-                chartRef.current.destroy();
-            }
-        };
-    }, [filtros]);
-
-    return (
-        <div>
-            {tipo === 'PROFESOR' ?<h4>PROFESOR Y TECNICO</h4>:
-            <h4>{tipo}</h4>
-            }
-            <canvas ref={canvasRef} height={200} width={350}></canvas>
-        </div>
-    );
-}

src/components/reporteGraficas/Graficas/Procesador.tsx

@@ -3,7 +3,6 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-import Cookies from "js-cookie";
 
 interface Props {
     filtros: any
@@ -30,12 +29,8 @@ export default function Procesador({ filtros }: Props) {
     const [data, setData] = useState<procesador[]>([])
 
     useEffect(() => {
-        const token = Cookies.get("token");
-        const headers = { Authorization: `Bearer ${token}` };
-
         const getAntiguedad = async () => {
-            const response = await axios.post(`${api_url}/equipos/grafica/procesador`, filtros, { headers }
+            const response = await axios.post(`${api_url}/equipos/grafica/procesador`, filtros)
-            )
 
             setData(response.data)
         }
@@ -68,7 +63,7 @@ export default function Procesador({ filtros }: Props) {
 
     return (
         <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>Procesador por equipo</h1>
+            <h1 style={{ margin: "0" }}>Procesador</h1>
             <ResponsiveContainer width="100%" aspect={3.5}>
                 <BarChart data={dataTransformada}
                     width={500}
@@ -83,8 +78,8 @@ export default function Procesador({ filtros }: Props) {
                     <YAxis />
                     <Tooltip
                         formatter={(value) => [`${value}`]}
-                    />
+                    />     
-                    <Legend wrapperStyle={{ fontSize: 12 }}/>
+                    <Legend />
                     {tieneAdscripciones ? (
 
                         adscripciones.map((ads, i) => (

src/components/reporteGraficas/Graficas/SistemaOperativo.tsx

@@ -3,7 +3,6 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-import Cookies from "js-cookie";
 
 interface Props {
     filtros: any
@@ -30,11 +29,8 @@ export default function SistemaOperativo({ filtros }: Props) {
     const [data, setData] = useState<so[]>([])
 
     useEffect(() => {
-        const token = Cookies.get("token");
-        const headers = { Authorization: `Bearer ${token}` };
         const getAntiguedad = async () => {
-            const response = await axios.post(`${api_url}/equipos/grafica/so`, filtros, { headers }
+            const response = await axios.post(`${api_url}/equipos/grafica/so`, filtros)
-            )
 
             setData(response.data)
         }
@@ -67,7 +63,7 @@ export default function SistemaOperativo({ filtros }: Props) {
 
     return (
         <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>SistemaOperativo por equipo</h1>
+            <h1 style={{ margin: "0" }}>SistemaOperativo</h1>
             <ResponsiveContainer width="100%" aspect={3.5}>
                 <BarChart data={dataTransformada}
                     width={500}
@@ -81,8 +77,8 @@ export default function SistemaOperativo({ filtros }: Props) {
                     <YAxis />
                     <Tooltip
                         formatter={(value) => [`${value}`]}
-                    />
+                    />                         
-                    <Legend wrapperStyle={{ fontSize: 12 }}/>
+                    <Legend />
                     {tieneAdscripciones ? (
 
                         adscripciones.map((ads, i) => (

src/components/reporteGraficas/Graficas/Uso.tsx

@@ -3,7 +3,6 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-import Cookies from "js-cookie";
 
 interface Props {
     filtros: any
@@ -30,13 +29,9 @@ export default function Uso({ filtros }: Props) {
     const [data, setData] = useState<UsoData[]>([])
 
     useEffect(() => {
-        const token = Cookies.get("token");
-        const headers = { Authorization: `Bearer ${token}` };
-        
         const getUso = async () => {
             const response = await axios.post(
-                `${api_url}/equipos/grafica/uso`, filtros,
+                `${api_url}/equipos/grafica/uso`, filtros
-                { headers }
             )
             setData(response.data)
         }
@@ -70,7 +65,7 @@ export default function Uso({ filtros }: Props) {
 
     return (
         <div style={{ minWidth: "570px", background: "white", borderRadius: "10px", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>Uso por equipo</h1>
+            <h1 style={{ margin: "0" }}>Uso</h1>
             <ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
                 <BarChart data={dataTransformada}
                     width={500}
@@ -84,8 +79,8 @@ export default function Uso({ filtros }: Props) {
                     <YAxis />
                     <Tooltip
                         formatter={(value) => [`${value}`]}
-                    />
+                    />                    
-                    <Legend wrapperStyle={{ fontSize: 12 }}/>
+                    <Legend />
                     {tieneAdscripciones ? (
 
                         adscripciones.map((ads, i) => (

src/components/reporteGraficas/Tablas/Antiguedad.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from 'react'
 import styles from './TableAntiguedad.module.css'
 import axios from 'axios'
 import DownloadTable from '@/components/Dowload/tabla'
-import Cookies from "js-cookie";
 
 interface Props {
   filtros: any
@@ -18,17 +17,12 @@ export default function TableAntiguedad({ filtros, count }: Props) {
   const [data, setData] = useState<any[]>([])
 
   useEffect(() => {
-    if (!filtros) { return }
-
     const getUso = async () => {
-      const token = Cookies.get("token");
-      const headers = { Authorization: `Bearer ${token}` };
-
       const endpoint = count
         ? `${api_url}/equipos/tabla/count`
         : `${api_url}/equipos/tabla`
 
-      const response = await axios.post(endpoint, filtros,{headers})
+      const response = await axios.post(endpoint, filtros)
       setData(response.data)
     }
 

src/components/reporteGraficas/reporte.tsx

@@ -12,7 +12,6 @@ import Uso from "./Graficas/Uso"
 
 import Cookies from "js-cookie";
 import TableAntiguedad from "./Tablas/Antiguedad"
-import Polar from "./Graficas/Polar"
 const api_url = process.env.NEXT_PUBLIC_API_URL;
 
 type AdscripcionOption = {
@@ -161,7 +160,6 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Adscripción</label>
 
                         <Select
-                            instanceId="adscripcion"
                             options={adscripciones}
                             getOptionLabel={(o) => o.adscripcion}
                             getOptionValue={(o) => o.id_adscripcion}
@@ -199,7 +197,6 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Procesador</label>
 
                         <Select
-                            instanceId="procesadores"
                             options={procesadores}
                             getOptionLabel={(o) => o.procesador}
                             getOptionValue={(o) => o.id_procesador}
@@ -240,7 +237,6 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Sistema Operativo</label>
 
                         <Select
-                            instanceId="sistemasOperativos"
                             options={sistemasOperativos}
                             getOptionLabel={(o) => o.sistema_operativo}
                             getOptionValue={(o) => o.id_sistema_operativo}
@@ -282,7 +278,6 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Uso</label>
 
                         <Select
-                            instanceId="usos"
                             options={usos}
                             getOptionLabel={(o) => o.tipo_uso}
                             getOptionValue={(o) => o.id_uso}
@@ -322,7 +317,6 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Antiguedad</label>
 
                         <Select
-                            instanceId="antiguedad"
                             options={antiguedad}
                             getOptionLabel={(o) => o.antiguedad}
                             getOptionValue={(o) => o.antiguedad}
@@ -379,10 +373,6 @@ export default function Reporte() {
                     filtros={filtros}
                 />
 
-                <Polar tipo="ALUMNO" filtros={filtros} />
-                <Polar tipo="PROFESOR" filtros={filtros} />
-                <Polar tipo="ADMINISTRATIVO" filtros={filtros} />
-
                 <Procesador
                     filtros={filtros}
                 />

src/components/reporte_graficas_perifericos/Graficas/Antiguedad.tsx

@@ -1,138 +0,0 @@
-'use client'
-
-import axios from "axios";
-import { useEffect, useState } from "react";
-import {
-    Bar,
-    BarChart,
-    CartesianGrid,
-    Legend,
-    ResponsiveContainer,
-    Tooltip,
-    XAxis,
-    YAxis
-} from "recharts";
-import Cookies from "js-cookie";
-
-interface Props {
-    filtros: any
-}
-
-interface AntiguedadData {
-    adscripcion: string
-    antiguedad: string
-    total: number
-}
-
-const colores = [
-    "#818CF8",
-    "#34D399",
-    "#FBBF24",
-    "#F87171",
-    "#67E8F9",
-    "#C084FC"
-]
-
-const api_url = process.env.NEXT_PUBLIC_API_URL;
-
-export default function Antiguedad({ filtros }: Props) {
-
-    const [data, setData] = useState<AntiguedadData[]>([])
-
-    useEffect(() => {
-        const token = Cookies.get("token");
-        const headers = { Authorization: `Bearer ${token}` };
-
-        const getAntiguedad = async () => {
-
-            const response = await axios.post(
-                `${api_url}/equipos/graficaPerifericos/antiguedad`,
-                filtros,
-                { headers }
-            )
-
-            setData(response.data)
-
-        }
-
-        getAntiguedad()
-
-    }, [filtros])
-
-    const tieneAdscripciones = data.some(d => d.adscripcion)
-
-    let dataTransformada = data
-    let adscripciones: string[] = []
-
-    if (tieneAdscripciones) {
-
-        adscripciones = [...new Set(data.map(d => d.adscripcion))]
-
-        dataTransformada = Object.values(
-            data.reduce((acc: any, item: any) => {
-
-                if (!acc[item.antiguedad]) {
-                    acc[item.antiguedad] = { antiguedad: item.antiguedad }
-                }
-
-                acc[item.antiguedad][item.adscripcion] = Number(item.total)
-
-                return acc
-
-            }, {})
-        )
-
-    }
-
-    return (
-        <div
-            style={{
-                minWidth: "570px",
-                background: "white",
-                borderRadius: "10px",
-                padding: "1rem",
-                maxWidth: "100%"
-            }}
-        >
-
-            <h1 style={{ margin: "0" }}>Antigüedad por periferico</h1>
-
-            <ResponsiveContainer width="100%" aspect={2.5}>
-
-                <BarChart
-                    data={dataTransformada}
-                    margin={{ top: 20 }}
-                >
-                    <CartesianGrid strokeDasharray="3 3" />
-
-                    <XAxis dataKey="antiguedad" fontSize={12} />
-
-                    <YAxis />
-                    <Tooltip
-                        formatter={(value) => [`${value}`]}
-                    />
-                    <Legend />
-                    {tieneAdscripciones ? (
-
-                        adscripciones.map((ads, i) => (
-                            <Bar
-                                key={ads}
-                                dataKey={ads}
-                                fill={colores[i % colores.length]}
-                            />
-                        ))
-
-                    ) : (
-
-                        <Bar
-                            dataKey="total"
-                            fill="#095bd6"
-                        />
-
-                    )}
-
-                </BarChart>
-            </ResponsiveContainer>
-        </div>
-    )
-}

src/components/reporte_graficas_perifericos/Graficas/Procesador.tsx

@@ -1,105 +0,0 @@
-'use client'
-
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-
-interface Props {
-    filtros: any
-}
-
-interface procesador {
-    adscripcion: string
-    procesador: string;
-    total: number;
-}
-
-const colores = [
-    "#818CF8",
-    "#34D399",
-    "#FBBF24",
-    "#F87171",
-    "#67E8F9",
-    "#C084FC"
-]
-
-const api_url = process.env.NEXT_PUBLIC_API_URL;
-
-export default function Procesador({ filtros }: Props) {
-    const [data, setData] = useState<procesador[]>([])
-
-    useEffect(() => {
-        const getAntiguedad = async () => {
-            const response = await axios.post(`${api_url}/equipos/graficaPerifericos/procesador`, filtros)
-
-            setData(response.data)
-        }
-        getAntiguedad()
-    }, [filtros])
-
-    const tieneAdscripciones = data.some(d => d.adscripcion)
-
-    let dataTransformada = data
-    let adscripciones: string[] = []
-
-    if (tieneAdscripciones) {
-
-        adscripciones = [...new Set(data.map(d => d.adscripcion))]
-
-        dataTransformada = Object.values(
-            data.reduce((acc: any, item: any) => {
-
-                if (!acc[item.procesador]) {
-                    acc[item.procesador] = { procesador: item.procesador }
-                }
-
-                acc[item.procesador][item.adscripcion] = Number(item.total)
-
-                return acc
-
-            }, {})
-        )
-    }
-
-    return (
-        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>Procesador por equipo</h1>
-            <ResponsiveContainer width="100%" aspect={3.5}>
-                <BarChart data={dataTransformada}
-                    width={500}
-                    height={300}
-                    margin={{
-                        top: 20,
-                        bottom: 20,
-                    }}
-                >
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="procesador" fontSize={12} angle={40} textAnchor="start" hide />
-                    <YAxis />
-                    <Tooltip
-                        formatter={(value) => [`${value}`]}
-                    />     
-                    <Legend />
-                    {tieneAdscripciones ? (
-
-                        adscripciones.map((ads, i) => (
-                            <Bar
-                                key={ads}
-                                dataKey={ads}
-                                fill={colores[i % colores.length]}
-                            />
-                        ))
-
-                    ) : (
-
-                        <Bar
-                            dataKey="total"
-                            fill="#095bd6"
-                        />
-
-                    )}
-                </BarChart>
-            </ResponsiveContainer>
-        </div>
-    )
-}

src/components/reporte_graficas_perifericos/Graficas/SistemaOperativo.tsx

@@ -1,104 +0,0 @@
-'use client'
-
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-
-interface Props {
-    filtros: any
-}
-
-interface so {
-    adscripcion: string
-    so: string;
-    total: number;
-}
-
-const colores = [
-    "#818CF8",
-    "#34D399",
-    "#FBBF24",
-    "#F87171",
-    "#67E8F9",
-    "#C084FC"
-]
-
-const api_url = process.env.NEXT_PUBLIC_API_URL;
-
-export default function SistemaOperativo({ filtros }: Props) {
-    const [data, setData] = useState<so[]>([])
-
-    useEffect(() => {
-        const getAntiguedad = async () => {
-            const response = await axios.post(`${api_url}/equipos/graficaPerifericos/so`, filtros)
-
-            setData(response.data)
-        }
-        getAntiguedad()
-    }, [filtros])
-
-    const tieneAdscripciones = data.some(d => d.adscripcion)
-
-    let dataTransformada = data
-    let adscripciones: string[] = []
-
-    if (tieneAdscripciones) {
-
-        adscripciones = [...new Set(data.map(d => d.adscripcion))]
-
-        dataTransformada = Object.values(
-            data.reduce((acc: any, item: any) => {
-
-                if (!acc[item.so]) {
-                    acc[item.so] = { so: item.so }
-                }
-
-                acc[item.so][item.adscripcion] = Number(item.total)
-
-                return acc
-
-            }, {})
-        )
-    }
-
-    return (
-        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>SistemaOperativo por equipo</h1>
-            <ResponsiveContainer width="100%" aspect={3.5}>
-                <BarChart data={dataTransformada}
-                    width={500}
-                    height={300}
-                    margin={{
-                        top: 20,
-                    }}
-                >
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide />
-                    <YAxis />
-                    <Tooltip
-                        formatter={(value) => [`${value}`]}
-                    />                         
-                    <Legend />
-                    {tieneAdscripciones ? (
-
-                        adscripciones.map((ads, i) => (
-                            <Bar
-                                key={ads}
-                                dataKey={ads}
-                                fill={colores[i % colores.length]}
-                            />
-                        ))
-
-                    ) : (
-
-                        <Bar
-                            dataKey="total"
-                            fill="#095bd6"
-                        />
-
-                    )}
-                </BarChart>
-            </ResponsiveContainer>
-        </div>
-    )
-}

src/components/reporte_graficas_perifericos/Graficas/Uso.tsx

@@ -1,107 +0,0 @@
-'use client'
-
-import axios from "axios";
-import { useEffect, useState } from "react";
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
-
-interface Props {
-    filtros: any
-}
-
-interface UsoData {
-    uso: string
-    adscripcion: string
-    total: number
-}
-
-const colores = [
-    "#818CF8",
-    "#34D399",
-    "#FBBF24",
-    "#F87171",
-    "#67E8F9",
-    "#C084FC"
-]
-
-const api_url = process.env.NEXT_PUBLIC_API_URL;
-
-export default function Uso({ filtros }: Props) {
-    const [data, setData] = useState<UsoData[]>([])
-
-    useEffect(() => {
-        const getUso = async () => {
-            const response = await axios.post(
-                `${api_url}/equipos/graficaPerifericos/uso`, filtros
-            )
-            setData(response.data)
-        }
-        getUso()
-
-    }, [filtros])
-
-    const tieneAdscripciones = data.some(d => d.adscripcion)
-
-    let dataTransformada = data
-    let adscripciones: string[] = []
-
-    if (tieneAdscripciones) {
-
-        adscripciones = [...new Set(data.map(d => d.adscripcion))]
-
-        dataTransformada = Object.values(
-            data.reduce((acc: any, item: any) => {
-
-                if (!acc[item.uso]) {
-                    acc[item.uso] = { uso: item.uso }
-                }
-
-                acc[item.uso][item.adscripcion] = Number(item.total)
-
-                return acc
-
-            }, {})
-        )
-    }
-
-    return (
-        <div style={{ minWidth: "570px", background: "white", borderRadius: "10px", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>Uso por periferico</h1>
-            <ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
-                <BarChart data={dataTransformada}
-                    width={500}
-                    height={300}
-                    margin={{
-                        top: 20,
-                    }}
-                >
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="uso" fontSize={12} />
-                    <YAxis />
-                    <Tooltip
-                        formatter={(value) => [`${value}`]}
-                    />                    
-                    <Legend />
-                    {tieneAdscripciones ? (
-
-                        adscripciones.map((ads, i) => (
-                            <Bar
-                                key={ads}
-                                dataKey={ads}
-                                fill={colores[i % colores.length]}
-                            />
-                        ))
-
-                    ) : (
-
-                        <Bar
-                            dataKey="total"
-                            fill="#095bd6"
-                        />
-
-                    )}
-                </BarChart>
-            </ResponsiveContainer>
-        </div>
-    )
-}
-//IO

src/components/reporte_graficas_perifericos/Reporte.module.css

@@ -1,122 +0,0 @@
-.container {
-    width: 100%;
-    margin: 0 auto;
-    padding: 20px;
-    background: white;
-    border-radius: 10px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 14px;
-}
-
-.title {
-    font-size: 18px;
-    margin-bottom: 15px;
-}
-
-.label {
-    font-size: 13px;
-    color: #444;
-}
-
-.listaContainer {
-    margin-top: 20px;
-}
-
-.subtitle {
-    font-size: 14px;
-    margin-bottom: 10px;
-}
-
-.empty {
-    font-size: 13px;
-    color: #777;
-}
-
-.lista {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.chip {
-    display: flex;
-    align-items: center;
-    background: linear-gradient(135deg, #2563eb, #7c3aed);
-    border-radius: 6px;
-    padding: 5px 10px;
-    font-size: 13px;
-    text-align: start;
-    color: white;
-}
-
-.remove {
-    border: none;
-    background: rgba(255,255,255,0.2);
-    margin-left: 8px;
-    cursor: pointer;
-    color: white;
-    border-radius: 50%;
-    width: 18px;
-    height: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    transition: all 0.2s ease;
-}
-
-.remove:hover {
-    background: rgba(255,255,255,0.4);
-}
-
-.button {
-    margin-top: 20px;
-    padding: 12px 20px;
-    border: none;
-    border-radius: 10px;
-    background: linear-gradient(135deg, #2563eb, #4f46e5);
-    color: white;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.25s ease;
-    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
-}
-
-.button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
-}
-.graficas {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    gap: 1rem;
-}
-
-.graficas > div {
-    background: white;
-    border-radius: 16px !important;
-    padding: 15px !important;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
-    transition: all 0.3s ease;
-}
-
-.graficas > div:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
-}
-
-.filtro {
-    display: flex;
-    gap: 10px;
-    flex-wrap: wrap;
-    align-items: start;
-    justify-content: space-between;
-}
-
-.containerSelection {
-    width: 100%;
-    width: 200px
-}

src/components/reporte_graficas_perifericos/Tablas/Antiguedad.tsx

@@ -1,83 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import styles from './TableAntiguedad.module.css'
-import axios from 'axios'
-import DownloadTable from '@/components/Dowload/tabla'
-
-interface Props {
-  filtros: any
-  count: boolean
-}
-
-const api_url = process.env.NEXT_PUBLIC_API_URL;
-
-export default function TableAntiguedad({ filtros, count }: Props) {
-
-  const [data, setData] = useState<any[]>([])
-
-  useEffect(() => {
-    const getUso = async () => {
-      const endpoint = count
-        ? `${api_url}/equipos/tabla/count`
-        : `${api_url}/equipos/tabla`
-
-      const response = await axios.post(endpoint, filtros)
-      setData(response.data)
-    }
-
-    getUso()
-  }, [filtros, count])
-
-  const columnas = data.length > 0 ? Object.keys(data[0]) : []
-
-  return (
-    <div className={styles.container}>
-      {count ? <DownloadTable filtros={filtros} count={true} /> : <DownloadTable filtros={filtros} count={false} />}
-      <table className={styles.table}>
-
-        <thead>
-          <tr>
-            {columnas.map((col) => (
-              <th key={col}>{formatearTitulo(col)}</th>
-            ))}
-          </tr>
-        </thead>
-
-        <tbody>
-          {data.length === 0 ? (
-            <tr>
-              <td colSpan={columnas.length} className={styles.empty}>
-                No hay datos
-              </td>
-            </tr>
-          ) : (
-            data.map((item, index) => (
-              <tr key={index}>
-                {columnas.map((col) => (
-                  <td key={col}>
-                    {item[col] ?? '-'}
-                  </td>
-                ))}
-              </tr>
-            ))
-          )}
-        </tbody>
-
-      </table>
-    </div>
-  )
-}
-
-function formatearTitulo(col: string) {
-  const nombres: any = {
-    inventario: 'No. Inventario',
-    adscripcion: 'Adscripción',
-    antiguedad: 'Antigüedad',
-    procesador: 'Procesador',
-    sistema_operativo: 'Sistema Operativo',
-    uso: 'Uso'
-  }
-
-  return nombres[col] || col
-}

src/components/reporte_graficas_perifericos/Tablas/TableAntiguedad.module.css

@@ -1,44 +0,0 @@
-.container {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-  background: #ffffff;
-  border-radius: 12px;
-  overflow: hidden;
-}
-
-.table thead {
-  background: linear-gradient(135deg, #a5a5a5, #878787);
-  color: white;
-}
-
-.table th {
-  padding: 12px;
-  text-align: center;
-}
-
-.table td {
-  padding: 10px 12px;
-  border-bottom: 1px solid #eee;
-}
-
-.table tbody tr:hover {
-  background-color: #f5f8ff;
-  transition: 0.2s;
-}
-
-.total {
-  font-weight: bold;
-  color: #095bd6;
-}
-
-.empty {
-  text-align: center;
-  padding: 20px;
-  color: #999;
-}

src/components/reporte_graficas_perifericos/reporte.tsx

@@ -1,393 +0,0 @@
-"use client"
-
-import Select from "react-select"
-import { useEffect, useState } from "react"
-import styles from "./Reporte.module.css"
-import axios from "axios"
-
-import Antiguedad from "./Graficas/Antiguedad"
-import Procesador from "./Graficas/Procesador"
-import SistemaOperativo from "./Graficas/SistemaOperativo"
-import Uso from "./Graficas/Uso"
-
-import Cookies from "js-cookie";
-import TableAntiguedad from "./Tablas/Antiguedad"
-const api_url = process.env.NEXT_PUBLIC_API_URL;
-
-type AdscripcionOption = {
-    id_adscripcion: string
-    adscripcion: string
-}
-
-type UsoOption = {
-    id_uso: string
-    tipo_uso: string
-}
-
-type SoOption = {
-    id_sistema_operativo: string
-    sistema_operativo: string
-}
-
-type ProcesadorOption = {
-    id_procesador: string
-    procesador: string
-}
-
-type AntiguedadOption = {
-    antiguedad: string
-}
-
-export default function ReportePerifericos() {
-
-    const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
-    const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])
-
-    const [procesadores, setProcesadores] = useState<ProcesadorOption[]>([])
-    const [procesadorSeleccionado, setProcesadorSeleccionado] = useState<ProcesadorOption[]>([])
-
-    const [sistemasOperativos, setSistemasOperativos] = useState<SoOption[]>([])
-    const [soSeleccionado, setSoSeleccionado] = useState<SoOption[]>([])
-
-    const [usos, setUsos] = useState<UsoOption[]>([{ id_uso: "0", tipo_uso: "Todos" }])
-    const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])
-
-    const [antiguedad, setAntiguedad] = useState<AntiguedadOption[]>([{ antiguedad: "Todos" }, { antiguedad: "Menor a 2 años" }, { antiguedad: "Entre 2 y 3 años" }, { antiguedad: "Entre 4 y 5 años" }, { antiguedad: "Mayor a 6 años" }])
-    const [antiguedadSeleccionada, setAntiguedadSeleccionada] = useState<AntiguedadOption[]>([])
-
-    const [filtros, setFiltros] = useState<any>(null)
-    const [filtrosTable, setFiltrosTable] = useState<any>(null)
-
-    useEffect(() => {
-
-        const cargarDatos = async () => {
-            const token = Cookies.get("token");
-            const headers = { Authorization: `Bearer ${token}` };
-            const [
-                adscripcionRes,
-                procesadorRes,
-                usoRes,
-                soRes,
-            ] = await Promise.all([
-                axios.get(`${api_url}/equipos/adscripciones`, { headers }),
-                axios.get(`${api_url}/equipos/procesador-tipo-equipos`, { headers }),
-                axios.get(`${api_url}/equipos/usos`, { headers }),
-                axios.get(`${api_url}/equipos/sistemas-operativos`, { headers }),
-            ])
-
-            setAdscripciones([
-                { id_adscripcion: "0", adscripcion: "Todos" },
-                ...adscripcionRes.data
-            ])
-
-            setProcesadores([
-                { id_procesador: "0", procesador: "Todos" },
-                ...procesadorRes.data
-            ])
-
-            setUsos([
-                { id_uso: "0", tipo_uso: "Todos" },
-                ...usoRes.data
-            ])
-
-            setSistemasOperativos([
-                { id_sistema_operativo: "0", sistema_operativo: "Todos" },
-                ...soRes.data
-            ])
-        }
-
-        cargarDatos()
-
-    }, [])
-
-    function agregar<T>(option: T | null, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
-
-        if (!option) return
-
-        const existe = lista.some((item) => item[key] === option[key])
-
-        if (!existe) {
-            setLista([...lista, option])
-        }
-
-    }
-
-    function eliminar<T>(id: string, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
-
-        setLista(
-            lista.filter((item) => item[key] !== id)
-        )
-
-    }
-
-    const generarReporte = () => {
-
-        const limpiar = (arr: string[]) => {
-            if (arr.includes("0")) return []
-            return arr
-        }
-
-        const filtrosTable = {
-            adscripciones: adscripcionesSeleccionadas.map(a => String(a.id_adscripcion)),
-            procesadores: procesadorSeleccionado.map(p => String(p.id_procesador)),
-            sistemas: soSeleccionado.map(s => String(s.id_sistema_operativo)),
-            usos: usoSeleccionado.map(u => String(u.id_uso)),
-            antiguedad: antiguedadSeleccionada.map(u => String(u.antiguedad))
-        }
-
-        const filtros = {
-            adscripciones: limpiar(adscripcionesSeleccionadas.map(a => String(a.id_adscripcion))),
-            procesadores: limpiar(procesadorSeleccionado.map(p => String(p.id_procesador))),
-            sistemas: limpiar(soSeleccionado.map(s => String(s.id_sistema_operativo))),
-            usos: limpiar(usoSeleccionado.map(u => String(u.id_uso))),
-            antiguedad: limpiar(antiguedadSeleccionada.map(a => String(a.antiguedad)))
-        }
-
-        setFiltros(filtros)
-        setFiltrosTable(filtrosTable)
-
-    }
-
-    return (
-        <>
-            <div className={styles.container}>
-
-                <section className={styles.filtro}>
-
-                    {/* ADSCRIPCION */}
-
-                    <div className={styles.containerSelection}>
-                        <label className={styles.adscripcion}>Adscripción</label>
-
-                        <Select
-                            options={adscripciones}
-                            getOptionLabel={(o) => o.adscripcion}
-                            getOptionValue={(o) => o.id_adscripcion}
-                            onChange={(o) => agregar(o, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
-                        />
-
-                        <div className={styles.lista}>
-
-                            {adscripcionesSeleccionadas.map((a) => (
-
-                                <div key={a.id_adscripcion} className={styles.chip}>
-
-                                    <span>{a.adscripcion}</span>
-
-                                    <button
-                                        className={styles.remove}
-                                        onClick={() => eliminar(a.id_adscripcion, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
-                                    >
-                                        ✕
-                                    </button>
-
-                                </div>
-
-                            ))}
-
-                        </div>
-
-                    </div>
-
-
-                    {/* PROCESADOR */}
-
-                    <div className={styles.containerSelection}>
-
-                        <label className={styles.adscripcion}>Procesador</label>
-
-                        <Select
-                            options={procesadores}
-                            getOptionLabel={(o) => o.procesador}
-                            getOptionValue={(o) => o.id_procesador}
-                            onChange={(o) =>
-                                agregar(o, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
-                            }
-                        />
-
-                        <div className={styles.lista}>
-
-                            {procesadorSeleccionado.map((p) => (
-
-                                <div key={p.id_procesador} className={styles.chip}>
-
-                                    <span>{p.procesador}</span>
-
-                                    <button
-                                        className={styles.remove}
-                                        onClick={() =>
-                                            eliminar(p.id_procesador, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
-                                        }
-                                    >
-                                        ✕
-                                    </button>
-
-                                </div>
-
-                            ))}
-
-                        </div>
-
-                    </div>
-
-                    {/* SISTEMA OPERATIVO */}
-
-                    <div className={styles.containerSelection}>
-
-                        <label className={styles.adscripcion}>Sistema Operativo</label>
-
-                        <Select
-                            options={sistemasOperativos}
-                            getOptionLabel={(o) => o.sistema_operativo}
-                            getOptionValue={(o) => o.id_sistema_operativo}
-                            onChange={(o) =>
-                                agregar(o, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
-                            }
-                        />
-
-                        <div className={styles.lista}>
-
-                            {soSeleccionado.map((s) => (
-
-                                <div key={s.id_sistema_operativo} className={styles.chip}>
-
-                                    <span>{s.sistema_operativo}</span>
-
-                                    <button
-                                        className={styles.remove}
-                                        onClick={() =>
-                                            eliminar(s.id_sistema_operativo, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
-                                        }
-                                    >
-                                        ✕
-                                    </button>
-
-                                </div>
-
-                            ))}
-
-                        </div>
-
-                    </div>
-
-
-                    {/* USO */}
-
-                    <div className={styles.containerSelection}>
-
-                        <label className={styles.adscripcion}>Uso</label>
-
-                        <Select
-                            options={usos}
-                            getOptionLabel={(o) => o.tipo_uso}
-                            getOptionValue={(o) => o.id_uso}
-                            onChange={(o) =>
-                                agregar(o, usoSeleccionado, setUsoSeleccionado, "id_uso")
-                            }
-                        />
-
-                        <div className={styles.lista}>
-
-                            {usoSeleccionado.map((u) => (
-
-                                <div key={u.id_uso} className={styles.chip}>
-
-                                    <span>{u.tipo_uso}</span>
-
-                                    <button
-                                        className={styles.remove}
-                                        onClick={() =>
-                                            eliminar(u.id_uso, usoSeleccionado, setUsoSeleccionado, "id_uso")
-                                        }
-                                    >
-                                        ✕
-                                    </button>
-
-                                </div>
-
-                            ))}
-
-                        </div>
-
-                    </div>
-
-
-                    <div className={styles.containerSelection}>
-
-                        <label className={styles.adscripcion}>Antiguedad</label>
-
-                        <Select
-                            options={antiguedad}
-                            getOptionLabel={(o) => o.antiguedad}
-                            getOptionValue={(o) => o.antiguedad}
-                            onChange={(o) =>
-                                agregar(o, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
-                            }
-                        />
-
-                        <div className={styles.lista}>
-
-                            {antiguedadSeleccionada.map((p) => (
-
-                                <div key={p.antiguedad} className={styles.chip}>
-
-                                    <span>{p.antiguedad}</span>
-
-                                    <button
-                                        className={styles.remove}
-                                        onClick={() =>
-                                            eliminar(p.antiguedad, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
-                                        }
-                                    >
-                                        ✕
-                                    </button>
-
-                                </div>
-
-                            ))}
-
-                        </div>
-
-                    </div>
-
-
-                </section>
-
-                <button
-                    className={styles.button}
-                    onClick={generarReporte}
-                >
-                    Buscar
-                </button>
-
-            </div>
-
-
-            <section className={styles.graficas}>
-
-                <Antiguedad
-                    filtros={filtros}
-                />
-
-                <Uso
-                    filtros={filtros}
-                />
-
-                {/* <Procesador
-                    filtros={filtros}
-                />
-
-                <SistemaOperativo
-                    filtros={filtros}
-                /> */}
-
-                {/* <TableAntiguedad filtros={filtros} count={true} />
-                <TableAntiguedad filtros={filtrosTable} count={false} /> */}
-
-            </section>
-
-
-        </>
-    )
-
-}

tesuto

@@ -1 +0,0 @@
-probando workflow 3