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-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)/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/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/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