feat: pagina de alumnos que firmaron compromiso de pago

Seminario-Integrador-2024 · Oct 3, 2024 · 9e7e3ec · 9e7e3ec
1 parent 458bd3b
commit 9e7e3ec
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 1 deletion.
diff --git a/...min/src/components/Pages/Estadisticas/SubPages/Alumnos-que-fimaron-compromiso-de-pago.tsx b/...min/src/components/Pages/Estadisticas/SubPages/Alumnos-que-fimaron-compromiso-de-pago.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
+import AlumnosConCompromiso from './AlumnosConCompromiso';
+import AlumnosSinCompromiso from './AlumnosSinCompromiso';
+
+const AlumnosCompromisoPago: React.FC = () => {
+  const [index, setIndex] = useState(0); // Estado para manejar la pestaña seleccionada
+
+  return (
+    <div>
+      <Tabs variant="enclosed" index={index} onChange={setIndex} isLazy>
+        <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" }}
+          >
+            Alumnos que firmaron Compromiso de Pago
+          </Tab>
+          <Tab
+            _selected={{
+              borderBottom: "2px solid",
+              borderColor: "blue.500",
+              color: "blue.500",
+              borderTop: "none",
+              borderLeft: "none",
+              borderRight: "none"
+            }}
+            _focus={{ boxShadow: "none" }}
+          >
+            Alumnos que no firmaron Compromiso de Pago
+          </Tab>
+        </TabList>
+
+        <TabPanels>
+          <TabPanel>
+            <AlumnosConCompromiso />
+          </TabPanel>
+          <TabPanel>
+            <AlumnosSinCompromiso />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default AlumnosCompromisoPago;
+
+
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/AlumnosConCompromiso.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/AlumnosConCompromiso.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Tab,
+  TabList,
+  TabPanels,
+  Tabs,
+  VStack,
+  List,
+  ListItem,
+  Spinner,
+  useTab,
+} from '@chakra-ui/react';
+import { FetchAlumnos } from '../../../../API/DatosAlumnosV2';
+
+interface Alumnos {
+  nombre: string;
+  legajo: number;
+  dni: number;
+  situacion: string;
+  anio_ingreso: number;
+}
+
+const AlumnosConCompromiso: React.FC = () => {
+  const [alumnos, setAlumnos] = useState<Alumnos[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const fetchAlumnos = async () => {
+      try {
+        const response = await FetchAlumnos();
+        if (!response.ok) {
+          throw new Error('Error al obtener los alumnos');
+        }
+        const data: Alumnos[] = await response.json();
+        setAlumnos(data);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAlumnos();
+  }, );
+
+  return (
+    <Box p={5}>
+      <VStack spacing={4} align="stretch">
+        <Tabs variant="enclosed" isLazy>
+          <TabPanels>
+            <Box>
+              <List spacing={3}>
+                {alumnos.map(alumno => (
+                  <ListItem key={alumno.legajo}>
+                    {alumno.nombre} (Legajo: {alumno.legajo}, DNI: {alumno.dni}, Situacion: {alumno.situacion}, Año Ingreso: {alumno.anio_ingreso})
+                  </ListItem>
+                ))}
+              </List>
+              <h1>Prueba 1</h1>
+            </Box>
+          </TabPanels>
+        </Tabs>
+      </VStack>
+    </Box>
+  );
+};
+
+export default AlumnosConCompromiso;
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/AlumnosSinCompromiso.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/AlumnosSinCompromiso.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Box,
+  Tab,
+  TabList,
+  TabPanels,
+  Tabs,
+  VStack,
+  List,
+  ListItem,
+  Spinner,
+  useTab,
+} from '@chakra-ui/react';
+import { FetchAlumnos } from '../../../../API/DatosAlumnosV2';
+
+interface Alumnos {
+  nombre: string;
+  legajo: number;
+  dni: number;
+  situacion: string;
+  anio_ingreso: number;
+}
+
+const AlumnosConCompromiso: React.FC = () => {
+  const [alumnos, setAlumnos] = useState<Alumnos[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const fetchAlumnos = async () => {
+      try {
+        const response = await FetchAlumnos();
+        if (!response.ok) {
+          throw new Error('Error al obtener los alumnos');
+        }
+        const data: Alumnos[] = await response.json();
+        setAlumnos(data);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchAlumnos();
+  }, );
+
+  return (
+    <Box p={5}>
+      <VStack spacing={4} align="stretch">
+        <Tabs variant="enclosed" isLazy>
+          <TabPanels>
+            <Box>
+              <List spacing={3}>
+                {alumnos.map(alumno => (
+                  <ListItem key={alumno.legajo}>
+                    {alumno.nombre} (Legajo: {alumno.legajo}, DNI: {alumno.dni}, Situacion: {alumno.situacion}, Año Ingreso: {alumno.anio_ingreso})
+                  </ListItem>
+                ))}
+              </List>
+            </Box>
+            <h1>Prueba 2</h1>
+          </TabPanels>
+        </Tabs>
+      </VStack>
+    </Box>
+  );
+};
+
+export default AlumnosConCompromiso;
diff --git a/FrontAdmin/src/components/SubMenu/LinksSubMenu.tsx b/FrontAdmin/src/components/SubMenu/LinksSubMenu.tsx
@@ -5,6 +5,7 @@ export const ITEMS_SUBMENU = [
   { url: '#', title: 'Alumnos que abonaron cuota' },
   { url: '#', title: 'Alumnos que no abonaron cuota' },
   { url: '#', title: 'Alumnos que no abonaron matricula' },
+  { url: 'alumnos-que-firmaron-compromiso-de-pago', title: 'Alumnos que firmaron compromiso de pago'},
   { url: '#', title: 'Pagos' },
   {
     url: 'alumnos-que-cursan-materia',

diff --git a/FrontAdmin/src/routes.tsx b/FrontAdmin/src/routes.tsx
@@ -24,6 +24,7 @@ import Alumnos from './components/Pages/Alumnos/Alumnos';
 import { PiStudentLight } from 'react-icons/pi';
 import FichaAlumno from './components/Pages/Alumnos/SubPages/FichaAlumno'; import CompromisoDePago from './components/Pages-Alumnos/CompromisoDePago';
 import ListadoAlumnosQueCursanMateria from './components/Pages/Estadisticas/SubPages/PaginasMaterias/ListadoAlumnosQueCursanMateria';
+import AlumnosCompromisoPago from './components/Pages/Estadisticas/SubPages/Alumnos-que-fimaron-compromiso-de-pago';
 
 const routes = [
   {
@@ -49,7 +50,13 @@ const routes = [
         element: <ListadoMaterias />,
         rol: 'admin',
 
-      },{
+      },
+      {
+        path: 'alumnos-que-firmaron-compromiso-de-pago',
+        element: <AlumnosCompromisoPago />,
+        rol: 'admin',
+      },
+      {
         path: 'alumnos-que-cursan-materia/:codigo_materia',
         element: <ListadoAlumnosQueCursanMateria />,
         rol: 'admin',