From 685d51383801ef38613ffb4dc953a5a3274574db Mon Sep 17 00:00:00 2001
From: IO <320154041@pcpuma.acatlan.unam.mx>
Date: Fri, 13 Mar 2026 18:49:55 -0500
Subject: [PATCH] modified grafigs

---
 .../reporteGraficas/Graficas/Antiguedad.tsx   | 84 +++++++++++++-----
 .../reporteGraficas/Graficas/Procesador.tsx   | 39 +++++---
 .../Graficas/SistemaOperativo.tsx             | 37 +++++---
 .../reporteGraficas/Graficas/Uso.tsx          | 49 +++++++----
 src/components/reporteGraficas/reporte.tsx    | 88 ++++++++++++++-----
 5 files changed, 214 insertions(+), 83 deletions(-)

diff --git a/src/components/reporteGraficas/Graficas/Antiguedad.tsx b/src/components/reporteGraficas/Graficas/Antiguedad.tsx
index ade738e..4e6ba26 100644
--- a/src/components/reporteGraficas/Graficas/Antiguedad.tsx
+++ b/src/components/reporteGraficas/Graficas/Antiguedad.tsx
@@ -2,39 +2,77 @@
 
 import axios from "axios";
 import { useEffect, useState } from "react";
-import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import {
+    Bar,
+    BarChart,
+    CartesianGrid,
+    Legend,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis
+} from "recharts";
 
-interface antiguedad {
-    antiguedad: string;
-    total: number;
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
 }
 
-export default function Antiguedad() {
-const [antiguedad, setAntiguedad] = useState<antiguedad[]>([
-  { antiguedad: "0", total: 0 }
-])
-    useEffect(() => {
-        const getAntiguedad = async () => {
-            const response = await axios.get("http://localhost:3001/equipos/grafica/antiguedad")
+interface Props {
+    filtros: any
+}
+
+interface AntiguedadData {
+    adscripcion: string
+    antiguedad: string
+    total: number
+}
+
+export default function Antiguedad({ filtros }: Props) {
+
+    const [data, setData] = useState<AntiguedadData[]>([])
+
+    useEffect(() => {
+
+        const getAntiguedad = async () => {
+
+            const response = await axios.post(
+                "http://localhost:3001/equipos/grafica/antiguedad",
+                filtros
+            )
+
+            setData(response.data)
 
-            setAntiguedad(response.data)
         }
+
         getAntiguedad()
-    }, [])
+
+    }, [filtros])
 
     return (
-        <div style={{ minWidth: "570px", background:"white", borderRadius:"10px", margin:"5px auto", padding:"1rem", maxWidth:"100%"}}>
-            <h1 style={{margin:"0"}}>Antigüedad</h1>
-            <ResponsiveContainer width="100%" aspect={2}>
-                <BarChart data={antiguedad}
-                    width={100}
-                    height={100}
-                    margin={{
-                        top: 20,
-                    }}
+        <div
+            style={{
+                minWidth: "570px",
+                background: "white",
+                borderRadius: "10px",
+                margin: "5px auto",
+                padding: "1rem",
+                maxWidth: "100%"
+            }}
+        >
+
+            <h1 style={{ margin: "0" }}>Antigüedad</h1>
+
+            <ResponsiveContainer width="100%" aspect={2.5}>
+
+                <BarChart
+                    data={data}
+                    margin={{ top: 20 }}
                 >
                     <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="antiguedad" fontSize={12}/>
+
+                    <XAxis dataKey="antiguedad" fontSize={12} />
+
                     <YAxis />
                     <Tooltip />
                     <Legend />
diff --git a/src/components/reporteGraficas/Graficas/Procesador.tsx b/src/components/reporteGraficas/Graficas/Procesador.tsx
index a808731..f169590 100644
--- a/src/components/reporteGraficas/Graficas/Procesador.tsx
+++ b/src/components/reporteGraficas/Graficas/Procesador.tsx
@@ -4,37 +4,52 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 
-interface antiguedad {
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+type ProcesadorOption = {
+    id_procesador: string
+    procesador: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface procesador {
+    adscripcion: string
     procesador: string;
     total: number;
 }
 
-export default function Procesador() {
-    const [antiguedad, setAntiguedad] = useState<antiguedad[]>([])
+export default function Procesador({ filtros }: Props) {
+    const [data, setData] = useState<procesador[]>([])
 
     useEffect(() => {
         const getAntiguedad = async () => {
-            const response = await axios.get("http://localhost:3001/equipos/grafica/procesador")
+            const response = await axios.post("http://localhost:3001/equipos/grafica/procesador",filtros)
 
-            setAntiguedad(response.data)
+            setData(response.data)
         }
         getAntiguedad()
-    }, [])
+    }, [filtros])
 
     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} minHeight={270}>
-                <BarChart data={antiguedad}
+        <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}
                     width={500}
                     height={300}
                     margin={{
                         top: 20,
-                        bottom:20,
+                        bottom: 20,
                     }}
                 >
                     <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="procesador" fontSize={12} angle={40}   textAnchor="start" hide/>
+                    <XAxis dataKey="procesador" fontSize={12} angle={40} textAnchor="start" hide />
                     <YAxis />
                     <Tooltip />
                     <Legend />
diff --git a/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx
index 3ab37cf..89ea000 100644
--- a/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx
+++ b/src/components/reporteGraficas/Graficas/SistemaOperativo.tsx
@@ -4,28 +4,43 @@ import axios from "axios";
 import { useEffect, useState } from "react";
 import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 
-interface antiguedad {
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+type UsoOption = {
+    id_sistema_operativo: string
+    sistema_operativo: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface so {
+    adscripcion: string
     so: string;
     total: number;
 }
 
-export default function SistemaOperativo() {
-    const [antiguedad, setAntiguedad] = useState<antiguedad[]>([])
+export default function SistemaOperativo({ filtros }: Props) {
+    const [data, setData] = useState<so[]>([])
 
     useEffect(() => {
         const getAntiguedad = async () => {
-            const response = await axios.get("http://localhost:3001/equipos/grafica/so")
+            const response = await axios.post("http://localhost:3001/equipos/grafica/so",filtros)
 
-            setAntiguedad(response.data)
+            setData(response.data)
         }
         getAntiguedad()
-    }, [])
+    }, [filtros])
 
     return (
-        <div style={{ width:"100%", background:"white", borderRadius:"10px", margin:"5px auto", padding:"1rem"}}>
-            <h1 style={{margin:"0"}}>SistemaOperativo</h1>
-            <ResponsiveContainer width="100%" aspect={3}>
-                <BarChart data={antiguedad}
+        <div style={{ width: "100%", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>SistemaOperativo</h1>
+            <ResponsiveContainer width="100%" aspect={3.5}>
+                <BarChart data={data}
                     width={500}
                     height={300}
                     margin={{
@@ -33,7 +48,7 @@ export default function SistemaOperativo() {
                     }}
                 >
                     <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide/>
+                    <XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide />
                     <YAxis />
                     <Tooltip />
                     <Legend />
diff --git a/src/components/reporteGraficas/Graficas/Uso.tsx b/src/components/reporteGraficas/Graficas/Uso.tsx
index 57337c8..181e1c0 100644
--- a/src/components/reporteGraficas/Graficas/Uso.tsx
+++ b/src/components/reporteGraficas/Graficas/Uso.tsx
@@ -4,28 +4,45 @@ 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;
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
 }
 
-export default function Uso() {
-    const [antiguedad, setAntiguedad] = useState<antiguedad[]>([])
+type UsoOption = {
+    id_uso: string
+    tipo_uso: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface UsoData {
+    uso: string
+    adscripcion: string
+    total: number
+}
+
+export default function Uso({ filtros }: Props) {
+    const [data, setData] = useState<UsoData[]>([])
 
     useEffect(() => {
-        const getAntiguedad = async () => {
-            const response = await axios.get("http://localhost:3001/equipos/grafica/uso")
-
-            setAntiguedad(response.data)
+        const getUso = async () => {
+            const response = await axios.post(
+                "http://localhost:3001/equipos/grafica/uso",filtros
+            )
+            setData(response.data)
         }
-        getAntiguedad()
-    }, [])
+        getUso()
+
+    }, [filtros])
 
     return (
-        <div style={{ minWidth: "570px", background:"white", borderRadius:"10px", margin:"5px auto", padding:"1rem"}}>
-            <h1 style={{margin:"0"}}>Uso</h1>
-            <ResponsiveContainer width="100%" aspect={2} minHeight={270}>
-                <BarChart data={antiguedad}
+        <div style={{ minWidth: "570px", background: "white", borderRadius: "10px", margin: "5px auto", padding: "1rem" }}>
+            <h1 style={{ margin: "0" }}>Uso</h1>
+            <ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
+                <BarChart data={data}
                     width={500}
                     height={300}
                     margin={{
@@ -33,7 +50,7 @@ export default function Uso() {
                     }}
                 >
                     <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="uso" fontSize={12}/>
+                    <XAxis dataKey="uso" fontSize={12} />
                     <YAxis />
                     <Tooltip />
                     <Legend />
diff --git a/src/components/reporteGraficas/reporte.tsx b/src/components/reporteGraficas/reporte.tsx
index 2002aba..83971ba 100644
--- a/src/components/reporteGraficas/reporte.tsx
+++ b/src/components/reporteGraficas/reporte.tsx
@@ -30,6 +30,10 @@ type ProcesadorOption = {
     procesador: string
 }
 
+type AntiguedadOption = {
+    antiguedad: string
+}
+
 export default function Reporte() {
 
     const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
@@ -44,9 +48,12 @@ export default function Reporte() {
     const [usos, setUsos] = useState<UsoOption[]>([])
     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 [antiguedadSeleccionada, setAntiguedadSeleccionada] = useState<AntiguedadOption[]>([])
 
     const [antiguedadActiva, setAntiguedadActiva] = useState(false)
 
+    const [filtros, setFiltros] = useState<any>(null)
     useEffect(() => {
 
         const cargarDatos = async () => {
@@ -55,12 +62,12 @@ export default function Reporte() {
                 adscripcionRes,
                 procesadorRes,
                 usoRes,
-                soRes
+                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")
+                axios.get("http://localhost:3001/equipos/sistemas-operativos"),
             ])
 
             setAdscripciones(adscripcionRes.data)
@@ -96,11 +103,15 @@ export default function Reporte() {
 
     const generarReporte = () => {
 
-        console.log("Adscripciones:", adscripcionesSeleccionadas)
-        console.log("Procesadores:", procesadorSeleccionado)
-        console.log("Sistemas Operativos:", soSeleccionado)
-        console.log("Usos:", usoSeleccionado)
-        console.log("Antigüedad activa:", antiguedadActiva)
+        const filtros = {
+            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)),
+            usos: usoSeleccionado.map(u => String(u.id_uso)),
+            antiguedad: antiguedadSeleccionada.map(u => String(u.antiguedad))
+        }
+
+        setFiltros(filtros)
 
     }
 
@@ -186,8 +197,6 @@ export default function Reporte() {
 
                     </div>
 
-
-
                     {/* SISTEMA OPERATIVO */}
 
                     <div className={styles.containerSelection}>
@@ -272,14 +281,39 @@ export default function Reporte() {
 
                     <div className={styles.containerSelection}>
 
-                        <label className={styles.adscripcion}>Antigüedad</label>
+                        <label className={styles.adscripcion}>Antiguedad</label>
 
-                        <button
-                            className={styles.toggle}
-                            onClick={() => setAntiguedadActiva(!antiguedadActiva)}
-                        >
-                            {antiguedadActiva ? "Desactivar" : "Activar"}
-                        </button>
+                        <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>
 
@@ -290,7 +324,7 @@ export default function Reporte() {
                     className={styles.button}
                     onClick={generarReporte}
                 >
-                    Generar reporte
+                    Buscar
                 </button>
 
             </div>
@@ -298,13 +332,25 @@ export default function Reporte() {
 
             <section className={styles.graficas}>
 
-                <Antiguedad />
-                <Uso />
-                <Procesador />
-                <SistemaOperativo />
+                <Antiguedad
+                    filtros={filtros}
+                />
+
+                <Uso
+                    filtros={filtros}
+                />
+
+                <Procesador
+                    filtros={filtros}
+                />
+
+                <SistemaOperativo
+                    filtros={filtros}
+                />
 
             </section>
 
+
         </>
     )