Add posibilidad de eliminar el ultimo compromiso

FrontAdmin/src/API/Montos.ts

@@ -84,3 +84,28 @@ export const loadPDF = async (id :string,file: File) => {
     throw new Error('Network error: ' +  JSON.stringify(error));
   }
 };
+
+export const deleteCompromiso = async (id: number) => {
+  try {
+    const token = Cookies.get('tokennn');
+
+    const response = await fetch(`http://localhost:8000/api/compromisos/${id}/`, {
+      method: 'DELETE',
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (response.ok) {
+      const data = await response.json();
+      return data;
+    } else {
+      const errorResponse = await response.json();
+      throw new Error(
+        'Error en la respuesta del servidor: ' + JSON.stringify(errorResponse)
+      );
+    }
+  } catch (error) {
+    throw new Error('Network error: ' + error);
+  }
+}

FrontAdmin/src/components/Pages/Configuracion/Configuracion.tsx

@@ -1,4 +1,4 @@
-import { Grid, GridItem, Flex, Button, Text, Box } from '@chakra-ui/react';
+import { Grid, GridItem, Flex, Button, Text, Box, Spinner } from '@chakra-ui/react';
 import Montos from './Montos/Montos';
 import { FetchMontos } from '../../../API/Montos';
 import { useEffect, useState } from 'react';
@@ -13,8 +13,10 @@ function Configuracion() {
   const [totalCount, setTotalCount] = useState(0);
 
   const fetchMontos = async (offset: number, limit: number) => {
+    setLoading(true);
     try {
       const data = await FetchMontos(offset, limit);
+
       setMontos(data.results);
       setTotalCount(data.count);
     } catch (error) {
@@ -46,11 +48,17 @@ function Configuracion() {
 
   return (
     <Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)' }} pb="80px">
-      <GridItem colSpan={2} mt="20px"> 
-          <Montos compromisos={montos}  fetchMontos={() => fetchMontos(offset, limit)} />
-      </GridItem>
-      <GridItem colSpan={{ base: 1, md: 2 }}>
-        <NewInterfaz compromisos={montos} />
+      <GridItem colSpan={2} mt="20px">
+        {loading ? (
+          <Flex justifyContent="center" alignItems="center" height="100%">
+            <Spinner size="xl" />
+          </Flex>
+        ) : (
+          <>
+            <Montos compromisos={montos} fetchMontos={() => fetchMontos(offset, limit)} />
+            <NewInterfaz compromisos={montos} fetchMontos={() => fetchMontos(offset, limit)} />
+          </>
+        )}
       </GridItem>
       <Box position="fixed" bottom="0" width="90%" bg="white" p="10px" boxShadow="md">
         <Flex justifyContent="space-between">

FrontAdmin/src/components/Pages/Configuracion/Montos/NewInterfaz.tsx

@@ -18,10 +18,12 @@ import {
   ModalBody,
   ModalCloseButton,
   useDisclosure,
+  Spinner,
 } from '@chakra-ui/react';
 import Cookies from 'js-cookie';
 import { useEffect, useState } from 'react';
-
+import { deleteCompromiso } from '../../../../API/Montos';
+import ModalComponent from '../../../Modal/ModalConfirmarCambios'; 
 interface Compromiso {
   anio: string | number | Date;
   fecha_carga_comp_pdf: string;
@@ -38,24 +40,27 @@ interface Compromiso {
   fecha_vencimiento_1: number;
   fecha_vencimiento_2: number;
   fecha_vencimiento_3: number;
-
 }
 
 interface CardCargaProps {
   compromisos: Compromiso[];
+  fetchMontos: () => void;
 }
 
-const NewInterfaz = ({ compromisos }: CardCargaProps) => {
+const NewInterfaz = ({ compromisos, fetchMontos }: CardCargaProps) => {
   const [montos, setMontos] = useState<Compromiso[]>([]);
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const { isOpen: isConfirmOpen, onOpen: onConfirmOpen, onClose: onConfirmClose } = useDisclosure(); // Estado para el modal de confirmación
+  const [isDeleting, setIsDeleting] = useState(false); // Estado de carga para la eliminación
 
   useEffect(() => {
     const sortedMontos = [...compromisos].sort((a, b) => {
       const dateA = new Date(a.fecha_carga_comp_pdf);
       const dateB = new Date(b.fecha_carga_comp_pdf);
       return dateB.getTime() - dateA.getTime();
     });
+    console.log('Montos ordenados:', sortedMontos);
     setMontos(sortedMontos);
   }, [compromisos]);
 
@@ -82,6 +87,24 @@ const NewInterfaz = ({ compromisos }: CardCargaProps) => {
     onClose();
   };
 
+  const handleDeleteLastCompromiso = async () => {
+    if (montos.length === 0) return;
+
+    const lastCompromiso = montos[0];
+    try {
+      setIsDeleting(true);
+      await deleteCompromiso(lastCompromiso.id_comp_pago);
+    fetchMontos();
+      onConfirmClose(); 
+    } catch (error) {
+      console.error('Error al eliminar el compromiso:', error);
+    } finally {
+      fetchMontos();
+      onConfirmClose();
+      setIsDeleting(false);
+    }
+  };
+
   return (
     <Box
       borderWidth="1px"
@@ -101,7 +124,7 @@ const NewInterfaz = ({ compromisos }: CardCargaProps) => {
               <Tr>
                 <Th p={1}>Año/ Cuatrimestre</Th>
                 <Th p={2}>Matrícula</Th>
-                <Th p={2}>Montos</Th> 
+                <Th p={2}>Montos</Th>
                 <Th p={1}>Dia de vencimiento</Th>
                 <Th p={1}>Fecha Ult Modif.</Th>
                 <Th p={1}>Acciones</Th>
@@ -116,8 +139,6 @@ const NewInterfaz = ({ compromisos }: CardCargaProps) => {
                       monto.cuatrimestre}
                   </Td>
                   <Td p={2}>{' $ ' + monto.matricula}</Td>
-
-
                   <Td p={2}>
                     <Box>
                       <Text fontWeight="bold">Monto Completo: {' $ ' + monto.monto_completo}</Text>
@@ -129,31 +150,36 @@ const NewInterfaz = ({ compromisos }: CardCargaProps) => {
                     </Box>
                   </Td>
                   <Td p={1}>
-                  <Text >
+                    <Text>
                       1er Vencimiento: <Box as="span" fontWeight="bold" color="black">{monto.fecha_vencimiento_1}</Box>
                     </Text>
-                    <Text >
+                    <Text>
                       2do Vencimiento: <Box as="span" fontWeight="bold" color="black">{monto.fecha_vencimiento_2}</Box>
                     </Text>
-                    <Text >
+                    <Text>
                       3er Vencimiento: <Box as="span" fontWeight="bold" color="black">{monto.fecha_vencimiento_3}</Box>
                     </Text>
                   </Td>
-
                   <Td p={1}>
                     {new Date(monto.fecha_carga_comp_pdf).toLocaleString(
                       'es-ES',
                       { dateStyle: 'short', timeStyle: 'short' }
                     )}
                   </Td>
-
                   <Td p={1}>
-                    <Button
-                      colorScheme="blue"
-                      onClick={() => handleViewPdf(monto.archivo_pdf_url)}
-                    >
-                      Ver pdf
-                    </Button>
+                    <Flex direction="column" gap={2}>
+                      <Button
+                        colorScheme="blue"
+                        onClick={() => handleViewPdf(monto.archivo_pdf_url)}
+                      >
+                        Ver pdf
+                      </Button>
+                      {index === 0 && (
+                        <Button colorScheme="red" onClick={onConfirmOpen} isLoading={isDeleting}>
+                          Eliminar
+                        </Button>
+                      )}
+                    </Flex>
                   </Td>
                 </Tr>
               ))}
@@ -178,9 +204,14 @@ const NewInterfaz = ({ compromisos }: CardCargaProps) => {
           </ModalFooter>
         </ModalContent>
       </Modal>
+      <ModalComponent
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        texto="¿Está seguro de que desea eliminar el último compromiso cargado?"
+        confirmar={handleDeleteLastCompromiso}
+      />
     </Box>
   );
 };
 
 export default NewInterfaz;
-