82 lines
1.8 KiB
TypeScript
82 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
|
|
interface ServicioReporte {
|
|
id_servicio: number;
|
|
servicio: string;
|
|
total: string;
|
|
}
|
|
|
|
interface Props {
|
|
desde: string | null;
|
|
hasta: string | null;
|
|
}
|
|
|
|
export default function PorServicio({ desde, hasta }: Props) {
|
|
const [servicios, setServicios] = useState<ServicioReporte[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!desde || !hasta) return;
|
|
|
|
const fetchServicios = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await axios.post(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/detalle-servicio/rango`,
|
|
{ desde, hasta }
|
|
);
|
|
|
|
setServicios(res.data);
|
|
} catch (error) {
|
|
console.error("Error al obtener reporte por servicio", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchServicios();
|
|
}, [desde, hasta]);
|
|
|
|
return (
|
|
<div style={{ position: "relative" }}>
|
|
|
|
<div
|
|
style={{
|
|
overflow: "auto",
|
|
height: "270px",
|
|
scrollbarColor: "#2563eb white",
|
|
}}
|
|
>
|
|
{loading && <p>Cargando...</p>}
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Servicio</th>
|
|
<th>Monto total</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{!loading && servicios.length === 0 && (
|
|
<tr>
|
|
<td colSpan={2}>No hay servicios en este rango</td>
|
|
</tr>
|
|
)}
|
|
|
|
{servicios.map((servicio) => (
|
|
<tr key={servicio.id_servicio}>
|
|
<td>{servicio.servicio}</td>
|
|
<td>${Number(servicio.total).toFixed(2)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
//IO
|