se agregaron vistas de graficas

se agrego graficas por periferico
fixed grammar and deleted toggle button
2026-03-25 16:47:19 -06:00 · 2026-03-23 18:54:53 -06:00 · 2026-03-23 15:36:18 -05:00 · 2026-03-20 17:57:33 -05:00 · 2026-03-20 15:33:32 -04:00 · 2026-03-20 13:48:48 -05:00
30 changed files with 1901 additions and 170 deletions
@@ -14,16 +14,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-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",
@@ -274,21 +278,21 @@
      }
    },
    "node_modules/@emnapi/core": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.7.0.tgz",
-      "integrity": "sha512-pJdKGq/1iquWYtv1RRSljZklxHCOCAJFJrImO5ZLKPJVJlVUcs8yFwNQlqS0Lo8xT1VAXXTCZocF9n26FWEKsw==",
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.1.tgz",
+      "integrity": "sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==",
      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
-        "@emnapi/wasi-threads": "1.1.0",
+        "@emnapi/wasi-threads": "1.2.0",
        "tslib": "^2.4.0"
      }
    },
    "node_modules/@emnapi/runtime": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.0.tgz",
-      "integrity": "sha512-oAYoQnCYaQZKVS53Fq23ceWMRxq5EhQsE0x0RdQ55jT7wagMu5k+fS39v1fiSLrtrLQlXwVINenqhLMtTrV/1Q==",
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.1.tgz",
+      "integrity": "sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==",
      "license": "MIT",
      "optional": true,
      "dependencies": {
@@ -296,9 +300,9 @@
      }
    },
    "node_modules/@emnapi/wasi-threads": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
-      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.0.tgz",
+      "integrity": "sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==",
      "dev": true,
      "license": "MIT",
      "optional": true,
@@ -1188,9 +1192,9 @@
      }
    },
    "node_modules/@next/env": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
-      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.0.tgz",
+      "integrity": "sha512-OZIbODWWAi0epQRCRjNe1VO45LOFBzgiyqmTLzIqWq6u1wrxKnAyz1HH6tgY/Mc81YzIjRPoYsPAEr4QV4l9TA==",
      "license": "MIT"
    },
    "node_modules/@next/eslint-plugin-next": {
@@ -1204,9 +1208,9 @@
      }
    },
    "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
-      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.2.0.tgz",
+      "integrity": "sha512-/JZsqKzKt01IFoiLLAzlNqys7qk2F3JkcUhj50zuRhKDQkZNOz9E5N6wAQWprXdsvjRP4lTFj+/+36NSv5AwhQ==",
      "cpu": [
        "arm64"
      ],
@@ -1220,9 +1224,9 @@
      }
    },
    "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
-      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.2.0.tgz",
+      "integrity": "sha512-/hV8erWq4SNlVgglUiW5UmQ5Hwy5EW/AbbXlJCn6zkfKxTy/E/U3V8U1Ocm2YCTUoFgQdoMxRyRMOW5jYy4ygg==",
      "cpu": [
        "x64"
      ],
@@ -1236,9 +1240,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
-      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.2.0.tgz",
+      "integrity": "sha512-GkjL/Q7MWOwqWR9zoxu1TIHzkOI2l2BHCf7FzeQG87zPgs+6WDh+oC9Sw9ARuuL/FUk6JNCgKRkA6rEQYadUaw==",
      "cpu": [
        "arm64"
      ],
@@ -1252,9 +1256,9 @@
      }
    },
    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
-      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.2.0.tgz",
+      "integrity": "sha512-1ffhC6KY5qWLg5miMlKJp3dZbXelEfjuXt1qcp5WzSCQy36CV3y+JT7OC1WSFKizGQCDOcQbfkH/IjZP3cdRNA==",
      "cpu": [
        "arm64"
      ],
@@ -1268,9 +1272,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
-      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.2.0.tgz",
+      "integrity": "sha512-FmbDcZQ8yJRq93EJSL6xaE0KK/Rslraf8fj1uViGxg7K4CKBCRYSubILJPEhjSgZurpcPQq12QNOJQ0DRJl6Hg==",
      "cpu": [
        "x64"
      ],
@@ -1284,9 +1288,9 @@
      }
    },
    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
-      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.2.0.tgz",
+      "integrity": "sha512-HzjIHVkmGAwRbh/vzvoBWWEbb8BBZPxBvVbDQDvzHSf3D8RP/4vjw7MNLDXFF9Q1WEzeQyEj2zdxBtVAHu5Oyw==",
      "cpu": [
        "x64"
      ],
@@ -1300,9 +1304,9 @@
      }
    },
    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
-      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.2.0.tgz",
+      "integrity": "sha512-UMiFNQf5H7+1ZsZPxEsA064WEuFbRNq/kEXyepbCnSErp4f5iut75dBA8UeerFIG3vDaQNOfCpevnERPp2V+nA==",
      "cpu": [
        "arm64"
      ],
@@ -1316,9 +1320,9 @@
      }
    },
    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
-      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.2.0.tgz",
+      "integrity": "sha512-DRrNJKW+/eimrZgdhVN1uvkN1OI4j6Lpefwr44jKQ0YQzztlmOBUUzHuV5GxOMPK3nmodAYElUVCY8ZXo/IWeA==",
      "cpu": [
        "x64"
      ],
@@ -1383,6 +1387,7 @@
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
      "hasInstallScript": true,
      "license": "MIT",
      "optional": true,
@@ -1422,6 +1427,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1442,6 +1448,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1462,6 +1469,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1482,6 +1490,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1502,6 +1511,7 @@
      "cpu": [
        "arm"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1522,6 +1532,7 @@
      "cpu": [
        "arm"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1542,6 +1553,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1562,6 +1574,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1582,6 +1595,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1602,6 +1616,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1622,6 +1637,7 @@
      "cpu": [
        "arm64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1642,6 +1658,7 @@
      "cpu": [
        "ia32"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1662,6 +1679,7 @@
      "cpu": [
        "x64"
      ],
+      "dev": true,
      "license": "MIT",
      "optional": true,
      "os": [
@@ -1675,6 +1693,17 @@
        "url": "https://opencollective.com/parcel"
      }
    },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
    "node_modules/@reduxjs/toolkit": {
      "version": "2.11.2",
      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
@@ -1820,6 +1849,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@types/js-cookie": {
      "version": "3.0.6",
      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
@@ -1841,6 +1877,16 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.21",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.21.tgz",
+      "integrity": "sha512-TbAd9DaPGSnzp6QvtYngntMZgcRk+igFELwR2N99XZn7RXUdKgsXMR+28bUO0rPsWp8MIu/f47luLIQuSLYv/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
    "node_modules/@types/node": {
      "version": "24.10.1",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
@@ -2821,12 +2867,15 @@
      "license": "MIT"
    },
    "node_modules/baseline-browser-mapping": {
-      "version": "2.9.6",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.6.tgz",
-      "integrity": "sha512-v9BVVpOTLB59C9E7aSnmIF8h7qRsFpx+A2nugVMTszEOMcfjlZMsXRm4LF23I3Z9AJxc8ANpIvzbzONoX9VJlg==",
+      "version": "2.10.9",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.9.tgz",
+      "integrity": "sha512-OZd0e2mU11ClX8+IdXe3r0dbqMEznRiT4TfbhYIbcRPZkqJ7Qwer8ij3GZAmLsRKa+II9V1v5czCkvmHH3XZBg==",
      "license": "Apache-2.0",
      "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
      }
    },
    "node_modules/brace-expansion": {
@@ -2844,7 +2893,7 @@
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "fill-range": "^7.1.1"
@@ -3357,6 +3406,7 @@
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
      "license": "Apache-2.0",
      "optional": true,
      "bin": {
@@ -4139,7 +4189,7 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "to-regex-range": "^5.0.1"
@@ -4186,9 +4236,9 @@
      }
    },
    "node_modules/flatted": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
-      "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
      "dev": true,
      "license": "ISC"
    },
@@ -4824,7 +4874,7 @@
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -4870,7 +4920,7 @@
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-extglob": "^2.1.1"
@@ -4909,7 +4959,7 @@
      "version": "7.0.0",
      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.0"
@@ -5244,6 +5294,17 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/leaflet.heat": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/leaflet.heat/-/leaflet.heat-0.2.0.tgz",
+      "integrity": "sha512-Cd5PbAA/rX3X3XKxfDoUGi9qp78FyhWYurFg3nsfhntcM/MCNK08pRkf4iEenO1KNqwVPKCmkyktjW3UD+h9bQ=="
+    },
    "node_modules/levn": {
      "version": "0.4.1",
      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5338,7 +5399,7 @@
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "braces": "^3.0.3",
@@ -5440,14 +5501,14 @@
      "license": "MIT"
    },
    "node_modules/next": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
-      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.2.0.tgz",
+      "integrity": "sha512-NLBVrJy1pbV1Yn00L5sU4vFyAHt5XuSjzrNyFnxo6Com0M0KrL6hHM5B99dbqXb2bE9pm4Ow3Zl1xp6HVY9edQ==",
      "license": "MIT",
      "dependencies": {
-        "@next/env": "16.1.6",
+        "@next/env": "16.2.0",
        "@swc/helpers": "0.5.15",
-        "baseline-browser-mapping": "^2.8.3",
+        "baseline-browser-mapping": "^2.9.19",
        "caniuse-lite": "^1.0.30001579",
        "postcss": "8.4.31",
        "styled-jsx": "5.1.6"
@@ -5459,15 +5520,15 @@
        "node": ">=20.9.0"
      },
      "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.6",
-        "@next/swc-darwin-x64": "16.1.6",
-        "@next/swc-linux-arm64-gnu": "16.1.6",
-        "@next/swc-linux-arm64-musl": "16.1.6",
-        "@next/swc-linux-x64-gnu": "16.1.6",
-        "@next/swc-linux-x64-musl": "16.1.6",
-        "@next/swc-win32-arm64-msvc": "16.1.6",
-        "@next/swc-win32-x64-msvc": "16.1.6",
-        "sharp": "^0.34.4"
+        "@next/swc-darwin-arm64": "16.2.0",
+        "@next/swc-darwin-x64": "16.2.0",
+        "@next/swc-linux-arm64-gnu": "16.2.0",
+        "@next/swc-linux-arm64-musl": "16.2.0",
+        "@next/swc-linux-x64-gnu": "16.2.0",
+        "@next/swc-linux-x64-musl": "16.2.0",
+        "@next/swc-win32-arm64-msvc": "16.2.0",
+        "@next/swc-win32-x64-msvc": "16.2.0",
+        "sharp": "^0.34.5"
      },
      "peerDependencies": {
        "@opentelemetry/api": "^1.1.0",
@@ -5496,6 +5557,7 @@
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
      "license": "MIT",
      "optional": true
    },
@@ -5771,7 +5833,7 @@
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=8.6"
@@ -5920,6 +5982,20 @@
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
      "license": "MIT"
    },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
    "node_modules/react-redux": {
      "version": "9.2.0",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -6758,7 +6834,7 @@
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "devOptional": true,
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "is-number": "^7.0.0"
@@ -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-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",
@@ -34,4 +38,4 @@
    "sass": "^1.94.0",
    "typescript": "^5"
  }
-}
+}
@@ -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";

@@ -1,25 +1,34 @@
 "use client";

-import { useState } from "react";
-import DownloadReporteXLSX from "@/components/Dowload/Reporte";
 import Reporte from "@/components/reporteGraficas/reporte";
-
+import ReportePerifericos from "@/components/reporte_graficas_perifericos/reporte";
 import "../../styles/layout/reporte.scss";
+import { useState } from "react";

-type PreguntaKey = "antiguedad";
+
+type PreguntaKey = "reporteGraficas" | "reporte_graficas_perifericos";

 const LABELS: Record<PreguntaKey, string> = {
-  antiguedad: "Antigüedad",
+  reporteGraficas: "Reporte por equipos",
+  reporte_graficas_perifericos: "Reporte por perifericos",
 };

 export default function Page() {
-  const [activeTab, setActiveTab] = useState<PreguntaKey>("antiguedad");
+  const [activeTab, setActiveTab] = useState<PreguntaKey>("reporteGraficas");

  const renderPregunta = () => {
    switch (activeTab) {
-      case "antiguedad":
+      case "reporteGraficas":
        return (
-          <Reporte />
+          <>
+            <Reporte />
+          </>
+        );
+      case "reporte_graficas_perifericos":
+        return (
+          <>
+            <ReportePerifericos />
+          </>
        );
      default:
        return (
@@ -39,7 +39,7 @@ export default function Login() {
      if (tipo === 2) {
        router.push("/escaner");
      } else if (tipo === 1) {
-        router.push("/equipoComputo");
+        router.push("/reportesGraficas");
      } else {
        toast.error("Tipo de usuario no válido");
      }
@@ -41,17 +41,17 @@ function BarNavigation() {
        </li> */}
        <li className="subMenu" onClick={toggleMenu}>
          <Link href="/equipoComputo" className="links">
-            <span>Equipo de Computo</span>
+            <span>Equipo de Cómputo</span>
          </Link>
        </li>
        <li className="subMenu" onClick={toggleMenu}>
          <Link href="/perifericos" className="links">
-            <span>Perifericos</span>
+            <span>Periféricos</span>
          </Link>
        </li>
        <li className="subMenu" onClick={toggleMenu}>
          <Link href="/reportesGraficas" className="links">
-            <span>Reportes y Graficas</span>
+            <span>Reportes y Gráficas</span>
          </Link>
        </li>
        <li className="subMenu">
@@ -8,7 +8,7 @@ export default function DownloadReporteXLSX() {
  const [loading, setLoading] = useState(false);

  const handleDownload = async () => {
-    setLoading(true); // 🔹 Activa loader
+    setLoading(true);
    const token = Cookies.get("token");
    const headers = { Authorization: `Bearer ${token}` };

@@ -37,7 +37,7 @@ export default function DownloadReporteXLSX() {
      console.error(error);
      alert("Hubo un problema al descargar el archivo.");
    } finally {
-      setLoading(false); // 🔹 Reactiva botón y oculta loader
+      setLoading(false);
    }
  };

@@ -45,10 +45,10 @@ export default function DownloadReporteXLSX() {
    <button
      className={styles.downloadBtn}
      onClick={handleDownload}
-      disabled={loading} // 🔹 Botón deshabilitado
+      disabled={loading} 
    >
      {loading ? (
-        <div className={styles.loader}></div> // 🔹 Icono de cargando
+        <div className={styles.loader}></div>
      ) : (
        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
      )}
@@ -0,0 +1,75 @@
+"use client";
+
+import styles from "./style.module.css";
+import Cookies from "js-cookie";
+import { useState } from "react";
+import axios from "axios";
+
+interface Props {
+  filtros: any;
+  count?: boolean;
+}
+
+export default function DownloadTable({ filtros,count }: Props) {
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    if(!filtros.length){return}
+    setLoading(true);
+
+    const token = Cookies.get("token");
+
+    try {
+      const endpoint = count
+  ? "/equipos/excel/tabla/count"
+  : "/equipos/excel/tabla";
+
+
+      const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_API_URL}${endpoint}`,
+        filtros,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          responseType: "blob",
+        }
+      );
+      const url = window.URL.createObjectURL(new Blob([response.data]));
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "reporte.xlsx";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error(error);
+      alert("Hubo un problema al descargar el archivo.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      className={styles.downloadBtn}
+      onClick={handleDownload}
+      disabled={loading}
+    >
+      {loading ? (
+        <div className={styles.loader}></div>
+      ) : (
+        <img
+          src="/excel.svg"
+          alt="Excel"
+          className={styles.iconExcel}
+          width={30}
+          height={30}
+        />
+      )}
+    </button>
+  );
+}
@@ -0,0 +1,57 @@
+"use client";
+
+import styles from "./style.module.css";
+import Cookies from "js-cookie";
+import { useState } from "react";
+
+export default function DownloadTableCount() {
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    setLoading(true);
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/equipos/excel/tabla/count`,
+        { headers }
+      );
+
+      if (!response.ok) {
+        throw new Error("Error al descargar el archivo");
+      }
+
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "reporte.xlsx";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error(error);
+      alert("Hubo un problema al descargar el archivo.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      className={styles.downloadBtn}
+      onClick={handleDownload}
+      disabled={loading} 
+    >
+      {loading ? (
+        <div className={styles.loader}></div>
+      ) : (
+        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
+      )}
+    </button>
+  );
+}
@@ -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>
+  );
+}
@@ -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>
+
+  
  );
-}
+}
@@ -14,11 +14,6 @@ import {
 } from "recharts";
 import Cookies from "js-cookie";

-type AdscripcionOption = {
-    id_adscripcion: string
-    adscripcion: string
-}
-
 interface Props {
    filtros: any
 }
@@ -28,6 +23,16 @@ interface AntiguedadData {
    antiguedad: string
    total: number
 }
+
+const colores = [
+    "#818CF8",
+    "#34D399",
+    "#FBBF24",
+    "#F87171",
+    "#67E8F9",
+    "#C084FC"
+]
+
 const api_url = process.env.NEXT_PUBLIC_API_URL;

 export default function Antiguedad({ filtros }: Props) {
@@ -54,24 +59,48 @@ export default function Antiguedad({ filtros }: Props) {

    }, [filtros])

+    const tieneAdscripciones = data.some(d => d.adscripcion)
+
+    let dataTransformada = data
+    let adscripciones: string[] = []
+
+    if (tieneAdscripciones) {
+
+        adscripciones = [...new Set(data.map(d => d.adscripcion))]
+
+        dataTransformada = Object.values(
+            data.reduce((acc: any, item: any) => {
+
+                if (!acc[item.antiguedad]) {
+                    acc[item.antiguedad] = { antiguedad: item.antiguedad }
+                }
+
+                acc[item.antiguedad][item.adscripcion] = Number(item.total)
+
+                return acc
+
+            }, {})
+        )
+
+    }
+
    return (
        <div
            style={{
                minWidth: "570px",
                background: "white",
                borderRadius: "10px",
-                margin: "5px auto",
                padding: "1rem",
                maxWidth: "100%"
            }}
        >

-            <h1 style={{ margin: "0" }}>Antigüedad</h1>
+            <h1 style={{ margin: "0" }}>Antigüedad por equipo</h1>

            <ResponsiveContainer width="100%" aspect={2.5}>

                <BarChart
-                    data={data}
+                    data={dataTransformada}
                    margin={{ top: 20 }}
                >
                    <CartesianGrid strokeDasharray="3 3" />
@@ -79,9 +108,28 @@ export default function Antiguedad({ filtros }: Props) {
                    <XAxis dataKey="antiguedad" fontSize={12} />

                    <YAxis />
-                    <Tooltip />
+                    <Tooltip
+                        formatter={(value) => [`${value}`]}
+                    />
                    <Legend />
-                    <Bar dataKey="total" fill="#095bd6" />
+                    {tieneAdscripciones ? (
+
+                        adscripciones.map((ads, i) => (
+                            <Bar
+                                key={ads}
+                                dataKey={ads}
+                                fill={colores[i % colores.length]}
+                            />
+                        ))
+
+                    ) : (
+
+                        <Bar
+                            dataKey="total"
+                            fill="#095bd6"
+                        />
+
+                    )}

                </BarChart>
            </ResponsiveContainer>
@@ -4,16 +4,6 @@ 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
 }
@@ -24,23 +14,58 @@ interface procesador {
    total: number;
 }

+const colores = [
+    "#818CF8",
+    "#34D399",
+    "#FBBF24",
+    "#F87171",
+    "#67E8F9",
+    "#C084FC"
+]
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
 export default function Procesador({ filtros }: Props) {
    const [data, setData] = useState<procesador[]>([])

    useEffect(() => {
        const getAntiguedad = async () => {
-            const response = await axios.post("http://localhost:3001/equipos/grafica/procesador",filtros)
+            const response = await axios.post(`${api_url}/equipos/grafica/procesador`, filtros)

            setData(response.data)
        }
        getAntiguedad()
    }, [filtros])

+    const tieneAdscripciones = data.some(d => d.adscripcion)
+
+    let dataTransformada = data
+    let adscripciones: string[] = []
+
+    if (tieneAdscripciones) {
+
+        adscripciones = [...new Set(data.map(d => d.adscripcion))]
+
+        dataTransformada = Object.values(
+            data.reduce((acc: any, item: any) => {
+
+                if (!acc[item.procesador]) {
+                    acc[item.procesador] = { procesador: item.procesador }
+                }
+
+                acc[item.procesador][item.adscripcion] = Number(item.total)
+
+                return acc
+
+            }, {})
+        )
+    }
+
    return (
        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>Procesador</h1>
-            <ResponsiveContainer width="100%" aspect={3.5} minHeight={270}>
-                <BarChart data={data}
+            <h1 style={{ margin: "0" }}>Procesador por equipo</h1>
+            <ResponsiveContainer width="100%" aspect={3.5}>
+                <BarChart data={dataTransformada}
                    width={500}
                    height={300}
                    margin={{
@@ -51,10 +76,28 @@ export default function Procesador({ filtros }: Props) {
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="procesador" fontSize={12} angle={40} textAnchor="start" hide />
                    <YAxis />
-                    <Tooltip />
+                    <Tooltip
+                        formatter={(value) => [`${value}`]}
+                    />     
                    <Legend />
-                    <Bar dataKey="total" fill="#095bd6" />
+                    {tieneAdscripciones ? (

+                        adscripciones.map((ads, i) => (
+                            <Bar
+                                key={ads}
+                                dataKey={ads}
+                                fill={colores[i % colores.length]}
+                            />
+                        ))
+
+                    ) : (
+
+                        <Bar
+                            dataKey="total"
+                            fill="#095bd6"
+                        />
+
+                    )}
                </BarChart>
            </ResponsiveContainer>
        </div>
@@ -4,16 +4,6 @@ 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
 }
@@ -24,23 +14,58 @@ interface so {
    total: number;
 }

+const colores = [
+    "#818CF8",
+    "#34D399",
+    "#FBBF24",
+    "#F87171",
+    "#67E8F9",
+    "#C084FC"
+]
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
 export default function SistemaOperativo({ filtros }: Props) {
    const [data, setData] = useState<so[]>([])

    useEffect(() => {
        const getAntiguedad = async () => {
-            const response = await axios.post("http://localhost:3001/equipos/grafica/so",filtros)
+            const response = await axios.post(`${api_url}/equipos/grafica/so`, filtros)

            setData(response.data)
        }
        getAntiguedad()
    }, [filtros])

+    const tieneAdscripciones = data.some(d => d.adscripcion)
+
+    let dataTransformada = data
+    let adscripciones: string[] = []
+
+    if (tieneAdscripciones) {
+
+        adscripciones = [...new Set(data.map(d => d.adscripcion))]
+
+        dataTransformada = Object.values(
+            data.reduce((acc: any, item: any) => {
+
+                if (!acc[item.so]) {
+                    acc[item.so] = { so: item.so }
+                }
+
+                acc[item.so][item.adscripcion] = Number(item.total)
+
+                return acc
+
+            }, {})
+        )
+    }
+
    return (
        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>SistemaOperativo</h1>
+            <h1 style={{ margin: "0" }}>SistemaOperativo por equipo</h1>
            <ResponsiveContainer width="100%" aspect={3.5}>
-                <BarChart data={data}
+                <BarChart data={dataTransformada}
                    width={500}
                    height={300}
                    margin={{
@@ -50,10 +75,28 @@ export default function SistemaOperativo({ filtros }: Props) {
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide />
                    <YAxis />
-                    <Tooltip />
+                    <Tooltip
+                        formatter={(value) => [`${value}`]}
+                    />                         
                    <Legend />
-                    <Bar dataKey="total" fill="#095bd6" />
+                    {tieneAdscripciones ? (

+                        adscripciones.map((ads, i) => (
+                            <Bar
+                                key={ads}
+                                dataKey={ads}
+                                fill={colores[i % colores.length]}
+                            />
+                        ))
+
+                    ) : (
+
+                        <Bar
+                            dataKey="total"
+                            fill="#095bd6"
+                        />
+
+                    )}
                </BarChart>
            </ResponsiveContainer>
        </div>
@@ -4,16 +4,6 @@ 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
 }
@@ -24,13 +14,24 @@ interface UsoData {
    total: number
 }

+const colores = [
+    "#818CF8",
+    "#34D399",
+    "#FBBF24",
+    "#F87171",
+    "#67E8F9",
+    "#C084FC"
+]
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
 export default function Uso({ filtros }: Props) {
    const [data, setData] = useState<UsoData[]>([])

    useEffect(() => {
        const getUso = async () => {
            const response = await axios.post(
-                "http://localhost:3001/equipos/grafica/uso",filtros
+                `${api_url}/equipos/grafica/uso`, filtros
            )
            setData(response.data)
        }
@@ -38,11 +39,35 @@ export default function Uso({ filtros }: Props) {

    }, [filtros])

+    const tieneAdscripciones = data.some(d => d.adscripcion)
+
+    let dataTransformada = data
+    let adscripciones: string[] = []
+
+    if (tieneAdscripciones) {
+
+        adscripciones = [...new Set(data.map(d => d.adscripcion))]
+
+        dataTransformada = Object.values(
+            data.reduce((acc: any, item: any) => {
+
+                if (!acc[item.uso]) {
+                    acc[item.uso] = { uso: item.uso }
+                }
+
+                acc[item.uso][item.adscripcion] = Number(item.total)
+
+                return acc
+
+            }, {})
+        )
+    }
+
    return (
-        <div style={{ minWidth: "570px", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>Uso</h1>
+        <div style={{ minWidth: "570px", background: "white", borderRadius: "10px", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>Uso por equipo</h1>
            <ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
-                <BarChart data={data}
+                <BarChart data={dataTransformada}
                    width={500}
                    height={300}
                    margin={{
@@ -52,12 +77,31 @@ export default function Uso({ filtros }: Props) {
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="uso" fontSize={12} />
                    <YAxis />
-                    <Tooltip />
+                    <Tooltip
+                        formatter={(value) => [`${value}`]}
+                    />                    
                    <Legend />
-                    <Bar dataKey="total" fill="#095bd6" />
+                    {tieneAdscripciones ? (

+                        adscripciones.map((ads, i) => (
+                            <Bar
+                                key={ads}
+                                dataKey={ads}
+                                fill={colores[i % colores.length]}
+                            />
+                        ))
+
+                    ) : (
+
+                        <Bar
+                            dataKey="total"
+                            fill="#095bd6"
+                        />
+
+                    )}
                </BarChart>
            </ResponsiveContainer>
        </div>
    )
-}
+}
+//IO
@@ -42,51 +42,81 @@
 .chip {
    display: flex;
    align-items: center;
-    background: #f1f3f5;
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    text-align: start;
+    color: white;
 }

 .remove {
    border: none;
-    background: none;
-    margin-left: 6px;
+    background: rgba(255,255,255,0.2);
+    margin-left: 8px;
    cursor: pointer;
-    color: #777;
+    color: white;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.2s ease;
 }

 .remove:hover {
-    color: #c0392b;
+    background: rgba(255,255,255,0.4);
 }

 .button {
    margin-top: 20px;
-    padding: 8px 14px;
+    padding: 12px 20px;
    border: none;
-    border-radius: 6px;
-    background: #2563eb;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: white;
-    font-size: 13px;
+    font-size: 14px;
+    font-weight: 600;
    cursor: pointer;
+    transition: all 0.25s ease;
+    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
 }

 .button:hover {
-    background: #1d4ed8;
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
 }
-
 .graficas {
    display: flex;
    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.graficas > div {
+    background: white;
+    border-radius: 16px !important;
+    padding: 15px !important;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
+    transition: all 0.3s ease;
+}
+
+.graficas > div:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
 }

 .filtro {
    display: flex;
    gap: 10px;
+    flex-wrap: wrap;
+    align-items: start;
+    justify-content: space-between;
 }

 .containerSelection {
    width: 100%;
-    min-width: 200px
+    width: 200px
 }
@@ -0,0 +1,83 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import styles from './TableAntiguedad.module.css'
+import axios from 'axios'
+import DownloadTable from '@/components/Dowload/tabla'
+
+interface Props {
+  filtros: any
+  count: boolean
+}
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+export default function TableAntiguedad({ filtros, count }: Props) {
+
+  const [data, setData] = useState<any[]>([])
+
+  useEffect(() => {
+    const getUso = async () => {
+      const endpoint = count
+        ? `${api_url}/equipos/tabla/count`
+        : `${api_url}/equipos/tabla`
+
+      const response = await axios.post(endpoint, filtros)
+      setData(response.data)
+    }
+
+    getUso()
+  }, [filtros, count])
+
+  const columnas = data.length > 0 ? Object.keys(data[0]) : []
+
+  return (
+    <div className={styles.container}>
+      {count ? <DownloadTable filtros={filtros} count={true} /> : <DownloadTable filtros={filtros} count={false} />}
+      <table className={styles.table}>
+
+        <thead>
+          <tr>
+            {columnas.map((col) => (
+              <th key={col}>{formatearTitulo(col)}</th>
+            ))}
+          </tr>
+        </thead>
+
+        <tbody>
+          {data.length === 0 ? (
+            <tr>
+              <td colSpan={columnas.length} className={styles.empty}>
+                No hay datos
+              </td>
+            </tr>
+          ) : (
+            data.map((item, index) => (
+              <tr key={index}>
+                {columnas.map((col) => (
+                  <td key={col}>
+                    {item[col] ?? '-'}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+
+      </table>
+    </div>
+  )
+}
+
+function formatearTitulo(col: string) {
+  const nombres: any = {
+    inventario: 'No. Inventario',
+    adscripcion: 'Adscripción',
+    antiguedad: 'Antigüedad',
+    procesador: 'Procesador',
+    sistema_operativo: 'Sistema Operativo',
+    uso: 'Uso'
+  }
+
+  return nombres[col] || col
+}
@@ -0,0 +1,44 @@
+.container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  background: #ffffff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.table thead {
+  background: linear-gradient(135deg, #a5a5a5, #878787);
+  color: white;
+}
+
+.table th {
+  padding: 12px;
+  text-align: center;
+}
+
+.table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #eee;
+}
+
+.table tbody tr:hover {
+  background-color: #f5f8ff;
+  transition: 0.2s;
+}
+
+.total {
+  font-weight: bold;
+  color: #095bd6;
+}
+
+.empty {
+  text-align: center;
+  padding: 20px;
+  color: #999;
+}
@@ -11,6 +11,7 @@ import SistemaOperativo from "./Graficas/SistemaOperativo"
 import Uso from "./Graficas/Uso"

 import Cookies from "js-cookie";
+import TableAntiguedad from "./Tablas/Antiguedad"
 const api_url = process.env.NEXT_PUBLIC_API_URL;

 type AdscripcionOption = {
@@ -48,35 +49,51 @@ export default function Reporte() {
    const [sistemasOperativos, setSistemasOperativos] = useState<SoOption[]>([])
    const [soSeleccionado, setSoSeleccionado] = useState<SoOption[]>([])

-    const [usos, setUsos] = useState<UsoOption[]>([])
+    const [usos, setUsos] = useState<UsoOption[]>([{ id_uso: "0", tipo_uso: "Todos" }])
    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 [antiguedad, setAntiguedad] = useState<AntiguedadOption[]>([{ antiguedad: "Todos" }, { antiguedad: "Menor a 2 años" }, { antiguedad: "Entre 2 y 3 años" }, { antiguedad: "Entre 4 y 5 años" }, { antiguedad: "Mayor a 6 años" }])
    const [antiguedadSeleccionada, setAntiguedadSeleccionada] = useState<AntiguedadOption[]>([])

    const [filtros, setFiltros] = useState<any>(null)
+    const [filtrosTable, setFiltrosTable] = useState<any>(null)
+
    useEffect(() => {

        const cargarDatos = async () => {
-        const token = Cookies.get("token");
-        const headers = { Authorization: `Bearer ${token}` };
+            const 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 }),
+                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)
+            setAdscripciones([
+                { id_adscripcion: "0", adscripcion: "Todos" },
+                ...adscripcionRes.data
+            ])

+            setProcesadores([
+                { id_procesador: "0", procesador: "Todos" },
+                ...procesadorRes.data
+            ])
+
+            setUsos([
+                { id_uso: "0", tipo_uso: "Todos" },
+                ...usoRes.data
+            ])
+
+            setSistemasOperativos([
+                { id_sistema_operativo: "0", sistema_operativo: "Todos" },
+                ...soRes.data
+            ])
        }

        cargarDatos()
@@ -105,7 +122,12 @@ export default function Reporte() {

    const generarReporte = () => {

-        const filtros = {
+        const limpiar = (arr: string[]) => {
+            if (arr.includes("0")) return []
+            return arr
+        }
+
+        const filtrosTable = {
            adscripciones: adscripcionesSeleccionadas.map(a => String(a.id_adscripcion)),
            procesadores: procesadorSeleccionado.map(p => String(p.id_procesador)),
            sistemas: soSeleccionado.map(s => String(s.id_sistema_operativo)),
@@ -113,7 +135,16 @@ export default function Reporte() {
            antiguedad: antiguedadSeleccionada.map(u => String(u.antiguedad))
        }

+        const filtros = {
+            adscripciones: limpiar(adscripcionesSeleccionadas.map(a => String(a.id_adscripcion))),
+            procesadores: limpiar(procesadorSeleccionado.map(p => String(p.id_procesador))),
+            sistemas: limpiar(soSeleccionado.map(s => String(s.id_sistema_operativo))),
+            usos: limpiar(usoSeleccionado.map(u => String(u.id_uso))),
+            antiguedad: limpiar(antiguedadSeleccionada.map(a => String(a.antiguedad)))
+        }
+
        setFiltros(filtros)
+        setFiltrosTable(filtrosTable)

    }

@@ -350,6 +381,9 @@ export default function Reporte() {
                    filtros={filtros}
                />

+                <TableAntiguedad filtros={filtros} count={true} />
+                <TableAntiguedad filtros={filtrosTable} count={false} />
+
            </section>


@@ -0,0 +1,138 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    Legend,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis
+} from "recharts";
+import Cookies from "js-cookie";
+
+interface Props {
+    filtros: any
+}
+
+interface AntiguedadData {
+    adscripcion: string
+    antiguedad: string
+    total: number
+}
+
+const colores = [
+    "#818CF8",
+    "#34D399",
+    "#FBBF24",
+    "#F87171",
+    "#67E8F9",
+    "#C084FC"
+]
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+export default function Antiguedad({ filtros }: Props) {
+
+    const [data, setData] = useState<AntiguedadData[]>([])
+
+    useEffect(() => {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
+
+        const getAntiguedad = async () => {
+
+            const response = await axios.post(
+                `${api_url}/equipos/graficaPerifericos/antiguedad`,
+                filtros,
+                { headers }
+            )
+
+            setData(response.data)
+
+        }
+
+        getAntiguedad()
+
+    }, [filtros])
+
+    const tieneAdscripciones = data.some(d => d.adscripcion)
+
+    let dataTransformada = data
+    let adscripciones: string[] = []
+
+    if (tieneAdscripciones) {
+
+        adscripciones = [...new Set(data.map(d => d.adscripcion))]
+
+        dataTransformada = Object.values(
+            data.reduce((acc: any, item: any) => {
+
+                if (!acc[item.antiguedad]) {
+                    acc[item.antiguedad] = { antiguedad: item.antiguedad }
+                }
+
+                acc[item.antiguedad][item.adscripcion] = Number(item.total)
+
+                return acc
+
+            }, {})
+        )
+
+    }
+
+    return (
+        <div
+            style={{
+                minWidth: "570px",
+                background: "white",
+                borderRadius: "10px",
+                padding: "1rem",
+                maxWidth: "100%"
+            }}
+        >
+
+            <h1 style={{ margin: "0" }}>Antigüedad por equipo</h1>
+
+            <ResponsiveContainer width="100%" aspect={2.5}>
+
+                <BarChart
+                    data={dataTransformada}
+                    margin={{ top: 20 }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+
+                    <XAxis dataKey="antiguedad" fontSize={12} />
+
+                    <YAxis />
+                    <Tooltip
+                        formatter={(value) => [`${value}`]}
+                    />
+                    <Legend />
+                    {tieneAdscripciones ? (
+
+                        adscripciones.map((ads, i) => (
+                            <Bar
+                                key={ads}
+                                dataKey={ads}
+                                fill={colores[i % colores.length]}
+                            />
+                        ))
+
+                    ) : (
+
+                        <Bar
+                            dataKey="total"
+                            fill="#095bd6"
+                        />
+
+                    )}
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}
@@ -0,0 +1,105 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+interface Props {
+    filtros: any
+}
+
+interface procesador {
+    adscripcion: string
+    procesador: string;
+    total: number;
+}
+
+const colores = [
+    "#818CF8",
+    "#34D399",
+    "#FBBF24",
+    "#F87171",
+    "#67E8F9",
+    "#C084FC"
+]
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+export default function Procesador({ filtros }: Props) {
+    const [data, setData] = useState<procesador[]>([])
+
+    useEffect(() => {
+        const getAntiguedad = async () => {
+            const response = await axios.post(`${api_url}/equipos/graficaPerifericos/procesador`, filtros)
+
+            setData(response.data)
+        }
+        getAntiguedad()
+    }, [filtros])
+
+    const tieneAdscripciones = data.some(d => d.adscripcion)
+
+    let dataTransformada = data
+    let adscripciones: string[] = []
+
+    if (tieneAdscripciones) {
+
+        adscripciones = [...new Set(data.map(d => d.adscripcion))]
+
+        dataTransformada = Object.values(
+            data.reduce((acc: any, item: any) => {
+
+                if (!acc[item.procesador]) {
+                    acc[item.procesador] = { procesador: item.procesador }
+                }
+
+                acc[item.procesador][item.adscripcion] = Number(item.total)
+
+                return acc
+
+            }, {})
+        )
+    }
+
+    return (
+        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>Procesador por equipo</h1>
+            <ResponsiveContainer width="100%" aspect={3.5}>
+                <BarChart data={dataTransformada}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                        bottom: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="procesador" fontSize={12} angle={40} textAnchor="start" hide />
+                    <YAxis />
+                    <Tooltip
+                        formatter={(value) => [`${value}`]}
+                    />     
+                    <Legend />
+                    {tieneAdscripciones ? (
+
+                        adscripciones.map((ads, i) => (
+                            <Bar
+                                key={ads}
+                                dataKey={ads}
+                                fill={colores[i % colores.length]}
+                            />
+                        ))
+
+                    ) : (
+
+                        <Bar
+                            dataKey="total"
+                            fill="#095bd6"
+                        />
+
+                    )}
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}
@@ -0,0 +1,104 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+interface Props {
+    filtros: any
+}
+
+interface so {
+    adscripcion: string
+    so: string;
+    total: number;
+}
+
+const colores = [
+    "#818CF8",
+    "#34D399",
+    "#FBBF24",
+    "#F87171",
+    "#67E8F9",
+    "#C084FC"
+]
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+export default function SistemaOperativo({ filtros }: Props) {
+    const [data, setData] = useState<so[]>([])
+
+    useEffect(() => {
+        const getAntiguedad = async () => {
+            const response = await axios.post(`${api_url}/equipos/graficaPerifericos/so`, filtros)
+
+            setData(response.data)
+        }
+        getAntiguedad()
+    }, [filtros])
+
+    const tieneAdscripciones = data.some(d => d.adscripcion)
+
+    let dataTransformada = data
+    let adscripciones: string[] = []
+
+    if (tieneAdscripciones) {
+
+        adscripciones = [...new Set(data.map(d => d.adscripcion))]
+
+        dataTransformada = Object.values(
+            data.reduce((acc: any, item: any) => {
+
+                if (!acc[item.so]) {
+                    acc[item.so] = { so: item.so }
+                }
+
+                acc[item.so][item.adscripcion] = Number(item.total)
+
+                return acc
+
+            }, {})
+        )
+    }
+
+    return (
+        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>SistemaOperativo por equipo</h1>
+            <ResponsiveContainer width="100%" aspect={3.5}>
+                <BarChart data={dataTransformada}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide />
+                    <YAxis />
+                    <Tooltip
+                        formatter={(value) => [`${value}`]}
+                    />                         
+                    <Legend />
+                    {tieneAdscripciones ? (
+
+                        adscripciones.map((ads, i) => (
+                            <Bar
+                                key={ads}
+                                dataKey={ads}
+                                fill={colores[i % colores.length]}
+                            />
+                        ))
+
+                    ) : (
+
+                        <Bar
+                            dataKey="total"
+                            fill="#095bd6"
+                        />
+
+                    )}
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}
@@ -0,0 +1,107 @@
+'use client'
+
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+interface Props {
+    filtros: any
+}
+
+interface UsoData {
+    uso: string
+    adscripcion: string
+    total: number
+}
+
+const colores = [
+    "#818CF8",
+    "#34D399",
+    "#FBBF24",
+    "#F87171",
+    "#67E8F9",
+    "#C084FC"
+]
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+export default function Uso({ filtros }: Props) {
+    const [data, setData] = useState<UsoData[]>([])
+
+    useEffect(() => {
+        const getUso = async () => {
+            const response = await axios.post(
+                `${api_url}/equipos/graficaPerifericos/uso`, filtros
+            )
+            setData(response.data)
+        }
+        getUso()
+
+    }, [filtros])
+
+    const tieneAdscripciones = data.some(d => d.adscripcion)
+
+    let dataTransformada = data
+    let adscripciones: string[] = []
+
+    if (tieneAdscripciones) {
+
+        adscripciones = [...new Set(data.map(d => d.adscripcion))]
+
+        dataTransformada = Object.values(
+            data.reduce((acc: any, item: any) => {
+
+                if (!acc[item.uso]) {
+                    acc[item.uso] = { uso: item.uso }
+                }
+
+                acc[item.uso][item.adscripcion] = Number(item.total)
+
+                return acc
+
+            }, {})
+        )
+    }
+
+    return (
+        <div style={{ minWidth: "570px", background: "white", borderRadius: "10px", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>Uso por equipo</h1>
+            <ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
+                <BarChart data={dataTransformada}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="uso" fontSize={12} />
+                    <YAxis />
+                    <Tooltip
+                        formatter={(value) => [`${value}`]}
+                    />                    
+                    <Legend />
+                    {tieneAdscripciones ? (
+
+                        adscripciones.map((ads, i) => (
+                            <Bar
+                                key={ads}
+                                dataKey={ads}
+                                fill={colores[i % colores.length]}
+                            />
+                        ))
+
+                    ) : (
+
+                        <Bar
+                            dataKey="total"
+                            fill="#095bd6"
+                        />
+
+                    )}
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}
+//IO
@@ -0,0 +1,122 @@
+.container {
+    width: 100%;
+    margin: 0 auto;
+    padding: 20px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 14px;
+}
+
+.title {
+    font-size: 18px;
+    margin-bottom: 15px;
+}
+
+.label {
+    font-size: 13px;
+    color: #444;
+}
+
+.listaContainer {
+    margin-top: 20px;
+}
+
+.subtitle {
+    font-size: 14px;
+    margin-bottom: 10px;
+}
+
+.empty {
+    font-size: 13px;
+    color: #777;
+}
+
+.lista {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.chip {
+    display: flex;
+    align-items: center;
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    border-radius: 6px;
+    padding: 5px 10px;
+    font-size: 13px;
+    text-align: start;
+    color: white;
+}
+
+.remove {
+    border: none;
+    background: rgba(255,255,255,0.2);
+    margin-left: 8px;
+    cursor: pointer;
+    color: white;
+    border-radius: 50%;
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: all 0.2s ease;
+}
+
+.remove:hover {
+    background: rgba(255,255,255,0.4);
+}
+
+.button {
+    margin-top: 20px;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 10px;
+    background: linear-gradient(135deg, #2563eb, #4f46e5);
+    color: white;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
+}
+
+.button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
+}
+.graficas {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.graficas > div {
+    background: white;
+    border-radius: 16px !important;
+    padding: 15px !important;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
+    transition: all 0.3s ease;
+}
+
+.graficas > div:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
+}
+
+.filtro {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: start;
+    justify-content: space-between;
+}
+
+.containerSelection {
+    width: 100%;
+    width: 200px
+}
@@ -0,0 +1,83 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import styles from './TableAntiguedad.module.css'
+import axios from 'axios'
+import DownloadTable from '@/components/Dowload/tabla'
+
+interface Props {
+  filtros: any
+  count: boolean
+}
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+export default function TableAntiguedad({ filtros, count }: Props) {
+
+  const [data, setData] = useState<any[]>([])
+
+  useEffect(() => {
+    const getUso = async () => {
+      const endpoint = count
+        ? `${api_url}/equipos/tabla/count`
+        : `${api_url}/equipos/tabla`
+
+      const response = await axios.post(endpoint, filtros)
+      setData(response.data)
+    }
+
+    getUso()
+  }, [filtros, count])
+
+  const columnas = data.length > 0 ? Object.keys(data[0]) : []
+
+  return (
+    <div className={styles.container}>
+      {count ? <DownloadTable filtros={filtros} count={true} /> : <DownloadTable filtros={filtros} count={false} />}
+      <table className={styles.table}>
+
+        <thead>
+          <tr>
+            {columnas.map((col) => (
+              <th key={col}>{formatearTitulo(col)}</th>
+            ))}
+          </tr>
+        </thead>
+
+        <tbody>
+          {data.length === 0 ? (
+            <tr>
+              <td colSpan={columnas.length} className={styles.empty}>
+                No hay datos
+              </td>
+            </tr>
+          ) : (
+            data.map((item, index) => (
+              <tr key={index}>
+                {columnas.map((col) => (
+                  <td key={col}>
+                    {item[col] ?? '-'}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+
+      </table>
+    </div>
+  )
+}
+
+function formatearTitulo(col: string) {
+  const nombres: any = {
+    inventario: 'No. Inventario',
+    adscripcion: 'Adscripción',
+    antiguedad: 'Antigüedad',
+    procesador: 'Procesador',
+    sistema_operativo: 'Sistema Operativo',
+    uso: 'Uso'
+  }
+
+  return nombres[col] || col
+}
@@ -0,0 +1,44 @@
+.container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  background: #ffffff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.table thead {
+  background: linear-gradient(135deg, #a5a5a5, #878787);
+  color: white;
+}
+
+.table th {
+  padding: 12px;
+  text-align: center;
+}
+
+.table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid #eee;
+}
+
+.table tbody tr:hover {
+  background-color: #f5f8ff;
+  transition: 0.2s;
+}
+
+.total {
+  font-weight: bold;
+  color: #095bd6;
+}
+
+.empty {
+  text-align: center;
+  padding: 20px;
+  color: #999;
+}
@@ -0,0 +1,269 @@
+"use client"
+
+import Select from "react-select"
+import { useEffect, useState } from "react"
+import styles from "./Reporte.module.css"
+import axios from "axios"
+
+import Antiguedad from "./Graficas/Antiguedad"
+import Uso from "./Graficas/Uso"
+
+import Cookies from "js-cookie";
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+type UsoOption = {
+    id_uso: string
+    tipo_uso: string
+}
+
+type AntiguedadOption = {
+    antiguedad: string
+}
+
+export default function ReportePerifericos() {
+
+    const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
+    const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])
+
+
+    const [usos, setUsos] = useState<UsoOption[]>([{ id_uso: "0", tipo_uso: "Todos" }])
+    const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])
+
+    const [antiguedad, setAntiguedad] = useState<AntiguedadOption[]>([{ antiguedad: "Todos" }, { antiguedad: "Menor a 2 años" }, { antiguedad: "Entre 2 y 3 años" }, { antiguedad: "Entre 4 y 5 años" }, { antiguedad: "Mayor a 6 años" }])
+    const [antiguedadSeleccionada, setAntiguedadSeleccionada] = useState<AntiguedadOption[]>([])
+
+    const [filtros, setFiltros] = useState<any>(null)
+    const [filtrosTable, setFiltrosTable] = useState<any>(null)
+
+    useEffect(() => {
+
+        const cargarDatos = async () => {
+            const token = Cookies.get("token");
+            const headers = { Authorization: `Bearer ${token}` };
+            const [
+                adscripcionRes,
+                procesadorRes,
+                usoRes,
+                soRes,
+            ] = await Promise.all([
+                axios.get(`${api_url}/equipos/adscripciones`, { headers }),
+                axios.get(`${api_url}/equipos/procesador-tipo-equipos`, { headers }),
+                axios.get(`${api_url}/equipos/usos`, { headers }),
+                axios.get(`${api_url}/equipos/sistemas-operativos`, { headers }),
+            ])
+
+            setAdscripciones([
+                { id_adscripcion: "0", adscripcion: "Todos" },
+                ...adscripcionRes.data
+            ])
+
+            setUsos([
+                { id_uso: "0", tipo_uso: "Todos" },
+                ...usoRes.data
+            ])
+        }
+
+        cargarDatos()
+
+    }, [])
+
+    function agregar<T>(option: T | null, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
+
+        if (!option) return
+
+        const existe = lista.some((item) => item[key] === option[key])
+
+        if (!existe) {
+            setLista([...lista, option])
+        }
+
+    }
+
+    function eliminar<T>(id: string, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
+
+        setLista(
+            lista.filter((item) => item[key] !== id)
+        )
+
+    }
+
+    const generarReporte = () => {
+
+        const limpiar = (arr: string[]) => {
+            if (arr.includes("0")) return []
+            return arr
+        }
+
+        const filtrosTable = {
+            adscripciones: adscripcionesSeleccionadas.map(a => String(a.id_adscripcion)),
+            usos: usoSeleccionado.map(u => String(u.id_uso)),
+            antiguedad: antiguedadSeleccionada.map(u => String(u.antiguedad))
+        }
+
+        const filtros = {
+            adscripciones: limpiar(adscripcionesSeleccionadas.map(a => String(a.id_adscripcion))),
+            usos: limpiar(usoSeleccionado.map(u => String(u.id_uso))),
+            antiguedad: limpiar(antiguedadSeleccionada.map(a => String(a.antiguedad)))
+        }
+
+        setFiltros(filtros)
+        setFiltrosTable(filtrosTable)
+
+    }
+
+    return (
+        <>
+            <div className={styles.container}>
+
+                <section className={styles.filtro}>
+
+                    {/* ADSCRIPCION */}
+
+                    <div className={styles.containerSelection}>
+                        <label className={styles.adscripcion}>Adscripción</label>
+
+                        <Select
+                            options={adscripciones}
+                            getOptionLabel={(o) => o.adscripcion}
+                            getOptionValue={(o) => o.id_adscripcion}
+                            onChange={(o) => agregar(o, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
+                        />
+
+                        <div className={styles.lista}>
+
+                            {adscripcionesSeleccionadas.map((a) => (
+
+                                <div key={a.id_adscripcion} className={styles.chip}>
+
+                                    <span>{a.adscripcion}</span>
+
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() => eliminar(a.id_adscripcion, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
+                                    >
+                                        ✕
+                                    </button>
+
+                                </div>
+
+                            ))}
+
+                        </div>
+
+                    </div>
+
+                    {/* USO */}
+
+                    <div className={styles.containerSelection}>
+
+                        <label className={styles.adscripcion}>Uso</label>
+
+                        <Select
+                            options={usos}
+                            getOptionLabel={(o) => o.tipo_uso}
+                            getOptionValue={(o) => o.id_uso}
+                            onChange={(o) =>
+                                agregar(o, usoSeleccionado, setUsoSeleccionado, "id_uso")
+                            }
+                        />
+
+                        <div className={styles.lista}>
+
+                            {usoSeleccionado.map((u) => (
+
+                                <div key={u.id_uso} className={styles.chip}>
+
+                                    <span>{u.tipo_uso}</span>
+
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() =>
+                                            eliminar(u.id_uso, usoSeleccionado, setUsoSeleccionado, "id_uso")
+                                        }
+                                    >
+                                        ✕
+                                    </button>
+
+                                </div>
+
+                            ))}
+
+                        </div>
+
+                    </div>
+
+
+                    <div className={styles.containerSelection}>
+
+                        <label className={styles.adscripcion}>Antiguedad</label>
+
+                        <Select
+                            options={antiguedad}
+                            getOptionLabel={(o) => o.antiguedad}
+                            getOptionValue={(o) => o.antiguedad}
+                            onChange={(o) =>
+                                agregar(o, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
+                            }
+                        />
+
+                        <div className={styles.lista}>
+
+                            {antiguedadSeleccionada.map((p) => (
+
+                                <div key={p.antiguedad} className={styles.chip}>
+
+                                    <span>{p.antiguedad}</span>
+
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() =>
+                                            eliminar(p.antiguedad, antiguedadSeleccionada, setAntiguedadSeleccionada, "antiguedad")
+                                        }
+                                    >
+                                        ✕
+                                    </button>
+
+                                </div>
+
+                            ))}
+
+                        </div>
+
+                    </div>
+
+
+                </section>
+
+                <button
+                    className={styles.button}
+                    onClick={generarReporte}
+                >
+                    Buscar
+                </button>
+
+            </div>
+
+
+            <section className={styles.graficas}>
+
+                <Antiguedad
+                    filtros={filtros}
+                />
+
+                <Uso
+                    filtros={filtros}
+                />
+
+
+            </section>
+
+
+        </>
+    )
+
+}
@@ -3,8 +3,8 @@ 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"],
-  2: ["/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"],
 };

 export function proxy(request: NextRequest) {
Author	SHA1	Message	Date
Tyrannuss	6fcd5592e4	se agregaron vistas de graficas	2026-03-25 16:47:19 -06:00
Tyrannuss	13cdfce656	se agrego graficas por periferico	2026-03-23 18:54:53 -06:00
IO	797b3f6815	fixed grammar and deleted toggle button	2026-03-23 15:36:18 -05:00
IO	1219ca1e91	Merge branch 'Carlos' of https://repositorio.acatlan.unam.mx/IO/front-Censo into Lino	2026-03-20 17:57:33 -05:00
frcarlos	7ee30a6f20	biblioteca_hotmap	2026-03-20 15:33:32 -04:00
IO	179a968e3e	added dependencies	2026-03-20 13:48:48 -05:00
IO	bae1f99e5c	Merge branch 'Carlos' of repositorio.acatlan.unam.mx:IO/front-Censo into Lino	2026-03-20 13:48:18 -05:00
frcarlos	725bc15f63	hotmap	2026-03-20 14:47:09 -04:00
IO	2dfeea0cb4	merge carlos and fixed table	2026-03-20 13:43:38 -05:00
IO	811f5e7c0e	Merge branch 'Carlos' of repositorio.acatlan.unam.mx:IO/front-Censo into Lino	2026-03-20 11:54:51 -05:00
frcarlos	7833d38b3e	poligonos_edificios	2026-03-19 20:43:46 -04:00
frcarlos	08bca7742b	cedetec	2026-03-19 19:01:47 -04:00
frcarlos	48885dd8e7	a6-a15	2026-03-19 16:38:48 -04:00
IO	7b2f33b2b4	added option todos to filter	2026-03-19 10:54:30 -05:00
frcarlos	c400623c25	a1-a10	2026-03-18 20:36:29 -04:00
IO	6c7be89a01	new tabla and new dowload	2026-03-18 18:38:01 -05:00
frcarlos	a6ef226bec	cordenadas a1-a6	2026-03-18 18:14:24 -04:00
frcarlos	c444b9f37a	cordenasdeedf a1-a6	2026-03-18 18:10:54 -04:00
frcarlos	deae0cde7c	hotmap	2026-03-13 21:32:26 -04:00
IO	c1a9e5d195	added something	2026-03-13 19:57:24 -05:00
IO	9b203020f6	npm audit fixed	2026-03-13 19:48:02 -05:00
IO	451915e858	added new colors to know that is what adscription	2026-03-13 19:46:49 -05:00
frcarlos	188fb18b51	hotmap	2026-03-12 20:11:45 -04:00