Estandarizar censo y automatizar despliegue

.gitea/workflows/ci.yaml

@@ -0,0 +1,50 @@
+name: Validar censo
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Obtener código
+        uses: https://github.com/actions/checkout@v4
+
+      - name: Configurar Node.js
+        uses: https://github.com/actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+
+      - name: Mostrar versiones
+        run: |
+          node --version
+          npm --version
+
+      - name: Instalar dependencias
+        run: npm ci
+
+      - name: Build obligatorio
+        run: npm run build
+
+  deploy-dev:
+    needs: validate
+    if: github.event_name == 'push' && github.ref_name == 'develop'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Desplegar censo en pruebas
+        uses: CIDWA/infra-actions/deploy-ssh@main
+        with:
+          ssh-private-key: ${{ secrets.DEPLOY_SSH_PRIVATE_KEY }}
+          known-hosts: ${{ secrets.DEPLOY_KNOWN_HOSTS }}
+          host: 10.10.10.11
+          user: deploy
+          deploy-script: /var/deploy/scripts/deploy-node-app.sh censo-dev
+          commit-sha: ${{ github.sha }}

.nvmrc

@@ -0,0 +1 @@
+22.21.1

ecosystem.config.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+  apps: [
+    {
+      name: "censo-dev",
+      cwd: "/var/www/html/front/pruebas/censo",
+      script: "node_modules/next/dist/bin/next",
+      args: "start",
+
+      interpreter: "/home/deploy/.nvm/versions/node/v22.21.1/bin/node",
+
+      env: {
+        NODE_ENV: "production",
+        PORT: 3366,
+        HOSTNAME: "0.0.0.0",
+      },
+
+      autorestart: true,
+      watch: false,
+      min_uptime: "10s",
+      max_restarts: 10,
+      restart_delay: 3000,
+      time: true,
+    },
+  ],
+};

package-lock.json

@@ -12,6 +12,7 @@
         "@zxing/browser": "^0.1.5",
         "@zxing/library": "^0.21.3",
         "axios": "^1.13.2",
+        "chart.js": "^4.5.1",
         "js-cookie": "^3.0.5",
         "jwt-decode": "^4.0.0",
         "leaflet": "^1.9.4",
@@ -36,6 +37,10 @@
         "eslint-config-next": "16.0.2",
         "sass": "^1.94.0",
         "typescript": "^5"
+      },
+      "engines": {
+        "node": "22.21.1",
+        "npm": "10.9.4"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1178,6 +1183,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
@@ -3031,6 +3042,18 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",

package.json

@@ -13,6 +13,7 @@
     "@zxing/browser": "^0.1.5",
     "@zxing/library": "^0.21.3",
     "axios": "^1.13.2",
+    "chart.js": "^4.5.1",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
@@ -37,5 +38,10 @@
     "eslint-config-next": "16.0.2",
     "sass": "^1.94.0",
     "typescript": "^5"
-  }
+  },
+  "engines": {
+    "node": "22.21.1",
+    "npm": "10.9.4"
+  },
+  "packageManager": "npm@10.9.4"
 }

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

@@ -1,62 +1,17 @@
 "use client";
 
 import Reporte from "@/components/reporteGraficas/reporte";
-import ReportePerifericos from "@/components/reporte_graficas_perifericos/reporte";
+
 import "../../styles/layout/reporte.scss";
-import { useState } from "react";
-
-
-type PreguntaKey = "reporteGraficas" | "reporte_graficas_perifericos";
-
-const LABELS: Record<PreguntaKey, string> = {
-  reporteGraficas: "Reporte por equipos",
-  reporte_graficas_perifericos: "Reporte por perifericos",
-};
 
 export default function Page() {
-  const [activeTab, setActiveTab] = useState<PreguntaKey>("reporteGraficas");
 
-  const renderPregunta = () => {
-    switch (activeTab) {
-      case "reporteGraficas":
-        return (
-          <>
-            <Reporte />
-          </>
-        );
-      case "reporte_graficas_perifericos":
-        return (
-          <>
-            <ReportePerifericos />
-          </>
-        );
-      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 className={`data-table_reporte`}><Reporte /></div>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,19 @@
+"use client";
+
+
+import "../../styles/layout/reporte.scss";
+import ReportePerifericos from "@/components/reporte_graficas_perifericos/reporte";
+
+export default function Page() {
+
+
+  return (
+    <div className="scanView_reporte">
+      <div className="container_reporte">
+        <div className="main-content_reporte">
+          <div className={`data-table_reporte`}><ReportePerifericos /></div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/layout.tsx

@@ -24,7 +24,9 @@ export default function RootLayout({
       <body>
         <Header />
         <Toaster position="top-left" reverseOrder={false} />
+        <main>
         {children}
+        </main>
       </body>
     </html>
   );

src/app/styles/base/globales.scss

@@ -28,6 +28,33 @@ body {
   color: $color-text;
 }
 
+main {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+
+main::before {
+  content: '';
+  position: absolute;
+
+  top: 50%;
+  left: 50%;
+
+  width: 200%;
+  height: 200%;
+
+  background-image:
+    linear-gradient(#003f7906 1px, transparent 1px),
+    linear-gradient(90deg, #003f7906 1px, transparent 1px);
+
+  background-size: 48px 48px;
+  pointer-events: none;
+
+  transform: translate(-50%, -50%) rotate(15deg);
+  transform-origin: center;
+}
+
 p {
   font-size: 2rem;
   line-height: 1.5;

src/app/styles/layout/ForgotPasswordPage.scss

@@ -9,6 +9,7 @@
   justify-content: center;
   align-items: center;
   width: 100%;
+  height: 100%;
   padding: 2rem;
   color: #222;
 

src/app/styles/layout/agregarEquipo.scss

@@ -2,6 +2,7 @@
   padding: 0;
   margin: 0;
   width: 100%;
+  height: 100%;
   max-width: 100%;
   display: flex;
   align-items: center;

src/app/styles/layout/escaner.scss

@@ -4,6 +4,7 @@
   padding: 0;
   margin: 0;
   width: 100vw;
+  height: 100%;
 }
 
 .header {

src/app/styles/layout/login.scss

@@ -3,6 +3,7 @@
   justify-content: space-evenly;
   align-items: center;
   width: 100vw;
+  height: 100%;
 }
 
 .login-container {

src/components/Dowload/tabla.tsx

@@ -10,33 +10,31 @@ interface Props {
   count?: boolean;
 }
 
-export default function DownloadTable({ filtros,count }: Props) {
+export default function DownloadTable({ filtros, count }: Props) {
   const [loading, setLoading] = useState(false);
 
   const handleDownload = async () => {
-    if(!filtros.length){return}
+    if (!filtros) { return }
     setLoading(true);
 
-    const token = Cookies.get("token");
-
     try {
-      const endpoint = count
-  ? "/equipos/excel/tabla/count"
-  : "/equipos/excel/tabla";
+      const token = Cookies.get("token");
+      const headers = { Authorization: `Bearer ${token}` };
 
+      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}`,
-          },
+          headers,
           responseType: "blob",
         }
       );
       const url = window.URL.createObjectURL(new Blob([response.data]));
-
+      console.log(url)
       const a = document.createElement("a");
       a.href = url;
       a.download = "reporte.xlsx";

src/components/Dowload/tablaCount.tsx

@@ -1,57 +0,0 @@
-"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/Equipo_Computo/MapaCalor.tsx

@@ -95,7 +95,7 @@ function HeatLayer() {
 
     Object.entries(edificios).forEach(([nombre, coords]: any) => {
       L.polygon((coords), {
-        color: "#77ee9f",
+        color: "#77ee9f00",
         weight: 2,
         fillOpacity: 0.25
       })
@@ -129,7 +129,7 @@ export default function MapaCalor() {
     <div style={{
       width: "100%",
       height: "650px",
-      marginTop: "40px",
+      marginTop: "10px",
       borderRadius: "12px",
       overflow: "hidden",
       boxShadow: "0 6px 25px rgba(0,0,0,0.3)"

src/components/Equipo_Computo/Pregunta1.tsx

@@ -25,12 +25,11 @@ const CATEGORIA_MAP: Record<string, { tabla: number }> = {
   "ESCRITORIO PC": { tabla: 0 },
   "ESCRITORIO MAC OS": { tabla: 0 },
   "ESCRITORIO MAC OS ": { tabla: 0 },
-
   "ESCRITORIO LINUX": { tabla: 0 },
 
   "PORTÁTILES WINDOWS": { tabla: 2 },
+  "PORTÁTILES CHROMEBOOK": { tabla: 2 },
   "PORTÁTILES MAC OS": { tabla: 2 },
-  "PORTÁTILES LINUX": { tabla: 2 },
 
   "TABLETA IPAD OS": { tabla: 1 },
   "TABLETA ANDROID": { tabla: 1 },
@@ -48,7 +47,7 @@ const TITULOS_TABLAS = [
 const SISTEMAS_POR_TABLA: Record<number, readonly string[]> = {
   0: ["Windows", "Linux", "Mac OS"],
   1: ["Android", "iPad OS"],
-  2: ["Windows", "Linux", "Mac OS"],
+  2: ["Windows", "Chrome OS", "Mac OS"],
   3: ["Servidor"],
 };
 
@@ -58,7 +57,9 @@ function normalizarSO(soRaw: string): string {
   if (so.includes("WINDOWS")) return "Windows";
   if (so.includes("LINUX")) return "Linux";
   if (so.includes("MAC")) return "Mac OS";
-  if (so.includes("CHROME")) return "Chrome OS";
+  if (so.includes("CHROME OS")) return "Chrome OS";
+  if (so.includes("ANDROID")) return "Android";
+
   if (so.includes("IOS") || so.includes("IPAD")) return "iPad OS";
 
   if (so.includes("SERVER") || so.includes("UNIX")) return "Servidor";
@@ -175,9 +176,8 @@ export default function Pregunta1() {
                   {valores.map((valor, colIndex) => (
                     <td key={colIndex}>
                       <div
-                        className={`${style["input-contenedor"]} ${
-                          loading ? "skeleton" : ""
-                        }`}
+                        className={`${style["input-contenedor"]} ${loading ? "skeleton" : ""
+                          }`}
                       >
                         {!loading ? (
                           <input type="number" value={valor} readOnly />
@@ -201,9 +201,8 @@ export default function Pregunta1() {
               {totalesColumnas.map((t, i) => (
                 <td key={i}>
                   <div
-                    className={`${style["input-contenedor"]} ${
-                      loading ? "skeleton" : ""
-                    }`}
+                    className={`${style["input-contenedor"]} ${loading ? "skeleton" : ""
+                      }`}
                   >
                     {!loading && t}
                   </div>

src/components/Ranking.tsx

@@ -42,7 +42,7 @@ export default function Ranking() {
   }, [year, api_url]);
 
   return (
-    <section>
+    <section style={{width:'100%'}}>
       <div className="year-selector">
         <div>
           <label>Año:</label>

src/components/reporteGraficas/Graficas/Antiguedad.tsx

@@ -111,7 +111,7 @@ export default function Antiguedad({ filtros }: Props) {
                     <Tooltip
                         formatter={(value) => [`${value}`]}
                     />
-                    <Legend />
+                    <Legend wrapperStyle={{ fontSize: 12 }}/>
                     {tieneAdscripciones ? (
 
                         adscripciones.map((ads, i) => (

src/components/reporteGraficas/Graficas/Polar.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { Chart } from "chart.js/auto";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+interface Props {
+    tipo: "ALUMNO" | "PROFESOR" | "ADMINISTRATIVO";
+    filtros: any
+}
+
+const api_url = process.env.NEXT_PUBLIC_API_URL;
+
+export default function Polar({ tipo, filtros }: Props) {
+    const canvasRef = useRef<HTMLCanvasElement | null>(null);
+    const chartRef = useRef<Chart | null>(null);
+
+    useEffect(() => {
+        if (!canvasRef.current) return;
+
+        const fetchData = async () => {
+            const token = Cookies.get("token");
+            const headers = { Authorization: `Bearer ${token}` };
+
+            try {
+                const res = await axios.post(
+                    `${api_url}/equipos/graficaPolar/${tipo}`, filtros, { headers }
+                );
+
+                const apiData = res.data;
+
+                // Orden fijo
+                const labels = [
+                    "Menor a 2 años",
+                    "Entre 2 y 3 años",
+                    "Entre 4 y 5 años",
+                    "Mayor a 6 años",
+                ];
+
+                // Mapear datos
+                const data = labels.map((label) => {
+                    const found = apiData.find(
+                        (item: any) => item.antiguedad === label
+                    );
+                    return found ? Number(found.total) : 0;
+                });
+
+                // Destruir gráfica previa (importante en React)
+                if (chartRef.current) {
+                    chartRef.current.destroy();
+                }
+
+                // Crear gráfica
+                chartRef.current = new Chart(canvasRef.current!, {
+                    type: "polarArea",
+                    data: {
+                        labels,
+                        datasets: [
+                            {
+                                data,
+                                borderWidth: 1,
+                                backgroundColor: [
+                                    "rgb(75, 192, 192)",
+                                    "rgb(255, 206, 86)",
+                                    "rgb(235, 157, 54)",
+                                    "rgb(255, 99, 132)",
+                                ],
+                            },
+                        ],
+                    },
+                });
+            } catch (error) {
+                console.error("Error al obtener datos:", error);
+            }
+        };
+
+        fetchData();
+
+        return () => {
+            if (chartRef.current) {
+                chartRef.current.destroy();
+            }
+        };
+    }, [filtros]);
+
+    return (
+        <div>
+            {tipo === 'PROFESOR' ?<h4>PROFESOR Y TECNICO</h4>:
+            <h4>{tipo}</h4>
+            }
+            <canvas ref={canvasRef} height={200} width={350}></canvas>
+        </div>
+    );
+}

src/components/reporteGraficas/Graficas/Procesador.tsx

@@ -3,6 +3,7 @@
 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
@@ -29,8 +30,12 @@ export default function Procesador({ filtros }: Props) {
     const [data, setData] = useState<procesador[]>([])
 
     useEffect(() => {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
+
         const getAntiguedad = async () => {
-            const response = await axios.post(`${api_url}/equipos/grafica/procesador`, filtros)
+            const response = await axios.post(`${api_url}/equipos/grafica/procesador`, filtros, { headers }
+            )
 
             setData(response.data)
         }
@@ -79,7 +84,7 @@ export default function Procesador({ filtros }: Props) {
                     <Tooltip
                         formatter={(value) => [`${value}`]}
                     />
-                    <Legend />
+                    <Legend wrapperStyle={{ fontSize: 12 }}/>
                     {tieneAdscripciones ? (
 
                         adscripciones.map((ads, i) => (

src/components/reporteGraficas/Graficas/SistemaOperativo.tsx

@@ -3,6 +3,7 @@
 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
@@ -29,8 +30,11 @@ export default function SistemaOperativo({ filtros }: Props) {
     const [data, setData] = useState<so[]>([])
 
     useEffect(() => {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
         const getAntiguedad = async () => {
-            const response = await axios.post(`${api_url}/equipos/grafica/so`, filtros)
+            const response = await axios.post(`${api_url}/equipos/grafica/so`, filtros, { headers }
+            )
 
             setData(response.data)
         }
@@ -78,7 +82,7 @@ export default function SistemaOperativo({ filtros }: Props) {
                     <Tooltip
                         formatter={(value) => [`${value}`]}
                     />
-                    <Legend />
+                    <Legend wrapperStyle={{ fontSize: 12 }}/>
                     {tieneAdscripciones ? (
 
                         adscripciones.map((ads, i) => (

src/components/reporteGraficas/Graficas/Uso.tsx

@@ -3,6 +3,7 @@
 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
@@ -29,9 +30,13 @@ export default function Uso({ filtros }: Props) {
     const [data, setData] = useState<UsoData[]>([])
 
     useEffect(() => {
+        const token = Cookies.get("token");
+        const headers = { Authorization: `Bearer ${token}` };
+        
         const getUso = async () => {
             const response = await axios.post(
-                `${api_url}/equipos/grafica/uso`, filtros
+                `${api_url}/equipos/grafica/uso`, filtros,
+                { headers }
             )
             setData(response.data)
         }
@@ -80,7 +85,7 @@ export default function Uso({ filtros }: Props) {
                     <Tooltip
                         formatter={(value) => [`${value}`]}
                     />
-                    <Legend />
+                    <Legend wrapperStyle={{ fontSize: 12 }}/>
                     {tieneAdscripciones ? (
 
                         adscripciones.map((ads, i) => (

src/components/reporteGraficas/Tablas/Antiguedad.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import styles from './TableAntiguedad.module.css'
 import axios from 'axios'
 import DownloadTable from '@/components/Dowload/tabla'
+import Cookies from "js-cookie";
 
 interface Props {
   filtros: any
@@ -17,12 +18,17 @@ export default function TableAntiguedad({ filtros, count }: Props) {
   const [data, setData] = useState<any[]>([])
 
   useEffect(() => {
+    if (!filtros) { return }
+
     const getUso = async () => {
+      const token = Cookies.get("token");
+      const headers = { Authorization: `Bearer ${token}` };
+
       const endpoint = count
         ? `${api_url}/equipos/tabla/count`
         : `${api_url}/equipos/tabla`
 
-      const response = await axios.post(endpoint, filtros)
+      const response = await axios.post(endpoint, filtros,{headers})
       setData(response.data)
     }
 

src/components/reporteGraficas/reporte.tsx

@@ -12,6 +12,7 @@ import Uso from "./Graficas/Uso"
 
 import Cookies from "js-cookie";
 import TableAntiguedad from "./Tablas/Antiguedad"
+import Polar from "./Graficas/Polar"
 const api_url = process.env.NEXT_PUBLIC_API_URL;
 
 type AdscripcionOption = {
@@ -160,6 +161,7 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Adscripción</label>
 
                         <Select
+                            instanceId="adscripcion"
                             options={adscripciones}
                             getOptionLabel={(o) => o.adscripcion}
                             getOptionValue={(o) => o.id_adscripcion}
@@ -197,6 +199,7 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Procesador</label>
 
                         <Select
+                            instanceId="procesadores"
                             options={procesadores}
                             getOptionLabel={(o) => o.procesador}
                             getOptionValue={(o) => o.id_procesador}
@@ -237,6 +240,7 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Sistema Operativo</label>
 
                         <Select
+                            instanceId="sistemasOperativos"
                             options={sistemasOperativos}
                             getOptionLabel={(o) => o.sistema_operativo}
                             getOptionValue={(o) => o.id_sistema_operativo}
@@ -278,6 +282,7 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Uso</label>
 
                         <Select
+                            instanceId="usos"
                             options={usos}
                             getOptionLabel={(o) => o.tipo_uso}
                             getOptionValue={(o) => o.id_uso}
@@ -317,6 +322,7 @@ export default function Reporte() {
                         <label className={styles.adscripcion}>Antiguedad</label>
 
                         <Select
+                            instanceId="antiguedad"
                             options={antiguedad}
                             getOptionLabel={(o) => o.antiguedad}
                             getOptionValue={(o) => o.antiguedad}
@@ -373,6 +379,10 @@ export default function Reporte() {
                     filtros={filtros}
                 />
 
+                <Polar tipo="ALUMNO" filtros={filtros} />
+                <Polar tipo="PROFESOR" filtros={filtros} />
+                <Polar tipo="ADMINISTRATIVO" filtros={filtros} />
+
                 <Procesador
                     filtros={filtros}
                 />

src/components/reporte_graficas_perifericos/Graficas/Antiguedad.tsx

@@ -95,7 +95,7 @@ export default function Antiguedad({ filtros }: Props) {
             }}
         >
 
-            <h1 style={{ margin: "0" }}>Antigüedad por equipo</h1>
+            <h1 style={{ margin: "0" }}>Antigüedad por periferico</h1>
 
             <ResponsiveContainer width="100%" aspect={2.5}>
 

src/components/reporte_graficas_perifericos/Graficas/Uso.tsx

@@ -65,7 +65,7 @@ export default function Uso({ filtros }: Props) {
 
     return (
         <div style={{ minWidth: "570px", background: "white", borderRadius: "10px", padding: "1rem" }}>
-            <h1 style={{ margin: "0" }}>Uso por equipo</h1>
+            <h1 style={{ margin: "0" }}>Uso por periferico</h1>
             <ResponsiveContainer width="100%" aspect={2.5} minHeight={220}>
                 <BarChart data={dataTransformada}
                     width={500}

src/components/reporte_graficas_perifericos/reporte.tsx

@@ -6,9 +6,12 @@ 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 = {
@@ -21,6 +24,16 @@ type UsoOption = {
     tipo_uso: string
 }
 
+type SoOption = {
+    id_sistema_operativo: string
+    sistema_operativo: string
+}
+
+type ProcesadorOption = {
+    id_procesador: string
+    procesador: string
+}
+
 type AntiguedadOption = {
     antiguedad: string
 }
@@ -30,6 +43,11 @@ export default function ReportePerifericos() {
     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[]>([{ id_uso: "0", tipo_uso: "Todos" }])
     const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])
@@ -62,10 +80,20 @@ export default function ReportePerifericos() {
                 ...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()
@@ -101,12 +129,16 @@ export default function ReportePerifericos() {
 
         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)))
         }
@@ -157,6 +189,88 @@ export default function ReportePerifericos() {
 
                     </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}>
@@ -259,6 +373,16 @@ export default function ReportePerifericos() {
                     filtros={filtros}
                 />
 
+                {/* <Procesador
+                    filtros={filtros}
+                />
+
+                <SistemaOperativo
+                    filtros={filtros}
+                /> */}
+
+                {/* <TableAntiguedad filtros={filtros} count={true} />
+                <TableAntiguedad filtros={filtrosTable} count={false} /> */}
 
             </section>
 

tesuto

@@ -0,0 +1 @@
+probando workflow 3