67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Toggle from "@/app/Components/Global/Toggle/Toggle";
|
|
import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetween";
|
|
import PorServicios from "@/app/Components/Reportes/porServicio";
|
|
import PorRecibos from "@/app/Components/Reportes/porRecibo";
|
|
import MonthYearPicker from "@/app/Components/MonthYearPicker/MonthYearPicker";
|
|
import PeriodoPicker from "@/app/Components/PeriodoPicker/periodoPicker";
|
|
|
|
export default function ReportesClient({
|
|
defaultKey,
|
|
}: {
|
|
defaultKey?: string;
|
|
}) {
|
|
const [desde, setDesde] = useState<string | null>(null);
|
|
const [hasta, setHasta] = useState<string | null>(null);
|
|
const [periodo1, setPeriodo1] = useState<any>(null);
|
|
const [periodo2, setPeriodo2] = useState<any>(null);
|
|
|
|
return (
|
|
<section className="containerSection">
|
|
<h2 className="title">REPORTES</h2>
|
|
|
|
<Toggle
|
|
defaultView={defaultKey}
|
|
options={[
|
|
{
|
|
key: "Por recibo",
|
|
label: "Por recibo",
|
|
content: (
|
|
<>
|
|
<MonthYearPicker
|
|
onChange={(d, h) => {
|
|
setDesde(d);
|
|
setHasta(h);
|
|
}}
|
|
/>
|
|
<PorRecibos desde={desde} hasta={hasta} />
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
key: "Por Servicio",
|
|
label: "Por Servicio",
|
|
content: (
|
|
<>
|
|
<PeriodoPicker
|
|
onChange={(p1, p2) => {
|
|
setPeriodo1(p1);
|
|
setPeriodo2(p2);
|
|
}}
|
|
/>
|
|
|
|
<PorServicios
|
|
periodo1={periodo1}
|
|
periodo2={periodo2}
|
|
/>
|
|
</>
|
|
),
|
|
}
|
|
]}
|
|
/>
|
|
</section>
|
|
);
|
|
}
|