biblioteca_hotmap

package.json

@@ -15,14 +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-hot-toast": "^2.6.0"
-  },
+    "react-dom": "19.2.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)/antiguedad/page.tsx

@@ -0,0 +1,10 @@
+import "../../styles/layout/reporte.scss";
+
+export default function Page() {
+  return (
+    <div className="scanView_reporte">
+      <div className="container_reporte">
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+"use client";
+
+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";
+
+const LABELS: Record<PreguntaKey, string> = {
+  antiguedad: "Antigüedad",
+  adscripcion: "Antigüedad por Adscripcion"
+};
+
+export default function Page() {
+  const [activeTab, setActiveTab] = useState<PreguntaKey>("antiguedad");
+
+  const renderPregunta = () => {
+    switch (activeTab) {
+      case "antiguedad":
+        return (
+          <Antiguedad />
+        );
+      case "adscripcion":
+        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="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/(Operador)/escaner/page.tsx

@@ -16,7 +16,8 @@ export default function Page() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  const buscarEquipo = async () => {
+  const buscarEquipo = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     if (!search) return toast.error("Ingresa un número de inventario");
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
@@ -96,17 +97,17 @@ export default function Page() {
           {isScanning ? "Cancelar" : "Escanear"}
         </button>
 
-        <div className="searchBox">
+        <form className="searchBox" onSubmit={buscarEquipo}>
           <input
             type="text"
             placeholder="Buscar por inventario..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
           />
-          <button onClick={buscarEquipo} className="searchButton">
+          <button className="searchButton" type="submit">
             <Image src="/search.png" alt="Buscar" width={50} height={50} />
           </button>
-        </div>
+        </form>
       </main>
     </div>
   );

src/app/creadores/CreatorCard.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import "./creadores.css";
+
+interface props{
+    title:string;
+    img:string;
+    width:number;
+    height:number;
+}
+
+export default function CreatorCard({title,img,width,height}:props) {
+    return (
+        <div className="card">
+            <div className="imageWrapper">
+                <Image
+                    src={img}
+                    alt="IO"
+                    width={width}
+                    height={height}
+                    className="creators"
+                />
+            </div>
+            <h1 className="title">{title}</h1>
+        </div>
+    )
+}

src/app/creadores/creadores.css

@@ -0,0 +1,79 @@
+.mainContainer {
+    height: 100%;
+    width: 100%;
+    display: grid;
+    position: relative;
+    place-items: center;
+}
+
+.container {
+    display: flex;
+    gap: 6rem;
+    align-items: end;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.imageWrapper {
+    position: relative;
+    animation: slideIn 1s ease-out forwards;
+    transform: translateX(-120px) rotate(12deg);
+    opacity: 0;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: slideIn 1s ease-out forwards;
+    opacity: 0;
+}
+
+.card:hover .creators {
+    transform: rotateY(360deg) rotate(12deg) scale(1.05);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
+}
+
+.creators {
+    object-fit: cover;
+    border-radius: 16px;
+    background-color: rgba(255, 255, 255, 0.6);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
+    transition: transform 1s ease, box-shadow 0.4s ease;
+}
+
+.imageWrapper:hover .creators {
+    transform: rotateY(180deg) rotate(24deg) scale(1.05);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
+
+}
+
+@keyframes slideIn {
+    to {
+        transform: translateX(0) rotate(12deg);
+        opacity: 1;
+    }
+}
+
+.title {
+    margin-left: 40px;
+    font-size: 3rem;
+    font-weight: 600;
+    opacity: 0;
+    animation: fadeIn 1s ease forwards;
+    animation-delay: 0.5s;
+    color: #1E3A8A;
+}
+
+.card:hover .title {
+    transform: translateY(-5px);
+    color: #163172;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}

src/app/creadores/page.tsx

@@ -0,0 +1,17 @@
+import "./creadores.css";
+import CreatorCard from "./CreatorCard";
+
+export default function Page() {
+    return (
+        <div className="mainContainer">
+            <div className="container">
+
+                <CreatorCard title="IO" img="/IO.png" width={150} height={200} />
+                <CreatorCard title="Sarabia" img="/SARABIA.jpeg" width={150} height={150} />
+                <CreatorCard title="CarloSpak" img="/SPAK.png" width={160} height={100} />
+
+            </div>
+        </div>
+
+    );
+}

src/app/login/Login.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import "../styles/layout/login.scss";
-import "../styles/base/globales.scss";
 import Image from "next/image";
 import axios from "axios";
 import { useRouter } from "next/navigation";
 import toast from "react-hot-toast";
 import { jwtDecode } from "jwt-decode";
+import "../styles/layout/login.scss";
+import "../styles/base/globales.scss";
 
 export default function Login() {
   const [nombre, setNombre] = useState("");

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/AntiguedadEquipo/formEquipo.tsx

@@ -0,0 +1,18 @@
+export default function FormEquipo() {
+    return (
+        <form>
+            <label >Selecciona la antiguedad</label>
+            <select>
+                <option value=""></option>
+            </select>
+            <label>Selecciona la adscripcion</label>
+            <select>
+                <option value=""></option>
+            </select>
+            <label >Selecciona el edificio</label>
+            <select>
+                <option value=""></option>
+            </select>
+        </form>
+    )
+}

src/components/BarNavigationAdmin.tsx

@@ -49,6 +49,11 @@ function BarNavigation() {
             <span>Perifericos</span>
           </Link>
         </li>
+        <li className="subMenu" onClick={toggleMenu}>
+          <Link href="/reportesGraficas" className="links">
+            <span>Reportes y Graficas</span>
+          </Link>
+        </li>
         <li className="subMenu">
           <button className="logout-button" onClick={cerrarSesion}>
             Cerrar sesión

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;
@@ -29,47 +36,47 @@ export default function Pregunta7() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  // ------------------------------
-  // TRANSFORMADOR (maneja null)
-  // ------------------------------
   const transformarDatos = (items: AntiguedadItem[]): string[] => {
-    let menores2 = 0;
+    let menor2 = 0;
     let entre2_3 = 0;
     let entre4_5 = 0;
-    let mayores6 = 0;
-    let notfound = 0;
+    let mayor6 = 0;
 
     for (const item of items) {
       const total = Number(item.total) || 0;
-      const antig = item.antiguedad
-        ? item.antiguedad.toUpperCase().trim()
-        : null;
+      const antig = item.antiguedad?.toLowerCase().trim();
 
       switch (antig) {
-        case "MENORES DE 2":
-          menores2 += total;
+        case "menor a 2 años":
+          menor2 += total;
           break;
-        case "ENTRE 2 Y 3":
+
+        case "entre 2 y 3 años":
           entre2_3 += total;
           break;
-        case "ENTRE 4 Y 5":
+
+        case "entre 4 y 5 años":
           entre4_5 += total;
           break;
-        case "ENTRE 6 Y MAYORES":
-          mayores6 += total;
+
+        case "mayor a 6 años":
+          mayor6 += total;
           break;
-        default:
-          notfound += total; // incluye null
       }
     }
 
-    const total = menores2 + entre2_3 + entre4_5 + mayores6 + notfound;
+    const suma = menor2 + entre2_3 + entre4_5 + mayor6;
 
-    if (total === 0) return ["0.00", "0.00", "0.00", "0.00"];
+    if (suma === 0) return ["0.00", "0.00", "0.00", "0.00"];
 
-    const pct = (v: number) => ((v / total) * 100).toFixed(2);
+    const pct = (v: number) => ((v / suma) * 100).toFixed(2);
 
-    return [pct(menores2), pct(entre2_3), pct(entre4_5), pct(mayores6)];
+    return [
+      pct(menor2), // Menor a 2
+      pct(entre2_3), // Entre 2 y 3
+      pct(entre4_5), // Entre 4 y 5
+      pct(mayor6), // Mayor a 6
+    ];
   };
 
   const cargarDatos = async (baja: boolean) => {
@@ -83,7 +90,7 @@ export default function Pregunta7() {
         body,
         {
           headers: { Authorization: `Bearer ${token}` },
-        }
+        },
       )
       .then((res) => {
         const { impresion, digitalizacion } = res.data;
@@ -166,6 +173,9 @@ export default function Pregunta7() {
           </tbody>
         </table>
       </div>
+      <MapaCalor />
     </div>
+
+  
   );
-}
+}

src/components/Equipo_Computo/Pregunta9.tsx

@@ -50,16 +50,16 @@ export default function Pregunta9() {
       const total = Number(item.total) || 0;
 
       switch (item.antiguedad) {
-        case "MENORES DE 2":
+        case "Menor a 2 años":
           menores2 += total;
           break;
-        case "ENTRE 2 Y 3":
+        case "Entre 2 y 3 años":
           entre2_3 += total;
           break;
-        case "ENTRE 4 Y 5":
+        case "Entre 4 y 5 años":
           entre4_6 += total;
           break;
-        case "ENTRE 6 Y MAYORES":
+        case "Mayor a 6 años":
           mayores6 += total;
           break;
         // Cualquier otro valor (aunque no debería haber) lo meteríamos en mayores6

src/components/header.tsx

@@ -18,7 +18,7 @@ function Header() {
     "/ranking",
   ];
   
-  const privateNav = ["/equipoComputo", "/crearCuenta", "/perifericos"];
+  const privateNav = ["/equipoComputo", "/crearCuenta", "/perifericos","/reportesGraficas"];
 
   return (
     <header className={header.header}>

src/components/reporteGraficas/Reporte.module.css

@@ -0,0 +1,76 @@
+.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:#f1f3f5;
+    border-radius:20px;
+    padding:5px 10px;
+    font-size:13px;
+}
+
+.remove{
+    border:none;
+    background:none;
+    margin-left:6px;
+    cursor:pointer;
+    color:#777;
+}
+
+.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:hover{
+    background:#1d4ed8;
+}

src/components/reporteGraficas/reporte.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import Select from "react-select"
+import { useState } from "react"
+import styles from "./Reporte.module.css"
+
+type AdscripcionOption = {
+    value: string
+    label: string
+}
+
+export default function Reporte() {
+
+    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 agregarAdscripcion = (option: AdscripcionOption | null) => {
+
+        if (!option) return
+
+        const existe = adscripcionesSeleccionadas.some(a => a.value === option.value)
+
+        if (!existe) {
+            setAdscripcionesSeleccionadas([...adscripcionesSeleccionadas, option])
+        }
+    }
+
+    const eliminarAdscripcion = (value: string) => {
+        setAdscripcionesSeleccionadas(
+            adscripcionesSeleccionadas.filter(a => a.value !== value)
+        )
+    }
+
+    const generarReporte = () => {
+        console.log("Adscripciones seleccionadas:", adscripcionesSeleccionadas)
+    }
+
+    return (
+
+        <div className={styles.container}>
+
+            <h2 className={styles.title}>Reporte de Antigüedad de Equipos</h2>
+
+            <label className={styles.label}>Buscar adscripción</label>
+
+            <Select
+                options={adscripciones}
+                placeholder="Escribe para buscar..."
+                onChange={(value) => agregarAdscripcion(value)}
+            />
+
+            <div className={styles.listaContainer}>
+
+                <h4 className={styles.subtitle}>
+                    Adscripciones seleccionadas ({adscripcionesSeleccionadas.length})
+                </h4>
+
+                {adscripcionesSeleccionadas.length === 0 && (
+                    <p className={styles.empty}>No hay adscripciones seleccionadas</p>
+                )}
+
+                <div className={styles.lista}>
+
+                    {adscripcionesSeleccionadas.map((ads) => (
+                        <div key={ads.value} className={styles.chip}>
+
+                            <span>{ads.label}</span>
+
+                            <button
+                                className={styles.remove}
+                                onClick={() => eliminarAdscripcion(ads.value)}
+                            >
+                                ✕
+                            </button>
+
+                        </div>
+                    ))}
+
+                </div>
+
+            </div>
+
+            <button
+                className={styles.button}
+                onClick={generarReporte}
+            >
+                Generar reporte
+            </button>
+
+        </div>
+
+    )
+}

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"],
+  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