mock Up de baja de alumno

FrontAdmin/src/components/Pages-Alumnos/DarseBaja/DarseBaja.tsx

@@ -4,7 +4,6 @@ import { FetchCompromisos } from '../../../API-Alumnos/Compromiso';
 import { FetchDetalleAlumno } from '../../../API/DetalleAlumno';
 import Cookies from 'js-cookie';
 import ModalConfirmar from './ModalConfir';
-import { solicitarBajaAlumno } from '../../../API-Alumnos/DarseBaja'; 
 
 interface Alumno {
   full_name: string;
@@ -41,6 +40,7 @@ const DarseBaja = () => {
   });
   const [alumno, setAlumno] = useState<Alumno | null>(null);
   const [compromisoFirmado, setCompromiso] = useState<CompromisoResponse | null>(null);
+  const [motivoBaja, setMotivoBaja] = useState<string | null>(null);
   const { isOpen, onOpen, onClose } = useDisclosure();
 
   const handleDarseBaja = () => {
@@ -60,32 +60,72 @@ const DarseBaja = () => {
   const fetchDetalleAlumno = async (dni: any) => {
     try {
       const data = await FetchDetalleAlumno(dni);
-      console.log('alumno:', data);
-      setAlumno(data);
+      const bajaInfo = localStorage.getItem('bajaAlumnos');
+      if (bajaInfo) {
+        const parsedBajaInfo = JSON.parse(bajaInfo);
+        const alumnoBaja = parsedBajaInfo.find((baja: any) => baja.dni === parseInt(dni));
+        if (alumnoBaja) {
+          setAlumno({
+            ...data,
+            estado_academico: alumnoBaja.solicitud === 'solicitado' ? 'Baja solicitada' : alumnoBaja.solicitud === 'aceptado' ? 'Baja aceptada' : alumnoBaja.solicitud === 'rechazado' ? 'Baja rechazada' : data.estado_academico,
+          });
+          setMotivoBaja(alumnoBaja.motivo);
+        } else {
+          setAlumno(data);
+        }
+      } else {
+        setAlumno(data);
+      }
     } catch (error) {
       console.error('Error al obtener los datos del alumno', error);
     }
   };
 
   const handleConfirmarBaja = async (motivo: string) => {
     if (alumno?.dni) {
-      const success = await solicitarBajaAlumno(alumno.dni, motivo);
-      if (success) {
-        setAlumno((prev) => prev ? { ...prev, estado_academico: 'Dado de Baja' } : null);
-      }
+        // Crear un objeto con la información del alumno y el motivo de la baja
+        const bajaInfo = {
+            dni: alumno.dni,
+            nombre: alumno.full_name,
+            motivo: motivo,
+            solicitud: "solicitado",
+        };
+
+        // Obtener el arreglo de solicitudes de baja del local storage
+        const bajaAlumnos = localStorage.getItem('bajaAlumnos');
+        const parsedBajaAlumnos = bajaAlumnos ? JSON.parse(bajaAlumnos) : [];
+
+        // Agregar la nueva solicitud de baja al arreglo
+        parsedBajaAlumnos.push(bajaInfo);
+
+        // Guardar el arreglo actualizado en el local storage
+        localStorage.setItem('bajaAlumnos', JSON.stringify(parsedBajaAlumnos));
+
+        console.log('Información de baja guardada en el local storage:', bajaInfo);
+
+        // Recargar los datos del alumno y los compromisos
+        const dni = Cookies.get('dni');
+        if (dni) {
+          await fetchDetalleAlumno(dni);
+          await fetchCompromiso();
+        }
     }
   };
 
   useEffect(() => {
     const dni = Cookies.get('dni');
-    fetchDetalleAlumno(dni);
-    fetchCompromiso();
+    if (dni) {
+      fetchDetalleAlumno(dni);
+      fetchCompromiso();
+    } else {
+      console.error('DNI no encontrado en las cookies');
+    }
   }, []);
 
   return (
     <Flex mt="20px" flexDirection={"column"} justifyContent={"center"} gap={5}>
 
-      {(compromisoFirmado && compromisoFirmado.results[0]?.firmo_ultimo_compromiso && alumno?.estado_academico !== 'Dado de Baja') &&
+      {(compromisoFirmado && compromisoFirmado.results[0]?.firmo_ultimo_compromiso && alumno?.estado_academico !== 'Baja solicitada') &&
       <Alert status='warning'>
       <AlertIcon />
       Si se da de baja, aún deberá abonar la cuota del mes en curso.
@@ -97,18 +137,17 @@ const DarseBaja = () => {
           Compromiso de pago no firmado
       </Alert>} 
 
-
-
-      {alumno?.estado_academico !== 'Dado de Baja' && <Box w={"100%"} >
+      {alumno?.estado_academico === 'Activo' && <Box w={"100%"} >
         <Tag p="10px" w={"100%"} fontSize={18} fontWeight={"semibold"} textAlign={"center"} justifyContent={"center"}>
           Solicitud de Baja al {fechaDeHoy}
         </Tag>
       </Box>}
 
-      {alumno?.estado_academico === 'Dado de Baja' && <Box w={"100%"} >
+      {alumno?.estado_academico === 'Baja solicitada' && <Box w={"100%"} >
         <Tag p="10px" w={"100%"} fontSize={18} fontWeight={"semibold"} textAlign={"center"} justifyContent={"center"}>
           Baja solicitada el {fechaDeHoy}
         </Tag>
+
       </Box>}
 
       <Box w="100%" mb={7} display={"flex"} gap={4} flexDirection={"row"} alignItems={"center"} justifyContent={"center"}>
@@ -129,12 +168,18 @@ const DarseBaja = () => {
           </Text>
         </Tag>
       </Box>
+      {motivoBaja && (
+          <Tag w={"100%"} p="10px" fontSize={16} mt="-25px">
+            <Text  fontWeight={"semibold"}>Motivo de la baja: </Text>
+            <Text  pl="8px">{motivoBaja}</Text>
+          </Tag>
+        )}
 
       <Box w={"100%"} display={"flex"} justifyContent={"center"}>
         <Button
           colorScheme="red"
           onClick={handleDarseBaja}
-          isDisabled={!compromisoFirmado || !compromisoFirmado.results[0]?.firmo_ultimo_compromiso || alumno?.estado_academico === 'Dado de Baja'}
+          isDisabled={!compromisoFirmado || !compromisoFirmado.results[0]?.firmo_ultimo_compromiso || alumno?.estado_academico === 'Baja solicitada' || alumno?.estado_academico === 'Baja aceptada' || alumno?.estado_academico === 'Baja rechazada' || alumno?.estado_academico === 'Inactivo'}
         >
           Solicitar Baja
         </Button>

FrontAdmin/src/components/Pages/Estadisticas/AlumnosBaja.tsx

@@ -1,11 +1,80 @@
-import React from 'react';
-import TablaAlumnos from './SubPages/TablaAlumnos';
-import { FetchFirmantes } from '../../../API/AlumnosCompromisoPago';
-
-const AlumnosBaja = () => { 
-    return (
-        <TablaAlumnos fetchFunction={FetchFirmantes} title="Alumnos que se dieron de baja" />
-    );
+import React, { useState, useEffect } from 'react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
+import ModalComponent from '../../Modal/ModalConfirmarCambios';
+
+interface BajaInfo {
+  dni: number;
+  nombre: string;
+  motivo: string;
+  solicitud: string;
+}
+
+const AlumnosBaja = () => {
+  const [bajas, setBajas] = useState<BajaInfo[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedBaja, setSelectedBaja] = useState<BajaInfo | null>(null);
+  const [accion, setAccion] = useState<'aceptar' | 'rechazar'>('aceptar');
+
+  useEffect(() => {
+    // Obtener las solicitudes de baja del local storage
+    const bajaAlumnos = localStorage.getItem('bajaAlumnos');
+    if (bajaAlumnos) {
+      setBajas(JSON.parse(bajaAlumnos));
+    }
+  }, []);
+
+  const handleAceptar = (baja: BajaInfo) => {
+    setSelectedBaja(baja);
+    setAccion('aceptar');
+    setIsModalOpen(true);
+  };
+
+  const handleRechazar = (baja: BajaInfo) => {
+    setSelectedBaja(baja);
+    setAccion('rechazar');
+    setIsModalOpen(true);
+  };
+
+  const confirmarAccion = () => {
+    if (selectedBaja) {
+      const nuevasBajas = bajas.map(baja =>
+        baja.dni === selectedBaja.dni ? { ...baja, solicitud: accion === 'aceptar' ? 'aceptado' : 'rechazado' } : baja
+      );
+      localStorage.setItem('bajaAlumnos', JSON.stringify(nuevasBajas));
+      setBajas(nuevasBajas);
+      console.log(`Solicitud de baja ${accion} para el alumno con DNI: ${selectedBaja.dni}`);
+    }
+  };
+
+  return (
+    <div>
+
+      {bajas.length === 0 ? (
+        <Text textAlign="center">No hay solicitudes de baja.</Text>
+      ) : (
+        bajas.map(baja => (
+          <Box key={baja.dni} p={4} borderWidth={1} borderRadius="md" mb={4}>
+            <Text><strong>Nombre:</strong> {baja.nombre}</Text>
+            <Text><strong>DNI:</strong> {baja.dni}</Text>
+            <Text><strong>Motivo:</strong> {baja.motivo}</Text>
+            <Text><strong>Estado:</strong> {baja.solicitud.toUpperCase()}</Text>
+            <Flex mt={2} justifyContent="space-between">
+              <Button colorScheme="green" onClick={() => handleAceptar(baja)}>Aceptar</Button>
+              <Button colorScheme="red" onClick={() => handleRechazar(baja)}>Rechazar</Button>
+            </Flex>
+          </Box>
+        ))
+      )}
+      {selectedBaja && (
+        <ModalComponent
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          texto={`¿Está seguro que desea ${accion} la solicitud de baja del alumno ${selectedBaja.nombre}?`}
+          confirmar={confirmarAccion}
+        />
+      )}
+    </div>
+  );
 };
 
 export default AlumnosBaja;

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

@@ -92,6 +92,7 @@ const TablaAlumnos: React.FC<TablaAlumnosProps> = ({ fetchFunction, title }) =>
 
   return (
     <Box p={5}>
+
       <Input
         placeholder="Buscar por Nombre, Legajo, DNI, Situación o Año de Ingreso"
         value={searchTerm}