Add workflow

.gitea/workflows/deploy.yaml

@@ -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"

package.json

@@ -19,12 +19,12 @@
     "leaflet.heat": "^0.2.0",
     "next": "^16.0.7",
     "react": "19.2.0",
-    "react-dom": "19.2.0",    "react-hot-toast": "^2.6.0",
-
+    "react-dom": "19.2.0",
+    "react-hot-toast": "^2.6.0",
     "react-leaflet": "^5.0.0",
     "react-select": "^5.10.2",
     "recharts": "^3.8.0"
- },
+  },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@types/js-cookie": "^3.0.6",
@@ -38,4 +38,4 @@
     "sass": "^1.94.0",
     "typescript": "^5"
   }
-}
+}

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

@@ -1,17 +1,14 @@
 "use client";
 
 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<PreguntaKey, string> = {
   antiguedad: "Antigüedad",
-  adscripcion: "Antigüedad por Adscripcion"
 };
 
 export default function Page() {
@@ -20,10 +17,6 @@ export default function Page() {
   const renderPregunta = () => {
     switch (activeTab) {
       case "antiguedad":
-        return (
-          <Antiguedad />
-        );
-      case "adscripcion":
         return (
           <Reporte />
         );

src/app/login/Login.tsx

@@ -39,7 +39,7 @@ export default function Login() {
       if (tipo === 2) {
         router.push("/escaner");
       } else if (tipo === 1) {
-        router.push("/equipoComputo");
+        router.push("/reportesGraficas");
       } else {
         toast.error("Tipo de usuario no válido");
       }

src/components/AntiguedadEquipo/Antiguedad.tsx

@@ -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<antiguedad[]>([])
-
-    useEffect(()=>{
-        const getAntiguedad = async()=>{
-            const response = await axios.get("http://localhost:3001/equipos/grafica")
-
-            setAntiguedad(response.data)
-        }
-        getAntiguedad()
-    },[])
-
-    return (
-        <ResponsiveContainer width="100%" aspect={2}>
-            <BarChart data={antiguedad}
-            width={500}
-            height={300}
-            margin={{
-                top:20,
-            }}
-            >
-                <CartesianGrid strokeDasharray="3 3"/>
-                <XAxis dataKey="antiguedad"/>
-                <YAxis/>
-                <Tooltip/>
-                <Legend/>
-                <Bar dataKey="total" fill="#0d6efd"/>
-
-            </BarChart>
-        </ResponsiveContainer>
-    )
-}

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() {
     <button
       className={styles.downloadBtn}
       onClick={handleDownload}
-      disabled={loading} // 🔹 Botón deshabilitado
+      disabled={loading} 
     >
       {loading ? (
-        <div className={styles.loader}></div> // 🔹 Icono de cargando
+        <div className={styles.loader}></div>
       ) : (
         <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
       )}

src/components/Dowload/tabla.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import styles from "./style.module.css";
+import Cookies from "js-cookie";
+import { useState } from "react";
+import axios from "axios";
+
+interface Props {
+  filtros: any;
+  count?: boolean;
+}
+
+export default function DownloadTable({ filtros,count }: Props) {
+  const [loading, setLoading] = useState(false);
+
+  const handleDownload = async () => {
+    if(!filtros.length){return}
+    setLoading(true);
+
+    const token = Cookies.get("token");
+
+    try {
+      const endpoint = count
+  ? "/equipos/excel/tabla/count"
+  : "/equipos/excel/tabla";
+
+
+      const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_API_URL}${endpoint}`,
+        filtros,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          responseType: "blob",
+        }
+      );
+      const url = window.URL.createObjectURL(new Blob([response.data]));
+
+      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 (
+    <button
+      className={styles.downloadBtn}
+      onClick={handleDownload}
+      disabled={loading}
+    >
+      {loading ? (
+        <div className={styles.loader}></div>
+      ) : (
+        <img
+          src="/excel.svg"
+          alt="Excel"
+          className={styles.iconExcel}
+          width={30}
+          height={30}
+        />
+      )}
+    </button>
+  );
+}

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 (
+    <button
+      className={styles.downloadBtn}
+      onClick={handleDownload}
+      disabled={loading} 
+    >
+      {loading ? (
+        <div className={styles.loader}></div>
+      ) : (
+        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
+      )}
+    </button>
+  );
+}

src/components/reporteGraficas/Graficas/Antiguedad.tsx

@@ -0,0 +1,138 @@
+'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/grafica/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</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>
+    )
+}

src/components/reporteGraficas/Graficas/Procesador.tsx

@@ -0,0 +1,105 @@
+'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/grafica/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</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>
+    )
+}

src/components/reporteGraficas/Graficas/SistemaOperativo.tsx

@@ -0,0 +1,104 @@
+'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/grafica/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</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>
+    )
+}

src/components/reporteGraficas/Graficas/Uso.tsx

@@ -0,0 +1,107 @@
+'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/grafica/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</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

src/components/reporteGraficas/Reporte.module.css

@@ -1,76 +1,122 @@
-.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: 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;
-    cursor:pointer;
-    color:#777;
+.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{
-    color:#c0392b;
+.remove:hover {
+    background: rgba(255,255,255,0.4);
 }
 
-.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: 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{
-    background:#1d4ed8;
+.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
 }

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<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
+}

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;
+}

src/components/reporteGraficas/reporte.tsx

@@ -1,99 +1,393 @@
 "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"
+
+import Cookies from "js-cookie";
+import TableAntiguedad from "./Tablas/Antiguedad"
+const api_url = process.env.NEXT_PUBLIC_API_URL;
 
 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
+}
+
+type AntiguedadOption = {
+    antiguedad: string
 }
 
 export default function Reporte() {
 
+    const [adscripciones, setAdscripciones] = useState<AdscripcionOption[]>([])
     const [adscripcionesSeleccionadas, setAdscripcionesSeleccionadas] = useState<AdscripcionOption[]>([])
 
-    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<ProcesadorOption[]>([])
+    const [procesadorSeleccionado, setProcesadorSeleccionado] = useState<ProcesadorOption[]>([])
 
-    const agregarAdscripcion = (option: AdscripcionOption | null) => {
+    const [sistemasOperativos, setSistemasOperativos] = useState<SoOption[]>([])
+    const [soSeleccionado, setSoSeleccionado] = useState<SoOption[]>([])
+
+    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
+            ])
+
+            setProcesadores([
+                { id_procesador: "0", procesador: "Todos" },
+                ...procesadorRes.data
+            ])
+
+            setUsos([
+                { id_uso: "0", tipo_uso: "Todos" },
+                ...usoRes.data
+            ])
+
+            setSistemasOperativos([
+                { id_sistema_operativo: "0", sistema_operativo: "Todos" },
+                ...soRes.data
+            ])
+        }
+
+        cargarDatos()
+
+    }, [])
+
+    function agregar<T>(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<T>(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)
+
+        const limpiar = (arr: string[]) => {
+            if (arr.includes("0")) return []
+            return arr
+        }
+
+        const filtrosTable = {
+            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))
+        }
+
+        const filtros = {
+            adscripciones: limpiar(adscripcionesSeleccionadas.map(a => String(a.id_adscripcion))),
+            procesadores: limpiar(procesadorSeleccionado.map(p => String(p.id_procesador))),
+            sistemas: limpiar(soSeleccionado.map(s => String(s.id_sistema_operativo))),
+            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}>
 
-        <div className={styles.container}>
+                <section className={styles.filtro}>
 
-            <h2 className={styles.title}>Reporte de Antigüedad de Equipos</h2>
+                    {/* ADSCRIPCION */}
 
-            <label className={styles.label}>Buscar adscripción</label>
+                    <div className={styles.containerSelection}>
+                        <label className={styles.adscripcion}>Adscripción</label>
 
-            <Select
-                options={adscripciones}
-                placeholder="Escribe para buscar..."
-                onChange={(value) => agregarAdscripcion(value)}
-            />
+                        <Select
+                            options={adscripciones}
+                            getOptionLabel={(o) => o.adscripcion}
+                            getOptionValue={(o) => o.id_adscripcion}
+                            onChange={(o) => agregar(o, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
+                        />
 
-            <div className={styles.listaContainer}>
+                        <div className={styles.lista}>
 
-                <h4 className={styles.subtitle}>
-                    Adscripciones seleccionadas ({adscripcionesSeleccionadas.length})
-                </h4>
+                            {adscripcionesSeleccionadas.map((a) => (
 
-                {adscripcionesSeleccionadas.length === 0 && (
-                    <p className={styles.empty}>No hay adscripciones seleccionadas</p>
-                )}
+                                <div key={a.id_adscripcion} className={styles.chip}>
 
-                <div className={styles.lista}>
+                                    <span>{a.adscripcion}</span>
 
-                    {adscripcionesSeleccionadas.map((ads) => (
-                        <div key={ads.value} className={styles.chip}>
+                                    <button
+                                        className={styles.remove}
+                                        onClick={() => eliminar(a.id_adscripcion, adscripcionesSeleccionadas, setAdscripcionesSeleccionadas, "id_adscripcion")}
+                                    >
+                                        ✕
+                                    </button>
 
-                            <span>{ads.label}</span>
+                                </div>
 
-                            <button
-                                className={styles.remove}
-                                onClick={() => eliminarAdscripcion(ads.value)}
-                            >
-                                ✕
-                            </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>
 
-            <button
-                className={styles.button}
-                onClick={generarReporte}
-            >
-                Generar reporte
-            </button>
 
-        </div>
+            <section className={styles.graficas}>
 
+                <Antiguedad
+                    filtros={filtros}
+                />
+
+                <Uso
+                    filtros={filtros}
+                />
+
+                <Procesador
+                    filtros={filtros}
+                />
+
+                <SistemaOperativo
+                    filtros={filtros}
+                />
+
+                <TableAntiguedad filtros={filtros} count={true} />
+                <TableAntiguedad filtros={filtrosTable} count={false} />
+
+            </section>
+
+
+        </>
     )
-}
+
+}

src/proxy.ts

@@ -3,8 +3,8 @@ import type { NextRequest } from "next/server";
 import { jwtDecode } from "jwt-decode";
 
 const permisos: Record<number, string[]> = {
-  1: ["/crearCuenta", "/equipoComputo", "/perifericos","/escaner", "/hotmap", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass","/reportesGraficas"],
-  2: ["/escaner", "/agregarEquipo", "/editar","/historial","/ranking","/cambiarPass"],
+  1: ["/crearCuenta", "/equipoComputo", "/perifericos", "/escaner", "/hotmap", "/agregarEquipo", "/editar", "/historial", "/ranking", "/cambiarPass", "/reportesGraficas"],
+  2: ["/escaner", "/agregarEquipo", "/editar", "/historial", "/ranking", "/cambiarPass"],
 };
 
 export function proxy(request: NextRequest) {
@@ -35,7 +35,15 @@ export function proxy(request: NextRequest) {
 
 export const config = {
   matcher: [
-    
+    "/escaner",
+    "/agregarEquipo",
+    "/editar",
+    "/crearCuenta",
+    "/equipoComputo",
+    "/perifericos",
+    "/ranking",
+    "/historial",
+    "/cambiarPass"
   ],
 };
 //IO