130 lines
3.5 KiB
TypeScript
130 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
import toast from "react-hot-toast";
|
|
import { envConfig } from "@/app/lib/config";
|
|
|
|
interface Alumno {
|
|
id_cuenta: number;
|
|
nombre: string;
|
|
credito: number;
|
|
}
|
|
|
|
interface Sancion {
|
|
id_sancion: number;
|
|
sancion: string;
|
|
duracion: number;
|
|
}
|
|
|
|
interface AlumnoSancion {
|
|
id_alumno_sancion: number;
|
|
fecha_inicio: string;
|
|
sancion: Sancion;
|
|
}
|
|
|
|
if (!envConfig.apiUrl) {
|
|
console.error("API URL is not defined in envConfig");
|
|
}
|
|
|
|
export default function TableSancion({ idCuenta }: { idCuenta: number }) {
|
|
const [sanciones, setSanciones] = useState<Sancion[]>([]);
|
|
const [alumno, setAlumno] = useState<Alumno | null>(null);
|
|
const [alumnoSanciones, setAlumnoSanciones] = useState<AlumnoSancion[]>([]);
|
|
const [selectedSancion, setSelectedSancion] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (!idCuenta) return;
|
|
|
|
axios
|
|
.get(`${envConfig.apiUrl}/alumno-sancion/${idCuenta}`)
|
|
.then((res) => {
|
|
setAlumno(res.data.student);
|
|
setAlumnoSanciones(
|
|
res.data.alusancion?.length ? res.data.alusancion : [],
|
|
);
|
|
})
|
|
.catch((err) => {
|
|
const mensaje =
|
|
err.response?.data?.message ||
|
|
"Error al obtener las sanciones del alumno";
|
|
|
|
toast.error(mensaje);
|
|
});
|
|
|
|
// Obtener catálogo de sanciones
|
|
axios
|
|
.get(`${envConfig.apiUrl}/sancion`)
|
|
.then((res) => setSanciones(res.data))
|
|
.catch((err) =>
|
|
toast.error("Error al obtener el catálogo de sanciones:", err),
|
|
);
|
|
}, [idCuenta]);
|
|
|
|
const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
|
|
const fecha = new Date(fechaInicio);
|
|
fecha.setDate(fecha.getDate() + duracionSemanas * 7);
|
|
return fecha.toLocaleDateString();
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div style={{ margin: "1rem 0" }}>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Cuenta</th>
|
|
<th>Motivo de la sanción</th>
|
|
<th>Duración (Semanas)</th>
|
|
<th>Fecha Sanción</th>
|
|
<th>Podrá utilizar el servicio hasta</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{alumnoSanciones.length > 0 ? (
|
|
alumnoSanciones.map((item) => (
|
|
<tr key={item.id_alumno_sancion}>
|
|
<td>{alumno?.id_cuenta}</td>
|
|
<td>{item.sancion.sancion}</td>
|
|
<td>{item.sancion.duracion}</td>
|
|
<td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
|
|
<td>
|
|
{calcularFechaFin(item.fecha_inicio, item.sancion.duracion)}
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={5}>No hay sanciones registradas</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<form className="containerForm">
|
|
<div className="groupInput">
|
|
<select
|
|
value={selectedSancion}
|
|
onChange={(e) => setSelectedSancion(e.target.value)}
|
|
>
|
|
<option value="">-- Selecciona una sanción --</option>
|
|
{sanciones.map((sancion) => (
|
|
<option key={sancion.id_sancion} value={sancion.id_sancion}>
|
|
{sancion.sancion} ({sancion.duracion} semana/s)
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</form>
|
|
|
|
<button
|
|
className="button buttonSearch"
|
|
style={{ margin: "1rem 0" }}
|
|
>
|
|
Aplicar sanción
|
|
</button>
|
|
</>
|
|
);
|
|
}
|