From 334593fae1c1e852c4c8f5ea3feeecb402decd29 Mon Sep 17 00:00:00 2001
From: yoelmarain <jmarain62@gmail.com>
Date: Sat, 12 Oct 2024 14:36:46 -0300
Subject: [PATCH 1/4] Refactor table headers in EstadoCuenta and Listado
 components

---
 .../EstadoCuenta/EstadoCuenta.tsx             |  2 +-
 .../Pages-Alumnos/InformarPago/DrawerPago.tsx | 10 ++---
 .../Pages-Alumnos/InformarPago/TablaPagos.tsx |  2 +-
 .../Estadisticas/SubPages/Cuotas/Listado.tsx  | 45 +++++++++++++------
 .../Estadisticas/SubPages/Cuotas/Tabla.tsx    | 10 ++---
 5 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx b/FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx
index 49f217cc..13af2951 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/EstadoCuenta/EstadoCuenta.tsx
@@ -296,7 +296,7 @@ function InformarPago() {
                           <Th textAlign="center" >
                             Numero
                           </Th>
-                          <Th textAlign="center">Fecha Primer Vto.</Th>
+                          <Th textAlign="center">Fecha Proximo Vto.</Th>
                           <Th textAlign="center">Valor Actual</Th>
                           <Th textAlign="center">Valor Pagado</Th>
                           <Th textAlign="center">Valor Informado</Th>
diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx
index 8e9ed6d9..fb772c98 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx
@@ -143,9 +143,9 @@ const DrawerInformar: React.FC<DrawerInformarProps> = ({ isOpen, onClose, cuotas
                 ))}
             </Stack>
             <Text mt={4}>Total a abonar:</Text>
-            <Text mb={4} mt={4} fontWeight={600} textAlign={"center"} fontSize={22}>{"$" + new Intl.NumberFormat('es-ES').format(total)}</Text>
+            <Text mb={1} mt={4} fontWeight={600} textAlign={"center"} fontSize={22}>{"$" + new Intl.NumberFormat('es-ES').format(total)}</Text>
           
-            <FormControl isRequired={true}>
+            {/* <FormControl isRequired={true}>
                 <FormLabel mb={0}>Monto Abonado</FormLabel>
                 <InputGroup>
                     <InputLeftElement pointerEvents='none' color='gray.300' fontSize='1.2em'>
@@ -154,14 +154,14 @@ const DrawerInformar: React.FC<DrawerInformarProps> = ({ isOpen, onClose, cuotas
                     <Input placeholder='' value={montoAbonado} onChange={handleMontoAbonadoChange} />
                 </InputGroup>
             
-            </FormControl>
+            </FormControl> */}
             <Stack gap={0}>
-              <FormLabel mt={4} mb={0}>Comentarios</FormLabel>
+              <FormLabel mt={2} mb={0}>Comentarios</FormLabel>
               <Input placeholder='' mt={0}  onChange={(e) => setComentarios(e.target.value)} />
             </Stack>
             <Stack bg={'secundaryBg'} direction={'row'} alignItems={'center'} borderRadius={5} mt={4} mb={4} p={4} gap={4}>
                 <Icon as={InfoOutlineIcon} w={7} h={7} />
-                <Text as={'i'}>Al seleccionar Guardar se lo redirigira al google forms para que pueda continuar con el informe del pago</Text>
+                <Text as={'i'}>Al seleccionar Guardar se lo redirigira al google forms para que pueda continuar con el informe del pago. Revisar tener desactivado el bloqueo de ventanas emergentes</Text>
             </Stack>
             </DrawerBody>
             <DrawerFooter>
diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
index a1d68c5f..a6edaf19 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
@@ -94,7 +94,7 @@ function TablaCuotas({ refresh, setCuotasSeleccionadas, cuotasSeleccionadas }: T
                     <Tr mt={6}>
                       <Th></Th>
                       <Th textAlign="center" p={1}>Cuota</Th>
-                      <Th textAlign="center">Fecha Primer VTO.</Th>
+                      <Th textAlign="center">Fecha Proximo VTO.</Th>
                       <Th textAlign="center">Valor Actual</Th>
                       <Th textAlign="center">Valor Pagado</Th>
                       <Th textAlign="center">Valor Informado</Th>
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
index b9fe12e1..5db4ea32 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
@@ -16,7 +16,7 @@ export default function Listado() {
     const [totalabonaron, setTotalAbonaron] = useState<number>(0);
     const [noAbonaron, setNoAbonaron] = useState<Alumno[]>([]);
     const [totalNoAbonaron, setTotalNoAbonaron] = useState<number>(0);
-    const headers = ['Nombre',  'DNI', 'Situación'];
+    const headers = ['Nombre',  'DNI', 'Estado financiero'];
     const [limit1] = useState(10);
     const [offset1, setOffset1] = useState(0);
     const [limit2] = useState(10);
@@ -48,7 +48,6 @@ export default function Listado() {
     
 
     useEffect(() => {
-
         const fetchNoAbonaron = async (fecha: string) => {
             const data = await NoAbonaronCuota(fecha, limit1, offset1);
             if (data.results.length > 0) {
@@ -56,7 +55,6 @@ export default function Listado() {
             setTotalNoAbonaron(data.count);
             }
         }
-
         if (fecha === undefined) {
             return;
         }
@@ -65,7 +63,6 @@ export default function Listado() {
     }, [limit1, offset1]);
 
     useEffect(() => {
-
         const fetchAbonaron = async (fecha: string) => {
             const data = await AbonaronCuota(fecha);
             if (data.results.length > 0) {
@@ -74,12 +71,10 @@ export default function Listado() {
             }
 
         }
-
         if (fecha === undefined) {
             return;
         }
         fetchAbonaron(fecha);
-
     }, [limit2, offset2]);
 
 
@@ -89,21 +84,45 @@ export default function Listado() {
         alignItems={"center"}
         flex={1}>
                 <Tabs w={"100%"}>
-                    <TabList>
-                        <Tab>Abonaron</Tab>
-                        <Tab>No abonaron</Tab>
+                <TabList display="flex" justifyContent="center" alignItems="center" borderBottom="2px solid" borderColor="gray.200">
+                    <Tab
+                        _selected={{
+                        borderBottom: "2px solid",
+                        borderColor: "blue.500",
+                        color: "blue.500",
+                        borderTop: "none",
+                        borderLeft: "none",
+                        borderRight: "none"
+                        }}
+                        _focus={{ boxShadow: "none" }}
+                    >
+                        Abonaron
+                    </Tab>
+                    <Tab
+                        _selected={{
+                        borderBottom: "2px solid",
+                        borderColor: "blue.500",
+                        color: "blue.500",
+                        borderTop: "none",
+                        borderLeft: "none",
+                        borderRight: "none"
+                        }}
+                        _focus={{ boxShadow: "none" }}
+                    >
+                        No abonaron
+                    </Tab>
                     </TabList>
 
                     <TabPanels>
                         <TabPanel>
                         <Flex>
                             {abonaron.length > 0 ? <Flex direction={"column"} w={"100%"}>
-                                <Flex direction={"row"} w={"100%"} flex={1} textAlign={"center"} ml={"33%"} gap={4} mb={4}>
-                                    <Tag colorScheme="secundaryBg" size="lg"> Total: {totalabonaron}</Tag>
-                                    <Tag colorScheme="secundaryBg" size="lg"> Periodo: {fecha} </Tag>
+                                <Flex direction={"row"} w={"100%"} alignItems={"center"} justifyContent={"center"}  gap={4} mb={4}>
+                                    <Box w={"100%"} p="10px"> Total: {totalabonaron}</Box>
+                                    <Box w={"100%"} p="10px"> Periodo: {fecha} </Box>
                                 </Flex>
                                     <Tabla headers={headers} data={abonaron} /> 
-                                    <Box bottom="0" width="100%" bg="white" p="10px" mt={2} boxShadow="md" >
+                                    <Box bottom="0" width="100%" bg="white" p="10px" mt={4} boxShadow="md" >
                                             <Flex justifyContent="space-between" alignItems={"center"}>
                                             <Button onClick={handlePreviousPage2} isDisabled={offset2 === 0} color="white" leftIcon={<ArrowLeftIcon/>}>
                                                 Anterior
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
index 422ff8db..aa02092e 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
@@ -21,17 +21,17 @@ const Tabla: React.FC<TablaProps> = ({ headers, data }) => {
   const keyMap: { [key: string]: string } = {
     'Nombre': 'full_name',
     'DNI': 'user',
-    'Situación': 'estado_financiero',
+    'Estado financiero': 'estado_financiero',
   };
 
   return (
     <Box w={"100%"}>
       <TableContainer borderWidth={1} borderColor={'grey.700'}>
-        <Table variant="simple">
-          <Thead>
-            <Tr bg="secundary">
+        <Table>
+          <Thead >
+            <Tr >
               {headers.map((header) => (
-                <Th key={header} textAlign="center">{header}</Th>
+                <Th key={header} textAlign="center" fontFamily="Helvetica" fontWeight="900">{header}</Th>
               ))}
             </Tr>
           </Thead>

From 9994fa423de8f2f05fe9e0ad058b135b06d191e4 Mon Sep 17 00:00:00 2001
From: yoelmarain <jmarain62@gmail.com>
Date: Sat, 12 Oct 2024 19:15:06 -0300
Subject: [PATCH 2/4] Refactor FetchGetCuotas to accept dni parameter

---
 FrontAdmin/src/API-Alumnos/Pagos.ts           |   7 +-
 .../Pages-Alumnos/InformarPago/TablaPagos.tsx |   2 +-
 .../Pages/Alumnos/SubPages/FichaAlumno.tsx    | 101 +++++++++++++++---
 .../Estadisticas/SubPages/Cuotas/Listado.tsx  |  29 +++--
 .../Estadisticas/SubPages/Cuotas/Tabla.tsx    |  21 ++--
 5 files changed, 122 insertions(+), 38 deletions(-)

diff --git a/FrontAdmin/src/API-Alumnos/Pagos.ts b/FrontAdmin/src/API-Alumnos/Pagos.ts
index 71b6718e..399f0361 100644
--- a/FrontAdmin/src/API-Alumnos/Pagos.ts
+++ b/FrontAdmin/src/API-Alumnos/Pagos.ts
@@ -36,11 +36,12 @@ export const FetchPostPago = async (
 };
 
 
-export const FetchGetCuotas = async () => {
+export const FetchGetCuotas = async (dni: number | undefined ) => {
     try {
         const token = Cookies.get('tokennn');
-        const dni = Cookies.get('dni');
-        
+        if (!dni) {
+            dni = parseInt(Cookies.get('dni') || '', 10);
+        }
         const response = await fetch(`http://localhost:8000/api/cuotas/alumno/${dni}/impagas/`, {
             method: 'GET',
             headers: {
diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
index a6edaf19..d98cc182 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
@@ -39,7 +39,7 @@ function TablaCuotas({ refresh, setCuotasSeleccionadas, cuotasSeleccionadas }: T
       const getCuotas = async () => {
           setLoading(true);
           try {
-              const cuotas = await FetchGetCuotas();
+              const cuotas = await FetchGetCuotas(undefined);
               const sortedCuotas = cuotas.sort((a: Cuota, b: Cuota) => parseInt(a.numero) - parseInt(b.numero));      // Si cambia el numero de cuota no olvidar cambiar aca
               setCuotas(sortedCuotas);
           } catch (error) {
diff --git a/FrontAdmin/src/components/Pages/Alumnos/SubPages/FichaAlumno.tsx b/FrontAdmin/src/components/Pages/Alumnos/SubPages/FichaAlumno.tsx
index 1f33ced9..12558932 100644
--- a/FrontAdmin/src/components/Pages/Alumnos/SubPages/FichaAlumno.tsx
+++ b/FrontAdmin/src/components/Pages/Alumnos/SubPages/FichaAlumno.tsx
@@ -32,6 +32,7 @@ import {
   FetchDetalleAlumno,
   FetchMateriasAlumno,
 } from '../../../../API/DetalleAlumno.ts';
+import { FetchGetCuotas } from '../../../../API-Alumnos/Pagos.ts';
 import { FetchCompromisosAlumno } from '../../../../API-Alumnos/Compromiso.ts';
 import React, { useState, useEffect, useMemo } from 'react';
 import { ArrowLeftIcon, ChevronLeftIcon } from '@chakra-ui/icons';
@@ -75,6 +76,7 @@ function FichaAlumno() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<unknown>(null);
   const [firmoCompromiso, setFirmoCompromiso] = useState<boolean>(false);
+  const [deuda, setDeuda] = useState<number>(0);
   const navigate = useNavigate();
 
   const handleBackClick = () => {
@@ -93,8 +95,6 @@ function FichaAlumno() {
       } catch (error) {
         setError(error);
         console.error('Error al obtener los datos', error);
-      } finally {
-        setLoading(false);
       }
     };
 
@@ -129,10 +129,36 @@ function FichaAlumno() {
     }
     }
 
+    const fetchImpagas = async () => {
+      try {
+        if (dni) {
+          const dniNumber = parseInt(dni, 10); 
+          const data = await FetchGetCuotas(dniNumber);
+            if (data.length > 0) {
+            const today = new Date();
+            const totalDeuda = data.reduce((acc: number, cuota: Cuota) => {
+              const fechaVencimiento = new Date(cuota.fechaVencimiento);
+              if (fechaVencimiento < today) {
+              return acc + cuota.montoActual;
+              }
+              return acc;
+            }, 0);
+            setDeuda(totalDeuda);
+            }
+        }
+      } catch (error) {
+        setError(error);
+        console.error('Error al obtener los datos', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
     if (dni) {
       fetchDetalleAlumno(dni);
       fetchEstadoCuentaAlumno();
       fetchCompromiso();
+      fetchImpagas();
     }
     
 
@@ -152,7 +178,7 @@ function FichaAlumno() {
   
   return (
     
-    <Flex mt="20px">
+    <Flex mt="20px" width={"100%"} >
       <Button
         position="absolute"
         left="120"
@@ -162,7 +188,7 @@ function FichaAlumno() {
       >
         <ArrowLeftIcon mr="10px" /> Volver{' '}
       </Button>
-      <Box borderRight="1px solid #cbd5e0" w="20%" minH="80vh" p="20px">
+      <Box borderRight="1px solid #cbd5e0" w="25%" minH="80vh" p="20px">
         <Text color="gray" mt="30px">
           Apellido y nombre
         </Text>
@@ -219,33 +245,76 @@ function FichaAlumno() {
         
       </Box>
 
-      <Box>
+      <Box w={"100%"}>
         <Flex
           alignItems="center"
           justifyContent="center"
           flexDirection="column"
+          width="100%"
           ml={5}
         >
           <Box
-            borderRadius={8}
+            borderRadius={3}
             borderColor={'gray.200'}
             borderStyle={'solid'}
             borderWidth={1}
             p={3}
-            ml="30px"
+            //ml="30px"
             w="100%"
           >
-            <Tabs>
-              <TabList>
-                <Tab>Estado de cuenta</Tab>
-                <Tab>Materias que cursa</Tab>
-              </TabList>
+            <Tabs w={"100%"}>
+                <TabList display="flex" justifyContent="center" alignItems="center" borderBottom="2px solid" borderColor="gray.200">
+                    <Tab
+                        _selected={{
+                        borderBottom: "2px solid",
+                        borderColor: "blue.500",
+                        color: "blue.500",
+                        borderTop: "none",
+                        borderLeft: "none",
+                        borderRight: "none"
+                        }}
+                        _focus={{ boxShadow: "none" }}
+                    >
+                        Estado de Cuenta
+                    </Tab>
+                    <Tab
+                        _selected={{
+                        borderBottom: "2px solid",
+                        borderColor: "blue.500",
+                        color: "blue.500",
+                        borderTop: "none",
+                        borderLeft: "none",
+                        borderRight: "none"
+                        }}
+                        _focus={{ boxShadow: "none" }}
+                    >
+                        Materias que cursa
+                    </Tab>
+                    <Tab
+                        _selected={{
+                        borderBottom: "2px solid",
+                        borderColor: "blue.500",
+                        color: "blue.500",
+                        borderTop: "none",
+                        borderLeft: "none",
+                        borderRight: "none"
+                        }}
+                        _focus={{ boxShadow: "none" }}
+                    >
+                        Inhabilitaciones
+                    </Tab>
+                    </TabList>
 
               <TabPanels>
-                <TabPanel minW="50vw">
-                      <Tag m="20px" p="10px">
-                    Estado de cuenta al {(new Date().toLocaleDateString())}
-                  </Tag>
+                <TabPanel w={"100%"}>
+                      <Flex justifyContent="center" w={"100%"} mt={1} gap={2} mb={2}>
+                      <Tag m="1px" p="10px" w={"100%"} fontWeight={"bold"} fontSize={16}>
+                          Estado de cuenta al {(new Date().toLocaleDateString())}
+                      </Tag>
+                      <Tag m="1px" p="10px" w="100%" fontWeight={"bold"} fontSize={16}>
+                          Deuda total: {'$ ' + new Intl.NumberFormat('es-ES').format(deuda)}
+                      </Tag>
+                      </Flex>
                   {cuotas.length > 1 ? (
                     <Table variant="simple" width="100%">
                       <Thead>
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
index 5db4ea32..50b68e48 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
@@ -1,9 +1,10 @@
 import { useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { AbonaronCuota, NoAbonaronCuota } from "../../../../../API/AbonaronCuota";
-import { Box, Button, Flex, Tab, TabList, Text ,TabPanel, TabPanels, Tabs, Tag } from "@chakra-ui/react";
+import { Box, Button, Flex, Tab, TabList, Text ,TabPanel, TabPanels, Tabs, Tag, Spinner } from "@chakra-ui/react";
 import Tabla from "./Tabla";
 import {ArrowRightIcon, ArrowLeftIcon} from '@chakra-ui/icons';
+import { isLastDayOfMonth } from "date-fns";
 
 export default function Listado() {
     type Alumno = {
@@ -15,8 +16,10 @@ export default function Listado() {
     const [abonaron, setAbonaron] = useState<Alumno[]>([]);
     const [totalabonaron, setTotalAbonaron] = useState<number>(0);
     const [noAbonaron, setNoAbonaron] = useState<Alumno[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [loading2, setLoading2] = useState<boolean>(true);
     const [totalNoAbonaron, setTotalNoAbonaron] = useState<number>(0);
-    const headers = ['Nombre',  'DNI', 'Estado financiero'];
+    const headers = ['Nombre', 'Legajo' , 'DNI', 'Estado financiero'];
     const [limit1] = useState(10);
     const [offset1, setOffset1] = useState(0);
     const [limit2] = useState(10);
@@ -54,6 +57,7 @@ export default function Listado() {
             setNoAbonaron(data.results);
             setTotalNoAbonaron(data.count);
             }
+            setLoading(false);
         }
         if (fecha === undefined) {
             return;
@@ -69,7 +73,7 @@ export default function Listado() {
             setAbonaron(data.results);
             setTotalAbonaron(data.count);
             }
-
+            setLoading2(false);
         }
         if (fecha === undefined) {
             return;
@@ -78,6 +82,7 @@ export default function Listado() {
     }, [limit2, offset2]);
 
 
+
     return (
         <Flex w={"100%"}
         justifyContent={"center"}
@@ -116,10 +121,11 @@ export default function Listado() {
                     <TabPanels>
                         <TabPanel>
                         <Flex>
-                            {abonaron.length > 0 ? <Flex direction={"column"} w={"100%"}>
-                                <Flex direction={"row"} w={"100%"} alignItems={"center"} justifyContent={"center"}  gap={4} mb={4}>
-                                    <Box w={"100%"} p="10px"> Total: {totalabonaron}</Box>
-                                    <Box w={"100%"} p="10px"> Periodo: {fecha} </Box>
+                            {loading2 ? <Flex justifyContent={"center"} w={"100%"}> <Spinner size="xl" /> </Flex>:
+                            abonaron.length > 0 ? <Flex direction={"column"} w={"100%"}>
+                                 <Flex direction={"row"} w={"100%"} justifyContent={"center"} gap={4} mb={3} >
+                                    <Tag bg="secundaryBg" w={"100%"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Periodo: {fecha} </Tag>
+                                    <Tag bg="secundaryBg" w={"100%"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Total: {totalNoAbonaron}</Tag>
                                 </Flex>
                                     <Tabla headers={headers} data={abonaron} /> 
                                     <Box bottom="0" width="100%" bg="white" p="10px" mt={4} boxShadow="md" >
@@ -139,10 +145,11 @@ export default function Listado() {
                         </TabPanel>
                         <TabPanel>
                         <Flex>
-                            {noAbonaron.length > 0 ? <Flex direction={"column"} w={"100%"} alignItems={"center"}>
-                                <Flex direction={"row"} w={"100%"} flex={1} textAlign={"center"}  gap={4} mb={3} ml={'65%'}>
-                                    <Tag bg="secundaryBg" size="lg" fontSize={18} fontWeight={"bold"} fontFamily={"serif"}> Periodo: {fecha} </Tag>
-                                    <Tag bg="secundaryBg" size="lg" fontSize={18} fontWeight={"bold"} fontFamily={"serif"}> Total: {totalNoAbonaron}</Tag>
+                            {loading ? <Flex justifyContent={"center"} w={"100%"}> <Spinner size="xl" /> </Flex>:
+                            noAbonaron.length > 0 ? <Flex direction={"column"} w={"100%"} alignItems={"center"}>
+                                <Flex direction={"row"} w={"100%"} justifyContent={"center"} gap={4} mb={3} >
+                                    <Tag bg="secundaryBg" w={"100%"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Periodo: {fecha} </Tag>
+                                    <Tag bg="secundaryBg" w={"100%"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Total: {totalNoAbonaron}</Tag>
                                 </Flex>
                                     <Tabla headers={headers} data={noAbonaron} /> 
                                     <Box bottom="0" width="100%" bg="white" p="10px" mt={2} boxShadow="md" >
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
index aa02092e..676c8d3b 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
@@ -10,6 +10,7 @@ import {
   Td,
   Link,
 } from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
 
 interface TablaProps {
   headers: string[];
@@ -22,6 +23,12 @@ const Tabla: React.FC<TablaProps> = ({ headers, data }) => {
     'Nombre': 'full_name',
     'DNI': 'user',
     'Estado financiero': 'estado_financiero',
+    'Legajo': 'legajo',
+  };
+  const navigate = useNavigate();
+
+  const handleRowClick = (dni: any) => {
+    navigate(`/admin/alumnos/${dni}`);
   };
 
   return (
@@ -37,15 +44,15 @@ const Tabla: React.FC<TablaProps> = ({ headers, data }) => {
           </Thead>
           <Tbody>
           {data.map((row, rowIndex) => (
-            <Tr key={rowIndex}>
+            <Tr key={rowIndex} onClick={() => handleRowClick(row[keyMap['DNI']])} cursor="pointer">
                 {headers.map((header) => (
                 <Td key={header} textAlign={header === 'Nombre' ? "left" : "center"}>
-                    {/* Usamos keyMap para obtener la propiedad correcta */}
-                    {typeof row[keyMap[header]] === 'string' ? (
-                    row[keyMap[header]]
-                    ) : typeof row[keyMap[header]] === 'number' ? (
-                    new Intl.NumberFormat('es-ES').format(row[keyMap[header]])
-                    ) : 'N/A'}
+                  {/* Usamos keyMap para obtener la propiedad correcta */}
+                  {typeof row[keyMap[header]] === 'string' ? (
+                  row[keyMap[header]]
+                  ) : typeof row[keyMap[header]] === 'number' ? (
+                  new Intl.NumberFormat('es-ES').format(row[keyMap[header]])
+                  ) : 'N/A'}
                 </Td>
                 ))}
             </Tr>

From d9d72f167d3c3d1205b40f482d68118dbfab0fa5 Mon Sep 17 00:00:00 2001
From: yoelmarain <jmarain62@gmail.com>
Date: Sat, 12 Oct 2024 22:15:09 -0300
Subject: [PATCH 3/4] Refactor HeaderContent component to display user avatar

---
 FrontAdmin/src/components/Header/HeaderContent.tsx     | 10 +++++++---
 .../Pages/Estadisticas/SubPages/Cuotas/Listado.tsx     | 10 ++++++----
 .../Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx       |  4 ++--
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/FrontAdmin/src/components/Header/HeaderContent.tsx b/FrontAdmin/src/components/Header/HeaderContent.tsx
index 48c20698..43fb08bd 100644
--- a/FrontAdmin/src/components/Header/HeaderContent.tsx
+++ b/FrontAdmin/src/components/Header/HeaderContent.tsx
@@ -10,6 +10,7 @@ import {
   Box,
   Text,
   useDisclosure,
+  Avatar,
 } from '@chakra-ui/react';
 import imgLogo from '../icons/Logos TUP_Mesa de trabajo 1.png';
 import logoUser from '../icons/logo-user.png';
@@ -70,10 +71,13 @@ export function HeaderContent({ onOpen }: { onOpen: any }) {
           display={{ base: 'flex', md: 'none' }}
           color="white"
         />
-        <Flex direction={"row"} alignItems={"center"} gap={5}>
+        <Flex direction={"row"} alignItems={"center"} gap={3}>
         <Text fontFamily={"'Roboto',sans-serif"} fontWeight="600">{user}</Text>
-        <MenuButton as={Button} borderRadius="50%" w="50px" h="50px" p="0px">
-          <Image src={logoUser} w="100%"></Image>
+        <MenuButton borderRadius={'full'}>
+          <Avatar
+            name={Cookies.get("full_name")}
+            borderRadius="full"
+          />
         </MenuButton>
         <MenuList>
           <MenuItem 
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
index 50b68e48..22b4c958 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
@@ -1,7 +1,7 @@
 import { useParams } from "react-router-dom";
 import { useState, useEffect } from "react";
 import { AbonaronCuota, NoAbonaronCuota } from "../../../../../API/AbonaronCuota";
-import { Box, Button, Flex, Tab, TabList, Text ,TabPanel, TabPanels, Tabs, Tag, Spinner } from "@chakra-ui/react";
+import { Box, Button, Flex, Tab, TabList, Text ,TabPanel, TabPanels, Tabs, Tag, Spinner, Input } from "@chakra-ui/react";
 import Tabla from "./Tabla";
 import {ArrowRightIcon, ArrowLeftIcon} from '@chakra-ui/icons';
 import { isLastDayOfMonth } from "date-fns";
@@ -19,7 +19,7 @@ export default function Listado() {
     const [loading, setLoading] = useState<boolean>(true);
     const [loading2, setLoading2] = useState<boolean>(true);
     const [totalNoAbonaron, setTotalNoAbonaron] = useState<number>(0);
-    const headers = ['Nombre', 'Legajo' , 'DNI', 'Estado financiero'];
+    const headers = ['Apellido y Nombre', 'Legajo' , 'DNI', 'Estado financiero'];
     const [limit1] = useState(10);
     const [offset1, setOffset1] = useState(0);
     const [limit2] = useState(10);
@@ -126,7 +126,8 @@ export default function Listado() {
                                  <Flex direction={"row"} w={"100%"} justifyContent={"center"} gap={4} mb={3} >
                                     <Tag bg="secundaryBg" w={"100%"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Periodo: {fecha} </Tag>
                                     <Tag bg="secundaryBg" w={"100%"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Total: {totalNoAbonaron}</Tag>
-                                </Flex>
+                                 </Flex>
+                                 <Input type="text" placeholder="Buscar..." w={"50%"} mb={4} />
                                     <Tabla headers={headers} data={abonaron} /> 
                                     <Box bottom="0" width="100%" bg="white" p="10px" mt={4} boxShadow="md" >
                                             <Flex justifyContent="space-between" alignItems={"center"}>
@@ -148,9 +149,10 @@ export default function Listado() {
                             {loading ? <Flex justifyContent={"center"} w={"100%"}> <Spinner size="xl" /> </Flex>:
                             noAbonaron.length > 0 ? <Flex direction={"column"} w={"100%"} alignItems={"center"}>
                                 <Flex direction={"row"} w={"100%"} justifyContent={"center"} gap={4} mb={3} >
-                                    <Tag bg="secundaryBg" w={"100%"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Periodo: {fecha} </Tag>
+                                    <Tag bg="secundaryBg" w={"100%"} p={"10px"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Periodo: {fecha} </Tag>
                                     <Tag bg="secundaryBg" w={"100%"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Total: {totalNoAbonaron}</Tag>
                                 </Flex>
+                                <Input type="text" placeholder="Buscar por Apellido y Nombre, Legajo o DNI..." w={"100%"} mb={4} />
                                     <Tabla headers={headers} data={noAbonaron} /> 
                                     <Box bottom="0" width="100%" bg="white" p="10px" mt={2} boxShadow="md" >
                                             <Flex justifyContent="space-between" alignItems={"center"}>
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
index 676c8d3b..18a3277b 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Tabla.tsx
@@ -20,7 +20,7 @@ interface TablaProps {
 const Tabla: React.FC<TablaProps> = ({ headers, data }) => {
   // Mapea headers a las propiedades correctas del objeto row
   const keyMap: { [key: string]: string } = {
-    'Nombre': 'full_name',
+    'Apellido y Nombre': 'full_name',
     'DNI': 'user',
     'Estado financiero': 'estado_financiero',
     'Legajo': 'legajo',
@@ -46,7 +46,7 @@ const Tabla: React.FC<TablaProps> = ({ headers, data }) => {
           {data.map((row, rowIndex) => (
             <Tr key={rowIndex} onClick={() => handleRowClick(row[keyMap['DNI']])} cursor="pointer">
                 {headers.map((header) => (
-                <Td key={header} textAlign={header === 'Nombre' ? "left" : "center"}>
+                <Td key={header} textAlign={header === 'Apellido y Nombre' ? "left" : "center"}>
                   {/* Usamos keyMap para obtener la propiedad correcta */}
                   {typeof row[keyMap[header]] === 'string' ? (
                   row[keyMap[header]]

From 5066b6b480c76684c9b23e29b2fa94ac6bfe9b68 Mon Sep 17 00:00:00 2001
From: yoelmarain <jmarain62@gmail.com>
Date: Sat, 12 Oct 2024 23:25:37 -0300
Subject: [PATCH 4/4] Refactor AbonaronCuota and NoAbonaronCuota to accept
 additional parameters for pagination and filtering

---
 FrontAdmin/src/API/AbonaronCuota.ts           | 20 ++++++++++++-------
 .../Estadisticas/SubPages/Cuotas/Listado.tsx  | 16 ++++++++++-----
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/FrontAdmin/src/API/AbonaronCuota.ts b/FrontAdmin/src/API/AbonaronCuota.ts
index 953187f3..0c40b463 100644
--- a/FrontAdmin/src/API/AbonaronCuota.ts
+++ b/FrontAdmin/src/API/AbonaronCuota.ts
@@ -1,10 +1,13 @@
 import Cookies from 'js-cookie';
 
-export const AbonaronCuota = async (fecha: string) => {
+export const AbonaronCuota = async (fecha: string, limit:number, offset:number, valor?: string) => {
     try {
 
     const token = Cookies.get('tokennn');
-    const response = await fetch(`http://localhost:8000/api/alumnos/pagaron-cuota/${fecha}/`, {
+    const url = valor
+    ? `http://localhost:8000/api/alumnos/pagaron-cuota/${fecha}/?limit=${limit}&offset=${offset}&valor=${valor}`
+    : `http://localhost:8000/api/alumnos/pagaron-cuota/${fecha}/?limit=${limit}&offset=${offset}`;
+    const response = await fetch(url, {
         method: 'GET',
         headers: {
             'Content-Type': 'application/json',
@@ -27,12 +30,15 @@ export const AbonaronCuota = async (fecha: string) => {
     }
 };
 
-export const NoAbonaronCuota = async (fecha: string, limit: number, offset:number) => {
-    try {
-
+export const NoAbonaronCuota = async (fecha: string, limit: number, offset: number, valor?: string) => {
+  try {
     const token = Cookies.get('tokennn');
-    const response = await fetch(`http://localhost:8000/api/alumnos/no-pagaron-cuota/${fecha}/?limit=${limit}&offset=${offset}&ordering=full_name`, {
-        method: 'GET',
+    const url = valor
+      ? `http://localhost:8000/api/alumnos/no-pagaron-cuota/${fecha}/?limit=${limit}&offset=${offset}&valor=${valor}`
+      : `http://localhost:8000/api/alumnos/no-pagaron-cuota/${fecha}/?limit=${limit}&offset=${offset}`;
+
+    const response = await fetch(url, {
+      method: 'GET',
         headers: {
             'Content-Type': 'application/json',
             'Authorization': `Bearer ${token}`,
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
index 22b4c958..4594a7d4 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Cuotas/Listado.tsx
@@ -24,6 +24,7 @@ export default function Listado() {
     const [offset1, setOffset1] = useState(0);
     const [limit2] = useState(10);
     const [offset2, setOffset2] = useState(0);
+    const [filter, setFilter] = useState<string>('');
 
     const handleNextPage = () => {
         if (offset1 + limit1 < totalNoAbonaron) {
@@ -52,7 +53,7 @@ export default function Listado() {
 
     useEffect(() => {
         const fetchNoAbonaron = async (fecha: string) => {
-            const data = await NoAbonaronCuota(fecha, limit1, offset1);
+            const data = await NoAbonaronCuota(fecha, limit1, offset1, filter);
             if (data.results.length > 0) {
             setNoAbonaron(data.results);
             setTotalNoAbonaron(data.count);
@@ -64,11 +65,11 @@ export default function Listado() {
         }
         fetchNoAbonaron(fecha);
 
-    }, [limit1, offset1]);
+    }, [limit1, offset1, fecha, filter]);
 
     useEffect(() => {
         const fetchAbonaron = async (fecha: string) => {
-            const data = await AbonaronCuota(fecha);
+            const data = await AbonaronCuota(fecha, limit2, offset2, filter);
             if (data.results.length > 0) {
             setAbonaron(data.results);
             setTotalAbonaron(data.count);
@@ -79,9 +80,14 @@ export default function Listado() {
             return;
         }
         fetchAbonaron(fecha);
-    }, [limit2, offset2]);
+    }, [limit2, offset2, fecha, filter]);
 
+    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+    };
 
+    console.log(abonaron);
+    console.log(noAbonaron);
 
     return (
         <Flex w={"100%"}
@@ -152,7 +158,7 @@ export default function Listado() {
                                     <Tag bg="secundaryBg" w={"100%"} p={"10px"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Periodo: {fecha} </Tag>
                                     <Tag bg="secundaryBg" w={"100%"} size="lg" fontSize={18} display="flex" justifyContent="center" fontWeight={"bold"} fontFamily={"serif"}> Total: {totalNoAbonaron}</Tag>
                                 </Flex>
-                                <Input type="text" placeholder="Buscar por Apellido y Nombre, Legajo o DNI..." w={"100%"} mb={4} />
+                                <Input type="text" value={filter} onChange={handleFilterChange} placeholder="Buscar por Apellido y Nombre, Legajo o DNI..." w={"100%"} mb={4} />
                                     <Tabla headers={headers} data={noAbonaron} /> 
                                     <Box bottom="0" width="100%" bg="white" p="10px" mt={2} boxShadow="md" >
                                             <Flex justifyContent="space-between" alignItems={"center"}>