fixed delete sancions

app/(private)/BitacoraSanciones/page.tsx

@@ -2,7 +2,7 @@ import BitacoraAlumno from "@/app/Components/BitacoraSanciones/BitacoraAlumno";
 import BitacoraEquipo from "@/app/Components/BitacoraSanciones/BitacoraEquipo";
 import BitacoraMesas from "@/app/Components/BitacoraSanciones/BitacoraMesas";
 import Sanciones from "@/app/Components/BitacoraSanciones/Sanciones";
-import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
+import SearchUserWithDate from "@/app/Components/Global/SearchUser/SearchUserWithDate";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import { GetStudent } from "@/app/lib/getStudent";
 
@@ -13,23 +13,22 @@ export default async function Page(props: {
   }>;
 }) {
   const params = await props.searchParams;
-  const key = params?.key && params.key ;
+  const key = params?.key && params.key;
   const numAcount = params?.numAcount ? params.numAcount : null;
 
-    let student: any = null;
+  let student: any = null;
-  
+
-    if (numAcount) {
+  if (numAcount) {
-      const result = await GetStudent(parseInt(numAcount));
+    const result = await GetStudent(parseInt(numAcount));
-  
+
-      if (result.error) {
+    if (result.error) {
-      } else {
+    } else {
-        student = result;
+      student = result;
-      }
     }
+  }
 
   return (
     <section className="containerSection">
-      
       <h2 className="title"> BITACORA Y SANCIONES </h2>
 
       <Toggle
@@ -49,7 +48,7 @@ export default async function Page(props: {
             label: "Bitacora alumno",
             content: (
               <>
-              <SearchUser value={numAcount}/>
+                <SearchUserWithDate value={numAcount} />
                 <BitacoraAlumno />
               </>
             ),
@@ -68,7 +67,7 @@ export default async function Page(props: {
             label: "Sanciones",
             content: (
               <>
-                <Sanciones student={student}/>
+                <Sanciones student={student} />
               </>
             ),
           },

app/(private)/Impresiones/page.tsx

@@ -34,7 +34,6 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-
       {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
 
       <h2 className="title">IMPRESIONES Y PLOTEO</h2>

app/(private)/QuitarSancion/page.tsx

@@ -1,5 +1,7 @@
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
+import ShowError from "@/app/Components/Global/ShowError";
 import QuitarSancion from "@/app/Components/QuitarSancion/QuitarSancion";
+import { GetSancionByStudent } from "@/app/lib/getStudent copy";
 
 export default async function Page(props: {
   searchParams?: Promise<{
@@ -9,13 +11,25 @@ export default async function Page(props: {
   const params = await props.searchParams;
   const numAcount = params?.numAcount ? params.numAcount : null;
 
+  let student: any = null;
+  let errorMessage = "";
+
+  if (numAcount) {
+    const result = await GetSancionByStudent(parseInt(numAcount));
+    if (result.error) {
+      errorMessage = `${result.error}`;
+    } else {
+      student = result as Student;
+    }
+  }
   return (
     <>
+      {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
+
       <h2 className="title"> Quitar Sanciones </h2>
-      <div className="containerSection"
+      <div className="containerSection">
-      >
         <SearchUser value={numAcount} />
-        <QuitarSancion />
+        <QuitarSancion data={student} />
       </div>
     </>
   );

app/Components/BitacoraSanciones/BitacoraAlumno.tsx

@@ -1,5 +1,4 @@
 "use client";
-import SearchDate from "../SearchDate/SearchDate";
 import { useState } from "react";
 
 import styles from "./Page.module.css";
@@ -14,8 +13,7 @@ function BitacoraAlumno() {
   const [alumnos, setAlumnos] = useState<alumnos[]>([]);
   return (
     <>
-      <SearchDate />
+      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
-      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
         <table className={styles.machineTable}>
           <thead>
             <tr>

app/Components/BitacoraSanciones/BitacoraEquipo.tsx

@@ -16,7 +16,6 @@ function BitacoraEquipo() {
   const [ubicacion_equipo, setUbicacionEquipo] = useState("");
   return (
     <>
-      <SearchDate />
       <form className="containerForm">
         <label className="label">Ubicacion de equipo</label>
 
@@ -28,12 +27,10 @@ function BitacoraEquipo() {
             <option value="">-- Selecciona un equipo --</option>
             <option value="255">Equipo 255</option>
           </select>
-          <button className="button buttonSearch" type="submit">
-            Asignar
-          </button>
         </div>
       </form>
-      <div className={styles.tableContainer} style={{marginTop:"1rem"}}>
+      <SearchDate />
+      <div className={styles.tableContainer} style={{ marginTop: "1rem" }}>
         <table className={styles.machineTable}>
           <thead>
             <tr>

app/Components/BitacoraSanciones/Sanciones.tsx

@@ -19,8 +19,7 @@ export default async function Sanciones(props: { student?: Student }) {
             NoCuenta={props.student.id_cuenta}
             Nombre={props.student.nombre}
           />
-
+          <TableSancion />
-        <TableSancion />
         </>
       )}
     </>

app/Components/BitacoraSanciones/TableSancion.tsx

@@ -24,24 +24,64 @@ interface sancion {
 }
 
 export default function TableSancion() {
-  const [sanciones, setSanciones] = useState<any>();
+  const [sanciones, setSanciones] = useState<any>([]);
   const [button, setButton] = useState<boolean>(false);
+  const [selectedSancion, setSelectedSancion] = useState("");
+  const [alumnoSanciones, setAlumnoSanciones] = useState<any>([]);
+  /*
+  useEffect(() => {
+    const getSanciones = async () => {
+      const response = await axios.get("");
+      setSanciones(response);
+    };
+    getSanciones();
+  }, [button]);
 
-  // useEffect(() => {
+
-  //   const getSanciones = async () => {
+
-  //     const response = await axios.get("");
+                  <td>{new Date(item.fecha_inicio).toLocaleDateString()}</td>
-  //     setSanciones(response);
+                <td>
-  //   };
+                  {calcularFechaFin(item.fecha_inicio, item.sancion?.duracion)}
-  //   getSanciones();
+                </td>
-  // }, [button]);
+
+                https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/320154041
+                .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/sancion")
+*/
+  useEffect(() => {
+    axios
+      .get(
+        " https://venus.acatlan.unam.mx/asignacionTiempo_test/alumno-sancion/423019393"
+      )
+      .then((response) => {
+        setAlumnoSanciones(response.data);
+      })
+      .catch((error) => {
+        console.error("Error al obtener las sanciones:", error);
+      });
+
+    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);
   };
-  
+
+  const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
+    const fecha = new Date(fechaInicio);
+    fecha.setDate(fecha.getDate() + duracionSemanas * 7);
+    return fecha.toLocaleDateString();
+  };
+
   return (
     <>
-      <div className={styles.tableContainer} style={{margin:"1rem 0"}}>
+      <div className={styles.tableContainer} style={{ margin: "1rem 0" }}>
         <table className={styles.machineTable}>
           <thead>
             <tr>
@@ -52,19 +92,51 @@ export default function TableSancion() {
               <th>Podra utilizar el servicio hasta</th>
             </tr>
           </thead>
-          <tbody></tbody>
+          <tbody>
+            {sanciones.length > 0 ? (
+              alumnoSanciones.map((item: any) => (
+                <tr key={item.id_alumno_sancion}>
+                  <td>{item.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={6}>No hay sanciones registradas</td>
+              </tr>
+            )}
+          </tbody>
         </table>
       </div>
 
       <form className="containerForm">
         <div className="groupInput">
-          <select>
+          <select
+            value={selectedSancion}
+            onChange={(e) => setSelectedSancion(e.target.value)}
+          >
             <option value="">-- Selecciona una sanción --</option>
-            <option value="sancion 1">No cerrar sesion (Una semana)</option>
+            {sanciones.map((sancion: any) => (
+              <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}>
+      <button
+        className="button buttonSearch"
+        style={{ margin: "1rem 0" }}
+        onClick={handlebutton}
+      >
         Aplicar sanción
       </button>
     </>

app/Components/Global/SearchUser/SearchUserWithDate.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+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();
+
+  useEffect(() => {
+    if (props.value) {
+      setnumAcount(props.value);
+    }
+  }, [props.value]);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const params = new URLSearchParams(searchParams.toString());
+    if (numAcount) {
+      params.set("numAcount", `${numAcount}`);
+      router.push(`${pathname}?${params.toString()}`);
+    }
+  };
+
+  return (
+    <>
+      <form className="containerForm" onSubmit={handleSubmit}>
+        <label className="label">No.Cuenta</label>
+        <div className="groupInput">
+          <input
+            type="text"
+            value={numAcount}
+            onChange={(e) => {
+              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]*"
+          />
+          <SearchDate />
+        </div>
+      </form>
+    </>
+  );
+}
+
+export default SearchUserWithDate;
+//IO

app/Components/QuitarSancion/QuitarSancion.tsx

@@ -1,48 +1,75 @@
-"use client";
-import { useState } from "react";
-
 import styles from "./Page.module.css";
 
-interface quitarSanciones {
+interface Alumno {
-  id: number;
+  id_cuenta: number;
   nombre: string;
-  motivo: string;
+  credito: number;
-  duracion: number;
-  fecha_sancion: string;
-  utilizar_equipo: number;
 }
 
-function QuitarSancion() {
+interface Sancion {
-  const [quitarSanciones, SetQuitarSanciones] = useState<quitarSanciones[]>([]);
+  id_sancion: number;
+  sancion: string;
+  duracion: number;
+}
+
+interface AlumnoSancion {
+  id_alumno_sancion: number;
+  fecha_inicio: string;
+  sancion: Sancion;
+}
+
+interface DataProps {
+  student: Alumno;
+  alusancion: AlumnoSancion[];
+}
+
+interface Props {
+  data: DataProps | null;
+}
+
+function QuitarSancion({ data }: Props) {
+  const calcularFechaFin = (fechaInicio: string, duracionSemanas: number) => {
+    const fecha = new Date(fechaInicio);
+    fecha.setDate(fecha.getDate() + duracionSemanas * 7);
+    return fecha.toLocaleDateString();
+  };
+
   return (
     <section className="containerSection">
-      <div className={styles.tableContainer} style={{margin:"1rem 0"}}>
+      <div className={styles.tableContainer} style={{ margin: "1rem 0" }}>
         <table className={styles.machineTable}>
           <thead>
             <tr>
-              <th>id</th>
+              <th>ID</th>
               <th>Nombre</th>
               <th>Motivo Sanción</th>
-              <th>Duracion (semanas) </th>
+              <th>Duración (semanas)</th>
               <th>Fecha Sanción</th>
-              <th>Podria utilizar el servicio hasta</th>
+              <th>Podría utilizar el servicio hasta</th>
             </tr>
           </thead>
           <tbody>
-            {quitarSanciones.map((quitarSanciones, index) => (
+            {data && data.alusancion.length > 0 ? (
-              <tr key={index}>
+              data.alusancion.map((item) => (
-                <td>{quitarSanciones.id}</td>
+                <tr key={item.id_alumno_sancion}>
-                <td>{quitarSanciones.nombre}</td>
+                  <td>{item.id_alumno_sancion}</td>
-                <td>{quitarSanciones.motivo}</td>
+                  <td>{data.student.nombre}</td>
-                <td>{quitarSanciones.duracion}</td>
+                  <td>{item.sancion.sancion}</td>
-                <td>{quitarSanciones.fecha_sancion}</td>
+                  <td>{item.sancion.duracion}</td>
-                <td>{quitarSanciones.utilizar_equipo}</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>
-      <button className="button buttonSearch" style={{marginTop:"1rem"}}>Quitar Sanción</button>
     </section>
   );
 }

app/lib/getStudent copy.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { envConfig } from "./config";
+
+export async function GetSancionByStudent(numAcount: number) {
+  try {
+    const response = await axios.get(
+      `${envConfig.apiUrl}/alumno-sancion/${numAcount}`
+    );
+
+    return response.data;
+  } catch (error: any) {
+    const msg =
+      error.response?.data?.message ||
+      error.message ||
+      "Error desconocido al obtener estudiante";
+    return { error: msg };
+  }
+}
+//IO

package-lock.json

@@ -14,7 +14,8 @@
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-hot-toast": "^2.6.0",
-        "react-icons": "^5.5.0"
+        "react-icons": "^5.5.0",
+        "react-toastify": "^11.0.5"
       },
       "devDependencies": {
         "@types/js-cookie": "^3.0.6",
@@ -688,6 +689,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -1174,6 +1184,19 @@
         "react": "*"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",

package.json

@@ -15,7 +15,8 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-hot-toast": "^2.6.0",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6",