now ist working bitacora alumno and bitacora equipo

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;
-  Ubicacion_equipo: number;
+  tiempo_asignado: number;
+  equipo: {
+    ubicacion: string;
+    nombre_equipo: string;
+  };
 }
 
-function BitacoraAlumno() {
-  const [alumnos, setAlumnos] = useState<alumnos[]>([]);
+interface BitacoraAlumnoProps {
+  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>
-        <thead>
-          <tr>
-            <th>Tiempo Entrada</th>
-            <th>Tiempo Asignado</th>
-            <th>Ubicacion del equipo</th>
-          </tr>
-        </thead>
-        <tbody>
-          {alumnos.map((alumno, index) => (
+    <table>
+      <thead>
+        <tr>
+          <th>Tiempo Entrada</th>
+          <th>Tiempo Asignado</th>
+          <th>Ubicación del equipo</th>
+        </tr>
+      </thead>
+      <tbody>
+        {alumnos.length > 0 ? (
+          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) => (
-              <tr key={index}>
-                <td>{equipo.hora_entrada}</td>
-                <td>{equipo.min_utilizados}</td>
-                <td>{equipo.hora_salida}</td>
-                <td>{equipo.cuenta_asociada}</td>
+            {equipo.length > 0 ? (
+              equipo.map((registro, index) => (
+                <tr key={index}>
+                  <td>{new Date(registro.hora_entrada).toLocaleString()}</td>
+                  <td>{registro.min_utilizados}</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>
     </>