Table assignment completed

app/(private)/AsignacionMesas/page.tsx

@@ -7,7 +7,6 @@ import Toggle from "@/app/Components/Global/Toggle/Toggle";
 
 import { envConfig } from "@/app/lib/config";
 import { GetRegisterStudent } from "@/app/lib/getRegisterStudent";
-import axios from "axios";
 
 async function getInscripcion(idCuenta: number) {
   try {
@@ -26,11 +25,14 @@ export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;
     numAcount?: string;
+    table?:number
   }>;
 }) {
   const params = await props.searchParams;
   const key = params?.key;
   const numAcount = params?.numAcount ?? null;
+  const table = params?.table ?? null;
+
 
   let student: any = null;
   let platica: any = null;
@@ -98,7 +100,7 @@ export default async function Page(props: {
           {
             key: "Liberar",
             label: "Cancelar mesa",
-            content: <CheckBoxMesa numAcount={numAcount} student={student} />,
+            content: <CheckBoxMesa numAcount={numAcount} table={table} />,
           },
         ]}
       />

app/Components/CheckBoxMesa.tsx

@@ -1,24 +1,123 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import SearchUser from "./Global/SearchUser/searchUser";
-import SearchEquipo from "./SearchEquipo";
 import Information from "./Global/Information/information";
 import SearchMesa from "./SearchMesa";
+import { getTableByCount } from "../lib/getTableByCount";
+import toast from "react-hot-toast";
+import axios from "axios";
+import { envConfig } from "../lib/config";
 
 interface props {
   numAcount: string | null;
-  student: {
-    id_cuenta: number;
-    nombre: string;
-    carrera:{
-      carrera:string;
-    }
-  };
+  table: number | null;
 }
 
-export default function CheckBoxMesa({ numAcount, student }: props) {
-  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>(null);
+async function getEquipoId(idEquipo: number) {
+  try {
+    const res = await axios.get(
+      `${envConfig.apiUrl}/bitacora-mesa/table/${idEquipo}`,
+    );
+    return res.data;
+  } catch (error: any) {
+    if (axios.isAxiosError(error)) {
+      return {
+        error: error.response?.data?.message || "Error al consultar equipo",
+      };
+    }
+
+    return { error: "Error desconocido" };
+  }
+}
+
+export default function CheckBoxMesa({ numAcount, table }: props) {
+  const [modo, setModo] = useState<"Mesa" | "Cuenta" | null>("Cuenta");
+  const [bitacora, setBitacora] = useState<any>(null);
+  const [tiempoRestante, setTiempoRestante] = useState<string>("");
+  const [minutos, setMinutos] = useState<number>();
+
+  const fetchByCuenta = async (idCuenta: number) => {
+    const result = await getTableByCount(idCuenta);
+
+    if (result?.error) {
+      toast.error(result.error);
+      setBitacora(null);
+    } else {
+      setBitacora(result);
+    }
+  };
+
+  const fetchByEquipo = async (idEquipo: number) => {
+    const result = await getEquipoId(idEquipo);
+
+    if (result?.error) {
+      toast.error(result.error);
+      setBitacora(null);
+    } else {
+      setBitacora(result);
+    }
+  };
+
+  useEffect(() => {
+    if (!numAcount) return;
+    const idCuenta = parseInt(numAcount);
+    if (isNaN(idCuenta)) return;
+
+    fetchByCuenta(idCuenta);
+  }, [numAcount]);
+
+  useEffect(() => {
+    if (!table) return;
+    const idEquipo = table;
+    if (isNaN(idEquipo)) return;
+
+    fetchByEquipo(idEquipo);
+  }, [table]);
+
+  useEffect(() => {
+    if (!bitacora) return;
+
+    const entrada = new Date(bitacora.tiempo_entrada).getTime();
+    const asignadoMs = bitacora.tiempo_asignado * 60 * 1000;
+
+    const interval = setInterval(() => {
+      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`);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [bitacora]);
+  
+
+  const handleButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    await axios.patch(
+      `${envConfig.apiUrl}/bitacora-mesa/cancelar/${bitacora.id_bitacora_mesa}`,
+      { tiempo_asignado: minutos },
+    );
+
+    toast.success("Tiempo cancelado");
+
+    if (modo === "Cuenta" && numAcount) {
+      fetchByCuenta(parseInt(numAcount));
+    }
+
+    if (modo === "Mesa" && table) {
+      fetchByEquipo(table);
+    }
+  };
 
   return (
     <>
@@ -48,10 +147,23 @@ export default function CheckBoxMesa({ numAcount, student }: props) {
 
       {modo === "Cuenta" && <SearchUser value={numAcount ?? null} />}
       {modo === "Mesa" && <SearchMesa />}
-      {modo === "Mesa" && <SearchEquipo value={ null}/>}
 
-      {student && (
-        <Information NoCuenta={student.id_cuenta} nombre={student.nombre} carrera={student.carrera?.carrera}/>
+      {bitacora && (
+        <>
+          <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}
+          >
+            Cancelar tiempo
+          </button>
+        </>
       )}
     </>
   );

app/Components/SearchMesa.tsx

@@ -1,6 +1,7 @@
 "use client";
-import axios from 'axios';
-import { useEffect, useState } from 'react';
+import axios from "axios";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
 
 interface Mesa {
   id_mesa: number;
@@ -20,11 +21,12 @@ function Mesas({ id_cuenta }: Props) {
 
     setLoading(true);
 
-    axios.get(`/cuenta/${id_cuenta}`)
-      .then(res => {
+    axios
+      .get(`/cuenta/${id_cuenta}`)
+      .then((res) => {
         setMesas(res.data);
       })
-      .catch(err => console.error(err))
+      .catch((err) => console.error(err))
       .finally(() => setLoading(false));
   }, [id_cuenta]);
 
@@ -38,7 +40,7 @@ function Mesas({ id_cuenta }: Props) {
         <p>No hay mesas</p>
       ) : (
         <ul>
-          {mesas.map(mesa => (
+          {mesas.map((mesa) => (
             <li key={mesa.id_mesa}>
               Mesa {mesa.id_mesa} {mesa.nombre && `- ${mesa.nombre}`}
             </li>
@@ -50,12 +52,19 @@ function Mesas({ id_cuenta }: Props) {
 }
 
 export default function SearchMesa() {
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState("");
   const [idCuenta, setIdCuenta] = useState<number | null>(null);
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
 
   const buscar = (e: React.FormEvent) => {
     e.preventDefault();
-    setIdCuenta(Number(inputValue));
+    const params = new URLSearchParams(searchParams.toString());
+    if (inputValue) {
+      params.set("table", `${inputValue}`);
+      router.push(`${pathname}?${params.toString()}`);
+    }
   };
 
   return (
@@ -76,8 +85,6 @@ export default function SearchMesa() {
           </button>
         </div>
       </form>
-
-      {idCuenta && <Mesas id_cuenta={idCuenta} />}
     </>
   );
 }

app/lib/getTableByCount.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { envConfig } from "./config";
+
+export async function getTableByCount(idCuenta: number) {
+  try {
+    const res = await axios.get(
+      `${envConfig.apiUrl}/bitacora-mesa/cuenta/${idCuenta}`,
+    );
+    return res.data;
+  } catch (error: any) {
+    if (axios.isAxiosError(error)) {
+      return {
+        error: error.response?.data?.message || "Error al consultar equipo",
+      };
+    }
+
+    return { error: "Error desconocido" };
+  }
+}