se agregaron vistas de graficas

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

@@ -1,17 +1,62 @@
 "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={`data-table_reporte`}><Reporte /></div>
+          <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/(Administrador)/reportes_graficas_perifericos/page.tsx

@@ -1,19 +0,0 @@
-"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/components/reporte_graficas_perifericos/reporte.tsx

@@ -6,12 +6,9 @@ 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 = {
@@ -24,16 +21,6 @@ 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
 }
@@ -43,11 +30,6 @@ 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[]>([])
@@ -80,20 +62,10 @@ 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()
@@ -129,16 +101,12 @@ 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)))
         }
@@ -189,88 +157,6 @@ 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}>
@@ -373,16 +259,6 @@ export default function ReportePerifericos() {
                     filtros={filtros}
                 />
 
-                <Procesador
-                    filtros={filtros}
-                />
-
-                <SistemaOperativo
-                    filtros={filtros}
-                />
-
-                <TableAntiguedad filtros={filtros} count={true} />
-                <TableAntiguedad filtros={filtrosTable} count={false} />
 
             </section>