added filter and grafics
This commit is contained in:
@@ -3,15 +3,13 @@
|
||||
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 +18,6 @@ export default function Page() {
|
||||
const renderPregunta = () => {
|
||||
switch (activeTab) {
|
||||
case "antiguedad":
|
||||
return (
|
||||
<Antiguedad />
|
||||
);
|
||||
case "adscripcion":
|
||||
return (
|
||||
<Reporte />
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
'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[]>([
|
||||
{ antiguedad: "0", total: 0 }
|
||||
])
|
||||
useEffect(() => {
|
||||
const getAntiguedad = async () => {
|
||||
const response = await axios.get("http://localhost:3001/equipos/grafica/antiguedad")
|
||||
|
||||
setAntiguedad(response.data)
|
||||
}
|
||||
getAntiguedad()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div style={{ minWidth: "570px", background:"white", borderRadius:"10px", margin:"5px auto", padding:"1rem", maxWidth:"100%"}}>
|
||||
<h1 style={{margin:"0"}}>Antigüedad</h1>
|
||||
<ResponsiveContainer width="100%" aspect={2}>
|
||||
<BarChart data={antiguedad}
|
||||
width={100}
|
||||
height={100}
|
||||
margin={{
|
||||
top: 20,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="antiguedad" fontSize={12}/>
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="total" fill="#095bd6" />
|
||||
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
'use client'
|
||||
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||
|
||||
interface antiguedad {
|
||||
procesador: string;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export default function Procesador() {
|
||||
const [antiguedad, setAntiguedad] = useState<antiguedad[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
const getAntiguedad = async () => {
|
||||
const response = await axios.get("http://localhost:3001/equipos/grafica/procesador")
|
||||
|
||||
setAntiguedad(response.data)
|
||||
}
|
||||
getAntiguedad()
|
||||
}, [])
|
||||
|
||||
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} minHeight={270}>
|
||||
<BarChart data={antiguedad}
|
||||
width={500}
|
||||
height={300}
|
||||
margin={{
|
||||
top: 20,
|
||||
bottom:20,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="procesador" fontSize={12} angle={40} textAnchor="start" hide/>
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="total" fill="#095bd6" />
|
||||
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client'
|
||||
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||
|
||||
interface antiguedad {
|
||||
so: string;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export default function SistemaOperativo() {
|
||||
const [antiguedad, setAntiguedad] = useState<antiguedad[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
const getAntiguedad = async () => {
|
||||
const response = await axios.get("http://localhost:3001/equipos/grafica/so")
|
||||
|
||||
setAntiguedad(response.data)
|
||||
}
|
||||
getAntiguedad()
|
||||
}, [])
|
||||
|
||||
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}>
|
||||
<BarChart data={antiguedad}
|
||||
width={500}
|
||||
height={300}
|
||||
margin={{
|
||||
top: 20,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="so" fontSize={12} angle={30} textAnchor="start" hide/>
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="total" fill="#095bd6" />
|
||||
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
'use client'
|
||||
|
||||
import axios from "axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||
|
||||
interface antiguedad {
|
||||
uso: string;
|
||||
total: number;
|
||||
}
|
||||
|
||||
export default function Uso() {
|
||||
const [antiguedad, setAntiguedad] = useState<antiguedad[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
const getAntiguedad = async () => {
|
||||
const response = await axios.get("http://localhost:3001/equipos/grafica/uso")
|
||||
|
||||
setAntiguedad(response.data)
|
||||
}
|
||||
getAntiguedad()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div style={{ minWidth: "570px", background:"white", borderRadius:"10px", margin:"5px auto", padding:"1rem"}}>
|
||||
<h1 style={{margin:"0"}}>Uso</h1>
|
||||
<ResponsiveContainer width="100%" aspect={2} minHeight={270}>
|
||||
<BarChart data={antiguedad}
|
||||
width={500}
|
||||
height={300}
|
||||
margin={{
|
||||
top: 20,
|
||||
}}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="uso" fontSize={12}/>
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Bar dataKey="total" fill="#095bd6" />
|
||||
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,76 +1,92 @@
|
||||
.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: #f1f3f5;
|
||||
border-radius: 6px;
|
||||
padding: 5px 10px;
|
||||
font-size: 13px;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.remove{
|
||||
border:none;
|
||||
background:none;
|
||||
margin-left:6px;
|
||||
cursor:pointer;
|
||||
color:#777;
|
||||
.remove {
|
||||
border: none;
|
||||
background: none;
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.remove:hover{
|
||||
color:#c0392b;
|
||||
.remove:hover {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.button{
|
||||
margin-top:20px;
|
||||
padding:8px 14px;
|
||||
border:none;
|
||||
border-radius:6px;
|
||||
background:#2563eb;
|
||||
color:white;
|
||||
font-size:13px;
|
||||
cursor:pointer;
|
||||
.button {
|
||||
margin-top: 20px;
|
||||
padding: 8px 14px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:hover{
|
||||
background:#1d4ed8;
|
||||
.button:hover {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.graficas {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filtro {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.containerSelection {
|
||||
width: 100%;
|
||||
min-width: 200px
|
||||
}
|
||||
@@ -1,99 +1,311 @@
|
||||
"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"
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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[]>([])
|
||||
const [usoSeleccionado, setUsoSeleccionado] = useState<UsoOption[]>([])
|
||||
|
||||
|
||||
const [antiguedadActiva, setAntiguedadActiva] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const cargarDatos = async () => {
|
||||
|
||||
const [
|
||||
adscripcionRes,
|
||||
procesadorRes,
|
||||
usoRes,
|
||||
soRes
|
||||
] = await Promise.all([
|
||||
axios.get("http://localhost:3001/equipos/adscripciones"),
|
||||
axios.get("http://localhost:3001/equipos/procesador-tipo-equipos"),
|
||||
axios.get("http://localhost:3001/equipos/usos"),
|
||||
axios.get("http://localhost:3001/equipos/sistemas-operativos")
|
||||
])
|
||||
|
||||
setAdscripciones(adscripcionRes.data)
|
||||
setProcesadores(procesadorRes.data)
|
||||
setUsos(usoRes.data)
|
||||
setSistemasOperativos(soRes.data)
|
||||
|
||||
}
|
||||
|
||||
cargarDatos()
|
||||
|
||||
}, [])
|
||||
|
||||
function agregar<T>(option: T | null, lista: T[], setLista: (v: T[]) => void, key: keyof T) {
|
||||
|
||||
if (!option) return
|
||||
|
||||
const existe = 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)
|
||||
|
||||
console.log("Adscripciones:", adscripcionesSeleccionadas)
|
||||
console.log("Procesadores:", procesadorSeleccionado)
|
||||
console.log("Sistemas Operativos:", soSeleccionado)
|
||||
console.log("Usos:", usoSeleccionado)
|
||||
console.log("Antigüedad activa:", antiguedadActiva)
|
||||
|
||||
}
|
||||
|
||||
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}>Antigüedad</label>
|
||||
|
||||
<button
|
||||
className={styles.toggle}
|
||||
onClick={() => setAntiguedadActiva(!antiguedadActiva)}
|
||||
>
|
||||
{antiguedadActiva ? "Desactivar" : "Activar"}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<button
|
||||
className={styles.button}
|
||||
onClick={generarReporte}
|
||||
>
|
||||
Generar reporte
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={styles.button}
|
||||
onClick={generarReporte}
|
||||
>
|
||||
Generar reporte
|
||||
</button>
|
||||
|
||||
</div>
|
||||
<section className={styles.graficas}>
|
||||
|
||||
<Antiguedad />
|
||||
<Uso />
|
||||
<Procesador />
|
||||
<SistemaOperativo />
|
||||
|
||||
</section>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -35,15 +35,6 @@ export function proxy(request: NextRequest) {
|
||||
|
||||
export const config = {
|
||||
matcher: [
|
||||
"/escaner",
|
||||
"/agregarEquipo",
|
||||
"/editar",
|
||||
"/crearCuenta",
|
||||
"/equipoComputo",
|
||||
"/perifericos",
|
||||
"/ranking",
|
||||
"/historial",
|
||||
"/cambiarPass"
|
||||
],
|
||||
};
|
||||
//IO
|
||||
|
||||
Reference in New Issue
Block a user