working and builded

package.json

@@ -15,20 +15,16 @@
     "axios": "^1.13.2",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
-    "leaflet": "^1.9.4",
-    "leaflet.heat": "^0.2.0",
     "next": "^16.0.7",
     "react": "19.2.0",
-    "react-dom": "19.2.0",    "react-hot-toast": "^2.6.0",
-
-    "react-leaflet": "^5.0.0",
+    "react-dom": "19.2.0",
+    "react-hot-toast": "^2.6.0",
     "react-select": "^5.10.2",
     "recharts": "^3.8.0"
- },
+  },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@types/js-cookie": "^3.0.6",
-    "@types/leaflet": "^1.9.21",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",

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

@@ -1,15 +1,13 @@
 "use client";
 
 import { useState } from "react";
-
+import Pregunta7 from "@/components/Equipo_Computo/Pregunta7";
 import Pregunta1EP from "@/components/Perifericos/Pregunta1EP";
 import Pregunta2EP from "@/components/Perifericos/Pregunta2EP";
 import Pregunta4EP from "@/components/Perifericos/Pregunta4EP";
 import Pregunta5EP from "@/components/Perifericos/Pregunta5EP";
 import "../../styles/layout/reporte.scss";
 import DownloadReporteXLSX from "@/components/Dowload/Reporte";
-import Pregunta7 from "@/components/Equipo_Computo/Pregunta7";
-
 
 type PreguntaKey = "pregunta1" | "pregunta4" | "pregunta7";
 

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

@@ -3,15 +3,13 @@
 import { useState } from "react";
 import DownloadReporteXLSX from "@/components/Dowload/Reporte";
 import Reporte from "@/components/reporteGraficas/reporte";
-import Antiguedad from "@/components/AntiguedadEquipo/Antiguedad";
 
 import "../../styles/layout/reporte.scss";
 
-type PreguntaKey = "antiguedad" | "adscripcion";
+type PreguntaKey = "antiguedad";
 
 const LABELS: Record<PreguntaKey, string> = {
   antiguedad: "Antigüedad",
-  adscripcion: "Antigüedad por Adscripcion"
 };
 
 export default function Page() {
@@ -20,10 +18,6 @@ export default function Page() {
   const renderPregunta = () => {
     switch (activeTab) {
       case "antiguedad":
-        return (
-          <Antiguedad />
-        );
-      case "adscripcion":
         return (
           <Reporte />
         );

src/components/AntiguedadEquipo/Antiguedad.tsx

@@ -1,43 +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 antiguedad{
-    antiguedad:string;
-    total:number;
-}
-
-export default function Antiguedad() {
-    const [antiguedad,setAntiguedad]=useState<antiguedad[]>([])
-
-    useEffect(()=>{
-        const getAntiguedad = async()=>{
-            const response = await axios.get("http://localhost:3001/equipos/grafica")
-
-            setAntiguedad(response.data)
-        }
-        getAntiguedad()
-    },[])
-
-    return (
-        <ResponsiveContainer width="100%" aspect={2}>
-            <BarChart data={antiguedad}
-            width={500}
-            height={300}
-            margin={{
-                top:20,
-            }}
-            >
-                <CartesianGrid strokeDasharray="3 3"/>
-                <XAxis dataKey="antiguedad"/>
-                <YAxis/>
-                <Tooltip/>
-                <Legend/>
-                <Bar dataKey="total" fill="#0d6efd"/>
-
-            </BarChart>
-        </ResponsiveContainer>
-    )
-}

src/components/Equipo_Computo/MapaCalor.tsx

@@ -1,157 +0,0 @@
-"use client";
-
-
-import { MapContainer, ImageOverlay, useMap } from "react-leaflet";
-import L, { LatLngBoundsExpression } from "leaflet";
-import "leaflet/dist/leaflet.css";
-import "leaflet.heat";
-import { useEffect } from "react";
-
-// Ajustar vista automáticamente
-function AjustarVista({ bounds }: { bounds: LatLngBoundsExpression }) {
-  const map = useMap();
-
-  useEffect(() => {
-    map.fitBounds(bounds);
-  }, [map, bounds]);
-
-  return null;
-}
-
-function HeatLayer() {
-  const map = useMap();
-
-  useEffect(() => {
-
-    //  A 4768x3368
-    const edificios = {
-      A1: [[1407, 3054], [1470, 3054], [1470, 3360], [1407, 3360]],
-      A2: [[1570, 3130], [1570, 3190], [1850, 3190], [1850, 3130]],
-      A3: [[1640, 2650], [1705, 2650], [1705, 2950], [1640, 2950]],
-      A4: [[1268, 2765], [1268, 2830], [1540, 2830], [1540, 2765]],
-      A5: [[995, 2405], [1295, 2405], [1295, 2470], [995, 2470]],
-      A6: [[1390, 2385], [1450, 2385], [1450, 2655], [1390, 2655]],
-      A7: [[1234, 2014], [1296, 2014], [1296, 2317], [1234, 2317]],
-      A8: [[1390, 2055], [1700, 2055], [1700, 2118], [1390, 2118]],
-      A9: [[1215, 1825], [1480, 1825], [1480, 1890], [1215, 1890]],
-      A10: [[1570, 1695], [1635, 1695], [1635, 1960], [1570, 1960]],
-      A11: [[1475, 1510], [1780, 1510], [1780, 1570], [1475, 1570]],
-      A12: [[1310, 1395], [1375, 1395], [1375, 1700], [1310, 1700]],
-      A13: [[1780, 810], [1845, 810], [1845, 1020], [1780, 1020]],
-      A14: [[1505, 775], [1713, 775], [1713, 840], [1505, 840]],
-      A15: [[2027, 2580], [2087, 2580], [2087, 2900], [2027, 2900]],
-      AEROGRAFIA: [[1157, 3308], [1254, 3308], [1254, 3369], [1157, 3369]],
-      ALMACEN: [[989, 1523], [1027, 1523], [1027, 1749], [989, 1749]],
-      APOYO_DOC: [[1115, 1222], [1475, 1222], [1475, 1293], [1115, 1293]],
-      BIBLIOTECA: [[1578, 2372], [1578, 2199], [1593, 2213], [1739, 2213],[1835, 2114], [1889, 2168], [1889, 2345], [1860, 2375],[1888, 2407], [1844, 2450], [1830, 2435], [1814, 2451],[1799, 2435], [1772, 2466], [1766, 2460], [1703, 2523],[1686, 2506], [1645, 2505], [1645, 2465], [1630, 2466],[1629, 2402], [1677, 2402], [1677, 2372], [1666, 2360], [1591, 2360]],
-      CEI: [[1570, 990], [1767, 990], [1767, 1155], [1570, 1155]],
-      INVEST: [[1570, 1240], [1727, 1240], [1727, 1400], [1570, 1400]],
-      CEDTEC: [[885, 2900], [1080, 2900], [1080, 3200], [885, 3200]],
-      CEMM: [[2167, 863], [2453, 863], [2453, 1458], [2167, 1458]],
-      CAFETERIA_Y_LIBRERIA: [[2027, 1483], [2158, 1483], [2158, 1600], [2027, 1600]],
-      CTED: [[1802, 1063], [1908, 1128], [1888, 1179], [1772, 1151]],
-      POSGRADO: [[857, 1472], [1004, 1471],[1004, 1327],[1086, 1325],[1086, 1512], [860, 1512]],
-      UNIDAD_SEMINA: [[1145, 2894], [1320, 2894], [1320, 3070], [1145, 3070]],
-      TALLS_Y_LAB: [[1085, 3209], [1292, 3209], [1292, 3307], [1085, 3307]],
-      UNIDAD_DE_TALLERES_MULTIDISC: [[1624, 3244], [1920, 3240], [1954, 3476], [1622, 3477]],
-      USC: [[992, 2656], [1029, 2656], [1029, 2828], [992, 2828]],
-      UIM: [[294, 3224], [901, 3257], [899, 3358], [312, 3386]],
-      GOB: [[950, 2068], [1104, 2068], [1104, 2218], [950, 2218]],
-      SERV_GRALES: [[1024, 882], [1089, 882], [1089, 1138], [1024, 1138]],
-      SM: [[893, 1789], [935, 1789], [935, 1891], [893, 1891]]
-    };
-
-
-    const puntos: any[] = [];
-
-    Object.entries(edificios).forEach(([nombre, poligono]) => {
-      for (let i = 0; i < 15; i++) {
-
-        const x = poligono[0][0] + Math.random() * (poligono[1][0] - poligono[0][0]);
-        const y = poligono[0][1] + Math.random() * (poligono[2][1] - poligono[0][1]);
-
-        const intensidad = Math.random();
-
-        puntos.push([x, y, intensidad]);
-      }
-    });
-
-
-    const heat = (L as any).heatLayer(puntos, {
-      radius: 35,
-      blur: 25,
-      maxZoom: 2,
-      gradient: {
-        0.2: "#00f",
-        0.4: "#0ff",
-        0.6: "#0f0",
-        0.8: "#ff0",
-        1.0: "#f00"
-      }
-    });
-
-    heat.addTo(map);
-
-
-    Object.entries(edificios).forEach(([nombre, coords]: any) => {
-      L.polygon((coords), {
-        color: "#77ee9f",
-        weight: 2,
-        fillOpacity: 0.25
-      })
-        .bindPopup(`🏢 ${nombre}`)
-        .addTo(map);
-    });
-
-    // DEBUG PRO (CLICK PARA COORDENADAS EXACTAS)
-    map.on("click", function (e) {
-      console.log(" Coordenadas exactas:", e.latlng);
-    });
-
-    return () => {
-      map.removeLayer(heat);
-    };
-
-  }, [map]);
-
-  return null;
-}
-
-export default function MapaCalor() {
-
-  const bounds: LatLngBoundsExpression = [
-    [0, 0],
-    [3368, 4768]
-  ];
-
-  return (
-
-    <div style={{
-      width: "100%",
-      height: "650px",
-      marginTop: "40px",
-      borderRadius: "12px",
-      overflow: "hidden",
-      boxShadow: "0 6px 25px rgba(0,0,0,0.3)"
-    }}>
-
-      <MapContainer
-        crs={L.CRS.Simple}
-        minZoom={-2}
-        style={{ height: "100%", width: "100%" }}
-      >
-
-        <ImageOverlay
-          url="/plano.png"
-          bounds={bounds}
-        />
-
-        <AjustarVista bounds={bounds} />
-
-        <HeatLayer />
-
-      </MapContainer>
-
-    </div>
-  );
-}

src/components/Equipo_Computo/Pregunta7.tsx

@@ -1,17 +1,10 @@
 "use client";
 
-
 import { useState, useEffect } from "react";
 import Cookies from "js-cookie";
 import axios from "axios";
 import "./pregunta7.css";
 import ToggleButton from "../Toggle/ToggleButton";
-import dynamic from "next/dynamic";
-
-const MapaCalor = dynamic(
-  () => import("./MapaCalor"),
-  { ssr: false }
-);
 
 type AntiguedadItem = {
   antiguedad: string | null;
@@ -173,9 +166,6 @@ export default function Pregunta7() {
           </tbody>
         </table>
       </div>
-      <MapaCalor />
     </div>
-
-  
   );
-}
+}

src/components/reporteGraficas/Graficas/Antiguedad.tsx

@@ -0,0 +1,90 @@
+'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";
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface AntiguedadData {
+    adscripcion: string
+    antiguedad: string
+    total: number
+}
+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/grafica/antiguedad`,
+                filtros,
+                { headers }
+            )
+
+            setData(response.data)
+
+        }
+
+        getAntiguedad()
+
+    }, [filtros])
+
+    return (
+        <div
+            style={{
+                minWidth: "570px",
+                background: "white",
+                borderRadius: "10px",
+                margin: "5px auto",
+                padding: "1rem",
+                maxWidth: "100%"
+            }}
+        >
+
+            <h1 style={{ margin: "0" }}>Antigüedad</h1>
+
+            <ResponsiveContainer width="100%" aspect={2.5}>
+
+                <BarChart
+                    data={data}
+                    margin={{ top: 20 }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+
+                    <XAxis dataKey="antiguedad" fontSize={12} />
+
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Graficas/Procesador.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+type ProcesadorOption = {
+    id_procesador: string
+    procesador: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface procesador {
+    adscripcion: string
+    procesador: string;
+    total: number;
+}
+
+export default function Procesador({ filtros }: Props) {
+    const [data, setData] = useState<procesador[]>([])
+
+    useEffect(() => {
+        const getAntiguedad = async () => {
+            const response = await axios.post("http://localhost:3001/equipos/grafica/procesador",filtros)
+
+            setData(response.data)
+        }
+        getAntiguedad()
+    }, [filtros])
+
+    return (
+        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>Procesador</h1>
+            <ResponsiveContainer width="100%" aspect={3.5} minHeight={270}>
+                <BarChart data={data}
+                    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 />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Graficas/SistemaOperativo.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+type UsoOption = {
+    id_sistema_operativo: string
+    sistema_operativo: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface so {
+    adscripcion: string
+    so: string;
+    total: number;
+}
+
+export default function SistemaOperativo({ filtros }: Props) {
+    const [data, setData] = useState<so[]>([])
+
+    useEffect(() => {
+        const getAntiguedad = async () => {
+            const response = await axios.post("http://localhost:3001/equipos/grafica/so",filtros)
+
+            setData(response.data)
+        }
+        getAntiguedad()
+    }, [filtros])
+
+    return (
+        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>SistemaOperativo</h1>
+            <ResponsiveContainer width="100%" aspect={3.5}>
+                <BarChart data={data}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Graficas/Uso.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+type UsoOption = {
+    id_uso: string
+    tipo_uso: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface UsoData {
+    uso: string
+    adscripcion: string
+    total: number
+}
+
+export default function Uso({ filtros }: Props) {
+    const [data, setData] = useState<UsoData[]>([])
+
+    useEffect(() => {
+        const getUso = async () => {
+            const response = await axios.post(
+                "http://localhost:3001/equipos/grafica/uso",filtros
+            )
+            setData(response.data)
+        }
+        getUso()
+
+    }, [filtros])
+
+    return (
+        <div style={{ minWidth: "570px", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>Uso</h1>
+            <ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
+                <BarChart data={data}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="uso" fontSize={12} />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Reporte.module.css

@@ -1,76 +1,92 @@
-.container{
+.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;
+    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;
+.title {
+    font-size: 18px;
+    margin-bottom: 15px;
 }
 
-.label{
-    font-size:13px;
-    color:#444;
+.label {
+    font-size: 13px;
+    color: #444;
 }
 
-.listaContainer{
-    margin-top:20px;
+.listaContainer {
+    margin-top: 20px;
 }
 
-.subtitle{
-    font-size:14px;
-    margin-bottom:10px;
+.subtitle {
+    font-size: 14px;
+    margin-bottom: 10px;
 }
 
-.empty{
-    font-size:13px;
-    color:#777;
+.empty {
+    font-size: 13px;
+    color: #777;
 }
 
-.lista{
-    display:flex;
-    flex-wrap:wrap;
-    gap:8px;
+.lista {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
 }
 
-.chip{
-    display:flex;
-    align-items:center;
-    background:#f1f3f5;
-    border-radius:20px;
-    padding:5px 10px;
-    font-size:13px;
+.chip {
+    display: flex;
+    align-items: center;
+    background: #f1f3f5;
+    border-radius: 6px;
+    padding: 5px 10px;
+    font-size: 13px;
+    text-align: start;
 }
 
-.remove{
-    border:none;
-    background:none;
-    margin-left:6px;
-    cursor:pointer;
-    color:#777;
+.remove {
+    border: none;
+    background: none;
+    margin-left: 6px;
+    cursor: pointer;
+    color: #777;
 }
 
-.remove:hover{
-    color:#c0392b;
+.remove:hover {
+    color: #c0392b;
 }
 
-.button{
-    margin-top:20px;
-    padding:8px 14px;
-    border:none;
-    border-radius:6px;
-    background:#2563eb;
-    color:white;
-    font-size:13px;
-    cursor:pointer;
+.button {
+    margin-top: 20px;
+    padding: 8px 14px;
+    border: none;
+    border-radius: 6px;
+    background: #2563eb;
+    color: white;
+    font-size: 13px;
+    cursor: pointer;
 }
 
-.button:hover{
-    background:#1d4ed8;
+.button:hover {
+    background: #1d4ed8;
+}
+
+.graficas {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.filtro {
+    display: flex;
+    gap: 10px;
+}
+
+.containerSelection {
+    width: 100%;
+    min-width: 200px
 }

src/components/reporteGraficas/reporte.tsx

@@ -1,99 +1,359 @@
 "use client"
 
 import Select from "react-select"
-import { useState } from "react"
+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";
+const api_url = process.env.NEXT_PUBLIC_API_URL;
 
 type AdscripcionOption = {
-    value: string
-    label: string
+    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 Reporte() {
 
+    const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
     const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])
 
-    const adscripciones: AdscripcionOption[] = [
-        { value: "informatica", label: "Informática" },
-        { value: "rh", label: "Recursos Humanos" },
-        { value: "finanzas", label: "Finanzas" },
-        { value: "juridico", label: "Jurídico" }
-    ]
+    const [procesadores, setProcesadores] = useState<ProcesadorOption[]>([])
+    const [procesadorSeleccionado, setProcesadorSeleccionado] = useState<ProcesadorOption[]>([])
 
-    const agregarAdscripcion = (option: AdscripcionOption | null) => {
+    const [sistemasOperativos, setSistemasOperativos] = useState<SoOption[]>([])
+    const [soSeleccionado, setSoSeleccionado] = useState<SoOption[]>([])
+
+    const [usos, setUsos] = useState<UsoOption[]>([])
+    const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])
+
+    const [antiguedad, setAntiguedad] = useState<AntiguedadOption[]>([{ 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)
+    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(adscripcionRes.data)
+            setProcesadores(procesadorRes.data)
+            setUsos(usoRes.data)
+            setSistemasOperativos(soRes.data)
+
+        }
+
+        cargarDatos()
+
+    }, [])
+
+    function agregar<T>(option: T | null, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
 
         if (!option) return
 
-        const existe = adscripcionesSeleccionadas.some(a => a.value === option.value)
+        const existe = lista.some((item) => item[key] === option[key])
 
         if (!existe) {
-            setAdscripcionesSeleccionadas([...adscripcionesSeleccionadas, option])
+            setLista([...lista, option])
         }
+
     }
 
-    const eliminarAdscripcion = (value: string) => {
-        setAdscripcionesSeleccionadas(
-            adscripcionesSeleccionadas.filter(a => a.value !== value)
+    function eliminar<T>(id: string, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
+
+        setLista(
+            lista.filter((item) => item[key] !== id)
         )
+
     }
 
     const generarReporte = () => {
-        console.log("Adscripciones seleccionadas:", adscripcionesSeleccionadas)
+
+        const filtros = {
+            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))
+        }
+
+        setFiltros(filtros)
+
     }
 
     return (
+        <>
+            <div className={styles.container}>
 
-        <div className={styles.container}>
+                <section className={styles.filtro}>
 
-            <h2 className={styles.title}>Reporte de Antigüedad de Equipos</h2>
+                    {/* ADSCRIPCION */}
 
-            <label className={styles.label}>Buscar adscripción</label>
+                    <div className={styles.containerSelection}>
+                        <label className={styles.adscripcion}>Adscripción</label>
 
-            <Select
-                options={adscripciones}
-                placeholder="Escribe para buscar..."
-                onChange={(value) => agregarAdscripcion(value)}
-            />
+                        <Select
+                            options={adscripciones}
+                            getOptionLabel={(o) => o.adscripcion}
+                            getOptionValue={(o) => o.id_adscripcion}
+                            onChange={(o) => agregar(o, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
+                        />
 
-            <div className={styles.listaContainer}>
+                        <div className={styles.lista}>
 
-                <h4 className={styles.subtitle}>
-                    Adscripciones seleccionadas ({adscripcionesSeleccionadas.length})
-                </h4>
+                            {adscripcionesSeleccionadas.map((a) => (
 
-                {adscripcionesSeleccionadas.length === 0 && (
-                    <p className={styles.empty}>No hay adscripciones seleccionadas</p>
-                )}
+                                <div key={a.id_adscripcion} className={styles.chip}>
 
-                <div className={styles.lista}>
+                                    <span>{a.adscripcion}</span>
 
-                    {adscripcionesSeleccionadas.map((ads) => (
-                        <div key={ads.value} className={styles.chip}>
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() => eliminar(a.id_adscripcion, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
+                                    >
+                                        ✕
+                                    </button>
 
-                            <span>{ads.label}</span>
+                                </div>
 
-                            <button
-                                className={styles.remove}
-                                onClick={() => eliminarAdscripcion(ads.value)}
-                            >
-                                ✕
-                            </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>
 
-            <button
-                className={styles.button}
-                onClick={generarReporte}
-            >
-                Generar reporte
-            </button>
 
-        </div>
+            <section className={styles.graficas}>
 
+                <Antiguedad
+                    filtros={filtros}
+                />
+
+                <Uso
+                    filtros={filtros}
+                />
+
+                <Procesador
+                    filtros={filtros}
+                />
+
+                <SistemaOperativo
+                    filtros={filtros}
+                />
+
+            </section>
+
+
+        </>
     )
-}
+
+}

src/proxy.ts

@@ -3,7 +3,7 @@ import type { NextRequest } from "next/server";
 import { jwtDecode } from "jwt-decode";
 
 const permisos: Record<number, string[]> = {
-  1: ["/crearCuenta", "/equipoComputo", "/perifericos","/escaner", "/hotmap", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass","/reportesGraficas"],
+  1: ["/crearCuenta", "/equipoComputo", "/perifericos","/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass","/reportesGraficas"],
   2: ["/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass"],
 };
 
@@ -35,7 +35,15 @@ export function proxy(request: NextRequest) {
 
 export const config = {
   matcher: [
-    
+    "/escaner",
+    "/agregarEquipo",
+    "/editar",
+    "/crearCuenta",
+    "/equipoComputo",
+    "/perifericos",
+    "/ranking",
+    "/historial",
+    "/cambiarPass"
   ],
 };
 //IO