biblioteca_hotmap

package.json

@@ -15,16 +15,20 @@
     "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-dom": "19.2.0",    "react-hot-toast": "^2.6.0",
-    "react-hot-toast": "^2.6.0",
+
+    "react-leaflet": "^5.0.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,13 +1,15 @@
 "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,13 +3,15 @@
 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";
+type PreguntaKey = "antiguedad" | "adscripcion";
 
 const LABELS: Record<PreguntaKey, string> = {
   antiguedad: "Antigüedad",
+  adscripcion: "Antigüedad por Adscripcion"
 };
 
 export default function Page() {
@@ -18,6 +20,10 @@ export default function Page() {
   const renderPregunta = () => {
     switch (activeTab) {
       case "antiguedad":
+        return (
+          <Antiguedad />
+        );
+      case "adscripcion":
         return (
           <Reporte />
         );

src/components/AntiguedadEquipo/Antiguedad.tsx

@@ -0,0 +1,43 @@
+'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

@@ -0,0 +1,157 @@
+"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,10 +1,17 @@
 "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;
@@ -166,6 +173,9 @@ export default function Pregunta7() {
           </tbody>
         </table>
       </div>
+      <MapaCalor />
     </div>
+
+  
   );
-}
+}

src/components/reporteGraficas/Graficas/Antiguedad.tsx

@@ -1,90 +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";
-
-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

@@ -1,62 +0,0 @@
-'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

@@ -1,61 +0,0 @@
-'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

@@ -1,63 +0,0 @@
-'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,92 +1,76 @@
-.container {
+.container{
     width: 100%;
     margin: 0 auto;
-    padding: 20px;
+    padding:20px;
-    background: white;
+    background:white;
-    border-radius: 10px;
+    border-radius:10px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    box-shadow:0 2px 8px rgba(0,0,0,0.08);
-    font-family: Arial, Helvetica, sans-serif;
+    font-family:Arial, Helvetica, sans-serif;
-    font-size: 14px;
+    font-size:14px;
 }
 
-.title {
+.title{
-    font-size: 18px;
+    font-size:18px;
-    margin-bottom: 15px;
+    margin-bottom:15px;
 }
 
-.label {
+.label{
-    font-size: 13px;
+    font-size:13px;
-    color: #444;
+    color:#444;
 }
 
-.listaContainer {
+.listaContainer{
-    margin-top: 20px;
+    margin-top:20px;
 }
 
-.subtitle {
+.subtitle{
-    font-size: 14px;
+    font-size:14px;
-    margin-bottom: 10px;
+    margin-bottom:10px;
 }
 
-.empty {
+.empty{
-    font-size: 13px;
+    font-size:13px;
-    color: #777;
+    color:#777;
 }
 
-.lista {
+.lista{
-    display: flex;
+    display:flex;
-    flex-wrap: wrap;
+    flex-wrap:wrap;
-    gap: 8px;
+    gap:8px;
 }
 
-.chip {
+.chip{
-    display: flex;
+    display:flex;
-    align-items: center;
+    align-items:center;
-    background: #f1f3f5;
+    background:#f1f3f5;
-    border-radius: 6px;
+    border-radius:20px;
-    padding: 5px 10px;
+    padding:5px 10px;
-    font-size: 13px;
+    font-size:13px;
-    text-align: start;
 }
 
-.remove {
+.remove{
-    border: none;
+    border:none;
-    background: none;
+    background:none;
-    margin-left: 6px;
+    margin-left:6px;
-    cursor: pointer;
+    cursor:pointer;
-    color: #777;
+    color:#777;
 }
 
-.remove:hover {
+.remove:hover{
-    color: #c0392b;
+    color:#c0392b;
 }
 
-.button {
+.button{
-    margin-top: 20px;
+    margin-top:20px;
-    padding: 8px 14px;
+    padding:8px 14px;
-    border: none;
+    border:none;
-    border-radius: 6px;
+    border-radius:6px;
-    background: #2563eb;
+    background:#2563eb;
-    color: white;
+    color:white;
-    font-size: 13px;
+    font-size:13px;
-    cursor: pointer;
+    cursor:pointer;
 }
 
-.button:hover {
+.button:hover{
-    background: #1d4ed8;
+    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,359 +1,99 @@
 "use client"
 
 import Select from "react-select"
-import { useEffect, useState } from "react"
+import { 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 = {
-    id_adscripcion: string
+    value: string
-    adscripcion: string
+    label: 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 [procesadores, setProcesadores] = useState<ProcesadorOption[]>([])
+    const adscripciones: AdscripcionOption[] = [
-    const [procesadorSeleccionado, setProcesadorSeleccionado] = useState<ProcesadorOption[]>([])
+        { value: "informatica", label: "Informática" },
+        { value: "rh", label: "Recursos Humanos" },
+        { value: "finanzas", label: "Finanzas" },
+        { value: "juridico", label: "Jurídico" }
+    ]
 
-    const [sistemasOperativos, setSistemasOperativos] = useState<SoOption[]>([])
+    const agregarAdscripcion = (option: AdscripcionOption | null) => {
-    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 = lista.some((item) => item[key] === option[key])
+        const existe = adscripcionesSeleccionadas.some(a => a.value === option.value)
 
         if (!existe) {
-            setLista([...lista, option])
+            setAdscripcionesSeleccionadas([...adscripcionesSeleccionadas, option])
         }
-
     }
 
-    function eliminar<T>(id: string, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
+    const eliminarAdscripcion = (value: string) => {
-
+        setAdscripcionesSeleccionadas(
-        setLista(
+            adscripcionesSeleccionadas.filter(a => a.value !== value)
-            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}>
 
-                <section className={styles.filtro}>
+        <div className={styles.container}>
 
-                    {/* ADSCRIPCION */}
+            <h2 className={styles.title}>Reporte de Antigüedad de Equipos</h2>
 
-                    <div className={styles.containerSelection}>
+            <label className={styles.label}>Buscar adscripción</label>
-                        <label className={styles.adscripcion}>Adscripción</label>
 
-                        <Select
+            <Select
-                            options={adscripciones}
+                options={adscripciones}
-                            getOptionLabel={(o) => o.adscripcion}
+                placeholder="Escribe para buscar..."
-                            getOptionValue={(o) => o.id_adscripcion}
+                onChange={(value) => agregarAdscripcion(value)}
-                            onChange={(o) => agregar(o, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
+            />
-                        />
 
-                        <div className={styles.lista}>
+            <div className={styles.listaContainer}>
 
-                            {adscripcionesSeleccionadas.map((a) => (
+                <h4 className={styles.subtitle}>
+                    Adscripciones seleccionadas ({adscripcionesSeleccionadas.length})
+                </h4>
 
-                                <div key={a.id_adscripcion} className={styles.chip}>
+                {adscripcionesSeleccionadas.length === 0 && (
+                    <p className={styles.empty}>No hay adscripciones seleccionadas</p>
+                )}
 
-                                    <span>{a.adscripcion}</span>
+                <div className={styles.lista}>
 
-                                    <button
+                    {adscripcionesSeleccionadas.map((ads) => (
-                                        className={styles.remove}
+                        <div key={ads.value} className={styles.chip}>
-                                        onClick={() => eliminar(a.id_adscripcion, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
-                                    >
-                                        ✕
-                                    </button>
 
-                                </div>
+                            <span>{ads.label}</span>
 
-                            ))}
+                            <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>
 
-            <section className={styles.graficas}>
+        </div>
 
-                <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", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass","/reportesGraficas"],
+  1: ["/crearCuenta", "/equipoComputo", "/perifericos","/escaner", "/hotmap", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass","/reportesGraficas"],
   2: ["/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass"],
 };
 
@@ -35,15 +35,7 @@ export function proxy(request: NextRequest) {
 
 export const config = {
   matcher: [
-    "/escaner",
+    
-    "/agregarEquipo",
-    "/editar",
-    "/crearCuenta",
-    "/equipoComputo",
-    "/perifericos",
-    "/ranking",
-    "/historial",
-    "/cambiarPass"
   ],
 };
 //IO