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>
     </>

package-lock.json

@@ -14,7 +14,8 @@
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-hot-toast": "^2.6.0",
-        "react-icons": "^5.5.0"
+        "react-icons": "^5.5.0",
+        "react-toastify": "^11.0.5"
       },
       "devDependencies": {
         "@types/js-cookie": "^3.0.6",
@@ -688,6 +689,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -1174,6 +1184,19 @@
         "react": "*"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",

package.json

@@ -15,7 +15,8 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",