From 159ef365816bde801b802874530ca96137aaa839 Mon Sep 17 00:00:00 2001
From: yoelmarain <jmarain62@gmail.com>
Date: Mon, 14 Oct 2024 19:23:23 -0300
Subject: [PATCH] Refactor Listado component to fix date parameter bug

---
 .../Estadisticas/SubPages/Cuotas/Listado.tsx  |  3 ++-
 .../Estadisticas/SubPages/Cuotas/Select.tsx   | 20 +++++++++++++++----
 .../Estadisticas/SubPages/Pagos/Pagos.tsx     | 19 ++++++++++++++++++
 .../src/components/SubMenu/LinksSubMenu.tsx   |  2 +-
 FrontAdmin/src/routes.tsx                     | 13 +++++++++++-
 5 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Pagos.tsx

diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
index 4594a7d..c758edd 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
+++ b/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);
     };
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Select.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Select.tsx
index 4ff2dff..c9eec0c 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Select.tsx
+++ b/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;
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Pagos.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pagos/Pagos.tsx
new file mode 100644
index 0000000..daf51ee
--- /dev/null
+++ b/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>
+    )
+
+}
\ No newline at end of file
diff --git a/FrontAdmin/src/components/SubMenu/LinksSubMenu.tsx b/FrontAdmin/src/components/SubMenu/LinksSubMenu.tsx
index e620baa..a138188 100644
--- a/FrontAdmin/src/components/SubMenu/LinksSubMenu.tsx
+++ b/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',
diff --git a/FrontAdmin/src/routes.tsx b/FrontAdmin/src/routes.tsx
index ba93431..d9e8e6f 100644
--- a/FrontAdmin/src/routes.tsx
+++ b/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,7 +75,7 @@ const routes = [
       },
       {
         path: 'cuotas',
-        element: <Select />,
+        element: <Select page={'cuotas'} />,
         rol: 'admin',
       },
       {
@@ -82,6 +83,16 @@ const routes = [
         element: <Listado />,
         rol: 'admin',
       },
+      {
+        path: 'pagos',
+        element: <Select page={'pagos'} />,
+        rol: 'admin',
+      },
+      {
+        path: 'pagos/:fecha',
+        element: <Pagos />,
+        rol: 'admin',
+      },
 
     ],
   },