diff --git a/app/(private)/BitacoraSanciones/page.tsx b/app/(private)/BitacoraSanciones/page.tsx index 711e6d1..46e0ff6 100644 --- a/app/(private)/BitacoraSanciones/page.tsx +++ b/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: ( <> - + ), }, @@ -56,7 +59,12 @@ export default async function Page(props: { content: ( <> - + + ), }, diff --git a/app/Components/BitacoraSanciones/BitacoraAlumno.tsx b/app/Components/BitacoraSanciones/BitacoraAlumno.tsx index c8b3256..9e9a6a2 100644 --- a/app/Components/BitacoraSanciones/BitacoraAlumno.tsx +++ b/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([]); +interface BitacoraAlumnoProps { + numAcount: string | null; + date: string | null; +} + +function BitacoraAlumno({ numAcount, date }: BitacoraAlumnoProps) { + const [alumnos, setAlumnos] = useState([]); + + 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 ( - <> - - - - - - - - - - {alumnos.map((alumno, index) => ( +
Tiempo EntradaTiempo AsignadoUbicacion del equipo
+ + + + + + + + + {alumnos.length > 0 ? ( + alumnos.map((alumno, index) => ( - + - + - ))} - -
Tiempo EntradaTiempo AsignadoUbicación del equipo
{alumno.tiempo_entrada}{new Date(alumno.tiempo_entrada).toLocaleString()} {alumno.tiempo_asignado}{alumno.Ubicacion_equipo}{alumno.equipo.ubicacion}
- + )) + ) : ( + + + No tuvo equipos asignados + + + )} + + + ); } diff --git a/app/Components/BitacoraSanciones/BitacoraEquipo.tsx b/app/Components/BitacoraSanciones/BitacoraEquipo.tsx index f480837..ab7ef88 100644 --- a/app/Components/BitacoraSanciones/BitacoraEquipo.tsx +++ b/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([]); 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 ( <> @@ -61,7 +78,7 @@ function BitacoraEquipo() { {open && ( -
+
{equipos.length === 0 && (
No hay equipos disponibles @@ -96,15 +113,28 @@ function BitacoraEquipo() { - {equipo.map((equipo, index) => ( - - {equipo.hora_entrada} - {equipo.min_utilizados} - {equipo.hora_salida} - {equipo.cuenta_asociada} + {equipo.length > 0 ? ( + equipo.map((registro, index) => ( + + {new Date(registro.hora_entrada).toLocaleString()} + {registro.min_utilizados} + + {registro.hora_salida + ? new Date(registro.hora_salida).toLocaleString() + : "—"} + + {registro.cuenta_asociada} + + )) + ) : ( + + + Este equipo no tuvo asignaciones en esa fecha + - ))} + )} +
diff --git a/app/Components/Global/SearchUser/SearchUserWithDate.tsx b/app/Components/Global/SearchUser/SearchUserWithDate.tsx index 595101d..d77c03c 100644 --- a/app/Components/Global/SearchUser/SearchUserWithDate.tsx +++ b/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) { - setnumAcount(props.value); - } - }, [props.value]); + const num = searchParams.get("numAcount"); + const dateParam = searchParams.get("date"); + + if (num) setNumAcount(num); + if (dateParam) setDate(dateParam); + }, [searchParams]); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); + const params = new URLSearchParams(searchParams.toString()); + if (numAcount) { - params.set("numAcount", `${numAcount}`); - router.push(`${pathname}?${params.toString()}`); + params.set("numAcount", numAcount); } + + if (date) { + params.set("date", date); + } + + router.push(`${pathname}?${params.toString()}`); }; return ( - <> -
- -
- { - const value = e.target.value; - if (/^\d*$/.test(value) && value.length <= 9) { - setnumAcount(value); - } - }} - placeholder="Coloca un número de cuenta..." - inputMode="numeric" - pattern="[0-9]*" - /> -
-
- - +
+ +
+ { + const value = e.target.value; + if (/^\d*$/.test(value) && value.length <= 9) { + setNumAcount(value); + } + }} + placeholder="Coloca un número de cuenta..." + /> +
+ + +
+ setDate(e.target.value)} + /> +
+ + +
); } export default SearchUserWithDate; -//IO diff --git a/app/Components/SearchDate/SearchDate.tsx b/app/Components/SearchDate/SearchDate.tsx index 783d465..e3ca8a8 100644 --- a/app/Components/SearchDate/SearchDate.tsx +++ b/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) => { + e.preventDefault(); + + const params = new URLSearchParams(searchParams.toString()); + + if (date) { + params.set("date", date); + } + + router.push(`${pathname}?${params.toString()}`); + }; + return ( - <> -
- -
- setDate(e.target.value)} - placeholder="Selecciona una fecha..." - /> - -
-
- +
+ +
+ setDate(e.target.value)} + /> + +
+
); }