Files
front-Censo/src/components/reporteGraficas/Tablas/Antiguedad.tsx
T
2026-03-26 09:51:36 -05:00

89 lines
2.1 KiB
TypeScript

'use client'
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
count: boolean
}
const api_url = process.env.NEXT_PUBLIC_API_URL;
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,{headers})
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
}