76 lines
1.5 KiB
TypeScript
76 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import axios from 'axios';
|
|
|
|
interface ReporteRecibo {
|
|
Servicio: string;
|
|
Total: string;
|
|
}
|
|
|
|
interface Props {
|
|
desde: string | null;
|
|
hasta: string | null;
|
|
}
|
|
|
|
function PorRecibos({ desde, hasta }: Props) {
|
|
const [reportes, setReportes] = useState<ReporteRecibo[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!desde || !hasta) return;
|
|
|
|
const fetchRecibos = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await axios.post(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/recibo/rango`,
|
|
{
|
|
desde,
|
|
hasta,
|
|
}
|
|
);
|
|
|
|
setReportes(res.data);
|
|
} catch (error) {
|
|
console.error('Error al obtener recibos', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchRecibos();
|
|
}, [desde, hasta]);
|
|
|
|
return (
|
|
<div>
|
|
{loading && <p>Cargando...</p>}
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Servicio</th>
|
|
<th>Total</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{reportes.length === 0 && !loading && (
|
|
<tr>
|
|
<td colSpan={2}>No hay resultados</td>
|
|
</tr>
|
|
)}
|
|
|
|
{reportes.map((reporte, index) => (
|
|
<tr key={index}>
|
|
<td>{reporte.Servicio}</td>
|
|
<td>{reporte.Total}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PorRecibos;
|