se cambiaron los filtros para reportes por servicio y recibo para recibir solo parametros de año y mees ademas se elimino la parte de filtro por mes en inscritos

2026-04-06 15:20:36 -06:00
parent bb90e40906
commit f7297a2f64
3 changed files with 80 additions and 27 deletions
@@ -0,0 +1,75 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface Props {
+    onChange: (desde: string, hasta: string) => void;
+    initialYear?: number;
+}
+
+export default function MonthYearPicker({
+    onChange,
+    initialYear,
+}: Props) {
+    const currentYear = new Date().getFullYear();
+
+    const [mes, setMes] = useState<number | null>(null);
+    const [anio, setAnio] = useState<number>(
+        initialYear || currentYear
+    );
+
+    // Generar rango automáticamente
+    useEffect(() => {
+        if (mes !== null && anio !== null) {
+            const inicio = new Date(anio, mes, 1);
+            const fin = new Date(anio, mes + 1, 0);
+
+            const formato = (fecha: Date) =>
+                fecha.toISOString().split("T")[0];
+
+            onChange(formato(inicio), formato(fin));
+        }
+    }, [mes, anio, onChange]);
+
+    return (
+        <div className="flex gap-3 mb-5">
+            {/* MES */}
+            <select
+                className="border rounded-lg px-3 py-2"
+                onChange={(e) => setMes(Number(e.target.value))}
+                defaultValue=""
+            >
+                <option value="" disabled>
+                    Selecciona mes
+                </option>
+                <option value={0}>Enero</option>
+                <option value={1}>Febrero</option>
+                <option value={2}>Marzo</option>
+                <option value={3}>Abril</option>
+                <option value={4}>Mayo</option>
+                <option value={5}>Junio</option>
+                <option value={6}>Julio</option>
+                <option value={7}>Agosto</option>
+                <option value={8}>Septiembre</option>
+                <option value={9}>Octubre</option>
+                <option value={10}>Noviembre</option>
+                <option value={11}>Diciembre</option>
+            </select>
+
+            <select
+                className="border rounded-lg px-3 py-2"
+                value={anio}
+                onChange={(e) => setAnio(Number(e.target.value))}
+            >
+                {Array.from(
+                    { length: currentYear - 2000 + 1 },
+                    (_, i) => 2000 + i
+                ).map((year) => (
+                    <option key={year} value={year}>
+                        {year}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+}