se modifico la manera en que se traen los datos del back-end para reportes y se creo un componente llamado PeriodoPicker, para poder traer la informacion de los periodos por rango

app/Components/PeriodoPicker/periodoPicker.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+import Cookies from "js-cookie";
+import { envConfig } from "@/app/lib/config";
+interface Periodo {
+    id_periodo: number;
+    semestre: string;
+    fecha_inicio_servicio: string;
+    fecha_fin_servicio: string;
+}
+
+export default function PeriodoPicker({
+    onChange,
+}: {
+    onChange: (p1: Periodo | null, p2: Periodo | null) => void;
+}) {
+    const [periodos, setPeriodos] = useState<Periodo[]>([]);
+    const [p1, setP1] = useState<number | null>(null);
+    const [p2, setP2] = useState<number | null>(null);
+
+
+    const token = Cookies.get("token");
+    const headers = { Authorization: `Bearer ${token}` };
+
+    useEffect(() => {
+        const fetchPeriodos = async () => {
+            const res = await axios.get(`${envConfig.apiUrl}/periodo`, { headers });
+            setPeriodos(res.data);
+        };
+        fetchPeriodos();
+    }, []);
+
+    useEffect(() => {
+        const periodo1 = periodos.find(p => p.id_periodo === p1) || null;
+        const periodo2 = periodos.find(p => p.id_periodo === p2) || null;
+
+        onChange(periodo1, periodo2);
+    }, [p1, p2]);
+
+    return (
+        <div className="flex gap-4">
+            {/* Periodo 1 */}
+            <select onChange={(e) => setP1(Number(e.target.value))}>
+                <option value="">Periodo 1</option>
+                {periodos.map(p => (
+                    <option key={p.id_periodo} value={p.id_periodo}>
+                        {p.semestre}
+                    </option>
+                ))}
+            </select>
+
+            {/* Periodo 2 */}
+            <select onChange={(e) => setP2(Number(e.target.value))}>
+                <option value="">Periodo 2</option>
+                {periodos.map(p => (
+                    <option key={p.id_periodo} value={p.id_periodo}>
+                        {p.semestre}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+}