122 lines
3.0 KiB
TypeScript
122 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import DownloadReporteXLSX from "../Dowload/Reporte";
|
|
import Cookies from "js-cookie";
|
|
|
|
interface Recibo {
|
|
id_recibo: number;
|
|
folio_recibo: string;
|
|
fecha_recibo: string;
|
|
fecha_registro: string;
|
|
monto: string;
|
|
user: {
|
|
usuario: string;
|
|
};
|
|
}
|
|
|
|
interface Props {
|
|
desde: string | null;
|
|
hasta: string | null;
|
|
}
|
|
|
|
export default function PorRecibos({ desde, hasta }: Props) {
|
|
const [recibos, setRecibos] = useState<Recibo[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const columns = [
|
|
{ header: "Folio", key: "folio", width: 15 },
|
|
{ header: "Monto", key: "monto", width: 15 },
|
|
{ header: "Fecha Recibo", key: "fechaRecibo", width: 18 },
|
|
{ header: "Fecha Registro", key: "fechaRegistro", width: 22 },
|
|
{ header: "Usuario", key: "usuario", width: 20 },
|
|
];
|
|
|
|
useEffect(() => {
|
|
if (!desde || !hasta) return;
|
|
|
|
const fetchRecibos = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const token = Cookies.get("token");
|
|
const headers = { Authorization: `Bearer ${token}` };
|
|
|
|
const res = await axios.post(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/recibo/rango`,
|
|
{ desde, hasta },
|
|
{ headers },
|
|
);
|
|
|
|
setRecibos(res.data);
|
|
} catch (error) {
|
|
console.error("Error al obtener recibos", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchRecibos();
|
|
}, [desde, hasta]);
|
|
|
|
const formatearFechaMX = (fechaISO: string) => {
|
|
return new Date(fechaISO).toLocaleString("es-MX", {
|
|
timeZone: "America/Mexico_City",
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
second: "2-digit",
|
|
});
|
|
};
|
|
|
|
|
|
return (
|
|
<div style={{ position: "relative" }}>
|
|
{recibos.length > 0 && <DownloadReporteXLSX data={recibos} columns={columns} />}
|
|
|
|
<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={5}>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>{formatearFechaMX(recibo.fecha_registro)}</td>
|
|
|
|
<td>{recibo.user.usuario}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
//IO
|