86 lines
1.9 KiB
TypeScript
86 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import axios from 'axios';
|
|
|
|
interface Recibo {
|
|
id_recibo: number;
|
|
folio_recibo: string;
|
|
fecha_recibo: string;
|
|
fecha_registro: string;
|
|
monto: string;
|
|
user:{
|
|
nombre:string;
|
|
}
|
|
}
|
|
|
|
interface Props {
|
|
desde: string | null;
|
|
hasta: string | null;
|
|
}
|
|
|
|
function PorRecibos({ desde, hasta }: Props) {
|
|
const [recibos, setRecibos] = useState<Recibo[]>([]);
|
|
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 }
|
|
);
|
|
|
|
setRecibos(res.data);
|
|
} catch (error) {
|
|
console.error('Error al obtener recibos', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchRecibos();
|
|
}, [desde, hasta]);
|
|
|
|
return (
|
|
<div style={{overflow:"auto",height:"270px", scrollbarColor:"#2563eb white"}}>
|
|
{loading && <p>Cargando...</p>}
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Folio</th>
|
|
<th>Monto</th>
|
|
<th>fecha recibo</th>
|
|
<th>fecha registro</th>
|
|
<th>Usuario</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{!loading && recibos.length === 0 && (
|
|
<tr>
|
|
<td colSpan={2}>No hay recibos en este rango</td>
|
|
</tr>
|
|
)}
|
|
|
|
{recibos.map((recibo) => (
|
|
<tr key={recibo.id_recibo}>
|
|
<td>{recibo.folio_recibo}</td>
|
|
<td>${Number(recibo.monto).toFixed(2)}</td>
|
|
<td>{recibo.fecha_recibo}</td>
|
|
<td>{recibo.fecha_registro}</td>
|
|
<td>{recibo.user.nombre}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PorRecibos;
|