get equipos by student and ubicacion

app/(private)/AsignacionEquipo/page.tsx

@@ -124,7 +124,7 @@ export default async function Page(props: {
             label: "Cancelar tiempo",
             content: (
               <>
-                <CheckBoxEquipo numAcount={params?.numAcount} />
+                <CheckBoxEquipo numAcount={params?.numAcount} machine={params?.machine} />
               </>
             ),
           },

app/Components/CheckBoxEquipo.tsx

@@ -1,15 +1,118 @@
 "use client";
-
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import SearchUser from "./Global/SearchUser/searchUser";
-import SearchBoxEquipo from "./SearchEquipo";
+import SearchEquipo from "./SearchEquipo";
+import { envConfig } from "../lib/config";
+import axios from "axios";
+import Information from "./Global/Information/information";
+import toast from "react-hot-toast";
 
-export default function CheckBoxEquipo({
-  numAcount,
-}: {
+async function getEquipoByCount(idCuenta: number) {
+  try {
+    const res = await axios.get(
+      `${envConfig.apiUrl}/bitacora/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" };
+  }
+}
+
+async function getEquipoId(idEquipo: number) {
+  try {
+    const res = await axios.get(
+      `${envConfig.apiUrl}/bitacora/equipo/${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" };
+  }
+}
+
+interface Props {
   numAcount?: string | null;
-}) {
-  const [modo, setModo] = useState<"Equipo" | "Cuenta" | null>(null);
+  machine?: string | null;
+}
+
+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>("");
+
+  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();
+  }, [numAcount]);
+
+  useEffect(() => {
+    if (!machine) 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();
+  }, [machine]);
+
+  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);
+        const segundos = Math.floor((restante % 60000) / 1000);
+        setTiempoRestante(`${minutos} minutos con ${segundos} segundos`);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [bitacora]);
 
   return (
     <>
@@ -38,7 +141,16 @@ export default function CheckBoxEquipo({
       </div>
 
       {modo === "Cuenta" && <SearchUser value={numAcount ?? null} />}
-      {modo === "Equipo" && <SearchBoxEquipo />}
+      {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}
+        />
+      )}
     </>
   );
 }

app/Components/SearchEquipo.tsx

@@ -1,12 +1,57 @@
 "use client";
-export default function SearchEquipo() {
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+interface urlProp {
+  value: string | null;
+}
+
+export default function SearchEquipo(props: urlProp) {
+  const [value, setValue] = useState("");
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (props.value) {
+      setValue(props.value);
+    }
+  }, [props.value]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const params = new URLSearchParams(searchParams.toString());
+    if (value) {
+      params.set("machine", `${value}`);
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
   return (
-    <form className="containerForm">
-      <label>Numero de equipo</label>
-      <div className="groupInput">
-        <input type="text" placeholder="Coloca el numero de equipo"/>
-        <button className="button buttonSearch">Buscar</button>
-      </div>
-    </form>
+    <>
+      <form className="containerForm" onSubmit={handleSubmit}>
+        <label className="label">Ubicacion del equipo</label>
+        <div className="groupInput">
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (/^\d*$/.test(value) && value.length <= 9) {
+                setValue(value);
+              }
+            }}
+            placeholder="Coloca un número de cuenta..."
+            inputMode="numeric"
+            pattern="[0-9]*"
+          />
+          <button className="button buttonSearch" type="submit">
+            Buscar
+          </button>
+        </div>
+      </form>
+    </>
   );
 }
+//IO