consultas a base de datos

app/Components/BitacoraSanciones/Sanciones.tsx

@@ -19,8 +19,7 @@ export default async function Sanciones(props: { student?: Student }) {
             NoCuenta={props.student.id_cuenta}
             Nombre={props.student.nombre}
           />
-
-        <TableSancion />
+          <TableSancion />
         </>
       )}
     </>

app/Components/BitacoraSanciones/TableSancion.tsx

@@ -24,24 +24,64 @@ interface sancion {
 }
 
 export default function TableSancion() {
-  const [sanciones, setSanciones] = useState<any>();
+  const [sanciones, setSanciones] = useState<any>([]);
   const [button, setButton] = useState<boolean>(false);
+  const [selectedSancion, setSelectedSancion] = useState("");
+  const [alumnoSanciones, setAlumnoSanciones] = useState<any>([]);
+  /*
+  useEffect(() => {
+    const getSanciones = async () => {
+      const response = await axios.get("");
+      setSanciones(response);
+    };
+    getSanciones();
+  }, [button]);
 
-  // useEffect(() => {
-  //   const getSanciones = async () => {
-  //     const response = await axios.get("");
-  //     setSanciones(response);
-  //   };
-  //   getSanciones();
-  // }, [button]);
+
+
+                  <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
+                <td>
+                  {calcularFechaFin(item.fecha_inicio, item.sancion?.duracion)}
+                </td>
+
+                https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/320154041
+                .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
+*/
+  useEffect(() => {
+    axios
+      .get(
+        "  https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/320154041"
+      )
+      .then((response) => {
+        setAlumnoSanciones(response.data);
+      })
+      .catch((error) => {
+        console.error("Error al obtener las sanciones:", error);
+      });
+
+    axios
+      .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
+      .then((response) => {
+        setSanciones(response.data);
+      })
+      .catch((error) => {
+        console.error("Error al obtener las sanciones:", error);
+      });
+  }, []);
 
   const handlebutton = () => {
     setButton(!button);
   };
-  
+
+  const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
+    const fecha = new Date(fechaInicio);
+    fecha.setDate(fecha.getDate() + duracionSemanas * 7);
+    return fecha.toLocaleDateString();
+  };
+
   return (
     <>
-      <div className={styles.tableContainer} style={{margin:"1rem 0"}}>
+      <div className={styles.tableContainer} style={{ margin: "1rem 0" }}>
         <table className={styles.machineTable}>
           <thead>
             <tr>
@@ -52,19 +92,51 @@ export default function TableSancion() {
               <th>Podra utilizar el servicio hasta</th>
             </tr>
           </thead>
-          <tbody></tbody>
+          <tbody>
+            {sanciones.length > 0 ? (
+              alumnoSanciones.map((item: any) => (
+                <tr key={item.id_alumno_sancion}>
+                  <td>{item.alumno?.id_cuenta}</td>
+                  <td>{item.sancion?.sancion}</td>
+                  <td>{item.sancion?.duracion}</td>
+                  <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
+                  <td>
+                    {calcularFechaFin(
+                      item.fecha_inicio,
+                      item.sancion?.duracion
+                    )}
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={6}>No hay sanciones registradas</td>
+              </tr>
+            )}
+          </tbody>
         </table>
       </div>
 
       <form className="containerForm">
         <div className="groupInput">
-          <select>
+          <select
+            value={selectedSancion}
+            onChange={(e) => setSelectedSancion(e.target.value)}
+          >
             <option value="">-- Selecciona una sanción --</option>
-            <option value="sancion 1">No cerrar sesion (Una semana)</option>
+            {sanciones.map((sancion: any) => (
+              <option key={sancion.id_sancion} value={sancion.id_sancion}>
+                {sancion.sancion} ({sancion.duracion} semana/s)
+              </option>
+            ))}
           </select>
         </div>
       </form>
-      <button className="button buttonSearch" style={{margin:"1rem 0"}} onClick={handlebutton}>
+      <button
+        className="button buttonSearch"
+        style={{ margin: "1rem 0" }}
+        onClick={handlebutton}
+      >
         Aplicar sanción
       </button>
     </>