addded dowload

This commit is contained in:
2026-01-15 14:24:02 -06:00
parent adae53fb06
commit d9cf535de7
6 changed files with 173 additions and 46 deletions
+45 -35
View File
@@ -1,7 +1,8 @@
'use client';
"use client";
import { useEffect, useState } from 'react';
import axios from 'axios';
import { useEffect, useState } from "react";
import axios from "axios";
import DownloadReporteXLSX from "../Dowload/Reporte";
interface Recibo {
id_recibo: number;
@@ -9,9 +10,9 @@ interface Recibo {
fecha_recibo: string;
fecha_registro: string;
monto: string;
user:{
nombre:string;
}
user: {
nombre: string;
};
}
interface Props {
@@ -36,7 +37,7 @@ function PorRecibos({ desde, hasta }: Props) {
setRecibos(res.data);
} catch (error) {
console.error('Error al obtener recibos', error);
console.error("Error al obtener recibos", error);
} finally {
setLoading(false);
}
@@ -46,38 +47,47 @@ function PorRecibos({ desde, hasta }: Props) {
}, [desde, hasta]);
return (
<div style={{overflow:"auto",height:"270px", scrollbarColor:"#2563eb white"}}>
{loading && <p>Cargando...</p>}
<div style={{ position: "relative" }}>
{recibos.length > 0 && <DownloadReporteXLSX />}
<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 && (
<table>
<thead>
<tr>
<td colSpan={2}>No hay recibos en este rango</td>
<th>Folio</th>
<th>Monto</th>
<th>fecha recibo</th>
<th>fecha registro</th>
<th>Usuario</th>
</tr>
)}
</thead>
{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>
<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>
</div>
);
}