diff --git a/FrontAdmin/src/API-Alumnos/Compromiso.ts b/FrontAdmin/src/API-Alumnos/Compromiso.ts
new file mode 100644
index 0000000..7c9ec67
--- /dev/null
+++ b/FrontAdmin/src/API-Alumnos/Compromiso.ts
@@ -0,0 +1,69 @@
+import Cookies from 'js-cookie'
+// los dni son la mama de lo hardcodeado
+
+export const FetchCompromisos = async () => {
+ try {
+    const token = Cookies.get('tokennn');
+    // const dni = Cookies.get('dni)
+    const dni = 36562786;
+    const response = await fetch(`http://localhost:8000/api/firmas/firmas-de-alumno/${dni}/`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${token}`,
+            },
+    });
+    if (response.ok) {
+            const data = await response.json();
+            return data;
+    } else {
+            throw new Error('Error en la respuesta del servidor');
+        }
+    } catch (error) {
+        throw new Error('Network error: ' + error);
+    }
+};
+
+export const FetchUltimoCompromiso = async () => {
+    try {
+        const token = Cookies.get('tokennn');
+        const response = await fetch(`http://localhost:8000/api/ultimo-compromiso-de-pago/`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${token}`,
+                },
+        });
+        if (response.ok) {
+                const data = await response.json();
+                return data;
+        } else {
+                throw new Error('Error en la respuesta del servidor');
+            }
+        } catch (error) {
+            throw new Error('Network error: ' + error);
+        }
+};
+
+export const FirmarCompromiso = async () => {
+    try {
+        const token = Cookies.get('tokennn');
+        // const dni = Cookies.get('dni')
+        const dni = 36562786;
+        const response = await fetch(`http://localhost:8000/api/firmas/firmar-compromiso/${dni}/`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${token}`,
+                },
+        });
+        if (response.ok) {
+                return;
+        } else {
+                throw new Error('Error en la respuesta del servidor');
+            }
+        } catch (error) {
+            throw new Error('Network error: ' + error);
+        }
+};
+
diff --git a/FrontAdmin/src/API-Alumnos/Pagos.ts b/FrontAdmin/src/API-Alumnos/Pagos.ts
index cc1ade2..a333e16 100644
--- a/FrontAdmin/src/API-Alumnos/Pagos.ts
+++ b/FrontAdmin/src/API-Alumnos/Pagos.ts
@@ -1,64 +1,126 @@
+import Cookies from 'js-cookie';
 
+export const FetchPostPago = async (
+    cuotas: any,
+    montoInformado: number,
+    archivo: File | null,   // Archivo a enviar
+    comentario: string,
+    nro_transferencia: number
+) => {
+    try {
+        const token = Cookies.get('tokennn');
+        //const dni = Cookies.get('dni');
+        const dni = 36562786;  // Puedes obtener esto desde las cookies también
+
+        // Crea un nuevo objeto FormData
+        const formData = new FormData();
+        formData.append('alumno', dni);
+        formData.append('cuotas', cuotas);
+        formData.append('monto_informado', montoInformado);
+        formData.append('ticket', archivo); // El archivo
+        formData.append('comentario', comentario);
+        formData.append('nro_transferencia', nro_transferencia);
+
+        console.log('FormData:', formData);
+        console.log('Archivo:', archivo);
+        console.log('Cuotas:', cuotas);
+        console.log('Monto informado:', montoInformado);
+        console.log('Comentario:', comentario);
+        console.log('Nro transferencia:', nro_transferencia);
+
+        // Realiza la solicitud fetch
+        const response = await fetch(`http://localhost:8000/api/pagos/alumno/${dni}/`, {
+            method: 'POST',
+            headers: {
+                Authorization: `Bearer ${token}`, 
+            },
+            body: formData,
+        });
+        
+        if (response.ok) {
+            return await response.json(); 
+        } else {
+            const errorData = await response.json();
+            throw new Error(`Error en la respuesta del servidor: ${errorData.message}`);
+        }
+    } catch (error) {
+        console.error('Network error:', error);
+    }
+};
+
+
+export const FetchGetCuotas = async () => {
+    try {
+        const token = Cookies.get('tokennn');
+        //const dni = Cookies.get('dni');
+        const dni = 36562786;
+        
+        const response = await fetch(`http://localhost:8000/api/cuotas/alumno/${dni}/?limit=6&offset=0/`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${token}`,
+            },
+        });
+        
+        if (response.ok) {
+            const data = await response.json();
+            return data;
+        } else {
+            throw new Error('Error en la respuesta del servidor');
+        }
+    } catch (error) {
+        throw new Error('Network error: ' + error);
+    }
+};
 
 const cuotas = [
     {
         numero: 0,
-        monto1erVencimiento: 10000,
-        monto2doVencimiento: 0,
-        monto3erVencimiento: 0,
-        valortotal: 10000,
-        valorpagado: 10000,
-        valoradeudado: 0,
+        montoactual: 0,        
+        fechaVencimiento: '2024-03-10',        
+        valorpagado: 10000, 
+        valorinformado: 0,        
         estado: "PAGADO",
     },
     {
         numero: 1,
-        monto1erVencimiento: 10000,
-        monto2doVencimiento: 15000,
-        monto3erVencimiento: 20000,
-        valortotal: 10000,
-        valorpagado: 0,
-        valoradeudado: 10000,
+        montoactual: 10000,        
+        fechaVencimiento: '2024-03-10',        
+        valorpagado: 0,        
+        valorinformado: 5000,
         estado: "INFORMADO",
     },
     {
         numero: 2,
-        monto1erVencimiento: 10000,
-        monto2doVencimiento: 15000,
-        monto3erVencimiento: 20000,
-        valortotal: 10000,
+        montoactual: 10000,        
+        fechaVencimiento: '2024-04-10',
         valorpagado: 0,
-        valoradeudado: 10000,
+        valorinformado: 0,
         estado: "ADEUDADO",
     },
     {
         numero: 3,
-        monto1erVencimiento: 10000,
-        monto2doVencimiento: 15000,
-        monto3erVencimiento: 20000,
-        valortotal: 10000,
+        montoactual: 10000,        
+        fechaVencimiento: '2024-05-10',
         valorpagado: 0,
-        valoradeudado: 10000,
+        valorinformado: 0,
         estado: "ADEUDADO",
     },
     {
         numero: 4,
-        monto1erVencimiento: 10000,
-        monto2doVencimiento: 15000,
-        monto3erVencimiento: 20000,
-        valortotal: 10000,
+        montoactual: 10000,        
+        fechaVencimiento: '2024-06-10',
         valorpagado: 0,
-        valoradeudado: 10000,
+        valorinformado: 0,
         estado: "ADEUDADO",
     },
     {
         numero: 5,
-        monto1erVencimiento: 10000,
-        monto2doVencimiento: 15000,
-        monto3erVencimiento: 20000,
-        valortotal: 10000,
+        montoactual: 10000,        
+        fechaVencimiento: '2024-07-10',
         valorpagado: 0,
-        valoradeudado: 10000,
+        valorinformado: 0,
         estado: "ADEUDADO",
     }
 ];
diff --git a/FrontAdmin/src/API/Login.ts b/FrontAdmin/src/API/Login.ts
index 47d2f6e..fffa1ae 100644
--- a/FrontAdmin/src/API/Login.ts
+++ b/FrontAdmin/src/API/Login.ts
@@ -10,7 +10,7 @@ export const FetchLogin = async (password: string, account: string) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ password, account }),
+      body: JSON.stringify({ email: account ,password }),
     });
 
     if (response.ok) {
@@ -20,6 +20,7 @@ export const FetchLogin = async (password: string, account: string) => {
       localStorage.setItem('userRol', JSON.stringify(roles));
       
       Cookies.set('tokennn', data.access);
+      Cookies.set('dni', data.user.dni);
       Cookies.set('refresh_token', data.refresh);
       Cookies.set('access_expiration', data.access_expiration);
       Cookies.set('refresh_expiration', data.refresh_expiration);
diff --git a/FrontAdmin/src/Context.tsx b/FrontAdmin/src/Context.tsx
index 8b4b9c1..2c6d273 100644
--- a/FrontAdmin/src/Context.tsx
+++ b/FrontAdmin/src/Context.tsx
@@ -79,6 +79,7 @@ const AuthProvider = ({ children }: { children: ReactNode }) => {
     Cookies.remove('access_expiration');
     Cookies.remove('refresh_expiration');
     Cookies.remove('username');
+    Cookies.remove('dni');
     localStorage.removeItem('userRol');
     console.log('logout');
     setIsAuthenticated(false);
diff --git a/FrontAdmin/src/components/Pages-Alumnos/CompromisoDePago.tsx b/FrontAdmin/src/components/Pages-Alumnos/CompromisoDePago.tsx
index d4fc779..67bde6e 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/CompromisoDePago.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/CompromisoDePago.tsx
@@ -18,226 +18,152 @@ import {
     Button
 } from '@chakra-ui/react';
 import { DownloadIcon, ViewIcon } from '@chakra-ui/icons';
-import { MdPerson } from 'react-icons/md'; // Importa el ícono de usuario
+import { FetchCompromisos, FetchUltimoCompromiso, FirmarCompromiso } from "../../API-Alumnos/Compromiso";
+import {useEffect, useState} from 'react';
+import {formatoFechaISOaDDMMAAAA} from "../../utils/general";
+import { useToast } from "../Toast/useToast";
+import Cookies from 'js-cookie';
 
 export default function CompromisoDePago() {
-    return (
-        <Container maxW="container.xl" p={5}>
-            {/* Navbar superior centrado */}
-            <Flex
-                mb={5}
-                align="center"
-                justify="center"
-                borderBottom="1px"
-                borderColor="black"
-                p={3}
-                bg="white"
-            >
-                <Link href="#" mx={3} fontWeight="bold">Estado de Cuenta</Link>
-                <Link href="#" mx={3} fontWeight="bold">Informar Pago/s</Link>
-                <Link href="#" mx={3} fontWeight="bold">Compromiso de Pago</Link>
-                <Link href="#" mx={3} fontWeight="bold">Darse de Baja</Link>
-            </Flex>
 
-            <Flex mb={5}>
-                {/* Información en la parte izquierda */}
-                <Box flex="1" mr={3}>
-                    <VStack align="start" spacing={4}>
-                        <Box display="flex" flexDirection="column" alignItems="center" mb={2}>
-                            <Icon as={MdPerson} boxSize={36} color="black" border="2px" borderColor="black" borderRadius="full" mb={2} /> {/* Icono de usuario */}
-                            <Text fontWeight="bold" fontSize="md">Nombre del alumno</Text>
-                        </Box>
-                        <Text fontWeight="bold" fontSize="sm">
-                            Cuota:
-                            <Text as="span" display="block" color="#343434">Completa</Text>
-                        </Text>
-                        <Text fontWeight="bold" fontSize="sm">
-                            Compromiso de Pago:
-                            <Text as="span" display="block" color="#343434">Firmado (15/02/2024 14:52 hs)</Text>
-                        </Text>
-                        <Text fontWeight="bold" fontSize="sm">
-                            Situación:
-                            <Text as="span" display="block" color="#343434">Habilitado</Text>
-                        </Text>
-                        <Text fontWeight="bold" fontSize="sm">
-                            Deuda:
-                            <Text as="span" display="block" color="#343434">$-</Text>
-                        </Text>
-                        <Text fontWeight="bold" fontSize="sm">
-                            Próximo Vencimiento:
-                            <Text as="span" display="block" color="#343434">10/06/2024</Text>
-                        </Text>
-                    </VStack>
+const [compromisos, setCompromisos] = useState([]);
+const [ultimoCompromiso, setUltimoCompromiso] = useState(false);
+const [ultimo, setUltimo] = useState<any>([]);
+const [refresh, setRefresh] = useState(false);
+const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+const showToast = useToast();
+
+const handleViewPdf = async (url: string) => {
+    try {
+      const token = Cookies.get('tokennn');
+      const response = await fetch(url, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+      console.log('Buscando PDF en: ', url);
+      const blob = await response.blob();
+      const pdfUrl = URL.createObjectURL(blob);
+      setPdfUrl(pdfUrl);
+    } catch (error) {
+      console.error('Error al obtener el PDF:', error);
+    }
+  };
+
+useEffect(() => {
+    const fetchCompromisos = async () => {
+        try{
+        const data = await FetchCompromisos();
+        setCompromisos(data);
+        console.log(data);
+        } catch (error) {
+            console.log(error)
+        }
+    };
+    fetchCompromisos();
+
+    const fetchUltimoCompromiso = async () => {
+        try {
+            const data = await FetchUltimoCompromiso();
+            handleViewPdf(data.archivo_pdf_url);
+        } catch (error) {
+            console.log(error);
+        }
+    }
+    fetchUltimoCompromiso();
+
+}, [refresh]);
+
+
+useEffect(() => {
+    if (compromisos.length > 0) {
+        setUltimo(compromisos[compromisos.length - 1]);
+    }
+}, [compromisos]);
+
+useEffect(() => {
+    if (ultimo) {
+        console.log(ultimo);
+        if (ultimo.firmo_ultimo_compromiso === true) {
+            setUltimoCompromiso(true);
+        }
+    }
+}, [ultimo]);
+
+
+
+const handleFirmar = async () => {
+    try {
+        await FirmarCompromiso();
+        setRefresh(!refresh);
+        showToast('Exito', 'Compromiso de pago firmado con exito', 'success');
+    }
+    catch (error) {
+        console.log(error);
+    }
+};
+
+
+return (
+
+<Flex justifyContent={"center"} alignItems={"center"} direction={"column"}>
+                {ultimoCompromiso && <Flex justifyContent={"center"} alignItems={"center"} direction={"column"} bg={"#DEF9C4"} p={5} borderRadius={5} mb={4} mt={4}>
+                <Text color="#387F39" fontWeight="bold" fontSize="sm">
+                        El compromiso de pago del periodo actual ya se encuentra firmado ({formatoFechaISOaDDMMAAAA(ultimo.fecha_firmado)}).
+                </Text>
+                </Flex>
+                }
+            <Flex direction={"column"}>
+                
+            <Flex justify="center">
+                <Box
+                    border="1px"
+                    borderColor="gray.200"
+                    p={4}
+                    borderRadius="md"
+                    w={"100%"}
+                >
+                    {pdfUrl && <iframe src={pdfUrl} width="1000px" height="400px" />}
                 </Box>
+            </Flex>
+
+            
+            <Flex justifyContent={"flex-end"}  mt={4} mb={4} flex={1} width={"100%"}>
+                <Button colorScheme="teal" isDisabled={ultimoCompromiso} onClick={() => handleFirmar()}>Firmar</Button>
+            </Flex>
+            </Flex>
 
-                {/* Tabla en el medio */}
-                <Box flex="2" width="555px" height="300px" maxW="555px" overflow="hidden" mr={52}>
-                    <Text color="red.500" fontWeight="bold" mb={2} fontSize="sm">
-                        El compromiso de pago ya se encuentra firmado (15/02/2024 14:52 hs)
-                    </Text>
+            <Flex mb={5} justifyContent={"center"} alignItems={"center"} w={"85%"} direction={"column"}>
+                <Flex justifyContent={"flex-start"} w={"100%"}>
+                    <Text fontWeight="bold" fontSize="xl" mb={2}>Historial compromisos de pago Firmados</Text>
+                </Flex>
+                <Box flex={1} w={"100%"}>
                     <TableContainer
                         border="2px"
                         borderColor="#BABABA" // Borde gris claro para la tabla
                         borderRadius="md"
-                        overflow="auto"
                         width="100%"
                         height="100%"
                     >
                         <Table variant="unstyled" size="sm">
                             <Thead>
                                 <Tr borderBottom="1px" borderColor="#BABABA">
-                                    <Th textAlign="center" fontWeight="bold" width="120px" borderBottom="1px" borderColor="#BABABA">Fecha</Th>
-                                    <Th textAlign="center" fontWeight="bold" width="120px" borderBottom="1px" borderColor="#BABABA">Descargar</Th>
-                                    <Th textAlign="center" fontWeight="bold" width="120px" borderBottom="1px" borderColor="#BABABA">Ver</Th>
+                                    <Th textAlign="center" fontWeight="bold"  borderBottom="1px" borderColor="#BABABA">Periodo</Th>
+                                    <Th textAlign="center" fontWeight="bold"  borderBottom="1px" borderColor="#BABABA">Fecha Firma</Th>
                                 </Tr>
                             </Thead>
                             <Tbody>
-                                <Tr borderBottom="1px" borderColor="#BABABA">
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">15/02/2024</Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Descargar"
-                                            icon={<DownloadIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Descargar PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Ver"
-                                            icon={<ViewIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Ver PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                </Tr>
-                                <Tr borderBottom="1px" borderColor="#BABABA">
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">02/08/2023</Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Descargar"
-                                            icon={<DownloadIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Descargar PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Ver"
-                                            icon={<ViewIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Ver PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                </Tr>
-                                <Tr borderBottom="1px" borderColor="#BABABA">
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">15/02/2023</Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Descargar"
-                                            icon={<DownloadIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Descargar PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Ver"
-                                            icon={<ViewIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Ver PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                </Tr>
-                                <Tr borderBottom="1px" borderColor="#BABABA">
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">11/08/2022</Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Descargar"
-                                            icon={<DownloadIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Descargar PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Ver"
-                                            icon={<ViewIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Ver PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                </Tr>
-                                <Tr borderBottom="1px" borderColor="#BABABA">
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">02/02/2022</Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Descargar"
-                                            icon={<DownloadIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Descargar PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                    <Td textAlign="center" width="120px" whiteSpace="nowrap">
-                                        <IconButton
-                                            aria-label="Ver"
-                                            icon={<ViewIcon />}
-                                            variant="outline"
-                                            onClick={() => console.log('Ver PDF')}
-                                            bg="none"
-                                            size="sm"
-                                        />
-                                    </Td>
-                                </Tr>
+                                { compromisos.map((compromiso: any, index) => (
+                                    <Tr borderBottom="1px" borderColor="#BABABA" key={index}>
+                                        <Td textAlign="center" >{compromiso.compromiso_de_pago}</Td>
+                                        <Td textAlign="center" >{formatoFechaISOaDDMMAAAA(compromiso.fecha_firmado)}</Td>
+                                    </Tr>
+                                )) }
                             </Tbody>
                         </Table>
                     </TableContainer>
                 </Box>
             </Flex>
-
-            {/* PDF del compromiso de pago */}
-            <Flex justify="center" ml={64} mt={5}>
-                <Box
-                    border="1px"
-                    borderColor="gray.200"
-                    p={4}
-                    borderRadius="md"
-                    overflow="hidden"
-                    width="555px"
-                    height="310px"
-                    maxH="310px"
-                >
-                    <iframe
-                        src="/compromiso_de_pago_2023.pdf"
-                        width="100%"
-                        height="100%"
-                        title="Compromiso de Pago"
-                    />
-                </Box>
-            </Flex>
-
-            {/* Botón "Firmar" centrado */}
-            <Flex justify="center" ml={64} mt={4}>
-                <Button colorScheme="teal">Firmar</Button>
-            </Flex>
-        </Container>
+        </Flex>
     );
 }
diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx
index c78cb5d..9b1c81c 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/DrawerPago.tsx
@@ -19,6 +19,8 @@ import {
   } from '@chakra-ui/react'
 import { useState} from 'react'
 import {AttachmentIcon} from '@chakra-ui/icons';
+import { FetchPostPago } from '../../../API-Alumnos/Pagos';
+import {useToast} from '../../Toast/useToast';
 
 interface Cuota {
     id: number;
@@ -36,12 +38,16 @@ interface DrawerInformarProps {
     isOpen: boolean;
     onClose: () => void;
     cuotasseleccionadas: Cuota[];
+    onRefresh?: () => void;
 }
 
-const DrawerInformar: React.FC<DrawerInformarProps> = ({ isOpen, onClose, cuotasseleccionadas }) => {
+const DrawerInformar: React.FC<DrawerInformarProps> = ({ isOpen, onClose, cuotasseleccionadas, onRefresh }) => {
     const [file, setFile] = useState<File | null>(null);
     const [montoAbonado, setMontoAbonado] = useState('');  //cambiar a entero
+    const [comentarios, setComentarios] = useState('');
     const [total, setTotal] = useState<number>(0);
+    const [nro_transferencia, setNroTransferencia] = useState<number>(0);
+    const showToast = useToast();
 
     const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         const file = event.target.files?.[0] as File;
@@ -49,23 +55,36 @@ const DrawerInformar: React.FC<DrawerInformarProps> = ({ isOpen, onClose, cuotas
     };
 
     const handleSave = () => {
-        console.log("las cuotas seleccionadas son:", cuotasseleccionadas);
+       // Aca hay que hacer el post al backend
+       try{
+           const numerosCuotas = cuotasseleccionadas.map(cuota => cuota.numero);
+           FetchPostPago(numerosCuotas, parseInt(montoAbonado), file, comentarios, nro_transferencia);
+            showToast('Pago informado', 'El pago se ha informado correctamente', 'success');
+            // onRefresh();
+       } catch (error) {
+           console.error('Error:', error);
+            showToast('Error', 'Ha ocurrido un error al informar el pago', 'error');
+            // onRefresh();
+       }
+       // Ver como volver a renderizar la tabla de cuotas
+        if (onRefresh) {
+          onRefresh();
+          console.log('onRefresh');} 
         onClose();
     };
 
     const handleCancel = () => {
-
         onClose();
     }
 
     const isFormValid = () => {
-      return (montoAbonado.trim() !== '') && (file !== null && file.name.trim() !== '');
+      return (montoAbonado.trim() !== '') && (file !== null && file.name.trim() !== '' && nro_transferencia !== 0);
     };
 
     useEffect(() => {
     setFile(null);
     setMontoAbonado('');
-    setTotal(cuotasseleccionadas.reduce((acc, cuota) => acc + cuota.valoradeudado, 0));
+    setTotal(cuotasseleccionadas.reduce((acc, cuota) => acc + (cuota.montoActual - cuota.valorpagado - cuota.valorinformado), 0));
     }, [isOpen]);
 
     return (
@@ -96,21 +115,29 @@ const DrawerInformar: React.FC<DrawerInformarProps> = ({ isOpen, onClose, cuotas
                     </InputLeftElement>
                     <Input placeholder='' onChange={(e) => setMontoAbonado(e.target.value)} />
                 </InputGroup>
-            
-            <Button mt={4} color="white" rightIcon={<AttachmentIcon/>} onClick={() => document.getElementById('fileInput')?.click()}>
-                Comprobante
+            <Stack gap={0}>
+              <FormLabel mt={4} mb={0}>Nro. Tranferencia</FormLabel>
+              <Input placeholder='' mt={0}  onChange={(e) => setNroTransferencia(Number(e.target.value))} />
+            </Stack>
+            </FormControl>
+            <Stack gap={0}>
+              <FormLabel mt={4} mb={0}>Comentarios</FormLabel>
+              <Input placeholder='' mt={0}  onChange={(e) => setComentarios(e.target.value)} />
+            </Stack>
+            <Button mt={6} color="white" rightIcon={<AttachmentIcon/>} onClick={() => document.getElementById('fileInput')?.click()}>
+              Adjuntar Comprobante
             </Button>
             <Input
-                type='file'
-                id='fileInput'
-                style={{ display: 'none' }}
-                onChange={handleFileChange}
+              type='file'
+              id='fileInput'
+              accept='image/*'
+              style={{ display: 'none' }}
+              onChange={handleFileChange}
             />
              {file && <Stack direction="column">
                 <Text fontWeight="bold" mt={6}>Archivo cargado:</Text> 
                 <Flex ml={1}><li>{file.name}</li> </Flex>
             </Stack>}
-            </FormControl>
             </DrawerBody>
   
             <DrawerFooter>
diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/InformarPago.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/InformarPago.tsx
index 8562a10..6c0a498 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/InformarPago.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/InformarPago.tsx
@@ -1,9 +1,23 @@
 import React from "react";
 import TablaCuotas from "./TablaPagos";
-import { Flex, Button, Text, Stack } from "@chakra-ui/react";
+import { Flex, Button, Text, Stack, Card, CardBody } from "@chakra-ui/react";
 import { useDisclosure } from "@chakra-ui/react";
+import {useState, useEffect} from 'react';
 import {AttachmentIcon} from '@chakra-ui/icons';
 import DrawerInformar from "./DrawerPago";
+import {obtenerFechaDeHoy} from '../../../utils/general';
+
+interface Cuota {
+    id: number;
+    numero: string;
+    monto1erVencimiento: number;
+    monto2doVencimiento: number;
+    monto3erVencimiento: number;
+    valortotal: number;
+    valorpagado: number;
+    valoradeudado: number;
+    estado: string;
+}
 
 function InformarPago() {
     const {
@@ -12,23 +26,49 @@ function InformarPago() {
         onClose: onClose,
     } = useDisclosure();
 
-    const { jsx: tablaCuotasJSX, cuotasSeleccionadas } = TablaCuotas();
+    
+    const [fechaDeHoy, setFechaDeHoy] = React.useState(obtenerFechaDeHoy());
+    const [refresh, setRefresh] = useState(false); 
+    const [cuotasSeleccionadas, setCuotasSeleccionadas] = useState<Cuota[]>([]);
+
+    const handleRefresh = () => {
+        setRefresh(!refresh); 
+    };
+
+    useEffect(() => {
+        console.log("refresh", refresh);
+    }, [refresh]);
 
     return (
+
+
         <Stack
             alignItems="center"
             direction="column"
             w="100%"
             bg="white"
         >
-                {tablaCuotasJSX}
+             <Card>
+                    <CardBody bg={'secundary'} mt={2}>
+                        <Flex
+                            alignItems="center"
+                            justifyContent="center"
+                            flexDirection="column"
+                            
+                        >
+                            <Text> Estado de cuenta al:</Text>
+                            <Text fontWeight="bold"> {fechaDeHoy} </Text>
+                        </Flex>
+                    </CardBody>
+                </Card>
+                <TablaCuotas refresh={refresh} setCuotasSeleccionadas={setCuotasSeleccionadas} cuotasSeleccionadas={cuotasSeleccionadas}/>
                 <Flex mt={2} w="100%" justifyContent="flex-end">
                 <Button color="white" 
                  rightIcon={<AttachmentIcon/>} 
                  onClick={onOpen}
                  >Informar Pago</Button>
                 </Flex>
-                <DrawerInformar isOpen={isOpen} onClose={onClose} cuotasseleccionadas={cuotasSeleccionadas}/>
+                <DrawerInformar isOpen={isOpen} onClose={onClose} cuotasseleccionadas={cuotasSeleccionadas} onRefresh={handleRefresh}/>
         </Stack>
     );
 }
diff --git a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
index 2de4175..70f9058 100644
--- a/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
+++ b/FrontAdmin/src/components/Pages-Alumnos/InformarPago/TablaPagos.tsx
@@ -2,35 +2,88 @@ import { Box, Table, Thead, Tbody, Tr, Th, Td, Flex, Text, Badge, Checkbox, Inpu
 import { EditIcon, DeleteIcon, AddIcon, SearchIcon } from '@chakra-ui/icons'; 
 import Cuotas from '../../../API-Alumnos/Pagos';
 import {useState , useEffect} from 'react';
+import { FetchGetCuotas } from '../../../API-Alumnos/Pagos';
+import { get } from 'http';
+
+interface Cuota {
+  id: number;
+  numero: string;
+  monto1erVencimiento: number;
+  monto2doVencimiento: number;
+  monto3erVencimiento: number;
+  valortotal: number;
+  valorpagado: number;
+  valoradeudado: number;
+  estado: string;
+}
+
+interface TablaCuotasProps {
+  refresh: boolean;
+  setCuotasSeleccionadas: React.Dispatch<React.SetStateAction<Cuota[]>>;
+  cuotasSeleccionadas: Cuota[];
+}
 
 
-function TablaCuotas () {
+function TablaCuotas({ refresh, setCuotasSeleccionadas, cuotasSeleccionadas }: TablaCuotasProps) {
 
     const [cuotas, setCuotas] = useState<any[]>([]); 
-    const [cuotasSeleccionadas, setCuotasSeleccionadas] = useState<any[]>([]);
+   // const [cuotasSeleccionadas, setCuotasSeleccionadas] = useState<any[]>([]);
 
-    useEffect(() => {
-        setCuotas(Cuotas)   
-    }, [])
+   
+//    useEffect(() => {
+//     console.log("refresh en tabla pagos", refresh);
+//     setCuotasSeleccionadas([]);
+//     console.log("las cuotas seleccionadas", cuotasSeleccionadas);
+//  }, [refresh]);
+
+    // useEffect(() => {
+    //   // handleCheckboxChange(); // Llamar a la función cuando refresh cambie
+    //   if (refresh) {
+    //     window.location.reload();
+    //   }
+    // }, [refresh]);
 
     useEffect(() => {
-        console.log(cuotasSeleccionadas)  
-    }, [cuotasSeleccionadas])
+        // Aca se deberia hacer el fetch de las cuotas del alumno
+        const getCuotas = async () => {
+        try {
+            const cuotas = await FetchGetCuotas();
+            setCuotas(cuotas);
+        } catch (error) {
+            console.error('Error:', error);
+        }
+        }
+        getCuotas();
+        
+        // setCuotas(Cuotas)   
+    }, [refresh])
+
 
     // Funcion para manejar el cambio de estado de los checkbox, si el esatdo anterior es true, lo elimina del array, si es false lo agrega
-    const handleCheckboxChange = (cuota:any) => {
-        setCuotasSeleccionadas((prevSeleccionadas) => {
+    // const handleCheckboxChange = (cuota: Cuota) => {
+    //   setCuotasSeleccionadas((prevSeleccionadas) => {
+    //       if (prevSeleccionadas.includes(cuota)) {
+    //           return prevSeleccionadas.filter((item) => item !== cuota);
+    //       } else {
+    //           return [...prevSeleccionadas, cuota];
+    //       }
+    //   });
+    // };
+
+    const handleCheckboxChange = (cuota: Cuota) => {
+      setCuotasSeleccionadas((prevSeleccionadas) => {
           if (prevSeleccionadas.includes(cuota)) {
-            return prevSeleccionadas.filter((item) => item !== cuota);
+              return prevSeleccionadas.filter((item) => item !== cuota);
           } else {
-            return [...prevSeleccionadas, cuota];
+              return [...prevSeleccionadas, cuota];
           }
-        });
-      };
+      });
+    };
+
+ 
 
 
-    return {
-        jsx: (
+    return (
             <Flex
                 alignItems="center"
                 justifyContent="center"
@@ -48,14 +101,12 @@ function TablaCuotas () {
                   <Thead>
                     <Tr mt={6}>
                       <Th></Th>
-                      <Th textAlign="center" p={1}>Numero</Th>
-                      <Th textAlign="center">Monto 1er Vencimiento</Th>
-                      <Th textAlign="center">Monto 2do Vencimiento</Th>
-                      <Th textAlign="center">Monto 3er Vencimiento</Th>
-                      <Th textAlign="center">Valor Total</Th>
+                      <Th textAlign="center" p={1}>Cuota</Th>
+                      <Th textAlign="center">Fecha Primer VTO.</Th>
+                      <Th textAlign="center">Valor Actual</Th>
                       <Th textAlign="center">Valor Pagado</Th>
+                      <Th textAlign="center">Valor Informado</Th>
                       <Th textAlign="center">Valor Adeudado</Th>
-                      <Th textAlign="center">Estado</Th>
                     
                     </Tr>
                   </Thead>
@@ -70,31 +121,25 @@ function TablaCuotas () {
                         </Checkbox></Td>
                         }
                         <Td textAlign="center" p={1}>{cuota.numero}</Td>
-                        <Td textAlign="center">{"$ " + cuota.monto1erVencimiento}</Td>
-                        <Td textAlign="center">{"$ " + cuota.monto2doVencimiento}</Td>
-                        <Td textAlign="center">{"$ " + cuota.monto3erVencimiento}</Td>
-                        <Td textAlign="center">{"$ " + cuota.valortotal}</Td>
-                        <Td textAlign="center">{"$ " + cuota.valorpagado}</Td>
-                        <Td textAlign="center">{"$ " + cuota.valoradeudado}</Td>
-                        { cuota.estado === "ADEUDADO" ?
-                        <Td textAlign="center"> <Badge colorScheme='red'>{cuota.estado}</Badge></Td>
-                        :
-                        cuota.estado === "INFORMADO" ?
-                        <Td textAlign="center"> <Badge colorScheme='yellow'>{cuota.estado}</Badge></Td>
-                        :
-                        <Td textAlign="center"> <Badge colorScheme='green'>{cuota.estado}</Badge></Td>
+                        <Td textAlign="center">{cuota.fechaVencimiento}</Td>
+                        <Td textAlign="center">{"$ " + new Intl.NumberFormat('es-ES').format( cuota.montoActual)}</Td>
+                        <Td textAlign="center">{"$ " + new Intl.NumberFormat('es-ES').format( cuota.valorpagado)}</Td>
+                        <Td textAlign="center">{"$ " + new Intl.NumberFormat('es-ES').format( cuota.valorinformado)}</Td>
+                        { cuota.estado !== "PAGADO" ?
+                        <Td textAlign="center">{"$ " +  new Intl.NumberFormat('es-ES').format((cuota.montoActual - cuota.valorpagado - cuota.valorinformado))}</Td>
+                        : 
+                        <Td textAlign="center">{"$ " + 0}</Td>
                         }
                       </Tr>
                     ))}
                   </Tbody>
                 </Table>
             ) : (
-              <Text>No hay datos disponibles</Text>
+              <Text>No hay cuotas para mostrar. Por favor, firmar el compromiso de pago.</Text>
             )}
         </Box>
         </Flex>
-        ),
-        cuotasSeleccionadas: cuotasSeleccionadas
+    );
     }
-}
+
 export default TablaCuotas;
\ No newline at end of file
diff --git a/FrontAdmin/src/components/Pages/Sysacad/Materias/TablaMaterias.tsx b/FrontAdmin/src/components/Pages/Sysacad/Materias/TablaMaterias.tsx
index 270d80d..01e647a 100644
--- a/FrontAdmin/src/components/Pages/Sysacad/Materias/TablaMaterias.tsx
+++ b/FrontAdmin/src/components/Pages/Sysacad/Materias/TablaMaterias.tsx
@@ -134,9 +134,9 @@ export default function TablaMaterias() {
                 <Table variant="simple">
                     <Thead>
                         <Tr bg="secundaryBg">
-                            <Th>ID Materia</Th>
+                            <Th>Cod. Materia</Th>
                             <Th>Nombre</Th>
-                            <Th>Año</Th>
+                            
                             <Th>Cuatrimestre</Th>
                             <Th>Plan</Th>
                             <Th textAlign="center">Acciones</Th>
@@ -147,7 +147,7 @@ export default function TablaMaterias() {
                             <Tr key={index} bg={index % 2 === 0 ? "white" : "secundaryBg"} height="15px">
                                 <Td>{materia.codigo_materia}</Td>
                                 <Td>{materia.nombre}</Td>
-                                <Td>{materia.anio_cursada}</Td>
+                                
                                 <Td>{materia.cuatrimestre}</Td>
                                 <Td>{materia.anio_plan}</Td>
                                 <Td>
diff --git a/FrontAdmin/src/utils/general.ts b/FrontAdmin/src/utils/general.ts
index b239a2d..04da28c 100644
--- a/FrontAdmin/src/utils/general.ts
+++ b/FrontAdmin/src/utils/general.ts
@@ -14,6 +14,14 @@ export function formatoFechaISOaAAAAMMDD(fechaISO: string): string {
   return `${año}-${mes}-${dia}`;
 }
 
+export function obtenerFechaDeHoy(): string {
+  const hoy = new Date();
+  const dia = String(hoy.getDate()).padStart(2, '0');
+  const mes = String(hoy.getMonth() + 1).padStart(2, '0'); // Los meses empiezan desde 0
+  const anio = hoy.getFullYear();
+  return `${dia}/${mes}/${anio}`;
+}
+
 interface Categoria {
   tipo: string;
   fecha: string; // Suponiendo que la fecha se almacena como string