fixed checkboxMesa to separate bitacora

app/(private)/AsignacionEquipo/PlaticaGate.tsx

@@ -25,7 +25,7 @@ export default function PlaticaGate({ inscripcion, numAcount }: Props) {
   const [open, setOpen] = useState(false);
   const [tiempo, setTiempo] = useState<number>(15);
   const [bitacora, setBitacora] = useState<[] | null>([]);
-  const [error, setError] = useState<string>();
+  const [error, setError] = useState<string>("Equipo");
 
   const token = Cookies.get("token");
   const headers = { Authorization: `Bearer ${token}` };
@@ -40,8 +40,15 @@ export default function PlaticaGate({ inscripcion, numAcount }: Props) {
       setBitacora(null);
     } else {
       setBitacora([]);
-      if (!result?.error) setError("Equipo");
-      if (!resultMesa?.error) setError("Mesa");
+      if (!result?.error) {
+        setError("Equipo");
+        return;
+      }
+
+      if (!resultMesa?.error) {
+        setError("Mesa");
+        return;
+      }
     }
   };
 

app/(private)/AsignacionMesas/asignacion.css

@@ -0,0 +1,10 @@
+.tableTable{
+    margin: 0.1rem;
+    width: 100%;
+    max-width: 250px;
+}
+.asignacion{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}

app/(private)/AsignacionMesas/page.tsx

@@ -9,6 +9,8 @@ import { GetRegisterStudent } from "@/app/lib/getRegisterStudent";
 import { GetRegisterStudentSancion } from "@/app/lib/GetRegisterStudentSancion";
 import TableTable from "../Monitor/TableTable";
 
+import './asignacion.css'
+
 export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;
@@ -56,7 +58,7 @@ export default async function Page(props: {
 
       <h2 className="title"> ASIGNACIÓN DE MESAS </h2>
 
-      <div style={{ display: 'flex' }}>
+      <div className="asignacion">
         <Toggle
           defaultView={key}
           options={[
@@ -92,7 +94,7 @@ export default async function Page(props: {
             },
           ]}
         />
-        <div style={{ margin: "0 1rem", width: "100%" }}>
+        <div className="tableTable">
           <TableTable />
         </div>
       </div>

app/Components/BitacoraSanciones/ApplySanction.tsx

@@ -25,15 +25,15 @@ export default function ApplySanction({ idCuenta }: { idCuenta: number }) {
   const headers = { Authorization: `Bearer ${token}` };
 
   const fetchAlumnoSanciones = async () => {
-    try {
 
-      const res = await GetSancionByStudent(idCuenta);
+    const res = await GetSancionByStudent(idCuenta);
 
-      setAlumno(res.student ?? null);
-      setAlumnoSanciones(res.alusancion ?? []);
-    } catch {
-    } finally {
-      setLoadingTable(true)
+    setAlumno(res.student ?? null);
+    setAlumnoSanciones(res.alusancion ?? []);
+    setLoadingTable(true)
+
+    if (res.error) {
+      setLoadingTable(false)
     }
   };
 

app/Components/BitacoraSanciones/BitacoraMesas.tsx

@@ -1,10 +1,12 @@
 "use client";
-import SearchDate from "../SearchDate/SearchDate";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
-import axios from "axios";
 import { envConfig } from "@/app/lib/config";
 
+import SearchDate from "../SearchDate/SearchDate";
+import axios from "axios";
+import Cookies from "js-cookie";
+
 interface Tables {
   no_mesa: number;
   no_cuenta: number;

app/Components/CheckBoxMesa.tsx

@@ -20,13 +20,16 @@ interface props {
 
 export default function CheckBoxMesa({ numAcount, table }: props) {
   const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>("Cuenta");
-  const [bitacora, setBitacora] = useState<any>(null);
+  const [bitacoraMesa, setBitacoraMesa] = useState<any>(null);
+  const [bitacoraCuenta, setBitacoraCuenta] = useState<any>(null);
   const [tiempoRestante, setTiempoRestante] = useState<string>("");
   const [minutos, setMinutos] = useState<number>();
   const [errorMesa, setErrorMesa] = useState()
   const [errorCount, setErrorCount] = useState()
   const [loading, setLoading] = useState<boolean>(false)
 
+  const bitacora = modo === "Cuenta" ? bitacoraCuenta : bitacoraMesa;
+
   const router = useRouter();
 
   const fetchByCuenta = async (idCuenta: number) => {
@@ -34,9 +37,9 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
 
     if (result?.error) {
       setErrorCount(result.error);
-      setBitacora(null);
+      setBitacoraCuenta(null);
     } else {
-      setBitacora(result);
+      setBitacoraCuenta(result);
     }
   };
 
@@ -45,9 +48,9 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
 
     if (result?.error) {
       setErrorMesa(result.error);
-      setBitacora(null);
+      setBitacoraMesa(null);
     } else {
-      setBitacora(result);
+      setBitacoraMesa(result);
     }
   };
 
@@ -73,19 +76,32 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
     const entrada = new Date(bitacora.tiempo_entrada).getTime();
     const asignadoMs = bitacora.tiempo_asignado * 60 * 1000;
 
-    const interval = setInterval(() => {
+    const updateTimer = () => {
       const ahora = Date.now();
       const restante = entrada + asignadoMs - ahora;
 
       if (restante <= 0) {
         setTiempoRestante("agotado");
-        clearInterval(interval);
-      } else {
-        const minutos = Math.floor(restante / 60000);
-        setMinutos(minutos + 1);
-        const segundos = Math.floor((restante % 60000) / 1000);
-        setTiempoRestante(`${minutos} minutos con ${segundos} segundos`);
+        setMinutos(0);
+        return false;
       }
+
+      const minutosRestantes = Math.floor(restante / 60000);
+      const segundos = Math.floor((restante % 60000) / 1000);
+
+      setMinutos(minutosRestantes);
+      setTiempoRestante(
+        `${minutosRestantes} minuto(s) con ${segundos} segundo(s)`
+      );
+
+      return true;
+    };
+
+    updateTimer();
+
+    const interval = setInterval(() => {
+      const sigue = updateTimer();
+      if (!sigue) clearInterval(interval);
     }, 1000);
 
     return () => clearInterval(interval);
@@ -93,35 +109,43 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
 
   const handleButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-    setLoading(false)
+    setLoading(true);
 
     const token = Cookies.get("token");
     const headers = { Authorization: `Bearer ${token}` };
 
-    await axios.patch(
-      `${envConfig.apiUrl}/bitacora-mesa/cancelar/${bitacora.id_bitacora_mesa}`,
-      { tiempo_asignado: minutos },
-      { headers },
-    );
+    try {
+      if (!bitacora) return;
 
-    Swal.fire({
-      title: "Tiempo cancelado correctamente!",
-      icon: "success",
-      draggable: true,
-    });
+      await axios.patch(
+        `${envConfig.apiUrl}/bitacora-mesa/cancelar/${bitacora.id_bitacora_mesa}`,
+        { tiempo_asignado: minutos ?? 0 },
+        { headers }
+      );
 
-    if (modo === "Cuenta" && numAcount) {
-      fetchByCuenta(parseInt(numAcount));
+      Swal.fire({
+        title: "Tiempo cancelado correctamente!",
+        icon: "success",
+      });
+
+      if (modo === "Cuenta" && numAcount) {
+        fetchByCuenta(parseInt(numAcount));
+      }
+
+      if (modo === "Mesa" && table) {
+        fetchByMesa(table);
+      }
+
+      router.refresh();
+    } catch (error) {
+      Swal.fire({
+        title: "Error al cancelar tiempo",
+        icon: "error",
+      });
+    } finally {
+      setLoading(false);
     }
-
-    if (modo === "Mesa" && table) {
-      fetchByMesa(table);
-    }
-    
-    router.refresh();
-    setLoading(true)
   };
-
   return (
     <>
       <div className="radio-grid">
@@ -152,34 +176,54 @@ export default function CheckBoxMesa({ numAcount, table }: props) {
         <>
           <SearchUser value={numAcount ?? null} />
           <h2 style={{ marginTop: "10px" }}>{errorCount}</h2>
+
+          {bitacoraCuenta && tiempoRestante !== "agotado" && (
+            <>
+              <Information
+                NoCuenta={bitacoraCuenta.alumno_inscrito.alumno.id_cuenta}
+                Nombre={bitacoraCuenta.alumno_inscrito.alumno.nombre}
+                Tiempo={tiempoRestante}
+                Mesa={bitacoraCuenta.mesa.id_mesa}
+              />
+
+              <button
+                className="button buttonSearch"
+                style={{ marginTop: "1rem" }}
+                onClick={handleButton}
+                disabled={loading || !minutos}
+              >
+                Cancelar tiempo
+              </button>
+            </>
+          )}
         </>
       }
       {modo === "Mesa" &&
         <>
           <SearchMesa />
           <h2 style={{ marginTop: "10px" }}>{errorMesa}</h2>
+
+          {bitacoraMesa && tiempoRestante !== "agotado" && (
+            <>
+              <Information
+                NoCuenta={bitacoraMesa.alumno_inscrito.alumno.id_cuenta}
+                Nombre={bitacoraMesa.alumno_inscrito.alumno.nombre}
+                Tiempo={tiempoRestante}
+                Mesa={bitacoraMesa.mesa.id_mesa}
+              />
+
+              <button
+                className="button buttonSearch"
+                style={{ marginTop: "1rem" }}
+                onClick={handleButton}
+                disabled={loading || !minutos}
+              >
+                Cancelar tiempo
+              </button>
+            </>
+          )}
         </>
       }
-
-      {bitacora && tiempoRestante !== "agotado" && (
-        <>
-          <Information
-            NoCuenta={bitacora.alumno_inscrito.alumno.id_cuenta}
-            Nombre={bitacora.alumno_inscrito.alumno.nombre}
-            Tiempo={tiempoRestante}
-            Mesa={bitacora.mesa.id_mesa}
-          />
-
-          <button
-            className="button buttonSearch"
-            style={{ marginTop: "1rem" }}
-            onClick={handleButton}
-            disabled={loading || !minutos}
-          >
-            Cancelar tiempo
-          </button>
-        </>
-      )}
     </>
   );
 }

app/Components/auth/Logout/Logout.css

@@ -26,7 +26,7 @@
   z-index: 1;
 }
 
-@media(max-height: 550px) {
+@media(max-height: 800px) {
   .session {
     top: 5px;
     right: 5px;