fixing create sanctions and delete sanctions

app/Components/ActivosMantenimiento/Mesas.tsx

@@ -18,11 +18,6 @@ function Mesas() {
 
     const estado = mantenimiento ? "en mantenimiento" : "disponible";
     setMensaje(`Mesa ${mesa} confirmada como ${estado}`);
-
-    console.log({
-      mesa,
-      mantenimiento,
-    });
   };
 
   return (

app/Components/BitacoraSanciones/ApplySanction.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { envConfig } from "@/app/lib/config";
+import { useRouter } from "next/navigation";
+import TableSanction from "./TableSanction";
+
+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 ApplySanction({ idCuenta }: { idCuenta: number }) {
+  const [sanciones, setSanciones] = useState<Sancion[]>([]);
+  const [alumno, setAlumno] = useState<Alumno>();
+  const [alumnoSanciones, setAlumnoSanciones] = useState<AlumnoSancion[]>([]);
+  const [selectedSancion, setSelectedSancion] = useState("");
+
+  const router = useRouter();
+
+  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";
+
+      });
+
+    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();
+  };
+
+  const handleButton = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    if (!selectedSancion) {
+      toast.error("selecciona una sancion")
+    }
+    axios.post(`${envConfig.apiUrl}/alumno-sancion/`, { id_sancion: Number(selectedSancion), id_cuenta: idCuenta })
+    router.refresh();
+  }
+
+  return (
+    <>
+      <TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
+      {!(alumnoSanciones?.length > 0) &&
+        <>
+          <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" }}
+            onClick={handleButton}
+          >
+            Aplicar sanción
+          </button>
+        </>
+      }
+    </>
+  );
+}

app/Components/BitacoraSanciones/Sanciones.tsx

@@ -1,6 +1,5 @@
 import Information from "../Global/Information/information";
-import SearchUser from "../Global/SearchUser/searchUser";
-import TableSancion from "./TableSancion";
+import ApplySanction from "./ApplySanction";
 
 interface Student {
   id_cuenta: string;
@@ -13,11 +12,10 @@ export default function Sanciones({ student }: { student?: Student }) {
 
   return (
     <>
-      <SearchUser value={idCuenta} />
       {student && (
         <>
           <Information NoCuenta={student.id_cuenta} Nombre={student.nombre} />
-          <TableSancion idCuenta={parseInt(student.id_cuenta)} />
+          <ApplySanction idCuenta={parseInt(student.id_cuenta)} />
         </>
       )}
     </>

app/Components/BitacoraSanciones/TableSancion.tsx

@@ -1,129 +0,0 @@
-"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>
-    </>
-  );
-}

app/Components/BitacoraSanciones/TableSanction.tsx

@@ -0,0 +1,67 @@
+interface Sancion {
+    id_sancion: number;
+    sancion: string;
+    duracion: number;
+}
+
+interface AlumnoSancion {
+    id_alumno_sancion: number;
+    fecha_inicio: string;
+    sancion: Sancion;
+    alumno: string;
+}
+
+interface Alumno {
+    id_cuenta: number;
+    nombre: string;
+    credito: number;
+}
+
+interface Props {
+    alumnoSanciones: AlumnoSancion[],
+    alumno: Alumno
+}
+
+export default function TableSanction({ alumnoSanciones, alumno }: Props) {
+
+    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>
+    )
+}

app/Components/EviarMensaje/EnviarMensaje.tsx

@@ -70,8 +70,6 @@ const EnviarMensaje = ({ titulo }: EnviarMensajeProps) => {
       mensaje: customMsg || mensaje,
     };
 
-    console.log(payload);
-
   };
 
   return (

app/Components/EviarMensaje/EnviarMensajeSala.tsx

@@ -20,7 +20,6 @@ const EnviarMensajeSala = ({ titulo }: EnviarMensajeSalaProps) => {
   const [mensaje, setMensaje] = useState("");
   const [customMsg, setCustomMsg] = useState("");
 
-  // 🔹 Traer salas desde API
   useEffect(() => {
     const fetchSalas = async () => {
       try {
@@ -42,9 +41,6 @@ const EnviarMensajeSala = ({ titulo }: EnviarMensajeSalaProps) => {
       mensaje: customMsg || mensaje,
     };
 
-    console.log(payload);
-
-    
   };
 
   return (

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -1,3 +1,11 @@
+"use client";
+
+import { envConfig } from "@/app/lib/config";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import TableSanction from "../BitacoraSanciones/TableSanction";
+import axios from "axios";
+
 interface Alumno {
   id_cuenta: number;
   nombre: string;
@@ -16,58 +24,47 @@ interface AlumnoSancion {
   sancion: Sancion;
 }
 
-interface DataProps {
-  student: Alumno;
-  alusancion: AlumnoSancion[];
-}
+function QuitarSancion({ id_cuenta }: { id_cuenta: number }) {
+  const [alumno, setAlumno] = useState<Alumno>();
+  const [alumnoSanciones, setAlumnoSanciones] = useState<AlumnoSancion[]>([]);
+  const router = useRouter();
 
-interface Props {
-  data: DataProps | null;
-}
+  useEffect(() => {
+    if (!id_cuenta) return;
 
-function QuitarSancion({ data }: Props) {
-  const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
-    const fecha = new Date(fechaInicio);
-    fecha.setDate(fecha.getDate() + duracionSemanas * 7);
-    return fecha.toLocaleDateString();
-  };
+    axios
+      .get(`${envConfig.apiUrl}/alumno-sancion/${id_cuenta}`)
+      .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";
+
+      });
+  }, [id_cuenta]);
+
+  const handleButton = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    axios.delete(`${envConfig.apiUrl}/alumno-sancion/${id_cuenta}`)
+    router.refresh();
+  }
 
   return (
     <section className="containerSection">
-      <div>
-        <table>
-          <thead>
-            <tr>
-              <th>ID</th>
-              <th>Nombre</th>
-              <th>Motivo Sanción</th>
-              <th>Duración (semanas)</th>
-              <th>Fecha Sanción</th>
-              <th>Podra utilizar el servicio hasta</th>
-            </tr>
-          </thead>
-          <tbody>
-            {data && data.alusancion.length !== 0 ? (
-              data.alusancion.map((item) => (
-                <tr key={item.id_alumno_sancion}>
-                  <td>{item.id_alumno_sancion}</td>
-                  <td>{data.student.nombre}</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={6}>No hay sanciones registradas</td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-      </div>
+      <TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
+      <button
+        className="button buttonSearch"
+        style={{ margin: "1rem 0" }}
+        onClick={handleButton}
+      >
+        Quitar sancion
+      </button>
     </section>
   );
 }

app/Components/SearchMesa.tsx

@@ -1,59 +1,11 @@
 "use client";
-import axios from "axios";
+
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
-interface Mesa {
-  id_mesa: number;
-  nombre?: string;
-}
-
-interface Props {
-  id_cuenta: number;
-}
-
-function Mesas({ id_cuenta }: Props) {
-  const [mesas, setMesas] = useState<Mesa[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!id_cuenta) return;
-
-    setLoading(true);
-
-    axios
-      .get(`/cuenta/${id_cuenta}`)
-      .then((res) => {
-        setMesas(res.data);
-      })
-      .catch((err) => console.error(err))
-      .finally(() => setLoading(false));
-  }, [id_cuenta]);
-
-  if (loading) return <p>Cargando mesas...</p>;
-
-  return (
-    <div>
-      <h3>Mesas asignadas</h3>
-
-      {mesas.length === 0 ? (
-        <p>No hay mesas</p>
-      ) : (
-        <ul>
-          {mesas.map((mesa) => (
-            <li key={mesa.id_mesa}>
-              Mesa {mesa.id_mesa} {mesa.nombre && `- ${mesa.nombre}`}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-}
 
 export default function SearchMesa() {
   const [inputValue, setInputValue] = useState("");
-  const [idCuenta, setIdCuenta] = useState<number | null>(null);
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();