addded dowload
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user