Componentes

app/(private)/BitacoraSanciones/page.tsx

@@ -1,49 +1,12 @@
 "use client";
 
-import styles from "./Page.module.css";
 import Toggle from "@/app/Components/Toggle/Toggle";
-import SearchDate from "@/app/Components/SearchDate/SearchDate";
-import Information from "@/app/Components/Information/information";
-import SearchUser from "@/app/Components/SearchUser/searchUser";
-import { useState } from "react";
+import Sanciones from "@/app/Components/BitacoraSanciones/Sanciones";
+import BitacoraMesas from "@/app/Components/BitacoraSanciones/BitacoraMesas";
+import BitacoraAlumno from "@/app/Components/BitacoraSanciones/BitacoraAlumno";
+import BitacoraEquipo from "@/app/Components/BitacoraSanciones/BitacoraEquipo";
 
 export default function Page() {
-  const [usuario_sanciones] = useState([
-    {
-      no_cuenta: "425530275 ",
-      motivo: "Motivos",
-      duracion: "5",
-      fecha_sancion: "15/10/2025",
-      utilizar_hasta: "25/10/2025",
-    },
-  ]);
-
-  const [machines] = useState([
-    {
-      hora_entrada: "10 ",
-      min_utilizados: "20",
-      hora_salida: "10:15",
-      cuenta_asociada: "15",
-    },
-  ]);
-  const [tables] = useState([
-    {
-      no_mesa: "10 ",
-      no_cuenta: "425530275",
-      hora_entrada: "10:15",
-      tiempo_asignado: "15",
-      hora_salida: "10:30",
-    },
-  ]);
-
-  const [alumnos] = useState([
-    {
-      tiempo_entrada: "10:10 ",
-      tiempo_asignado: "15",
-      Ubicacion_equipo: "2",
-    },
-  ]);
-  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
   return (
     <section className="containerSection">
       <h2 className="title"> BITACORA Y SANCIONES </h2>
@@ -53,78 +16,19 @@ export default function Page() {
         options={[
           {
             key: "1",
-            label: "Bitacora de equipo",
+            label: "Bitacora equipo",
             content: (
               <>
-                <SearchDate />
-
-                <form className="containerForm">
-                  <label className="label">Ubicacion de equipo</label>
-
-                  <div className="groupInput">
-                    <select
-                      value={ubicacion_equipo}
-                      onChange={(e) => setUbicacionEquipo(e.target.value)}
-                    >
-                      <option value="">-- Selecciona un equipo --</option>
-                      <option value="255">Equipo 255</option>
-                    </select>
-                    <button className="button buttonSearch" type="submit">
-                      Asignar
-                    </button>
-                  </div>
-                </form>
-                <div className={styles.tableContainer}>
-                  <table className={styles.machineTable}>
-                    <thead>
-                      <tr>
-                        <th>Hora Entrada</th>
-                        <th>Minutos utilizados</th>
-                        <th>Hora salida</th>
-                        <th>Cuenta asociada</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {machines.map((machine, index) => (
-                        <tr key={index}>
-                          <td>{machine.hora_entrada}</td>
-                          <td>{machine.min_utilizados}</td>
-                          <td>{machine.hora_salida}</td>
-                          <td>{machine.cuenta_asociada}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                <BitacoraEquipo />
               </>
             ),
           },
           {
             key: "2",
-            label: "Bitacora de alumno",
+            label: "Bitacora alumno",
             content: (
               <>
-                <SearchDate />
-                <div className={styles.tableContainer}>
-                  <table className={styles.machineTable}>
-                    <thead>
-                      <tr>
-                        <th>Tiempo Entrada</th>
-                        <th>Tiempo Asignado</th>
-                        <th>Ubicacion del equipo</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {alumnos.map((alumno, index) => (
-                        <tr key={index}>
-                          <td>{alumno.tiempo_entrada}</td>
-                          <td>{alumno.tiempo_asignado}</td>
-                          <td>{alumno.Ubicacion_equipo}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                <BitacoraAlumno />
               </>
             ),
           },
@@ -133,31 +37,7 @@ export default function Page() {
             label: "Bitacora mesas",
             content: (
               <>
-                <SearchDate />
-                <div className={styles.tableContainer}>
-                  <table className={styles.machineTable}>
-                    <thead>
-                      <tr>
-                        <th>Mesa</th>
-                        <th>Cuenta</th>
-                        <th>Hora Entrada</th>
-                        <th>Tiempo Asignado</th>
-                        <th>Hora Salida</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {tables.map((table, index) => (
-                        <tr key={index}>
-                          <td>{table.no_mesa}</td>
-                          <td>{table.no_cuenta}</td>
-                          <td>{table.hora_entrada}</td>
-                          <td>{table.tiempo_asignado}</td>
-                          <td>{table.hora_salida}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                <BitacoraMesas />
               </>
             ),
           },
@@ -166,66 +46,7 @@ export default function Page() {
             label: "Sanciones",
             content: (
               <>
-                <SearchUser urlBase="BitacoraSanciones" value="3" />
-
-                <Information NoCuenta="id cuenta" Nombre="id nombre" />
-
-                <form className="containerForm">
-                  <label className="label">Ubicacion de equipo</label>
-
-                  <div className="groupInput">
-                    <select
-                      value={ubicacion_equipo}
-                      onChange={(e) => setUbicacionEquipo(e.target.value)}
-                    >
-                      <option value="">-- Selecciona un equipo --</option>
-                      <option value="255">Equipo 255</option>
-                    </select>
-                    <button className="button buttonSearch" type="submit">
-                      Asignar
-                    </button>
-                  </div>
-                </form>
-                <div className={styles.tableContainer}>
-                  <table className={styles.machineTable}>
-                    <thead>
-                      <tr>
-                        <th>Cuenta</th>
-                        <th>Motivo de la sancion</th>
-                        <th>Duracion (Semanas) </th>
-                        <th>Fecha Sancion</th>
-                        <th>Podra utilizar el servicio hasta</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {usuario_sanciones.map((sancion, index) => (
-                        <tr key={index}>
-                          <td>{sancion.no_cuenta}</td>
-                          <td>{sancion.motivo}</td>
-                          <td>{sancion.fecha_sancion}</td>
-                          <td>{sancion.duracion}</td>
-                          <td>{sancion.utilizar_hasta}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-                <form className="containerForm">
-                  <div className="groupInput">
-                    <select
-                      value={ubicacion_equipo}
-                      onChange={(e) => setUbicacionEquipo(e.target.value)}
-                    >
-                      <option value="">-- Selecciona una sancion --</option>
-                      <option value="sancion 1">
-                        No cerrar sesion (Una semana)
-                      </option>
-                    </select>
-                    <button className="button buttonSearch" type="submit">
-                      Aplicar sancion
-                    </button>
-                  </div>
-                </form>
+                <Sanciones />
               </>
             ),
           },

app/Components/BitacoraSanciones/BitacoraAlumno.tsx

@@ -0,0 +1,41 @@
+"use client";
+import { useState } from "react";
+import styles from "./Page.module.css";
+import SearchDate from "../SearchDate/SearchDate";
+
+interface alumnos {
+  tiempo_entrada: string;
+  tiempo_asignado: string;
+  Ubicacion_equipo: number;
+}
+
+function BitacoraAlumno() {
+  const [alumnos, setAlumnos] = useState<alumnos[]>([]);
+  return (
+    <>
+      <SearchDate />
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>Tiempo Entrada</th>
+              <th>Tiempo Asignado</th>
+              <th>Ubicacion del equipo</th>
+            </tr>
+          </thead>
+          <tbody>
+            {alumnos.map((alumno, index) => (
+              <tr key={index}>
+                <td>{alumno.tiempo_entrada}</td>
+                <td>{alumno.tiempo_asignado}</td>
+                <td>{alumno.Ubicacion_equipo}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}
+
+export default BitacoraAlumno;

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -0,0 +1,61 @@
+"use client";
+import { useState } from "react";
+import styles from "./Page.module.css";
+import SearchDate from "../SearchDate/SearchDate";
+
+interface equipos {
+  hora_entrada: string;
+  min_utilizados: number;
+  hora_salida: string;
+  cuenta_asociada: number;
+}
+
+function BitacoraEquipo() {
+  const [equipo, setEquipo] = useState<equipos[]>([]);
+  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
+  return (
+    <>
+      <SearchDate />
+      <form className="containerForm">
+        <label className="label">Ubicacion de equipo</label>
+
+        <div className="groupInput">
+          <select
+            value={ubicacion_equipo}
+            onChange={(e) => setUbicacionEquipo(e.target.value)}
+          >
+            <option value="">-- Selecciona un equipo --</option>
+            <option value="255">Equipo 255</option>
+          </select>
+          <button className="button buttonSearch" type="submit">
+            Asignar
+          </button>
+        </div>
+      </form>
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>Hora Entrada</th>
+              <th>Minutos utilizados</th>
+              <th>Hora salida</th>
+              <th>Cuenta asociada</th>
+            </tr>
+          </thead>
+          <tbody>
+            {equipo.map((equipo, index) => (
+              <tr key={index}>
+                <td>{equipo.hora_entrada}</td>
+                <td>{equipo.min_utilizados}</td>
+                <td>{equipo.hora_salida}</td>
+                <td>{equipo.cuenta_asociada}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}
+
+export default BitacoraEquipo;

app/Components/BitacoraSanciones/BitacoraMesas.tsx

@@ -0,0 +1,49 @@
+"use client";
+import { useState } from "react";
+import styles from "./Page.module.css";
+
+import SearchDate from "../SearchDate/SearchDate";
+
+interface tables {
+  no_mesa: number;
+  no_cuenta: number;
+  hora_entrada: string;
+  tiempo_asignado: number;
+  hora_salida: string;
+}
+
+function BitacoraMesas() {
+  const [tables, setTables] = useState<tables[]>([]);
+  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
+  return (
+    <>
+      <SearchDate />
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>Mesa</th>
+              <th>Cuenta</th>
+              <th>Hora Entrada</th>
+              <th>Tiempo Asignado</th>
+              <th>Hora Salida</th>
+            </tr>
+          </thead>
+          <tbody>
+            {tables.map((table, index) => (
+              <tr key={index}>
+                <td>{table.no_mesa}</td>
+                <td>{table.no_cuenta}</td>
+                <td>{table.hora_entrada}</td>
+                <td>{table.tiempo_asignado}</td>
+                <td>{table.hora_salida}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}
+
+export default BitacoraMesas;

app/Components/BitacoraSanciones/Page.module.css

@@ -0,0 +1,69 @@
+.tableContainer {
+  overflow-y: auto;
+  overflow-x: auto;
+  border-radius: 4px;
+  border: 1px solid #cfcfcf;
+  max-height: 430px;
+  scrollbar-color: rgb(1, 92, 184) rgba(0, 0, 0, 0);
+  background-color: #f9f9f9;
+  width: 100%;
+}
+
+.machineTable {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+.machineTable th,
+.machineTable td {
+  padding: 10px;
+  text-align: center;
+  border-bottom: 1px solid #cfcfcf;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.machineTable th {
+  position: sticky;
+  top: 0px;
+  background-color: rgb(1, 92, 184);
+  color: white;
+}
+
+.machineTable tr {
+  min-width: 400px;
+}
+
+.disponible {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background-color: green;
+  color: green;
+  font-weight: bold;
+}
+
+.ocupado {
+  color: red;
+  font-weight: bold;
+}
+
+.actions {
+  text-align: center;
+}
+
+.resetButton {
+  padding: 8px 16px;
+  background-color: #ff4d4d;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+.resetButton:hover {
+  background-color: #cc0000;
+}

app/Components/BitacoraSanciones/Sanciones.tsx

@@ -0,0 +1,97 @@
+"use client";
+import { useEffect, useState } from "react";
+import styles from "./Page.module.css";
+import SearchUser from "../SearchUser/searchUser";
+import Information from "../Information/information";
+import { GetStudent } from "@/app/lib/getStudent";
+import { envConfig } from "@/app/lib/config";
+
+interface sancion {
+  no_cuenta: number;
+  nombre: string;
+  motivo: string;
+  duracion: number;
+  fecha_sancion: string;
+  utilizar_hasta: number;
+}
+
+export default function Sanciones() {
+  const [sanciones, setSanciones] = useState<sancion[]>([]);
+  const [ubicacion_equipo, setUbicacionEquipo] = useState("");
+  const [no_cuenta, setNo_cuenta] = useState("");
+
+  useEffect(() => {
+    fetch(`${envConfig.apiUrl}/student/${no_cuenta}`).then(
+      (
+        response // Revisar
+      ) => response.json().then((data) => setNo_cuenta(data[0].sancion))
+    );
+  }, [no_cuenta]);
+
+  return (
+    <>
+      <SearchUser urlBase="BitacoraSanciones" value="3" />
+
+      {/*  <Information NoCuenta={sancion.id_cuenta} Nombre={student.nombre} /> */}
+
+      <form className="containerForm">
+        <label className="label">Ubicacion de equipo</label>
+
+        <div
+          className="groupInput"
+          style={{ display: "flex", gap: "1rem", flexDirection: "row" }}
+        >
+          <select
+            value={ubicacion_equipo}
+            onChange={(e) => setUbicacionEquipo(e.target.value)}
+          >
+            <option value="">-- Selecciona un equipo --</option>
+            <option value="255">Equipo 255</option>
+          </select>
+          <button className="button buttonSearch" type="submit">
+            Asignar
+          </button>
+        </div>
+      </form>
+
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>Cuenta</th>
+              <th>Motivo de la sancion</th>
+              <th>Duracion (Semanas) </th>
+              <th>Fecha Sancion</th>
+              <th>Podra utilizar el servicio hasta</th>
+            </tr>
+          </thead>
+          <tbody>
+            {sanciones.map((sancion, index) => (
+              <tr key={index}>
+                <td>{sancion.no_cuenta}</td>
+                <td>{sancion.motivo}</td>
+                <td>{sancion.fecha_sancion}</td>
+                <td>{sancion.duracion}</td>
+                <td>{sancion.utilizar_hasta}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <form className="containerForm">
+        <div className="groupInput">
+          <select
+            value={ubicacion_equipo}
+            onChange={(e) => setUbicacionEquipo(e.target.value)}
+          >
+            <option value="">-- Selecciona una sancion --</option>
+            <option value="sancion 1">No cerrar sesion (Una semana)</option>
+          </select>
+          <button className="button buttonSearch" type="submit">
+            Aplicar sancion
+          </button>
+        </div>
+      </form>
+    </>
+  );
+}

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -2,7 +2,7 @@
 import { useState } from "react";
 import styles from "./Page.module.css";
 
-interface sancion {
+interface quitarSanciones {
   id: number;
   nombre: string;
   motivo: string;
@@ -12,7 +12,7 @@ interface sancion {
 }
 
 function QuitarSancion() {
-  const [sanciones, setSanciones] = useState<sancion[]>([]);
+  const [quitarSanciones, SetQuitarSanciones] = useState<quitarSanciones[]>([]);
   return (
     <section className="containerSection">
       <div className={styles.tableContainer}>
@@ -28,14 +28,14 @@ function QuitarSancion() {
             </tr>
           </thead>
           <tbody>
-            {sanciones.map((sancion, index) => (
+            {quitarSanciones.map((quitarSanciones, index) => (
               <tr key={index}>
-                <td>{sancion.id}</td>
-                <td>{sancion.nombre}</td>
-                <td>{sancion.motivo}</td>
-                <td>{sancion.duracion}</td>
-                <td>{sancion.fecha_sancion}</td>
-                <td>{sancion.utilizar_equipo}</td>
+                <td>{quitarSanciones.id}</td>
+                <td>{quitarSanciones.nombre}</td>
+                <td>{quitarSanciones.motivo}</td>
+                <td>{quitarSanciones.duracion}</td>
+                <td>{quitarSanciones.fecha_sancion}</td>
+                <td>{quitarSanciones.utilizar_equipo}</td>
               </tr>
             ))}
           </tbody>

app/lib/getSanciones.ts

@@ -0,0 +1,17 @@
+import axios from "axios";
+import { envConfig } from "./config";
+
+export async function GetSanciones(numAcount: number) {
+  try {
+    const response = await axios.get(
+      `${envConfig.apiUrl}/alumno-sancion/${numAcount}`
+    );
+    return response.data;
+  } catch (error: any) {
+    const msg =
+      error.response?.data?.message ||
+      error.message ||
+      "Error desconocido al obtener estudiante";
+    return { error: msg };
+  }
+}

middleware.ts

@@ -13,23 +13,6 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: [    
-    "/Reportes",
-    "/Monitor",
-    "/QuitarSancion",
-    "/Programas",
-    "/Mensajes",
-    "/Inscritos",
-    "/Inscripciones",
-    "/InformacionEquipo",
-    "/Impresiones",
-    "/CambiarPass",
-    "/BitacoraSanciones",
-    "/AsignacionMesas",
-    "/AsignacionEquipo",
-    "/Alta",
-    "/AgregarTiempo",
-    "/ActivosMantenimiento",
-  ],
+  matcher: [],
 };
 //IO