modified styles tables

app/Components/ActivosMantenimiento/MesasDisponibles.tsx

@@ -1,13 +1,10 @@
-import styles from "./Page.module.css";
-
 export default async function MesasDisponibles() {
   return (
     <section className="containerSection">
-
-      <div className={styles.tableContainer}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
-            <tr style={{fontSize:"15px"}}>
+            <tr style={{ fontSize: "15px" }}>
               <th>Mesa</th>
               <th>Activo</th>
             </tr>

app/Components/BitacoraSanciones/BitacoraAlumno.tsx

@@ -1,8 +1,6 @@
 "use client";
 import { useState } from "react";
 
-import styles from "./Page.module.css";
-
 interface alumnos {
   tiempo_entrada: string;
   tiempo_asignado: string;
@@ -13,26 +11,24 @@ function BitacoraAlumno() {
   const [alumnos, setAlumnos] = useState<alumnos[]>([]);
   return (
     <>
-      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
-        <table className={styles.machineTable}>
-          <thead>
-            <tr>
-              <th>Tiempo Entrada</th>
-              <th>Tiempo Asignado</th>
-              <th>Ubicacion del equipo</th>
+      <table>
+        <thead>
+          <tr>
+            <th>Tiempo Entrada</th>
+            <th>Tiempo Asignado</th>
+            <th>Ubicacion del equipo</th>
+          </tr>
+        </thead>
+        <tbody>
+          {alumnos.map((alumno, index) => (
+            <tr key={index}>
+              <td>{alumno.tiempo_entrada}</td>
+              <td>{alumno.tiempo_asignado}</td>
+              <td>{alumno.Ubicacion_equipo}</td>
             </tr>
-          </thead>
-          <tbody>
-            {alumnos.map((alumno, index) => (
-              <tr key={index}>
-                <td>{alumno.tiempo_entrada}</td>
-                <td>{alumno.tiempo_asignado}</td>
-                <td>{alumno.Ubicacion_equipo}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+          ))}
+        </tbody>
+      </table>
     </>
   );
 }

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -30,8 +30,8 @@ function BitacoraEquipo() {
         </div>
       </form>
       <SearchDate />
-      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
             <tr>
               <th>Hora Entrada</th>

app/Components/BitacoraSanciones/BitacoraMesas.tsx

@@ -2,8 +2,6 @@
 import SearchDate from "../SearchDate/SearchDate";
 import { useState } from "react";
 
-import styles from "./Page.module.css";
-
 interface tables {
   no_mesa: number;
   no_cuenta: number;
@@ -18,8 +16,8 @@ function BitacoraMesas() {
   return (
     <>
       <SearchDate />
-      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
             <tr>
               <th>Mesa</th>

app/Components/BitacoraSanciones/Sanciones.tsx

@@ -5,23 +5,22 @@ import TableSancion from "./TableSancion";
 interface Student {
   id_cuenta: string;
   nombre: string;
+  credito?: number;
 }
 
-export default async function Sanciones(props: { student?: Student }) {
-  const idCuenta = props?.student?.id_cuenta ?? null;
+export default function Sanciones({ student }: { student?: Student }) {
+  const idCuenta = student?.id_cuenta ?? null;
 
   return (
     <>
       <SearchUser value={idCuenta} />
-      {props.student && (
+      {student && (
         <>
-          <Information
-            NoCuenta={props.student.id_cuenta}
-            Nombre={props.student.nombre}
-          />
-          <TableSancion />
+          <Information NoCuenta={student.id_cuenta} Nombre={student.nombre} />
+          <TableSancion idCuenta={parseInt(student.id_cuenta)} />
         </>
       )}
     </>
   );
 }
+//

app/Components/BitacoraSanciones/TableSancion.tsx

@@ -1,77 +1,59 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import styles from "./Page.module.css";
 import axios from "axios";
+import toast from "react-hot-toast";
 
-interface alumno_sancion {
-  id_alumno_sancion: number;
-  fecha_inicio: string;
-  alumno: alumno;
-  sancion: sancion;
-}
-
-interface alumno {
+interface Alumno {
   id_cuenta: number;
   nombre: string;
   credito: number;
 }
 
-interface sancion {
+interface Sancion {
   id_sancion: number;
   sancion: string;
   duracion: number;
 }
 
-export default function TableSancion() {
-  const [sanciones, setSanciones] = useState<any>([]);
-  const [button, setButton] = useState<boolean>(false);
+interface AlumnoSancion {
+  id_alumno_sancion: number;
+  fecha_inicio: string;
+  sancion: Sancion;
+}
+
+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("");
-  const [alumnoSanciones, setAlumnoSanciones] = useState<any>([]);
-  /*
+
   useEffect(() => {
-    const getSanciones = async () => {
-      const response = await axios.get("");
-      setSanciones(response);
-    };
-    getSanciones();
-  }, [button]);
+    if (!idCuenta) return;
 
-
-
-                  <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
-                <td>
-                  {calcularFechaFin(item.fecha_inicio, item.sancion?.duracion)}
-                </td>
-
-                https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/320154041
-                .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
-*/
-  useEffect(() => {
+    // Obtener sanciones del alumno
     axios
       .get(
-        " https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/423019393"
+        `https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/${idCuenta}`
       )
-      .then((response) => {
-        setAlumnoSanciones(response.data);
+      .then((res) => {
+        setAlumno(res.data.student);
+        setAlumnoSanciones(
+          res.data.alusancion?.length ? res.data.alusancion : []
+        );
       })
-      .catch((error) => {
-        console.error("Error al obtener las sanciones:", error);
-      });
+      .catch((err) =>
+        toast.error("Error al obtener las sanciones del alumno:", err)
+      );
 
+    // Obtener catálogo de sanciones
     axios
       .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
-      .then((response) => {
-        setSanciones(response.data);
-      })
-      .catch((error) => {
-        console.error("Error al obtener las sanciones:", error);
-      });
-  }, []);
-
-  const handlebutton = () => {
-    setButton(!button);
-  };
+      .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);
@@ -81,36 +63,33 @@ export default function TableSancion() {
 
   return (
     <>
-      <div className={styles.tableContainer} style={{ margin: "1rem 0" }}>
-        <table className={styles.machineTable}>
+      <div style={{ margin: "1rem 0" }}>
+        <table>
           <thead>
             <tr>
               <th>Cuenta</th>
               <th>Motivo de la sanción</th>
-              <th>Duracion (Semanas) </th>
+              <th>Duración (Semanas)</th>
               <th>Fecha Sanción</th>
-              <th>Podra utilizar el servicio hasta</th>
+              <th>Podrá utilizar el servicio hasta</th>
             </tr>
           </thead>
           <tbody>
-            {sanciones.length > 0 ? (
-              alumnoSanciones.map((item: any) => (
+            {alumnoSanciones.length > 0 ? (
+              alumnoSanciones.map((item) => (
                 <tr key={item.id_alumno_sancion}>
-                  <td>{item.alumno?.id_cuenta}</td>
-                  <td>{item.sancion?.sancion}</td>
-                  <td>{item.sancion?.duracion}</td>
+                  <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
-                    )}
+                    {calcularFechaFin(item.fecha_inicio, item.sancion.duracion)}
                   </td>
                 </tr>
               ))
             ) : (
               <tr>
-                <td colSpan={6}>No hay sanciones registradas</td>
+                <td colSpan={5}>No hay sanciones registradas</td>
               </tr>
             )}
           </tbody>
@@ -124,7 +103,7 @@ export default function TableSancion() {
             onChange={(e) => setSelectedSancion(e.target.value)}
           >
             <option value="">-- Selecciona una sanción --</option>
-            {sanciones.map((sancion: any) => (
+            {sanciones.map((sancion) => (
               <option key={sancion.id_sancion} value={sancion.id_sancion}>
                 {sancion.sancion} ({sancion.duracion} semana/s)
               </option>
@@ -132,14 +111,14 @@ export default function TableSancion() {
           </select>
         </div>
       </form>
+
       <button
         className="button buttonSearch"
         style={{ margin: "1rem 0" }}
-        onClick={handlebutton}
+        onClick={() => alert(`Sanción ${selectedSancion} aplicada`)}
       >
         Aplicar sanción
       </button>
     </>
   );
 }
-//IO

app/Components/Equipos/tableequipos.tsx

@@ -3,11 +3,10 @@ import styles from "./Page.module.css";
 export default async function TableEquipos() {
   return (
     <section className="containerSection">
-
-      <div className={styles.tableContainer}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
-            <tr style={{fontSize:"15px"}}>
+            <tr style={{ fontSize: "15px" }}>
               <th>Ubicación</th>
               <th>Nombre</th>
               <th>Plataforma</th>

app/Components/Global/SearchUser/SearchUserWithDate.tsx

@@ -47,9 +47,9 @@ function SearchUserWithDate(props: urlProp) {
             inputMode="numeric"
             pattern="[0-9]*"
           />
-          <SearchDate />
         </div>
       </form>
+      <SearchDate />
     </>
   );
 }

app/Components/Global/Toggle/Toggle.tsx

@@ -29,7 +29,7 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
 
     router.replace(`${pathname}?${params.toString()}`);
   };
-  
+
   return (
     <section className="toggleSection">
       <div className="toggleGroup">
@@ -44,10 +44,10 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
         ))}
       </div>
 
-      <div className="padding">
+      <div className="padding toggleContent">
         {options.find((opt) => opt.key === view)?.content}
       </div>
     </section>
   );
 }
-//IO
+//IO

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -1,5 +1,3 @@
-import styles from "./Page.module.css";
-
 interface Alumno {
   id_cuenta: number;
   nombre: string;
@@ -36,8 +34,8 @@ function QuitarSancion({ data }: Props) {
 
   return (
     <section className="containerSection">
-      <div className={styles.tableContainer} style={{ margin: "1rem 0" }}>
-        <table className={styles.machineTable}>
+      <div>
+        <table>
           <thead>
             <tr>
               <th>ID</th>
@@ -49,7 +47,7 @@ function QuitarSancion({ data }: Props) {
             </tr>
           </thead>
           <tbody>
-            {data && data.alusancion.length > 0 ? (
+            {data && data.alusancion.length !== 0 ? (
               data.alusancion.map((item) => (
                 <tr key={item.id_alumno_sancion}>
                   <td>{item.id_alumno_sancion}</td>

app/Components/Reportes/porRecibo.tsx

@@ -10,8 +10,8 @@ interface reportes {
 function PorRecibos() {
   const [reportes, SetQuitarSanciones] = useState<reportes[]>([]);
   return (
-    <div className={styles.tableContainer}>
-      <table className={styles.machineTable}>
+    <div>
+      <table>
         <thead>
           <tr>
             <th>Servicio</th>

app/Components/Reportes/porServicio.tsx

@@ -13,8 +13,8 @@ interface servicios {
 function PorServicios() {
   const [recibos, setRecibos] = useState<servicios[]>([]);
   return (
-    <div className={styles.tableContainer}>
-      <table className={styles.machineTable}>
+    <div>
+      <table>
         <thead>
           <tr>
             <th>Folio Recibo</th>