added handleButton to cancel the machine

app/Components/AsignacionMesas.tsx

@@ -71,7 +71,6 @@ export default function AsignacionMesas({
       </label>
 
       <select>
-        <option>6 minutos</option>
         <option>15 minutos</option>
         <option>30 minutos</option>
         <option>40 minutos</option>

app/Components/CheckBoxEquipo.tsx

@@ -6,6 +6,7 @@ import { envConfig } from "../lib/config";
 import axios from "axios";
 import Information from "./Global/Information/information";
 import toast from "react-hot-toast";
+import { useRouter } from "next/navigation";
 
 async function getEquipoByCount(idCuenta: number) {
   try {
@@ -50,45 +51,46 @@ export default function CheckBoxEquipo({ numAcount, machine }: Props) {
   const [modo, setModo] = useState<"Equipo" | "Cuenta" | null>("Cuenta");
   const [bitacora, setBitacora] = useState<any>(null);
   const [tiempoRestante, setTiempoRestante] = useState<string>("");
+  const [minutos, setMinutos] = useState<number>();
+
+  const router = useRouter();
+
+  const fetchByCuenta = async (idCuenta: number) => {
+    const result = await getEquipoByCount(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;
 
-    const fetchData = async () => {
-      const result = await getEquipoByCount(idCuenta);
-
-      if (result?.error) {
-        toast.error(result.error);
-        setBitacora(null);
-      } else {
-        setBitacora(result);
-      }
-    };
-
-    fetchData();
+    fetchByCuenta(idCuenta);
   }, [numAcount]);
 
   useEffect(() => {
     if (!machine) return;
+    const idEquipo = parseInt(machine);
+    if (isNaN(idEquipo)) return;
 
-    const idCuenta = parseInt(machine);
-    if (isNaN(idCuenta)) return;
-
-    const fetchData = async () => {
-      const result = await getEquipoId(idCuenta);
-
-      if (result?.error) {
-        toast.error(result.error);
-        setBitacora(null);
-      } else {
-        setBitacora(result);
-      }
-    };
-
-    fetchData();
+    fetchByEquipo(idEquipo);
   }, [machine]);
 
   useEffect(() => {
@@ -106,6 +108,7 @@ export default function CheckBoxEquipo({ numAcount, machine }: Props) {
         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`);
       }
@@ -114,6 +117,25 @@ export default function CheckBoxEquipo({ numAcount, machine }: Props) {
     return () => clearInterval(interval);
   }, [bitacora]);
 
+  const handleButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    await axios.patch(
+      `${envConfig.apiUrl}/bitacora/cancelar/${bitacora.id_bitacora}`,
+      { tiempo_asignado: minutos },
+    );
+    
+    toast.success("Tiempo cancelado");
+
+    if (modo === "Cuenta" && numAcount) {
+      fetchByCuenta(parseInt(numAcount));
+    }
+
+    if (modo === "Equipo" && machine) {
+      fetchByEquipo(parseInt(machine));
+    }
+  };
+
   return (
     <>
       <div className="radio-grid">
@@ -141,15 +163,24 @@ export default function CheckBoxEquipo({ numAcount, machine }: Props) {
       </div>
 
       {modo === "Cuenta" && <SearchUser value={numAcount ?? null} />}
-      {modo === "Equipo" && <SearchEquipo value={machine ?? null}/>}
+      {modo === "Equipo" && <SearchEquipo value={machine ?? null} />}
 
       {bitacora && (
-        <Information
-          NoCuenta={bitacora.alumno_inscrito.alumno.id_cuenta}
-          Nombre={bitacora.alumno_inscrito.alumno.nombre}
-          Tiempo={tiempoRestante}
-          Equipo={bitacora.equipo.ubicacion}
-        />
+        <>
+          <Information
+            NoCuenta={bitacora.alumno_inscrito.alumno.id_cuenta}
+            Nombre={bitacora.alumno_inscrito.alumno.nombre}
+            Tiempo={tiempoRestante}
+            Equipo={bitacora.equipo.ubicacion}
+          />
+          <button
+            className="button buttonSearch"
+            style={{ marginTop: "1rem" }}
+            onClick={handleButton}
+          >
+            Cancelar tiempo
+          </button>
+        </>
       )}
     </>
   );

app/Components/Global/Toggle/Toggle.tsx

@@ -26,6 +26,7 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
 
     const params = new URLSearchParams(searchParams.toString());
     params.set("key", key);
+    params.delete("machine");
 
     router.replace(`${pathname}?${params.toString()}`);
   };