added clearParams

app/Components/BitacoraSanciones/Sanciones.tsx

@@ -1,9 +1,10 @@
 import Information from "../Global/Information/information";
 import SearchUser from "../Global/SearchUser/searchUser";
+import TableSancion from "./TableSancion";
 
 interface Student {
-  id_cuenta: string ;
-  nombre: string ;
+  id_cuenta: string;
+  nombre: string;
 }
 
 export default async function Sanciones(props: { student?: Student }) {
@@ -13,7 +14,14 @@ export default async function Sanciones(props: { student?: Student }) {
     <>
       <SearchUser urlBase="BitacoraSanciones" value={idCuenta} />
       {props.student && (
-        <Information NoCuenta={props.student.id_cuenta} Nombre={props.student.nombre} />
+        <>
+          <Information
+            NoCuenta={props.student.id_cuenta}
+            Nombre={props.student.nombre}
+          />
+
+          <TableSancion  />
+        </>
       )}
     </>
   );

app/Components/BitacoraSanciones/TableSancion.tsx

@@ -0,0 +1,58 @@
+import styles from "./Page.module.css";
+
+interface alumno_sancion {
+  id_alumno_sancion: number;
+  fecha_inicio: string;
+  alumno: alumno;
+  sancion: sancion;
+}
+
+interface alumno {
+  id_cuenta: number;
+  nombre: string;
+  credito: number;
+}
+
+interface sancion {
+  id_sancion: number;
+  sancion: string;
+  duracion: number;
+}
+
+export default function TableSancion() {
+
+  return (
+    <>
+      <div className={styles.tableContainer}>
+        <table className={styles.machineTable}>
+          <thead>
+            <tr>
+              <th>Cuenta</th>
+              <th>Motivo de la sancion</th>
+              <th>Duracion (Semanas) </th>
+              <th>Fecha Sancion</th>
+              <th>Podra utilizar el servicio hasta</th>
+            </tr>
+          </thead>
+          <tbody>
+
+          </tbody>
+        </table>
+      </div>
+
+      <form className="containerForm">
+        <div className="groupInput">
+          <select
+          >
+            <option value="">-- Selecciona una sancion --</option>
+            <option value="sancion 1">No cerrar sesion (Una semana)</option>
+          </select>
+          <button className="button buttonSearch" type="submit">
+            Aplicar sancion
+          </button>
+        </div>
+      </form>
+    </>
+  );
+}
+//IO

app/Components/BitacoraSanciones/UbicacionEquipo.tsx

@@ -1,91 +0,0 @@
-import { useState } from "react";
-
-import styles from "./Page.module.css";
-
-interface alumno_sancion {
-  id_alumno_sancion: number;
-  fecha_inicio: string;
-  alumno: alumno;
-  sancion: sancion;
-}
-
-interface alumno {
-  id_cuenta: number;
-  nombre: string;
-  credito: number;
-}
-
-interface sancion {
-  id_sancion: number;
-  sancion: string;
-  duracion: number;
-}
-
-export default function UbicacionEquipo(sanciones:alumno_sancion[]) {
-  const [ubicacionEquipo, setUbicacionEquipo] = useState("");
-
-  return (
-    <>
-      <form className="containerForm">
-        <label className="label">Ubicacion de equipo</label>
-
-        <div
-          className="groupInput"
-          style={{ display: "flex", gap: "1rem", flexDirection: "row" }}
-        >
-          <select
-            value={ubicacionEquipo}
-            onChange={(e) => setUbicacionEquipo(e.target.value)}
-          >
-            <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}>
-        <table className={styles.machineTable}>
-          <thead>
-            <tr>
-              <th>Cuenta</th>
-              <th>Motivo de la sancion</th>
-              <th>Duracion (Semanas) </th>
-              <th>Fecha Sancion</th>
-              <th>Podra utilizar el servicio hasta</th>
-            </tr>
-          </thead>
-          <tbody>
-            {sanciones &&
-              sanciones.map((s, index) => (
-                <tr key={index}>
-                  <td>{s.sancion.id_sancion}</td>
-                  <td>{s.sancion.sancion}</td>
-                  <td>{s.fecha_inicio}</td>
-                  <td>{s.sancion.duracion}</td>
-                </tr>
-              ))}
-          </tbody>
-        </table>
-      </div>
-
-      <form className="containerForm">
-        <div className="groupInput">
-          <select
-            value={ubicacionEquipo}
-            onChange={(e) => setUbicacionEquipo(e.target.value)}
-          >
-            <option value="">-- Selecciona una sancion --</option>
-            <option value="sancion 1">No cerrar sesion (Una semana)</option>
-          </select>
-          <button className="button buttonSearch" type="submit">
-            Aplicar sancion
-          </button>
-        </div>
-      </form>
-    </>
-  );
-}
-//IO

app/Components/Global/AlertBox/AlertBox.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import "./AlertBox.css";
+import ClearParams from "../ClearParams/ClearParams";
 
 interface AlertBoxProps {
   message: string | null;

app/Components/Global/FormHandle.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ReactNode, useCallback } from "react";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+
+interface FormHandlerProps {
+  children: ReactNode;
+  onSubmit: () => Promise<void>;
+}
+
+export default function FormHandler({ children, onSubmit }: FormHandlerProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const updateParams = useCallback(
+    (updates: Record<string, string | null>) => {
+      const params = new URLSearchParams(searchParams.toString());
+
+      Object.entries(updates).forEach(([key, value]) => {
+        if (value === null) params.delete(key);
+        else params.set(key, value);
+      });
+
+      router.push(`${pathname}?${params.toString()}`);
+    },
+    [searchParams, router, pathname]
+  );
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      await onSubmit();
+    } catch (err: any) {
+      updateParams({ error: String(err) });
+    }
+  };
+
+  return <form onSubmit={handleSubmit}>{children}</form>;
+}

app/Components/Impressions/impressions.tsx

@@ -27,25 +27,24 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
   };
 
   const handlePayment = async () => {
+    const currentUrl = new URL(window.location.href);
+    const params = new URLSearchParams();
+
+    const setError = (msg: string) => {
+      params.set("error", msg);
+      router.push(`${currentUrl}&${params.toString()}`);
+    };
+
     if (!numAcount) {
-      router.push(
-        `/Impresiones?numAcount=${numAcount}&error=Error busca denuevo al estudiante`
-      );
-      return;
+      return setError("busca de nuevo al estudiante");
     }
 
     if (!pages) {
-      router.push(
-        `/Impresiones?numAcount=${numAcount}&error=Ingresa el numero de hojas a imprimir`
-      );
-      return;
+      return setError("Ingresa el numero de hojas a imprimir");
     }
 
     if (!cost) {
-      router.push(
-        `/Impresiones?numAcount=${numAcount}&error=Selecciona un costo`
-      );
-      return;
+      return setError("Selecciona un costo");
     }
 
     const result = await PostImpressions({
@@ -57,18 +56,16 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
     if (result.error) {
       if (result.error === "Token inválido") handleLogout();
       else {
-        router.push(
-          `/Impresiones?numAcount=${numAcount}&error=${result.error}`
-        );
+        return setError(`Error: ${result.error}`);
       }
       return;
     }
 
     setPages("");
     setCost("");
-    router.push(
-      `/Impresiones?numAcount=${numAcount}&success=Impresion cobrada correctamente`
-    );
+    params.delete("error");
+    params.set("success", "Impresion cobrada correctamente");
+    router.push(`${currentUrl}&${params.toString()}`);
   };
 
   return (
@@ -109,10 +106,12 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
         </div>
 
         <div className="groupInput">
-          <label className="label">
-            Total: 
+          <label className="label">Total:</label>
+          <label
+            style={{ width: "100%", minWidth: "200px", maxWidth: "500px" }}
+          >
+            {pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}
           </label>
-          <label style={{width:"100%", minWidth:"200px", maxWidth:"500px"}}>{pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}</label>
         </div>
 
         <div className="containerButton">

app/Components/Receipt/Receipt.tsx

@@ -7,11 +7,10 @@ import { useRouter } from "next/navigation";
 import "./Receipt.css";
 
 interface ReceiptsProps {
-  urlBase: string;
   numAcount: number | null;
 }
 
-function Receipt({ urlBase, numAcount }: ReceiptsProps) {
+function Receipt({ numAcount }: ReceiptsProps) {
   const router = useRouter();
 
   const [folio, setFolio] = useState("");
@@ -29,30 +28,28 @@ function Receipt({ urlBase, numAcount }: ReceiptsProps) {
   //restrict this month//
 
   const handleSaveReceipt = async () => {
+    const currentUrl = new URL(window.location.href);
+    const params = new URLSearchParams();
+
+    const setError = (msg: string) => {
+      params.set("error", msg);
+      router.push(`${currentUrl}&${params.toString()}`);
+    };
+
     if (!numAcount) {
-      router.push(
-        `${urlBase}?numAcount=${numAcount}&error=Error busca denuevo al estudiante`
-      );
-      return;
+      return setError("busca de nuevo al estudiante");
     }
 
     if (!folio) {
-      router.push(
-        `${urlBase}?numAcount=${numAcount}&error=Ingresa el folio del tiket`
-      );
-      return;
+      return setError("Ingresa el folio del ticket");
     }
 
     if (!amount) {
-      router.push(
-        `${urlBase}?numAcount=${numAcount}&error=coloca el monto a depositar`
-      );
-      return;
+      return setError("Coloca el monto a depositar");
     }
 
     if (!date) {
-      router.push(`${urlBase}?numAcount=${numAcount}&error=coloca la fecha`);
-      return;
+      return setError("Coloca la fecha");
     }
 
     try {
@@ -67,10 +64,11 @@ function Receipt({ urlBase, numAcount }: ReceiptsProps) {
       setAmount("");
       setDate("");
 
-      router.push(`${urlBase}?numAcount=${numAcount}&success=Recibo guardado`);
+      params.delete("error");
+      params.set("success", "Recibo guardado");
+      router.push(`${currentUrl}&${params.toString()}`);
     } catch (err: any) {
-      console.error(err);
-      router.push(`${urlBase}?numAcount=${numAcount}&error=${err}`);
+      setError(String(err));
     }
   };
 
@@ -113,9 +111,10 @@ function Receipt({ urlBase, numAcount }: ReceiptsProps) {
                 if (value === "" || numericValue <= 1000) {
                   setAmount(value);
                 } else {
-                  router.push(
-                    `${urlBase}?numAcount=${numAcount}&error=El monto no puede superar $1000.00`
-                  );
+                  const currentUrl = new URL(window.location.href);
+                  const params = new URLSearchParams();
+                  params.set("error", "El monto no puede superar $1000.00");
+                  router.push(`${currentUrl}&${params.toString()}`);
                 }
               }
             }}