now ist working bitacora alumno and bitacora equipo

app/(private)/BitacoraSanciones/page.tsx

@@ -13,11 +13,14 @@ export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;
     numAcount?: string;
+    date?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const key = params?.key && params.key;
   const numAcount = params?.numAcount ? params.numAcount : null;
+  const date = params?.date ? params.date : null;
+
 
   let student: any = null;
   let errorMessage = "";
@@ -46,7 +49,7 @@ export default async function Page(props: {
             label: "Bitácora equipo",
             content: (
               <>
-                <BitacoraEquipo />
+                <BitacoraEquipo date={date}/>
               </>
             ),
           },
@@ -56,7 +59,12 @@ export default async function Page(props: {
             content: (
               <>
                 <SearchUserWithDate value={numAcount} />
-                <BitacoraAlumno />
+                <BitacoraAlumno
+                  key={`${numAcount}-${date}`}
+                  numAcount={numAcount}
+                  date={date}
+                />
+
               </>
             ),
           },

app/Components/BitacoraSanciones/BitacoraAlumno.tsx

@@ -1,35 +1,69 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { envConfig } from "@/app/lib/config";
 
-interface alumnos {
+interface AlumnoBitacora {
   tiempo_entrada: string;
-  tiempo_asignado: string;
+  tiempo_asignado: number;
-  Ubicacion_equipo: number;
+  equipo: {
+    ubicacion: string;
+    nombre_equipo: string;
+  };
 }
 
-function BitacoraAlumno() {
+interface BitacoraAlumnoProps {
-  const [alumnos, setAlumnos] = useState<alumnos[]>([]);
+  numAcount: string | null;
+  date: string | null;
+}
+
+function BitacoraAlumno({ numAcount, date }: BitacoraAlumnoProps) {
+  const [alumnos, setAlumnos] = useState<AlumnoBitacora[]>([]);
+
+  useEffect(() => {
+    if (!numAcount) return;
+    if (!date) return;
+
+    axios.post(`${envConfig.apiUrl}/bitacora/equipos-por-dia`, {
+      numero_cuenta: numAcount,
+      fecha: date,
+    })
+      .then(res => {
+        setAlumnos(res.data);
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }, [numAcount, date]);
+
   return (
-    <>
+    <table>
-      <table>
+      <thead>
-        <thead>
+        <tr>
-          <tr>
+          <th>Tiempo Entrada</th>
-            <th>Tiempo Entrada</th>
+          <th>Tiempo Asignado</th>
-            <th>Tiempo Asignado</th>
+          <th>Ubicación del equipo</th>
-            <th>Ubicacion del equipo</th>
+        </tr>
-          </tr>
+      </thead>
-        </thead>
+      <tbody>
-        <tbody>
+        {alumnos.length > 0 ? (
-          {alumnos.map((alumno, index) => (
+          alumnos.map((alumno, index) => (
             <tr key={index}>
-              <td>{alumno.tiempo_entrada}</td>
+              <td>{new Date(alumno.tiempo_entrada).toLocaleString()}</td>
               <td>{alumno.tiempo_asignado}</td>
-              <td>{alumno.Ubicacion_equipo}</td>
+              <td>{alumno.equipo.ubicacion}</td>
             </tr>
-          ))}
+          ))
-        </tbody>
+        ) : (
-      </table>
+          <tr>
-    </>
+            <td colSpan={3} style={{ textAlign: "center" }}>
+              No tuvo equipos asignados
+            </td>
+          </tr>
+        )}
+      </tbody>
+
+    </table>
   );
 }
 

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -13,7 +13,7 @@ interface equipos {
   cuenta_asociada: number;
 }
 
-function BitacoraEquipo() {
+function BitacoraEquipo({ date }: { date: string | null }) {
   const [equipo, setEquipo] = useState<equipos[]>([]);
   const [open, setOpen] = useState(false);
   const [loadingEquipos, setLoadingEquipos] = useState(false);
@@ -31,6 +31,23 @@ function BitacoraEquipo() {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    if (!equipoSeleccionado?.id_equipo) return;
+    if (!date) return;
+
+    axios.post(`${envConfig.apiUrl}/bitacora/equipos-por-equipo`, {
+      id_equipo: equipoSeleccionado.id_equipo,
+      fecha: date,
+    })
+      .then(res => {
+        setEquipo(res.data);
+      })
+      .catch(err => {
+        console.error(err);
+      });
+  }, [equipoSeleccionado, date]);
+
+
   return (
     <>
       <label>Seleccione un equipo</label>
@@ -61,7 +78,7 @@ function BitacoraEquipo() {
           </div>
 
           {open && (
-            <div className="options" style={{ bottom: "auto"}}>
+            <div className="options" style={{ bottom: "auto" }}>
               {equipos.length === 0 && (
                 <div className="option disabled">
                   No hay equipos disponibles
@@ -96,15 +113,28 @@ function BitacoraEquipo() {
             </tr>
           </thead>
           <tbody>
-            {equipo.map((equipo, index) => (
+            {equipo.length > 0 ? (
-              <tr key={index}>
+              equipo.map((registro, index) => (
-                <td>{equipo.hora_entrada}</td>
+                <tr key={index}>
-                <td>{equipo.min_utilizados}</td>
+                  <td>{new Date(registro.hora_entrada).toLocaleString()}</td>
-                <td>{equipo.hora_salida}</td>
+                  <td>{registro.min_utilizados}</td>
-                <td>{equipo.cuenta_asociada}</td>
+                  <td>
+                    {registro.hora_salida
+                      ? new Date(registro.hora_salida).toLocaleString()
+                      : "—"}
+                  </td>
+                  <td>{registro.cuenta_asociada}</td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={4} style={{ textAlign: "center" }}>
+                  Este equipo no tuvo asignaciones en esa fecha
+                </td>
               </tr>
-            ))}
+            )}
           </tbody>
+
         </table>
       </div>
     </>

app/Components/Global/SearchUser/SearchUserWithDate.tsx

@@ -2,57 +2,76 @@
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
-import SearchDate from "../../SearchDate/SearchDate";
 
 interface urlProp {
   value: string | null;
 }
 
 function SearchUserWithDate(props: urlProp) {
-  const [numAcount, setnumAcount] = useState("");
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
+  const todayISO = new Date().toLocaleDateString("en-CA");
+
+  const [numAcount, setNumAcount] = useState("");
+  const [date, setDate] = useState(todayISO);
+
   useEffect(() => {
-    if (props.value) {
+    const num = searchParams.get("numAcount");
-      setnumAcount(props.value);
+    const dateParam = searchParams.get("date");
-    }
+
-  }, [props.value]);
+    if (num) setNumAcount(num);
+    if (dateParam) setDate(dateParam);
+  }, [searchParams]);
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
+
     const params = new URLSearchParams(searchParams.toString());
+
     if (numAcount) {
-      params.set("numAcount", `${numAcount}`);
+      params.set("numAcount", numAcount);
-      router.push(`${pathname}?${params.toString()}`);
     }
+
+    if (date) {
+      params.set("date", date);
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
   };
 
   return (
-    <>
+    <form className="containerForm" onSubmit={handleSubmit}>
-      <form className="containerForm" onSubmit={handleSubmit}>
+      <label className="label">No.Cuenta</label>
-        <label className="label">No.Cuenta</label>
+      <div className="groupInput">
-        <div className="groupInput">
+        <input
-          <input
+          type="text"
-            type="text"
+          value={numAcount}
-            value={numAcount}
+          onChange={(e) => {
-            onChange={(e) => {
+            const value = e.target.value;
-              const value = e.target.value;
+            if (/^\d*$/.test(value) && value.length <= 9) {
-              if (/^\d*$/.test(value) && value.length <= 9) {
+              setNumAcount(value);
-                setnumAcount(value);
+            }
-              }
+          }}
-            }}
+          placeholder="Coloca un número de cuenta..."
-            placeholder="Coloca un número de cuenta..."
+        />
-            inputMode="numeric"
+      </div>
-            pattern="[0-9]*"
+
-          />
+      <label className="label">Fecha</label>
-        </div>
+      <div className="groupInput">
-      </form>
+        <input
-      <SearchDate />
+          type="date"
-    </>
+          value={date}
+          onChange={(e) => setDate(e.target.value)}
+        />
+      </div>
+
+      <button className="button buttonSearch" type="submit">
+        Buscar
+      </button>
+    </form>
   );
 }
 
 export default SearchUserWithDate;
-//IO

app/Components/SearchDate/SearchDate.tsx

@@ -1,27 +1,49 @@
 "use client";
-import { useState } from "react";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useState, useEffect } from "react";
 
 function SearchDate() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
   const todayISO = new Date().toLocaleDateString("en-CA");
   const [date, setDate] = useState(todayISO);
 
+  useEffect(() => {
+    const dateParam = searchParams.get("date");
+    if (dateParam) {
+      setDate(dateParam);
+    }
+  }, [searchParams]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (date) {
+      params.set("date", date);
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
   return (
-    <>
+    <form className="containerForm" onSubmit={handleSubmit}>
-      <form className="containerForm">
+      <label className="label">Fecha</label>
-        <label className="label">Fecha</label>
+      <div className="groupInput">
-        <div className="groupInput">
+        <input
-          <input
+          type="date"
-            type="date"
+          value={date}
-            value={date}
+          onChange={(e) => setDate(e.target.value)}
-            onChange={(e) => setDate(e.target.value)}
+        />
-            placeholder="Selecciona una fecha..."
+        <button className="button buttonSearch" type="submit">
-          />
+          Buscar
-          <button className="button buttonSearch" type="submit">
+        </button>
-            Buscar
+      </div>
-          </button>
+    </form>
-        </div>
-      </form>
-    </>
   );
 }