From d828893e30ceddab070c825dd72b515fb3f19a6d Mon Sep 17 00:00:00 2001
From: Miranda Ariano <arianogato-@hotmail.com>
Date: Tue, 15 Oct 2024 13:37:27 -0300
Subject: [PATCH] feat: listado de alumnos que no abonaron matricula

---
 ...Alumnos-que-fimaron-compromiso-de-pago.tsx | 29 ++-----------------
 .../Pages/Estadisticas/SubPages/Matricula.tsx | 27 +++++++++++++++--
 .../Estadisticas/SubPages/Pesta\303\261a.tsx" | 26 +++++++++++++++++
 .../Estadisticas/SubPages/TablaAlumnos.tsx    |  2 +-
 4 files changed, 54 insertions(+), 30 deletions(-)
 create mode 100644 "FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pesta\303\261a.tsx"

diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Alumnos-que-fimaron-compromiso-de-pago.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Alumnos-que-fimaron-compromiso-de-pago.tsx
index efe224e..a813968 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Alumnos-que-fimaron-compromiso-de-pago.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Alumnos-que-fimaron-compromiso-de-pago.tsx
@@ -3,6 +3,7 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
 import TablaAlumnos from './TablaAlumnos';
 import { FetchFirmantes } from '../../../../API/AlumnosCompromisoPago';
 import { FetchNoFirmantes } from '../../../../API/AlumnosCompromisoPago';
+import Pestaña from './Pestaña';
 
 const AlumnosCompromisoPago: React.FC = () => {
   const [index, setIndex] = useState(0); // Estado para manejar la pestaña seleccionada
@@ -11,32 +12,8 @@ const AlumnosCompromisoPago: React.FC = () => {
     <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" }}
-          >
-            Firmaron
-          </Tab>
-          <Tab
-            _selected={{
-              borderBottom: "2px solid",
-              borderColor: "blue.500",
-              color: "blue.500",
-              borderTop: "none",
-              borderLeft: "none",
-              borderRight: "none"
-            }}
-            _focus={{ boxShadow: "none" }}
-          >
-            No firmaron
-          </Tab>
+          <Pestaña title="Firmaron" />
+          <Pestaña title="No Firmaron" />
         </TabList>
 
         <TabPanels>
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Matricula.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Matricula.tsx
index eb4df8e..00d108f 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Matricula.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Matricula.tsx
@@ -1,11 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
 import TablaAlumnos from './TablaAlumnos';
 import { FetchFirmantes } from '../../../../API/AlumnosCompromisoPago';
+import { FetchNoFirmantes } from '../../../../API/AlumnosCompromisoPago';
+import Pestaña from './Pestaña';
 
 const Matricula: React.FC = () => {
+  const [index, setIndex] = useState(0); // Estado para manejar la pestaña seleccionada
+
   return (
-    <TablaAlumnos fetchFunction={FetchFirmantes} title="Alumnos que abonaron matricula" />
+    <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={FetchFirmantes} title="Alumnos que abonaron matrícula"/>
+          </TabPanel>
+          <TabPanel>
+            <TablaAlumnos fetchFunction={FetchNoFirmantes} title="Alumnos que no abonaron matrícula"/>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
   );
 };
 
-export default Matricula;
+export default Matricula;
\ No newline at end of file
diff --git "a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pesta\303\261a.tsx" "b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pesta\303\261a.tsx"
new file mode 100644
index 0000000..af5c4a1
--- /dev/null
+++ "b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/Pesta\303\261a.tsx"
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tab } from '@chakra-ui/react';
+
+interface CustomTabProps {
+  title: string;
+}
+
+const CustomTab: React.FC<CustomTabProps> = ({ title }) => {
+  return (
+    <Tab
+      _selected={{
+        borderBottom: "2px solid",
+        borderColor: "blue.500",
+        color: "blue.500",
+        borderTop: "none",
+        borderLeft: "none",
+        borderRight: "none",
+      }}
+      _focus={{ boxShadow: "none" }}
+    >
+      {title}
+    </Tab>
+  );
+};
+
+export default CustomTab;
diff --git a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/TablaAlumnos.tsx b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/TablaAlumnos.tsx
index 68c4ad7..8f99fe8 100644
--- a/FrontAdmin/src/components/Pages/Estadisticas/SubPages/TablaAlumnos.tsx
+++ b/FrontAdmin/src/components/Pages/Estadisticas/SubPages/TablaAlumnos.tsx
@@ -101,7 +101,7 @@ const TablaAlumnos: React.FC<TablaAlumnosProps> = ({ fetchFunction, title }) =>
       <Table>
         <Thead>
           <Tr>
-            {['full_name', 'legajo', 'dni', 'estado_financiero', 'anio_ingreso'].map((field) => (
+            {['APELLIDO Y NOMBRE', 'LEGAJO', 'DNI', 'ESTADO FINANCIERO', 'AÑO INGRESO'].map((field) => (
               <Th key={field} fontFamily="Helvetica" fontWeight="900">
                 {field.toUpperCase()}
                 <IconButton