fix: ahora muestra los listados de alumnos que abonaron matricula por…

… cuatrimestre y año
Seminario-Integrador-2024 · Nov 16, 2024 · 451605a · 451605a
1 parent 0b13bc7
commit 451605a
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 22 deletions.
diff --git a/FrontAdmin/src/API/AlumnosAbonaronMatricula.ts b/FrontAdmin/src/API/AlumnosAbonaronMatricula.ts
@@ -23,12 +23,11 @@ const fetchAlumnosAbonaronMatricula = async (url: string): Promise<any> => {
   }
 };
 
-export const FetchAbonaronMatricula = async (): Promise<any> => {
-  const url = 'http://localhost:8000/api/alumnos/pagaron-matricula';
+export const FetchAbonaronMatricula = async (cuatrimestre: string, anio: number): Promise<any> => {
+  const url = `http://localhost:8000/api/alumnos/pagaron-matricula/${cuatrimestre}/${anio}`;
   return fetchAlumnosAbonaronMatricula(url);
 };
-
-export const FetchNoAbonaronMatricula = async (): Promise<any> => {
-  const url = 'http://localhost:8000/api/alumnos/no-pagaron-matricula';
+export const FetchNoAbonaronMatricula = async (cuatrimestre: string, anio: number): Promise<any> => {
+  const url = `http://localhost:8000/api/alumnos/no-pagaron-matricula/${cuatrimestre}/${anio}`;
   return fetchAlumnosAbonaronMatricula(url);
 };
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Matricula.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Matricula.tsx
@@ -1,32 +1,92 @@
 import React, { useState } from 'react';
-import { Tabs, TabList, TabPanels, TabPanel } from '@chakra-ui/react';
+import { Tabs, TabList, TabPanels, TabPanel, Button, Box, Text, Select } from '@chakra-ui/react';
 import TablaAlumnos from './TablaAlumnos';
 import { FetchAbonaronMatricula } from '../../../../API/AlumnosAbonaronMatricula';
 import { FetchNoAbonaronMatricula } from '../../../../API/AlumnosAbonaronMatricula';
 import Pestaña from './Pestaña';
 
 const Matricula: React.FC = () => {
   const [index, setIndex] = useState(0); // Estado para manejar la pestaña seleccionada
+  const [cuatrimestre, setCuatrimestre] = useState<string>(''); // Estado para el cuatrimestre
+  const [anio, setAnio] = useState<string>(''); // Estado para el año
+  const [formSubmitted, setFormSubmitted] = useState<boolean>(false);
+
+  // Verificar si el formulario está completo (ambos campos seleccionados)
+  const isFormValid = cuatrimestre !== '' && anio !== '';
+
+  const handleSolicitar = () => {
+    setFormSubmitted(true);
+  };
 
   return (
     <div>
-      <Tabs variant="enclosed" index={index} onChange={setIndex} isLazy>
-        <TabList display="flex" justifyContent="center" alignItems="center" borderBottom="2px solid" borderColor="gray.200">
-          <Pestaña title="Abonaron" />
-          <Pestaña title="No Abonaron" />
-        </TabList>
-
-        <TabPanels>
-          <TabPanel>
-            <TablaAlumnos fetchFunction={FetchAbonaronMatricula} title="Alumnos que abonaron matrícula"/>
-          </TabPanel>
-          <TabPanel>
-            <TablaAlumnos fetchFunction={FetchNoAbonaronMatricula} title="Alumnos que no abonaron matrícula"/>
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
+      {!formSubmitted ? (
+        <Box display="flex" flexDirection="column" justifyContent="flex-start" alignItems="center" height="100vh" p={4} py={12}>
+          <Text fontSize="3xl" fontWeight="bold" mb={6}>
+            Seleccione un cuatrimestre y un año
+          </Text>
+
+          <Select
+            placeholder="Seleccione un cuatrimestre"
+            value={cuatrimestre}
+            onChange={(e) => setCuatrimestre(e.target.value)}
+            mb={4}
+            width="100%" 
+            maxWidth="400px" 
+          >
+            <option value="1C">Primer Cuatrimestre</option>
+            <option value="2C">Segundo Cuatrimestre</option>
+          </Select>
+
+          <Select
+            placeholder="Seleccione un año"
+            value={anio}
+            onChange={(e) => setAnio(e.target.value)}
+            mb={6}
+            width="100%"
+            maxWidth="400px"
+          >
+            <option value="2023">2023</option>
+            <option value="2024">2024</option>
+          </Select>
+
+          <Button
+            colorScheme="blue"
+            color="white"
+            onClick={handleSolicitar}
+            isDisabled={!isFormValid}  
+            width="100%"  
+            maxWidth="400px"  
+            size="lg"  
+          >
+            Solicitar
+          </Button>
+        </Box>
+      ) : (
+        <Tabs variant="enclosed" index={index} onChange={setIndex} isLazy>
+          <TabList display="flex" justifyContent="center" alignItems="center" borderBottom="2px solid" borderColor="gray.200">
+            <Pestaña title="Abonaron" />
+            <Pestaña title="No Abonaron" />
+          </TabList>
+
+          <TabPanels>
+            <TabPanel>
+              <TablaAlumnos 
+                fetchFunction={() => FetchAbonaronMatricula(cuatrimestre, parseInt(anio))}
+                title="Alumnos que abonaron matrícula" 
+              />
+            </TabPanel>
+            <TabPanel>
+              <TablaAlumnos 
+                fetchFunction={() => FetchNoAbonaronMatricula(cuatrimestre, parseInt(anio))}
+                title="Alumnos que no abonaron matrícula" 
+              />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      )}
     </div>
   );
 };
 
-export default Matricula;
+export default Matricula;