Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 stern
|
a58c80e9ee |
@@ -0,0 +1,81 @@
|
|||||||
|
name: Despliegue Automatizado Universal
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- develop
|
||||||
|
- master
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
# 1. PASO INTELIGENTE: Obtiene el contexto y lee apps.conf usando la ruta actual
|
||||||
|
get-context:
|
||||||
|
runs-on: host
|
||||||
|
outputs:
|
||||||
|
node_version: ${{ steps.setup.outputs.version }}
|
||||||
|
target_app: ${{ steps.setup.outputs.app }}
|
||||||
|
steps:
|
||||||
|
- name: Resolver Aplicación desde apps.conf por Ruta
|
||||||
|
id: setup
|
||||||
|
run: |
|
||||||
|
# 1. Obtener la ruta absoluta donde está clonado este proyecto en el runner (ej: /var/www/html/front/pruebas/presupuesto)
|
||||||
|
CURRENT_PATH=$(pwd)
|
||||||
|
|
||||||
|
echo "Buscando qué sección de apps.conf coincide con la ruta: $CURRENT_PATH"
|
||||||
|
|
||||||
|
# 2. Buscar en apps.conf el bloque que tenga exactamente ese APP_PATH
|
||||||
|
# Usamos awk para encontrar el bloque [nombre] asociado a esa ruta
|
||||||
|
TARGET_APP=$(awk -v path="$CURRENT_PATH" '
|
||||||
|
/^\[/ { gsub(/[\[\]]/, "", $0); current_box=$0; next }
|
||||||
|
$0 ~ "^APP_PATH="path"$" { print current_box; exit }
|
||||||
|
' /home/deploy/apps.conf)
|
||||||
|
|
||||||
|
if [ -z "$TARGET_APP" ]; then
|
||||||
|
echo "ERROR: No se encontró ninguna aplicación en apps.conf que coincida con la ruta $CURRENT_PATH"
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
# 3. Una vez que sabemos el nombre del bloque (ej: presupuesto-dev), leemos su versión de Node
|
||||||
|
VERSION=$(awk -v app="$TARGET_APP" '
|
||||||
|
$0=="["app"]" { found=1; next }
|
||||||
|
/^\[/ && found { exit }
|
||||||
|
found && /^NODE=/ { split($0, a, "="); print a[2]; exit }
|
||||||
|
' /home/deploy/apps.conf)
|
||||||
|
|
||||||
|
MAJOR_VERSION=$(echo "$VERSION" | tr -d '[:space:]' | grep -oE '[0-9]+' | head -n1)
|
||||||
|
|
||||||
|
echo "-> ID de Aplicación encontrado: $TARGET_APP"
|
||||||
|
echo "-> Versión Mayor de Node resuelta: $MAJOR_VERSION"
|
||||||
|
|
||||||
|
# Exportar variables para los siguientes pasos
|
||||||
|
echo "app=${TARGET_APP}" >> $GITHUB_OUTPUT
|
||||||
|
echo "version=${MAJOR_VERSION}" >> $GITHUB_OUTPUT
|
||||||
|
|
||||||
|
# 2. PASO DE COMPILACIÓN: Se ejecuta seguro en Docker con la versión correcta
|
||||||
|
build:
|
||||||
|
needs: get-context
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Configurar Node.js dinámicamente
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: ${{ needs.get-context.outputs.node_version }}
|
||||||
|
|
||||||
|
- run: npm ci
|
||||||
|
- run: npm run build
|
||||||
|
|
||||||
|
# 3. PASO DE DESPLIEGUE: Invoca tu script enviando el ID dinámico
|
||||||
|
deploy:
|
||||||
|
needs: [get-context, build]
|
||||||
|
runs-on: host
|
||||||
|
steps:
|
||||||
|
- name: Ejecutar Despliegue en Servidor Físico
|
||||||
|
run: |
|
||||||
|
TARGET_APP="${{ needs.get-context.outputs.target_app }}"
|
||||||
|
BRANCH_NAME="${{ github.ref_name }}"
|
||||||
|
|
||||||
|
echo "Iniciando script de despliegue para el identificador: $TARGET_APP"
|
||||||
|
|
||||||
|
# Llama a tu script pasándole el ID que descubrimos en el primer paso
|
||||||
|
sudo -u deploy /home/deploy/scripts/deploy-front.sh "$TARGET_APP" "$BRANCH_NAME"
|
||||||
Generated
+8
-24
@@ -1387,7 +1387,6 @@
|
|||||||
"version": "2.5.1",
|
"version": "2.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
|
||||||
"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
|
"integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
|
||||||
"dev": true,
|
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
@@ -1427,7 +1426,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1448,7 +1446,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1469,7 +1466,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1490,7 +1486,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1511,7 +1506,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1532,7 +1526,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm"
|
"arm"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1553,7 +1546,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1574,7 +1566,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1595,7 +1586,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1616,7 +1606,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1637,7 +1626,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"arm64"
|
"arm64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1658,7 +1646,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"ia32"
|
"ia32"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -1679,7 +1666,6 @@
|
|||||||
"cpu": [
|
"cpu": [
|
||||||
"x64"
|
"x64"
|
||||||
],
|
],
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"os": [
|
"os": [
|
||||||
@@ -2893,7 +2879,7 @@
|
|||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
|
||||||
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
|
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"fill-range": "^7.1.1"
|
"fill-range": "^7.1.1"
|
||||||
@@ -3406,7 +3392,6 @@
|
|||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
|
||||||
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
|
"integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
|
||||||
"dev": true,
|
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"optional": true,
|
"optional": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
@@ -4189,7 +4174,7 @@
|
|||||||
"version": "7.1.1",
|
"version": "7.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||||
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
|
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"to-regex-range": "^5.0.1"
|
"to-regex-range": "^5.0.1"
|
||||||
@@ -4874,7 +4859,7 @@
|
|||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||||
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
@@ -4920,7 +4905,7 @@
|
|||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
|
||||||
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"is-extglob": "^2.1.1"
|
"is-extglob": "^2.1.1"
|
||||||
@@ -4959,7 +4944,7 @@
|
|||||||
"version": "7.0.0",
|
"version": "7.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.12.0"
|
"node": ">=0.12.0"
|
||||||
@@ -5399,7 +5384,7 @@
|
|||||||
"version": "4.0.8",
|
"version": "4.0.8",
|
||||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
|
||||||
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
|
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"braces": "^3.0.3",
|
"braces": "^3.0.3",
|
||||||
@@ -5557,7 +5542,6 @@
|
|||||||
"version": "7.1.1",
|
"version": "7.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
||||||
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
@@ -5833,7 +5817,7 @@
|
|||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=8.6"
|
"node": ">=8.6"
|
||||||
@@ -6834,7 +6818,7 @@
|
|||||||
"version": "5.0.1",
|
"version": "5.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"is-number": "^7.0.0"
|
"is-number": "^7.0.0"
|
||||||
|
|||||||
@@ -1,34 +1,24 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import Reporte from "@/components/reporteGraficas/reporte";
|
|
||||||
import ReportePerifericos from "@/components/reporte_graficas_perifericos/reporte";
|
|
||||||
import "../../styles/layout/reporte.scss";
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
import Reporte from "@/components/reporteGraficas/reporte";
|
||||||
|
|
||||||
|
import "../../styles/layout/reporte.scss";
|
||||||
|
|
||||||
type PreguntaKey = "reporteGraficas" | "reporte_graficas_perifericos";
|
type PreguntaKey = "antiguedad";
|
||||||
|
|
||||||
const LABELS: Record<PreguntaKey, string> = {
|
const LABELS: Record<PreguntaKey, string> = {
|
||||||
reporteGraficas: "Reporte por equipos",
|
antiguedad: "Antigüedad",
|
||||||
reporte_graficas_perifericos: "Reporte por perifericos",
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const [activeTab, setActiveTab] = useState<PreguntaKey>("reporteGraficas");
|
const [activeTab, setActiveTab] = useState<PreguntaKey>("antiguedad");
|
||||||
|
|
||||||
const renderPregunta = () => {
|
const renderPregunta = () => {
|
||||||
switch (activeTab) {
|
switch (activeTab) {
|
||||||
case "reporteGraficas":
|
case "antiguedad":
|
||||||
return (
|
return (
|
||||||
<>
|
<Reporte />
|
||||||
<Reporte />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
case "reporte_graficas_perifericos":
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ReportePerifericos />
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
default:
|
default:
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -41,17 +41,17 @@ function BarNavigation() {
|
|||||||
</li> */}
|
</li> */}
|
||||||
<li className="subMenu" onClick={toggleMenu}>
|
<li className="subMenu" onClick={toggleMenu}>
|
||||||
<Link href="/equipoComputo" className="links">
|
<Link href="/equipoComputo" className="links">
|
||||||
<span>Equipo de Cómputo</span>
|
<span>Equipo de Computo</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="subMenu" onClick={toggleMenu}>
|
<li className="subMenu" onClick={toggleMenu}>
|
||||||
<Link href="/perifericos" className="links">
|
<Link href="/perifericos" className="links">
|
||||||
<span>Periféricos</span>
|
<span>Perifericos</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="subMenu" onClick={toggleMenu}>
|
<li className="subMenu" onClick={toggleMenu}>
|
||||||
<Link href="/reportesGraficas" className="links">
|
<Link href="/reportesGraficas" className="links">
|
||||||
<span>Reportes y Gráficas</span>
|
<span>Reportes y Graficas</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="subMenu">
|
<li className="subMenu">
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ export default function Antiguedad({ filtros }: Props) {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
||||||
<h1 style={{ margin: "0" }}>Antigüedad por equipo</h1>
|
<h1 style={{ margin: "0" }}>Antigüedad</h1>
|
||||||
|
|
||||||
<ResponsiveContainer width="100%" aspect={2.5}>
|
<ResponsiveContainer width="100%" aspect={2.5}>
|
||||||
|
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ export default function Procesador({ filtros }: Props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
|
<div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
|
||||||
<h1 style={{ margin: "0" }}>Procesador por equipo</h1>
|
<h1 style={{ margin: "0" }}>Procesador</h1>
|
||||||
<ResponsiveContainer width="100%" aspect={3.5}>
|
<ResponsiveContainer width="100%" aspect={3.5}>
|
||||||
<BarChart data={dataTransformada}
|
<BarChart data={dataTransformada}
|
||||||
width={500}
|
width={500}
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ export default function SistemaOperativo({ filtros }: Props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
|
<div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
|
||||||
<h1 style={{ margin: "0" }}>SistemaOperativo por equipo</h1>
|
<h1 style={{ margin: "0" }}>SistemaOperativo</h1>
|
||||||
<ResponsiveContainer width="100%" aspect={3.5}>
|
<ResponsiveContainer width="100%" aspect={3.5}>
|
||||||
<BarChart data={dataTransformada}
|
<BarChart data={dataTransformada}
|
||||||
width={500}
|
width={500}
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ export default function Uso({ filtros }: Props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ minWidth: "570px", background: "white", borderRadius: "10px", padding: "1rem" }}>
|
<div style={{ minWidth: "570px", background: "white", borderRadius: "10px", padding: "1rem" }}>
|
||||||
<h1 style={{ margin: "0" }}>Uso por equipo</h1>
|
<h1 style={{ margin: "0" }}>Uso</h1>
|
||||||
<ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
|
<ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
|
||||||
<BarChart data={dataTransformada}
|
<BarChart data={dataTransformada}
|
||||||
width={500}
|
width={500}
|
||||||
|
|||||||
@@ -1,138 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import {
|
|
||||||
Bar,
|
|
||||||
BarChart,
|
|
||||||
CartesianGrid,
|
|
||||||
Legend,
|
|
||||||
ResponsiveContainer,
|
|
||||||
Tooltip,
|
|
||||||
XAxis,
|
|
||||||
YAxis
|
|
||||||
} from "recharts";
|
|
||||||
import Cookies from "js-cookie";
|
|
||||||
|
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
|
||||||
|
|
||||||
interface 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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,104 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
|
||||||
|
|
||||||
interface 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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import axios from "axios";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
|
||||||
|
|
||||||
interface 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
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
.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
|
|
||||||
}
|
|
||||||
@@ -1,83 +0,0 @@
|
|||||||
'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
|
|
||||||
}
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@@ -1,269 +0,0 @@
|
|||||||
"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>
|
|
||||||
|
|
||||||
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user