added conection to api in inscritos

app/(private)/Inscritos/Inscripciones.tsx

@@ -1,79 +1,148 @@
-"use client"
+"use client";
 import { envConfig } from "@/app/lib/config";
 import axios from "axios";
 import { useEffect, useState } from "react";
 
-interface Periodo{
-    semestre:string,
+interface Periodo {
+  id_periodo: number;
+  semestre: string;
 }
 
-export default function Inscripciones() {
-    const [periodo,setPeriodo]= useState<Periodo[]>([])
+interface ApiResponse {
+  carrera: string;
+  genero: string | null;
+  profesor: string;
+  total: string;
+}
 
-  useEffect(()=>{
-    const getPeriodo = async()=>{
-        const response = await axios.get(`${envConfig.apiUrl}/periodo`)
-        setPeriodo(response.data)
-    }
-    getPeriodo()
-  },[])
+interface TablaRow {
+  carrera: string;
+  genero: string | null;
+  WINDOWS: number;
+  MACINTOSH: number;
+  LINUX: number;
+  PROFESORES: number;
+  TOTAL: number;
+}
+
+type TipoConteo = "WINDOWS" | "MACINTOSH" | "LINUX" | "PROFESORES";
+
+export default function Inscripciones() {
+  const [periodo, setPeriodo] = useState<Periodo[]>([]);
+  const [selectedPeriodo, setSelectedPeriodo] = useState<number | null>(null);
+  const [tablaData, setTablaData] = useState<TablaRow[]>([]);
+
+  useEffect(() => {
+    const getPeriodo = async () => {
+      const response = await axios.get(`${envConfig.apiUrl}/periodo`);
+      setPeriodo(response.data);
+    };
+    getPeriodo();
+  }, []);
+
+  const handleBuscar = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!selectedPeriodo) return;
+
+    const response = await axios.get(
+      `${envConfig.apiUrl}/alumno-inscrito/inscritos/${selectedPeriodo}`
+    );
+
+    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 key = `${item.carrera}_${generoNormalizado}`;
+
+      if (!agrupado[key]) {
+        agrupado[key] = {
+          carrera: item.carrera,
+          genero: generoNormalizado,
+          WINDOWS: 0,
+          MACINTOSH: 0,
+          LINUX: 0,
+          PROFESORES: 0,
+          TOTAL: 0,
+        };
+      }
+
+      const tipo = item.profesor as TipoConteo;
+      const cantidad = Number(item.total);
+
+      agrupado[key][tipo] += cantidad;
+      agrupado[key].TOTAL += cantidad;
+    });
+
+    setTablaData(Object.values(agrupado));
+
+  };
 
   return (
     <section className="containerSection">
-      <h2 className="title"> INSCRITOS </h2>
+      <h2 className="title">INSCRITOS</h2>
 
-      <form className="containerForm">
+      <form className="containerForm" onSubmit={handleBuscar}>
         <label>Seleccione el periodo</label>
         <div className="groupInput">
-          <select>
-            {periodo.map((p,index)=>(
-                <option key={index}>
-                    {p.semestre}
-            </option>))}
+          <select
+            onChange={(e) => setSelectedPeriodo(Number(e.target.value))}
+            defaultValue=""
+          >
+            <option value="" disabled>
+              Seleccione
+            </option>
+
+            {periodo.map((p) => (
+              <option key={p.id_periodo} value={p.id_periodo}>
+                {p.semestre}
+              </option>
+            ))}
           </select>
+
           <button className="button buttonSearch" type="submit">
             Buscar
           </button>
         </div>
       </form>
 
-      <div>
+      <div style={{background:"#f9f9f9", position:"sticky", top:"-1000px"}}>
         <table>
           <thead>
             <tr>
               <th>Carrera</th>
               <th>Genero</th>
+              <th>WINDOWS</th>
+              <th>MACINTOSH</th>
+              <th>LINUX</th>
               <th>Profesores</th>
               <th>Total</th>
             </tr>
           </thead>
-          <tbody></tbody>
-        </table>
-      </div>
 
-      <div>
-        <table>
-          <thead>
-            <tr>
-              <th>Impresione B/N</th>
-              <th>Impresiones Color</th>
-              <th>Plotteo</th>
-              <th>Escaner</th>
-              <th>Total</th>
-            </tr>
-          </thead>
           <tbody>
-            <tr>
-              <td>5,000</td>
-              <td>10,000</td>
-              <td>10,000</td>
-              <td>20,000</td>
-              <td>45,000</td>
-            </tr>
+            {tablaData.map((row, index) => (
+              <tr key={index}>
+                <td>{row.carrera}</td>
+                <td>{row.genero ?? "-"}</td>
+                <td>{row.WINDOWS}</td>
+                <td>{row.MACINTOSH}</td>
+                <td>{row.LINUX}</td>
+                <td>{row.PROFESORES}</td>
+                <td>{row.TOTAL}</td>
+              </tr>
+            ))}
           </tbody>
         </table>
       </div>
     </section>
   );
 }
-//IO