working and builded

package.json

@@ -18,7 +18,9 @@
     "next": "^16.0.7",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "react-hot-toast": "^2.6.0"
+    "react-hot-toast": "^2.6.0",
+    "react-select": "^5.10.2",
+    "recharts": "^3.8.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/app/(Administrador)/antiguedad/page.tsx

@@ -0,0 +1,10 @@
+import "../../styles/layout/reporte.scss";
+
+export default function Page() {
+  return (
+    <div className="scanView_reporte">
+      <div className="container_reporte">
+      </div>
+    </div>
+  );
+}

src/app/(Administrador)/reportesGraficas/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import DownloadReporteXLSX from "@/components/Dowload/Reporte";
+import Reporte from "@/components/reporteGraficas/reporte";
+
+import "../../styles/layout/reporte.scss";
+
+type PreguntaKey = "antiguedad";
+
+const LABELS: Record<PreguntaKey, string> = {
+  antiguedad: "Antigüedad",
+};
+
+export default function Page() {
+  const [activeTab, setActiveTab] = useState<PreguntaKey>("antiguedad");
+
+  const renderPregunta = () => {
+    switch (activeTab) {
+      case "antiguedad":
+        return (
+          <Reporte />
+        );
+      default:
+        return (
+          <div className="p-6 text-center text-gray-500">
+            Contenido no disponible aún.
+          </div>
+        );
+    }
+  };
+
+  return (
+    <div className="scanView_reporte">
+      <div className="container_reporte">
+        <div className="main-content_reporte">
+          <div className="tabs_reporte">
+            {Object.entries(LABELS).map(([key, label]) => (
+              <button
+                key={key}
+                className={`tab_reporte ${activeTab === key ? "active" : ""}`}
+                onClick={() => setActiveTab(key as PreguntaKey)}
+                aria-selected={activeTab === key}
+                role="tab"
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div className={`data-table_reporte`}>{renderPregunta()}</div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(Operador)/escaner/page.tsx

@@ -16,7 +16,8 @@ export default function Page() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  const buscarEquipo = async () => {
+  const buscarEquipo = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     if (!search) return toast.error("Ingresa un número de inventario");
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
@@ -96,17 +97,17 @@ export default function Page() {
           {isScanning ? "Cancelar" : "Escanear"}
         </button>
 
-        <div className="searchBox">
+        <form className="searchBox" onSubmit={buscarEquipo}>
           <input
             type="text"
             placeholder="Buscar por inventario..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
           />
-          <button onClick={buscarEquipo} className="searchButton">
+          <button className="searchButton" type="submit">
             <Image src="/search.png" alt="Buscar" width={50} height={50} />
           </button>
-        </div>
+        </form>
       </main>
     </div>
   );

src/app/creadores/CreatorCard.tsx

@@ -0,0 +1,26 @@
+import Image from "next/image";
+import "./creadores.css";
+
+interface props{
+    title:string;
+    img:string;
+    width:number;
+    height:number;
+}
+
+export default function CreatorCard({title,img,width,height}:props) {
+    return (
+        <div className="card">
+            <div className="imageWrapper">
+                <Image
+                    src={img}
+                    alt="IO"
+                    width={width}
+                    height={height}
+                    className="creators"
+                />
+            </div>
+            <h1 className="title">{title}</h1>
+        </div>
+    )
+}

src/app/creadores/creadores.css

@@ -0,0 +1,79 @@
+.mainContainer {
+    height: 100%;
+    width: 100%;
+    display: grid;
+    position: relative;
+    place-items: center;
+}
+
+.container {
+    display: flex;
+    gap: 6rem;
+    align-items: end;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    flex-wrap: wrap;
+}
+
+.imageWrapper {
+    position: relative;
+    animation: slideIn 1s ease-out forwards;
+    transform: translateX(-120px) rotate(12deg);
+    opacity: 0;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: slideIn 1s ease-out forwards;
+    opacity: 0;
+}
+
+.card:hover .creators {
+    transform: rotateY(360deg) rotate(12deg) scale(1.05);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
+}
+
+.creators {
+    object-fit: cover;
+    border-radius: 16px;
+    background-color: rgba(255, 255, 255, 0.6);
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
+    transition: transform 1s ease, box-shadow 0.4s ease;
+}
+
+.imageWrapper:hover .creators {
+    transform: rotateY(180deg) rotate(24deg) scale(1.05);
+    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
+
+}
+
+@keyframes slideIn {
+    to {
+        transform: translateX(0) rotate(12deg);
+        opacity: 1;
+    }
+}
+
+.title {
+    margin-left: 40px;
+    font-size: 3rem;
+    font-weight: 600;
+    opacity: 0;
+    animation: fadeIn 1s ease forwards;
+    animation-delay: 0.5s;
+    color: #1E3A8A;
+}
+
+.card:hover .title {
+    transform: translateY(-5px);
+    color: #163172;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}

src/app/creadores/page.tsx

@@ -0,0 +1,17 @@
+import "./creadores.css";
+import CreatorCard from "./CreatorCard";
+
+export default function Page() {
+    return (
+        <div className="mainContainer">
+            <div className="container">
+
+                <CreatorCard title="IO" img="/IO.png" width={150} height={200} />
+                <CreatorCard title="Sarabia" img="/SARABIA.jpeg" width={150} height={150} />
+                <CreatorCard title="CarloSpak" img="/SPAK.png" width={160} height={100} />
+
+            </div>
+        </div>
+
+    );
+}

src/app/login/Login.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import "../styles/layout/login.scss";
-import "../styles/base/globales.scss";
 import Image from "next/image";
 import axios from "axios";
 import { useRouter } from "next/navigation";
 import toast from "react-hot-toast";
 import { jwtDecode } from "jwt-decode";
+import "../styles/layout/login.scss";
+import "../styles/base/globales.scss";
 
 export default function Login() {
   const [nombre, setNombre] = useState("");

src/components/AntiguedadEquipo/formEquipo.tsx

@@ -0,0 +1,18 @@
+export default function FormEquipo() {
+    return (
+        <form>
+            <label >Selecciona la antiguedad</label>
+            <select>
+                <option value=""></option>
+            </select>
+            <label>Selecciona la adscripcion</label>
+            <select>
+                <option value=""></option>
+            </select>
+            <label >Selecciona el edificio</label>
+            <select>
+                <option value=""></option>
+            </select>
+        </form>
+    )
+}

src/components/BarNavigationAdmin.tsx

@@ -49,6 +49,11 @@ function BarNavigation() {
             <span>Perifericos</span>
           </Link>
         </li>
+        <li className="subMenu" onClick={toggleMenu}>
+          <Link href="/reportesGraficas" className="links">
+            <span>Reportes y Graficas</span>
+          </Link>
+        </li>
         <li className="subMenu">
           <button className="logout-button" onClick={cerrarSesion}>
             Cerrar sesión

src/components/Equipo_Computo/Pregunta7.tsx

@@ -29,47 +29,47 @@ export default function Pregunta7() {
 
   const api_url = process.env.NEXT_PUBLIC_API_URL;
 
-  // ------------------------------
-  // TRANSFORMADOR (maneja null)
-  // ------------------------------
   const transformarDatos = (items: AntiguedadItem[]): string[] => {
-    let menores2 = 0;
+    let menor2 = 0;
     let entre2_3 = 0;
     let entre4_5 = 0;
-    let mayores6 = 0;
+    let mayor6 = 0;
-    let notfound = 0;
 
     for (const item of items) {
       const total = Number(item.total) || 0;
-      const antig = item.antiguedad
+      const antig = item.antiguedad?.toLowerCase().trim();
-        ? item.antiguedad.toUpperCase().trim()
-        : null;
 
       switch (antig) {
-        case "MENORES DE 2":
+        case "menor a 2 años":
-          menores2 += total;
+          menor2 += total;
           break;
-        case "ENTRE 2 Y 3":
+
+        case "entre 2 y 3 años":
           entre2_3 += total;
           break;
-        case "ENTRE 4 Y 5":
+
+        case "entre 4 y 5 años":
           entre4_5 += total;
           break;
-        case "ENTRE 6 Y MAYORES":
+
-          mayores6 += total;
+        case "mayor a 6 años":
+          mayor6 += total;
           break;
-        default:
-          notfound += total; // incluye null
       }
     }
 
-    const total = menores2 + entre2_3 + entre4_5 + mayores6 + notfound;
+    const suma = menor2 + entre2_3 + entre4_5 + mayor6;
 
-    if (total === 0) return ["0.00", "0.00", "0.00", "0.00"];
+    if (suma === 0) return ["0.00", "0.00", "0.00", "0.00"];
 
-    const pct = (v: number) => ((v / total) * 100).toFixed(2);
+    const pct = (v: number) => ((v / suma) * 100).toFixed(2);
 
-    return [pct(menores2), pct(entre2_3), pct(entre4_5), pct(mayores6)];
+    return [
+      pct(menor2), // Menor a 2
+      pct(entre2_3), // Entre 2 y 3
+      pct(entre4_5), // Entre 4 y 5
+      pct(mayor6), // Mayor a 6
+    ];
   };
 
   const cargarDatos = async (baja: boolean) => {
@@ -83,7 +83,7 @@ export default function Pregunta7() {
         body,
         {
           headers: { Authorization: `Bearer ${token}` },
-        }
+        },
       )
       .then((res) => {
         const { impresion, digitalizacion } = res.data;

src/components/Equipo_Computo/Pregunta9.tsx

@@ -50,16 +50,16 @@ export default function Pregunta9() {
       const total = Number(item.total) || 0;
 
       switch (item.antiguedad) {
-        case "MENORES DE 2":
+        case "Menor a 2 años":
           menores2 += total;
           break;
-        case "ENTRE 2 Y 3":
+        case "Entre 2 y 3 años":
           entre2_3 += total;
           break;
-        case "ENTRE 4 Y 5":
+        case "Entre 4 y 5 años":
           entre4_6 += total;
           break;
-        case "ENTRE 6 Y MAYORES":
+        case "Mayor a 6 años":
           mayores6 += total;
           break;
         // Cualquier otro valor (aunque no debería haber) lo meteríamos en mayores6

src/components/header.tsx

@@ -18,7 +18,7 @@ function Header() {
     "/ranking",
   ];
   
-  const privateNav = ["/equipoComputo", "/crearCuenta", "/perifericos"];
+  const privateNav = ["/equipoComputo", "/crearCuenta", "/perifericos","/reportesGraficas"];
 
   return (
     <header className={header.header}>

src/components/reporteGraficas/Graficas/Antiguedad.tsx

@@ -0,0 +1,90 @@
+'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";
+
+type AdscripcionOption = {
+    id_adscripcion: string
+    adscripcion: string
+}
+
+interface Props {
+    filtros: any
+}
+
+interface AntiguedadData {
+    adscripcion: string
+    antiguedad: string
+    total: number
+}
+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/grafica/antiguedad`,
+                filtros,
+                { headers }
+            )
+
+            setData(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.5}>
+
+                <BarChart
+                    data={data}
+                    margin={{ top: 20 }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+
+                    <XAxis dataKey="antiguedad" fontSize={12} />
+
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Graficas/Procesador.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+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
+}
+
+interface procesador {
+    adscripcion: string
+    procesador: string;
+    total: number;
+}
+
+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)
+
+            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.5} minHeight={270}>
+                <BarChart data={data}
+                    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 />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Graficas/SistemaOperativo.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+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
+}
+
+interface so {
+    adscripcion: string
+    so: string;
+    total: number;
+}
+
+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)
+
+            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.5}>
+                <BarChart data={data}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Graficas/Uso.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+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
+}
+
+interface UsoData {
+    uso: string
+    adscripcion: string
+    total: number
+}
+
+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
+            )
+            setData(response.data)
+        }
+        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.5} minHeight={220}>
+                <BarChart data={data}
+                    width={500}
+                    height={300}
+                    margin={{
+                        top: 20,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="uso" fontSize={12} />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="total" fill="#095bd6" />
+
+                </BarChart>
+            </ResponsiveContainer>
+        </div>
+    )
+}

src/components/reporteGraficas/Reporte.module.css

@@ -0,0 +1,92 @@
+.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: #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: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:hover {
+    background: #1d4ed8;
+}
+
+.graficas {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.filtro {
+    display: flex;
+    gap: 10px;
+}
+
+.containerSelection {
+    width: 100%;
+    min-width: 200px
+}

src/components/reporteGraficas/reporte.tsx

@@ -0,0 +1,359 @@
+"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 Procesador from "./Graficas/Procesador"
+import SistemaOperativo from "./Graficas/SistemaOperativo"
+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 SoOption = {
+    id_sistema_operativo: string
+    sistema_operativo: string
+}
+
+type ProcesadorOption = {
+    id_procesador: string
+    procesador: string
+}
+
+type AntiguedadOption = {
+    antiguedad: string
+}
+
+export default function Reporte() {
+
+    const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
+    const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])
+
+    const [procesadores, setProcesadores] = useState<ProcesadorOption[]>([])
+    const [procesadorSeleccionado, setProcesadorSeleccionado] = useState<ProcesadorOption[]>([])
+
+    const [sistemasOperativos, setSistemasOperativos] = useState<SoOption[]>([])
+    const [soSeleccionado, setSoSeleccionado] = useState<SoOption[]>([])
+
+    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 [filtros, setFiltros] = 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(adscripcionRes.data)
+            setProcesadores(procesadorRes.data)
+            setUsos(usoRes.data)
+            setSistemasOperativos(soRes.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 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)
+
+    }
+
+    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>
+
+
+                    {/* PROCESADOR */}
+
+                    <div className={styles.containerSelection}>
+
+                        <label className={styles.adscripcion}>Procesador</label>
+
+                        <Select
+                            options={procesadores}
+                            getOptionLabel={(o) => o.procesador}
+                            getOptionValue={(o) => o.id_procesador}
+                            onChange={(o) =>
+                                agregar(o, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
+                            }
+                        />
+
+                        <div className={styles.lista}>
+
+                            {procesadorSeleccionado.map((p) => (
+
+                                <div key={p.id_procesador} className={styles.chip}>
+
+                                    <span>{p.procesador}</span>
+
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() =>
+                                            eliminar(p.id_procesador, procesadorSeleccionado, setProcesadorSeleccionado, "id_procesador")
+                                        }
+                                    >
+                                        ✕
+                                    </button>
+
+                                </div>
+
+                            ))}
+
+                        </div>
+
+                    </div>
+
+                    {/* SISTEMA OPERATIVO */}
+
+                    <div className={styles.containerSelection}>
+
+                        <label className={styles.adscripcion}>Sistema Operativo</label>
+
+                        <Select
+                            options={sistemasOperativos}
+                            getOptionLabel={(o) => o.sistema_operativo}
+                            getOptionValue={(o) => o.id_sistema_operativo}
+                            onChange={(o) =>
+                                agregar(o, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
+                            }
+                        />
+
+                        <div className={styles.lista}>
+
+                            {soSeleccionado.map((s) => (
+
+                                <div key={s.id_sistema_operativo} className={styles.chip}>
+
+                                    <span>{s.sistema_operativo}</span>
+
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() =>
+                                            eliminar(s.id_sistema_operativo, soSeleccionado, setSoSeleccionado, "id_sistema_operativo")
+                                        }
+                                    >
+                                        ✕
+                                    </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}
+                />
+
+                <Procesador
+                    filtros={filtros}
+                />
+
+                <SistemaOperativo
+                    filtros={filtros}
+                />
+
+            </section>
+
+
+        </>
+    )
+
+}

src/proxy.ts

@@ -3,7 +3,7 @@ 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"],
+  1: ["/crearCuenta", "/equipoComputo", "/perifericos","/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass","/reportesGraficas"],
   2: ["/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass"],
 };