From 6c7be89a01eb2841a0ec9f50aa1a0c8020ed1fb8 Mon Sep 17 00:00:00 2001 From: IO <320154041@pcpuma.acatlan.unam.mx> Date: Wed, 18 Mar 2026 18:38:01 -0500 Subject: [PATCH] new tabla and new dowload --- src/components/Dowload/Reporte.tsx | 8 +- src/components/Dowload/tabla.tsx | 74 +++++++++++++++++ src/components/Dowload/tablaCount.tsx | 57 +++++++++++++ .../reporteGraficas/Graficas/Antiguedad.tsx | 17 ++-- .../reporteGraficas/Graficas/Procesador.tsx | 18 ++-- .../Graficas/SistemaOperativo.tsx | 16 ++-- .../reporteGraficas/Graficas/Uso.tsx | 18 ++-- .../reporteGraficas/Reporte.module.css | 54 +++++++++--- .../reporteGraficas/Tablas/Antiguedad.tsx | 83 +++++++++++++++++++ .../Tablas/TableAntiguedad.module.css | 44 ++++++++++ src/components/reporteGraficas/reporte.tsx | 16 ++-- src/proxy.ts | 10 +-- 12 files changed, 353 insertions(+), 62 deletions(-) create mode 100644 src/components/Dowload/tabla.tsx create mode 100644 src/components/Dowload/tablaCount.tsx create mode 100644 src/components/reporteGraficas/Tablas/Antiguedad.tsx create mode 100644 src/components/reporteGraficas/Tablas/TableAntiguedad.module.css diff --git a/src/components/Dowload/Reporte.tsx b/src/components/Dowload/Reporte.tsx index f14187f..6ad3a5b 100644 --- a/src/components/Dowload/Reporte.tsx +++ b/src/components/Dowload/Reporte.tsx @@ -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() { + ); +} \ No newline at end of file diff --git a/src/components/Dowload/tablaCount.tsx b/src/components/Dowload/tablaCount.tsx new file mode 100644 index 0000000..0ef99e0 --- /dev/null +++ b/src/components/Dowload/tablaCount.tsx @@ -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 ( + + ); +} diff --git a/src/components/reporteGraficas/Graficas/Antiguedad.tsx b/src/components/reporteGraficas/Graficas/Antiguedad.tsx index b1e9c68..6c3489e 100644 --- a/src/components/reporteGraficas/Graficas/Antiguedad.tsx +++ b/src/components/reporteGraficas/Graficas/Antiguedad.tsx @@ -25,12 +25,12 @@ interface AntiguedadData { } const colores = [ - "#095bd6", - "#e63946", - "#2a9d8f", - "#f4a261", - "#8d5cf6", - "#ff006e" + "#818CF8", + "#34D399", + "#FBBF24", + "#F87171", + "#67E8F9", + "#C084FC" ] const api_url = process.env.NEXT_PUBLIC_API_URL; @@ -90,7 +90,6 @@ export default function Antiguedad({ filtros }: Props) { minWidth: "570px", background: "white", borderRadius: "10px", - margin: "5px auto", padding: "1rem", maxWidth: "100%" }} @@ -109,7 +108,9 @@ export default function Antiguedad({ filtros }: Props) { - + [`${value}`]} + /> {tieneAdscripciones ? ( diff --git a/src/components/reporteGraficas/Graficas/Procesador.tsx b/src/components/reporteGraficas/Graficas/Procesador.tsx index 9f405ef..55a7eb0 100644 --- a/src/components/reporteGraficas/Graficas/Procesador.tsx +++ b/src/components/reporteGraficas/Graficas/Procesador.tsx @@ -15,12 +15,12 @@ interface procesador { } const colores = [ - "#095bd6", - "#e63946", - "#2a9d8f", - "#f4a261", - "#8d5cf6", - "#ff006e" + "#818CF8", + "#34D399", + "#FBBF24", + "#F87171", + "#67E8F9", + "#C084FC" ] const api_url = process.env.NEXT_PUBLIC_API_URL; @@ -64,7 +64,7 @@ export default function Procesador({ filtros }: Props) { return (

Procesador

- + - + [`${value}`]} + /> {tieneAdscripciones ? ( diff --git a/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx index d1c9f66..9fc867b 100644 --- a/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx +++ b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx @@ -15,12 +15,12 @@ interface so { } const colores = [ - "#095bd6", - "#e63946", - "#2a9d8f", - "#f4a261", - "#8d5cf6", - "#ff006e" + "#818CF8", + "#34D399", + "#FBBF24", + "#F87171", + "#67E8F9", + "#C084FC" ] const api_url = process.env.NEXT_PUBLIC_API_URL; @@ -75,7 +75,9 @@ export default function SistemaOperativo({ filtros }: Props) { - + [`${value}`]} + /> {tieneAdscripciones ? ( diff --git a/src/components/reporteGraficas/Graficas/Uso.tsx b/src/components/reporteGraficas/Graficas/Uso.tsx index 4dd2e79..f7b7d00 100644 --- a/src/components/reporteGraficas/Graficas/Uso.tsx +++ b/src/components/reporteGraficas/Graficas/Uso.tsx @@ -15,12 +15,12 @@ interface UsoData { } const colores = [ - "#095bd6", - "#e63946", - "#2a9d8f", - "#f4a261", - "#8d5cf6", - "#ff006e" + "#818CF8", + "#34D399", + "#FBBF24", + "#F87171", + "#67E8F9", + "#C084FC" ] const api_url = process.env.NEXT_PUBLIC_API_URL; @@ -64,7 +64,7 @@ export default function Uso({ filtros }: Props) { } return ( -
+

Uso

- + [`${value}`]} + /> {tieneAdscripciones ? ( diff --git a/src/components/reporteGraficas/Reporte.module.css b/src/components/reporteGraficas/Reporte.module.css index 4ae6357..f0cff8d 100644 --- a/src/components/reporteGraficas/Reporte.module.css +++ b/src/components/reporteGraficas/Reporte.module.css @@ -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 } \ No newline at end of file diff --git a/src/components/reporteGraficas/Tablas/Antiguedad.tsx b/src/components/reporteGraficas/Tablas/Antiguedad.tsx new file mode 100644 index 0000000..5e97454 --- /dev/null +++ b/src/components/reporteGraficas/Tablas/Antiguedad.tsx @@ -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([]) + + 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 ( +
+ {count ? : } + + + + + {columnas.map((col) => ( + + ))} + + + + + {data.length === 0 ? ( + + + + ) : ( + data.map((item, index) => ( + + {columnas.map((col) => ( + + ))} + + )) + )} + + +
{formatearTitulo(col)}
+ No hay datos +
+ {item[col] ?? '-'} +
+
+ ) +} + +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 +} \ No newline at end of file diff --git a/src/components/reporteGraficas/Tablas/TableAntiguedad.module.css b/src/components/reporteGraficas/Tablas/TableAntiguedad.module.css new file mode 100644 index 0000000..1da810f --- /dev/null +++ b/src/components/reporteGraficas/Tablas/TableAntiguedad.module.css @@ -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; +} \ No newline at end of file diff --git a/src/components/reporteGraficas/reporte.tsx b/src/components/reporteGraficas/reporte.tsx index 7cf6eb2..decc5cc 100644 --- a/src/components/reporteGraficas/reporte.tsx +++ b/src/components/reporteGraficas/reporte.tsx @@ -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 = { @@ -58,18 +59,18 @@ export default function Reporte() { 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) @@ -350,6 +351,9 @@ export default function Reporte() { filtros={filtros} /> + + + diff --git a/src/proxy.ts b/src/proxy.ts index c022580..3dc98ec 100644 --- a/src/proxy.ts +++ b/src/proxy.ts @@ -35,15 +35,7 @@ export function proxy(request: NextRequest) { export const config = { matcher: [ - "/escaner", - "/agregarEquipo", - "/editar", - "/crearCuenta", - "/equipoComputo", - "/perifericos", - "/ranking", - "/historial", - "/cambiarPass" + ], }; //IO