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

app/(private)/Inscritos/Inscripciones.tsx

@@ -97,14 +97,7 @@ export default function Inscripciones() {
       url = `${envConfig.apiUrl}/alumno-inscrito/inscritos/anio/${periodoInicio}/${periodoFin}`;
     }
 
-if (tipo === "mes") {
-  if (!anio) {
-    alert("Selecciona un año");
-    return;
-  }
 
-  url = `${envConfig.apiUrl}/alumno-inscrito/inscritos/mes/${anio}`;
-}
     try {
       console.log("URL:", url);
 
@@ -214,7 +207,6 @@ if (tipo === "mes") {
         <select value={tipo} onChange={(e) => setTipo(e.target.value as Tipo)}>
           <option value="periodo">Periodo</option>
           <option value="anio">Año</option>
-          <option value="mes">Mes</option>
         </select>
 
         <div className="groupInput">
@@ -263,21 +255,6 @@ if (tipo === "mes") {
               </select>
             </>
           )}
-
-          {/* MES */}
-{tipo === "mes" && (
-  <>
-    <select onChange={(e) => setAnio(Number(e.target.value))}>
-      <option value="">Año</option>
-      {aniosDisponibles.map((a) => (
-        <option key={a} value={a}>
-          {a}
-        </option>
-      ))}
-    </select>
-  </>
-)}
-
           <button className="button buttonSearch" type="submit">
             Buscar
           </button>

app/(private)/Reportes/ReportesClient.tsx

@@ -5,6 +5,7 @@ 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";
 
 export default function ReportesClient({
   defaultKey,
@@ -26,8 +27,8 @@ export default function ReportesClient({
             label: "Por recibo",
             content: (
               <>
-                <SearchDateBetween
-                  onSearch={(d, h) => {
+                <MonthYearPicker
+                  onChange={(d, h) => {
                     setDesde(d);
                     setHasta(h);
                   }}
@@ -41,8 +42,8 @@ export default function ReportesClient({
             label: "Por Servicio",
             content: (
               <>
-                <SearchDateBetween
-                  onSearch={(d, h) => {
+                <MonthYearPicker
+                  onChange={(d, h) => {
                     setDesde(d);
                     setHasta(h);
                   }}

app/Components/MonthYearPicker/MonthYearPicker.tsx

@@ -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>
+    );
+}