se agregaron vistas de graficas
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user