feat: implement fetch for pending signatures and update student table

FrontAdmin/src/API/AlumnosPendienteFirma.ts

@@ -0,0 +1,30 @@
+import Cookies from 'js-cookie';
+
+export const FetchPendientesFirma = async () => {
+  try {
+    const token = Cookies.get('tokennn');
+
+    const response = await fetch(
+      `http://localhost:8000/api/estadisticas/firmas_pendientes/`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+
+    if (response.ok) {
+      const data = await response.json();
+      return {
+        results: data.results, // Lista de resultados
+        count: data.count,     // Total de elementos
+      };
+    } else {
+      throw new Error('Error en la respuesta del servidor');
+    }
+  } catch (error) {
+    throw new Error('Network error: ' + error);
+  }
+};

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

@@ -1,20 +1,41 @@
-import {Box, Flex, Alert, AlertIcon} from '@chakra-ui/react';
+import {Box, Flex, Alert, AlertIcon, Center} from '@chakra-ui/react';
 import TablaAlumnos from './TablaAlumnos';
-import { FetchNoFirmantes } from '../../../../API/AlumnosCompromisoPago';
+import { FetchPendientesFirma } from '../../../../API/AlumnosPendienteFirma';
 import { obtenerFechaDeHoy } from '../../../../utils/general';
+import { useState, useEffect } from 'react';
+import { InfoIcon } from '@chakra-ui/icons';
 
 const PendientesFirma = () => {
     const fechaHoy = obtenerFechaDeHoy();
     const anio = fechaHoy.split('/')[2];
     const cuatrimestre =  parseInt(fechaHoy.split('/')[1]) <= 7 ? '1C' : '2C';
+    const [results, setResults] = useState([]);
+    const [count, setCount] = useState(0);
+
+    const fetchAndSetValues = async (setResults: any, setCount: any) => {
+        try {
+          const { results, count } = await FetchPendientesFirma(); // Llama al endpoint y obtiene ambos valores
+          setResults(results); // Asigna los resultados a la variable de estado o callback
+          setCount(count);     // Asigna el conteo a la variable de estado o callback
+        } catch (error) {
+          console.error('Error al obtener los datos:', error);
+        }
+      };
 
+      useEffect(() => {
+        fetchAndSetValues(setResults, setCount); // Llama la función para obtener y setear los valores
+      }, []);
+
     return (
         <Box>
-            <Alert status='warning' m={4}> <AlertIcon /> Alumnos que cursan una matería del cuatrimestre actual y no firmaron el compromiso de pago</Alert>
-            <TablaAlumnos 
-                fetchFunction={() => FetchNoFirmantes(cuatrimestre, parseInt(anio))} //Aca tengo que cambiar al nuevo endpoint que devuelve solo los que cursan materia y no firmaron el compromiso de pago 
-                title="Alumnos que no firmaron compromiso actual" 
-              />
+            <Alert status='warning' m={4}> <AlertIcon /> Alumnos que cursan una matería del cuatrimestre actual y no firmaron el compromiso de pago (Total: {count}).</Alert>
+{/*             <Alert status='info' alignItems={'center'} maxW={'20%'} p={'10px'} m={4}> <AlertIcon /> Total: {count} alumnos.</Alert> */}
+            <TablaAlumnos
+            fetchFunction={async () => {
+                return results; // Retorna solo los resultados al componente
+            }}
+            title="Alumnos que no firmaron compromiso actual"
+            />
         </Box>
     );
 }

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

@@ -104,6 +104,8 @@ const TablaAlumnos: React.FC<TablaAlumnosProps> = ({ fetchFunction, title }) =>
             {['APELLIDO Y NOMBRE', 'LEGAJO', 'DNI', 'ESTADO FINANCIERO', 'AÑO INGRESO'].map((field) => (
               <Th key={field} fontFamily="Helvetica" fontWeight="900">
                 {field.toUpperCase()}
+                {/* 
+                quite xq no andaba
                 <IconButton
                   icon={sortOrder === 'asc' ? <ChevronUpIcon /> : <ChevronDownIcon />}
                   size="xs"
@@ -116,7 +118,7 @@ const TablaAlumnos: React.FC<TablaAlumnosProps> = ({ fetchFunction, title }) =>
                   bg="transparent"
                   _hover={{ bg: 'gray.200' }}
                   _active={{ bg: 'gray.300' }}
-                />
+                /> */}
               </Th>
             ))}
           </Tr>