From e698a54dc25a6f66e5f9ed60570e45be3e11828d Mon Sep 17 00:00:00 2001 From: IO <320154041@pcpuma.acatlan.unam.mx> Date: Fri, 13 Mar 2026 15:15:24 -0500 Subject: [PATCH] added filter and grafics --- .../(Administrador)/reportesGraficas/page.tsx | 8 +- .../AntiguedadEquipo/Antiguedad.tsx | 43 --- .../reporteGraficas/Graficas/Antiguedad.tsx | 47 +++ .../reporteGraficas/Graficas/Procesador.tsx | 47 +++ .../Graficas/SistemaOperativo.tsx | 46 +++ .../reporteGraficas/Graficas/Uso.tsx | 46 +++ .../reporteGraficas/Reporte.module.css | 118 ++++--- src/components/reporteGraficas/reporte.tsx | 314 +++++++++++++++--- src/proxy.ts | 9 - 9 files changed, 517 insertions(+), 161 deletions(-) delete mode 100644 src/components/AntiguedadEquipo/Antiguedad.tsx create mode 100644 src/components/reporteGraficas/Graficas/Antiguedad.tsx create mode 100644 src/components/reporteGraficas/Graficas/Procesador.tsx create mode 100644 src/components/reporteGraficas/Graficas/SistemaOperativo.tsx create mode 100644 src/components/reporteGraficas/Graficas/Uso.tsx diff --git a/src/app/(Administrador)/reportesGraficas/page.tsx b/src/app/(Administrador)/reportesGraficas/page.tsx index 03e24d7..04d6383 100644 --- a/src/app/(Administrador)/reportesGraficas/page.tsx +++ b/src/app/(Administrador)/reportesGraficas/page.tsx @@ -3,15 +3,13 @@ import { useState } from "react"; import DownloadReporteXLSX from "@/components/Dowload/Reporte"; import Reporte from "@/components/reporteGraficas/reporte"; -import Antiguedad from "@/components/AntiguedadEquipo/Antiguedad"; import "../../styles/layout/reporte.scss"; -type PreguntaKey = "antiguedad" | "adscripcion"; +type PreguntaKey = "antiguedad"; const LABELS: Record = { antiguedad: "Antigüedad", - adscripcion: "Antigüedad por Adscripcion" }; export default function Page() { @@ -20,10 +18,6 @@ export default function Page() { const renderPregunta = () => { switch (activeTab) { case "antiguedad": - return ( - - ); - case "adscripcion": return ( ); diff --git a/src/components/AntiguedadEquipo/Antiguedad.tsx b/src/components/AntiguedadEquipo/Antiguedad.tsx deleted file mode 100644 index 33f2864..0000000 --- a/src/components/AntiguedadEquipo/Antiguedad.tsx +++ /dev/null @@ -1,43 +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 antiguedad{ - antiguedad:string; - total:number; -} - -export default function Antiguedad() { - const [antiguedad,setAntiguedad]=useState([]) - - useEffect(()=>{ - const getAntiguedad = async()=>{ - const response = await axios.get("http://localhost:3001/equipos/grafica") - - setAntiguedad(response.data) - } - getAntiguedad() - },[]) - - return ( - - - - - - - - - - - - ) -} \ No newline at end of file diff --git a/src/components/reporteGraficas/Graficas/Antiguedad.tsx b/src/components/reporteGraficas/Graficas/Antiguedad.tsx new file mode 100644 index 0000000..ade738e --- /dev/null +++ b/src/components/reporteGraficas/Graficas/Antiguedad.tsx @@ -0,0 +1,47 @@ +'use client' + +import axios from "axios"; +import { useEffect, useState } from "react"; +import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"; + +interface antiguedad { + antiguedad: string; + total: number; +} + +export default function Antiguedad() { +const [antiguedad, setAntiguedad] = useState([ + { antiguedad: "0", total: 0 } +]) + useEffect(() => { + const getAntiguedad = async () => { + const response = await axios.get("http://localhost:3001/equipos/grafica/antiguedad") + + setAntiguedad(response.data) + } + getAntiguedad() + }, []) + + return ( +
+

Antigüedad

+ + + + + + + + + + + +
+ ) +} \ No newline at end of file diff --git a/src/components/reporteGraficas/Graficas/Procesador.tsx b/src/components/reporteGraficas/Graficas/Procesador.tsx new file mode 100644 index 0000000..a808731 --- /dev/null +++ b/src/components/reporteGraficas/Graficas/Procesador.tsx @@ -0,0 +1,47 @@ +'use client' + +import axios from "axios"; +import { useEffect, useState } from "react"; +import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"; + +interface antiguedad { + procesador: string; + total: number; +} + +export default function Procesador() { + const [antiguedad, setAntiguedad] = useState([]) + + useEffect(() => { + const getAntiguedad = async () => { + const response = await axios.get("http://localhost:3001/equipos/grafica/procesador") + + setAntiguedad(response.data) + } + getAntiguedad() + }, []) + + return ( +
+

Procesador

+ + + + + + + + + + + +
+ ) +} \ No newline at end of file diff --git a/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx new file mode 100644 index 0000000..3ab37cf --- /dev/null +++ b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx @@ -0,0 +1,46 @@ +'use client' + +import axios from "axios"; +import { useEffect, useState } from "react"; +import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"; + +interface antiguedad { + so: string; + total: number; +} + +export default function SistemaOperativo() { + const [antiguedad, setAntiguedad] = useState([]) + + useEffect(() => { + const getAntiguedad = async () => { + const response = await axios.get("http://localhost:3001/equipos/grafica/so") + + setAntiguedad(response.data) + } + getAntiguedad() + }, []) + + return ( +
+

SistemaOperativo

+ + + + + + + + + + + +
+ ) +} \ No newline at end of file diff --git a/src/components/reporteGraficas/Graficas/Uso.tsx b/src/components/reporteGraficas/Graficas/Uso.tsx new file mode 100644 index 0000000..57337c8 --- /dev/null +++ b/src/components/reporteGraficas/Graficas/Uso.tsx @@ -0,0 +1,46 @@ +'use client' + +import axios from "axios"; +import { useEffect, useState } from "react"; +import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"; + +interface antiguedad { + uso: string; + total: number; +} + +export default function Uso() { + const [antiguedad, setAntiguedad] = useState([]) + + useEffect(() => { + const getAntiguedad = async () => { + const response = await axios.get("http://localhost:3001/equipos/grafica/uso") + + setAntiguedad(response.data) + } + getAntiguedad() + }, []) + + return ( +
+

Uso

+ + + + + + + + + + + +
+ ) +} \ No newline at end of file diff --git a/src/components/reporteGraficas/Reporte.module.css b/src/components/reporteGraficas/Reporte.module.css index ecab6bc..4ae6357 100644 --- a/src/components/reporteGraficas/Reporte.module.css +++ b/src/components/reporteGraficas/Reporte.module.css @@ -1,76 +1,92 @@ -.container{ +.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; + 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; +.title { + font-size: 18px; + margin-bottom: 15px; } -.label{ - font-size:13px; - color:#444; +.label { + font-size: 13px; + color: #444; } -.listaContainer{ - margin-top:20px; +.listaContainer { + margin-top: 20px; } -.subtitle{ - font-size:14px; - margin-bottom:10px; +.subtitle { + font-size: 14px; + margin-bottom: 10px; } -.empty{ - font-size:13px; - color:#777; +.empty { + font-size: 13px; + color: #777; } -.lista{ - display:flex; - flex-wrap:wrap; - gap:8px; +.lista { + display: flex; + flex-wrap: wrap; + gap: 8px; } -.chip{ - display:flex; - align-items:center; - background:#f1f3f5; - border-radius:20px; - padding:5px 10px; - font-size:13px; +.chip { + display: flex; + align-items: center; + background: #f1f3f5; + border-radius: 6px; + padding: 5px 10px; + font-size: 13px; + text-align: start; } -.remove{ - border:none; - background:none; - margin-left:6px; - cursor:pointer; - color:#777; +.remove { + border: none; + background: none; + margin-left: 6px; + cursor: pointer; + color: #777; } -.remove:hover{ - color:#c0392b; +.remove:hover { + color: #c0392b; } -.button{ - margin-top:20px; - padding:8px 14px; - border:none; - border-radius:6px; - background:#2563eb; - color:white; - font-size:13px; - cursor:pointer; +.button { + margin-top: 20px; + padding: 8px 14px; + border: none; + border-radius: 6px; + background: #2563eb; + color: white; + font-size: 13px; + cursor: pointer; } -.button:hover{ - background:#1d4ed8; +.button:hover { + background: #1d4ed8; +} + +.graficas { + display: flex; + flex-wrap: wrap; +} + +.filtro { + display: flex; + gap: 10px; +} + +.containerSelection { + width: 100%; + min-width: 200px } \ No newline at end of file diff --git a/src/components/reporteGraficas/reporte.tsx b/src/components/reporteGraficas/reporte.tsx index bc93506..2002aba 100644 --- a/src/components/reporteGraficas/reporte.tsx +++ b/src/components/reporteGraficas/reporte.tsx @@ -1,99 +1,311 @@ "use client" import Select from "react-select" -import { useState } from "react" +import { useEffect, useState } from "react" import styles from "./Reporte.module.css" +import axios from "axios" + +import Antiguedad from "./Graficas/Antiguedad" +import Procesador from "./Graficas/Procesador" +import SistemaOperativo from "./Graficas/SistemaOperativo" +import Uso from "./Graficas/Uso" type AdscripcionOption = { - value: string - label: string + id_adscripcion: string + adscripcion: string +} + +type UsoOption = { + id_uso: string + tipo_uso: string +} + +type SoOption = { + id_sistema_operativo: string + sistema_operativo: string +} + +type ProcesadorOption = { + id_procesador: string + procesador: string } export default function Reporte() { + const [adscripciones, setAdscripciones] = useState([]) const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState([]) - const adscripciones: AdscripcionOption[] = [ - { value: "informatica", label: "Informática" }, - { value: "rh", label: "Recursos Humanos" }, - { value: "finanzas", label: "Finanzas" }, - { value: "juridico", label: "Jurídico" } - ] + const [procesadores, setProcesadores] = useState([]) + const [procesadorSeleccionado, setProcesadorSeleccionado] = useState([]) - const agregarAdscripcion = (option: AdscripcionOption | null) => { + const [sistemasOperativos, setSistemasOperativos] = useState([]) + const [soSeleccionado, setSoSeleccionado] = useState([]) + + const [usos, setUsos] = useState([]) + const [usoSeleccionado, setUsoSeleccionado] = useState([]) + + + const [antiguedadActiva, setAntiguedadActiva] = useState(false) + + useEffect(() => { + + const cargarDatos = async () => { + + const [ + adscripcionRes, + procesadorRes, + usoRes, + soRes + ] = await Promise.all([ + axios.get("http://localhost:3001/equipos/adscripciones"), + axios.get("http://localhost:3001/equipos/procesador-tipo-equipos"), + axios.get("http://localhost:3001/equipos/usos"), + axios.get("http://localhost:3001/equipos/sistemas-operativos") + ]) + + setAdscripciones(adscripcionRes.data) + setProcesadores(procesadorRes.data) + setUsos(usoRes.data) + setSistemasOperativos(soRes.data) + + } + + cargarDatos() + + }, []) + + function agregar(option: T | null, lista: T[], setLista: (v: T[]) => void, key: keyof T) { if (!option) return - const existe = adscripcionesSeleccionadas.some(a => a.value === option.value) + const existe = lista.some((item) => item[key] === option[key]) if (!existe) { - setAdscripcionesSeleccionadas([...adscripcionesSeleccionadas, option]) + setLista([...lista, option]) } + } - const eliminarAdscripcion = (value: string) => { - setAdscripcionesSeleccionadas( - adscripcionesSeleccionadas.filter(a => a.value !== value) + function eliminar(id: string, lista: T[], setLista: (v: T[]) => void, key: keyof T) { + + setLista( + lista.filter((item) => item[key] !== id) ) + } const generarReporte = () => { - console.log("Adscripciones seleccionadas:", adscripcionesSeleccionadas) + + console.log("Adscripciones:", adscripcionesSeleccionadas) + console.log("Procesadores:", procesadorSeleccionado) + console.log("Sistemas Operativos:", soSeleccionado) + console.log("Usos:", usoSeleccionado) + console.log("Antigüedad activa:", antiguedadActiva) + } return ( + <> +
-
+
-

Reporte de Antigüedad de Equipos

+ {/* ADSCRIPCION */} - +
+ - o.adscripcion} + getOptionValue={(o) => o.id_adscripcion} + onChange={(o) => agregar(o, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")} + /> -
+
-

- Adscripciones seleccionadas ({adscripcionesSeleccionadas.length}) -

+ {adscripcionesSeleccionadas.map((a) => ( - {adscripcionesSeleccionadas.length === 0 && ( -

No hay adscripciones seleccionadas

- )} +
-
+ {a.adscripcion} - {adscripcionesSeleccionadas.map((ads) => ( -
+ - {ads.label} +
- + ))}
- ))} -
+
+ + + {/* PROCESADOR */} + +
+ + + + o.sistema_operativo} + getOptionValue={(o) => o.id_sistema_operativo} + onChange={(o) => + agregar(o, soSeleccionado, setSoSeleccionado, "id_sistema_operativo") + } + /> + +
+ + {soSeleccionado.map((s) => ( + +
+ + {s.sistema_operativo} + + + +
+ + ))} + +
+ +
+ + + {/* USO */} + +
+ + + +