Se modifico la tabla eliminando la columna de genero cambiandola por femenino y masculino

app/(private)/Inscritos/Inscripciones.tsx

@@ -3,8 +3,8 @@ import { envConfig } from "@/app/lib/config";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import Cookies from "js-cookie";
+import "./inscripciones.css";
 
-import "./inscripciones.css"
 
 interface Periodo {
   id_periodo: number;
@@ -13,23 +13,26 @@ interface Periodo {
 
 interface ApiResponse {
   carrera: string;
-  genero: string | null;
-  profesor: string;
+  profesor: string;      
+  femenino: string;
+  masculino: string;
   total: string;
 }
 
+
+type TipoConteo = "WINDOWS" | "MACINTOSH" | "LINUX" | "PROFESORES";
+
 interface TablaRow {
   carrera: string;
-  genero: string | null;
   WINDOWS: number;
   MACINTOSH: number;
   LINUX: number;
   PROFESORES: number;
   TOTAL: number;
+  femenino: number;
+  masculino: number;
 }
 
-type TipoConteo = "WINDOWS" | "MACINTOSH" | "LINUX" | "PROFESORES";
-
 export default function Inscripciones() {
   const [periodo, setPeriodo] = useState<Periodo[]>([]);
   const [selectedPeriodo, setSelectedPeriodo] = useState<number | null>(null);
@@ -38,15 +41,16 @@ export default function Inscripciones() {
   const token = Cookies.get("token");
   const headers = { Authorization: `Bearer ${token}` };
 
+
   useEffect(() => {
     const getPeriodo = async () => {
-      const response = await axios.get(`${envConfig.apiUrl}/periodo`, { headers }
-      );
+      const response = await axios.get(`${envConfig.apiUrl}/periodo`, { headers });
       setPeriodo(response.data);
     };
     getPeriodo();
   }, []);
 
+  
   const handleBuscar = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -55,44 +59,44 @@ export default function Inscripciones() {
     const response = await axios.get(
       `${envConfig.apiUrl}/alumno-inscrito/inscritos/${selectedPeriodo}`,
       { headers }
-
     );
 
     const data: ApiResponse[] = response.data;
 
+
     const agrupado: Record<string, TablaRow> = {};
 
     data.forEach((item) => {
-      const generoNormalizado =
-        item.genero === "F" || item.genero === "Femenino"
-          ? "Femenino"
-          : item.genero === "M" || item.genero === "Masculino"
-            ? "Masculino"
-            : "-";
+      const carrera = item.carrera;
 
-      const key = `${item.carrera}_${generoNormalizado}`;
-
-      if (!agrupado[key]) {
-        agrupado[key] = {
-          carrera: item.carrera,
-          genero: generoNormalizado,
+     
+      if (!agrupado[carrera]) {
+        agrupado[carrera] = {
+          carrera: carrera,
           WINDOWS: 0,
           MACINTOSH: 0,
           LINUX: 0,
           PROFESORES: 0,
           TOTAL: 0,
+          femenino: 0,
+          masculino: 0,
         };
       }
 
-      const tipo = item.profesor as TipoConteo;
-      const cantidad = Number(item.total);
+      const fila = agrupado[carrera];
+      const tipoProfesor = item.profesor as TipoConteo; 
+      const totalPlataforma = Number(item.total);
+      const fem = Number(item.femenino);
+      const masc = Number(item.masculino);
 
-      agrupado[key][tipo] += cantidad;
-      agrupado[key].TOTAL += cantidad;
+    
+      fila[tipoProfesor] += totalPlataforma;
+      fila.TOTAL += totalPlataforma;
+      fila.femenino += fem;
+      fila.masculino += masc;
     });
 
     setTablaData(Object.values(agrupado));
-
   };
 
   return (
@@ -109,7 +113,6 @@ export default function Inscripciones() {
             <option value="" disabled>
               Seleccione
             </option>
-
             {periodo.map((p) => (
               <option key={p.id_periodo} value={p.id_periodo}>
                 {p.semestre}
@@ -128,7 +131,8 @@ export default function Inscripciones() {
           <thead>
             <tr>
               <th>Carrera</th>
-              <th>Genero</th>
+              <th>Femenino</th>
+              <th>Masculino</th>
               <th>WINDOWS</th>
               <th>MACINTOSH</th>
               <th>LINUX</th>
@@ -141,7 +145,8 @@ export default function Inscripciones() {
             {tablaData.map((row, index) => (
               <tr key={index}>
                 <td className="textLeft">{row.carrera}</td>
-                <td>{row.genero ?? "-"}</td>
+                <td>{row.femenino}</td>
+                <td>{row.masculino}</td>
                 <td>{row.WINDOWS}</td>
                 <td>{row.MACINTOSH}</td>
                 <td>{row.LINUX}</td>
@@ -154,4 +159,4 @@ export default function Inscripciones() {
       </div>
     </section>
   );
-}
+}