Refactor Listado component to fix date parameter bug

FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx

@@ -12,7 +12,7 @@ export default function Listado() {
         full_name: string;
         estado_financiero: string;
       };
-    const { fecha } = useParams<{ fecha: string }>();
+    const {fecha} = useParams<{ fecha: string }>();
     const [abonaron, setAbonaron] = useState<Alumno[]>([]);
     const [totalabonaron, setTotalAbonaron] = useState<number>(0);
     const [noAbonaron, setNoAbonaron] = useState<Alumno[]>([]);
@@ -82,6 +82,7 @@ export default function Listado() {
         fetchAbonaron(fecha);
     }, [limit2, offset2, fecha, filter]);
 
+
     const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setFilter(event.target.value);
     };

FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Select.tsx

@@ -3,15 +3,25 @@ import { Heading, Input, Flex, Button } from '@chakra-ui/react';
 import {formatoFechaAAAAMMaMMAAAA} from '../../../../../utils/general';
 import { useNavigate } from 'react-router-dom';
 
-export default function Select() {
+type SelectProps = {
+    page: string;
+}
+
+const Select: React.FC<SelectProps> = ({ page }) => {
     const [selectedMonth, setSelectedMonth] = useState('');
-    const [fecha, setFecha] = useState('');
     const navigate = useNavigate();
 
     const handleMonthChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setSelectedMonth(event.target.value);
-        setFecha(formatoFechaAAAAMMaMMAAAA(event.target.value));
+    };
 
+    const handleButtonClick = () => {
+        const [year, month] = selectedMonth.split('-');
+        if (page === 'cuotas') {
+        navigate(`/admin/estadisticas/cuotas/${month}-${year}`);
+        } else if (page === 'pagos') {
+        navigate(`/admin/estadisticas/pagos/${year}-${month}`);
+        }
     };
 
     return (
@@ -26,9 +36,11 @@ export default function Select() {
             />
             <Flex  justifyContent={"flex-end"} mt={1}>
                 <Button colorScheme='blue' variant={"solid"}
-                 onClick={() => navigate(`/admin/estadisticas/cuotas/${fecha}`)}
+                 onClick={handleButtonClick}
                 >Solicitar</Button>
             </Flex>
         </Flex>
     );
 };
+
+export default Select;

FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Pagos.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom"
+
+export default function Pagos() {
+
+    const { fecha } = useParams<{ fecha: string }>();
+
+    useEffect (() => {
+    const [year, month] = fecha.split('-');
+
+    }, [fecha]);
+
+    return (
+        <div>
+            <h1>Pagos</h1>
+        </div>
+    )
+
+}

FrontAdmin/src/components/SubMenu/LinksSubMenu.tsx

@@ -4,7 +4,7 @@ export const ITEMS_SUBMENU = [
   { url: 'cuotas', title: 'Cuotas' , tooltip: 'Alumnos que abonaron/no abonaron una respectiva cuota' },
   { url: 'matricula', title: 'Matricula' },
   { url: 'alumnos-que-firmaron-compromiso-de-pago', title: 'Compromiso de Pago'},
-  { url: '#', title: 'Pagos' },
+  { url: 'pagos', title: 'Pagos' },
   {
     url: 'alumnos-que-cursan-materia',
     title: 'Alumnos que cursan una materia',

FrontAdmin/src/routes.tsx

@@ -31,6 +31,7 @@ import path from 'path';
 import EstadoCuenta from './components/Pages-Alumnos/EstadoCuenta/EstadoCuenta';
 import Sysadmin from './components/Pages/SysAdmin/SysAdmin';
 import Matricula from './components/Pages/Estadisticas/SubPages/Matricula';
+import Pagos from './components/Pages/Estadisticas/SubPages/Pagos/Pagos';
 
 const routes = [
   {
@@ -74,14 +75,24 @@ const routes = [
       },
       {
         path: 'cuotas',
-        element: <Select />,
+        element: <Select page={'cuotas'} />,
         rol: 'admin',
       },
       {
         path  : 'cuotas/:fecha',
         element: <Listado />,
         rol: 'admin',
       },
+      {
+        path: 'pagos',
+        element: <Select page={'pagos'} />,
+        rol: 'admin',
+      },
+      {
+        path: 'pagos/:fecha',
+        element: <Pagos />,
+        rol: 'admin',
+      },
 
     ],
   },