added toust and cleaned code

app/(private)/ActivosMantenimiento/page.tsx

@@ -1,8 +1,6 @@
 import Areas from "@/app/Components/ActivosMantenimiento/Areas";
 import Mesas from "@/app/Components/ActivosMantenimiento/Mesas";
 import Equipos from "@/app/Components/Equipos/equipos";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 
@@ -10,30 +8,13 @@ export default async function Page(props: {
   searchParams?: Promise<{
     numAcount?: string;
     machine?: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const numAcount = params?.numAcount ? params.numAcount : null;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
-
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
 
       <h2 className="title">EQUIPOS ACTIVOS Y EN MANTENIMIENTO</h2>
 

app/(private)/AgregarTiempo/page.tsx

@@ -1,31 +1,27 @@
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Information from "@/app/Components/Global/Information/information";
 import Receipt from "@/app/Components/Receipt/Receipt";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
+import toast from "react-hot-toast";
 
 import { GetStudent } from "@/app/lib/getStudent";
 
 import "./addTime.css";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 
 export default async function Page(props: {
   searchParams?: Promise<{
     numAcount: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const numAcount = params?.numAcount ? params.numAcount : null;
-  const showSuccess = params?.success ? params.success : null;
-  let showError = params?.error ? params.error : null;
 
   let student: any = null;
   if (numAcount) {
     const result = await GetStudent(parseInt(numAcount));
 
     if (result.error) {
-      showError = "Alumno no encontrado";
+      toast.error("Alumno no encontrado");
+      return
     } else {
       student = result;
     }
@@ -33,25 +29,12 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
-
-      {showSuccess && (
-        <>
-          <AlertBox message="Recibo guardado correctamente" type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
 
       <h2 className="title"> AGREGAR TIEMPO </h2>
 
       <SearchUser value={numAcount} />
 
-      {student ? (
+      {student && (
         <>
           <Information NoCuenta={student.id_cuenta} Nombre={student.nombre} />
 
@@ -59,8 +42,6 @@ export default async function Page(props: {
             <Receipt numAcount={student.id_cuenta} />
           </div>
         </>
-      ) : (
-        <></>
       )}
     </section>
   );

app/(private)/Alta/page.tsx

@@ -1,34 +1,14 @@
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
 import RegisterAlta from "@/app/Components/Alta/registerAlta";
 
 import "./style.css";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 
 export default async function Page(props: {
   searchParams?: Promise<{
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
-
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
-
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
 
       <h1 className="title">ALTA</h1>
 

app/(private)/AsignacionEquipo/page.tsx

@@ -1,5 +1,3 @@
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import { GetStudent } from "@/app/lib/getStudent";
@@ -11,15 +9,11 @@ export default async function Page(props: {
   searchParams?: Promise<{
     numAcount?: string;
     machine?: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const numAcount = params?.numAcount ? params.numAcount : null;
   const machine = params?.machine ? params.machine : null;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
   let student: any = null;
 
@@ -34,19 +28,7 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
 
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
 
       <h2 className="title"> ASIGNACION DE EQUIPOS </h2>
 

app/(private)/BitacoraSanciones/page.tsx

@@ -3,23 +3,17 @@ import BitacoraEquipo from "@/app/Components/BitacoraSanciones/BitacoraEquipo";
 import BitacoraMesas from "@/app/Components/BitacoraSanciones/BitacoraMesas";
 import Sanciones from "@/app/Components/BitacoraSanciones/Sanciones";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
 import { GetStudent } from "@/app/lib/getStudent";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 
 export default async function Page(props: {
   searchParams?: Promise<{
     key?: string;
     numAcount?: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const key = params?.key && params.key ;
   const numAcount = params?.numAcount ? params.numAcount : null;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
     let student: any = null;
   
@@ -34,19 +28,6 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
-
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
       
       <h2 className="title"> BITACORA Y SANCIONES </h2>
 

app/(private)/CambiarPass/page.tsx

@@ -1,32 +1,13 @@
 import ChangePassword from "@/app/Components/auth/ChangePassword/changePassword";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 
 export default async function Page(props: {
   searchParams?: Promise<{
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
-
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
       
       <h2 className="title"> Cambiar contraseña </h2>
 

app/(private)/Impresiones/page.tsx

@@ -2,33 +2,31 @@ import SearchUser from "../../Components/Global/SearchUser/searchUser";
 import Receipt from "../../Components/Receipt/Receipt";
 import Toggle from "../../Components/Global/Toggle/Toggle";
 import Information from "../../Components/Global/Information/information";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
 import Impressions from "@/app/Components/Impressions/impressions";
+import ShowError from "@/app/Components/Global/ShowError";
+
 import { GetStudent } from "@/app/lib/getStudent";
 
 import "@/app/globals.css";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 
 export default async function Page(props: {
   searchParams?: Promise<{
     key: string;
     numAcount: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const key = params?.key && params.key;
   const numAcount = params?.numAcount ? params.numAcount : null;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
   let student: any = null;
+  let errorMessage = "";
 
   if (numAcount) {
     const result = await GetStudent(parseInt(numAcount));
 
     if (result.error) {
+      errorMessage = `${result.error}`;
     } else {
       student = result;
     }
@@ -36,19 +34,8 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
 
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
+      {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
 
       <h2 className="title">IMPRESIONES Y PLOTEO</h2>
       <SearchUser value={numAcount} />

app/(private)/InformacionEquipo/page.tsx

@@ -1,40 +1,21 @@
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import Equipos from "@/app/Components/Equipos/equipos";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
 import ProgramSelector from "@/app/Components/InformacionEquipos/ProgramSelector";
 
 import "./informacionequipo.css";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 
 export default async function Page(props: {
   searchParams?: Promise<{
     key?:string;
     machine?: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const key = params?.key && params.key;
   const machine = params?.machine ? params.machine : null;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
-
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
 
       <h2 className="title"> INFORMACION DE EQUIPOS </h2>
 

app/(private)/Inscripcion/page.tsx

@@ -2,30 +2,26 @@ import SearchUser from "@/app/Components/Global/SearchUser/searchUser";
 import Information from "@/app/Components/Global/Information/information";
 import Receipt from "@/app/Components/Receipt/Receipt";
 import Selection from "@/app/Components/Selection/Selection";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 import { GetStudent } from "@/app/lib/getStudent";
 
 import "./inscripcion.css";
+import ShowError from "@/app/Components/Global/ShowError";
 
 export default async function Page(props: {
   searchParams?: Promise<{
     numAcount: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const numAcount = params?.numAcount ? params.numAcount : null;
-  const showSuccess = params?.success ? params.success : null;
-  let showError = params?.error ? params.error : null;
 
   let student: any = null;
+  let errorMessage = "";
   if (numAcount) {
     const result = await GetStudent(parseInt(numAcount));
 
     if (result.error) {
-      showError = "Alumno no encontrado";
+      errorMessage = `${result.error}`;
     } else {
       student = result;
     }
@@ -33,19 +29,8 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
-
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
+      
+      {errorMessage && <ShowError key={Date.now()} message={errorMessage} />}
 
       <h2 className="title"> INSCRIPCIÓN </h2>
 

app/(private)/Inscritos/page.tsx

@@ -1,33 +1,15 @@
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 
 export default async function Page(props: {
   searchParams?: Promise<{
     period: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const period = params?.period ? params.period : null;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
 
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
       <h2 className="title"> INSCRITOS </h2>
 
       <form className="containerForm">

app/(private)/Mensajes/page.tsx

@@ -1,35 +1,16 @@
 import EnviarMensaje from "@/app/Components/EviarMensaje/EnviarMensaje";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 
 export default async function Page(props: {
   searchParams?: Promise<{
     key:string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const key = params?.key && params.key ;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
   return (
     <section className="containerSection">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-          <ClearParams paramsToClear={["error"]} />
-        </>
-      )}
-
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-          <ClearParams paramsToClear={["success"]} />
-        </>
-      )}
 
       <h2 className="title">Enviar mensaje</h2>
 

app/(private)/Monitor/page.tsx

@@ -3,14 +3,10 @@ import styles from "./Page.module.css";
 export default async function Page(props: {
   searchParams?: Promise<{
     numAcount: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const numAcount = params?.numAcount ? params.numAcount : null;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
   return (
     <section className='containerSection'>

app/(private)/QuitarSancion/page.tsx

@@ -4,14 +4,10 @@ import QuitarSancion from "@/app/Components/QuitarSancion/QuitarSancion";
 export default async function Page(props: {
   searchParams?: Promise<{
     numAcount: string;
-    success?: string;
-    error?: string;
   }>;
 }) {
   const params = await props.searchParams;
   const numAcount = params?.numAcount ? params.numAcount : null;
-  const showSuccess = params?.success ? params.success : null;
-  const showError = params?.error ? params.error : null;
 
   return (
     <>

app/Components/ActivosMantenimiento/Areas.tsx

@@ -9,7 +9,7 @@ export default function Areas() {
   const [mantenimiento, setMantenimiento] = useState(false); // Checkbox Mantenimiento
   const [mensaje, setMensaje] = useState(""); // Mensaje dinámico
 
-  const handleActualizar = (e: React.FormEvent) => {
+  const handleActualizar = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!area) {

app/Components/ActivosMantenimiento/Equipos.tsx

@@ -6,7 +6,7 @@ function Equipos() {
   const [tiempo, setTiempo] = useState("");
   const [mensaje, setMensaje] = useState("");
 
-  const handleBuscar = (e: React.FormEvent) => {
+  const handleBuscar = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!cuenta) {
       setMensaje("Ingresa un número de cuenta antes de buscar");
@@ -15,7 +15,7 @@ function Equipos() {
     setMensaje(`Buscando información del No. de cuenta: ${cuenta}`);
   };
 
-  const handleAsignar = (e: React.FormEvent) => {
+  const handleAsignar = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!tiempo) {
       setMensaje("Selecciona un equipo antes de asignar");

app/Components/ActivosMantenimiento/Mesas.tsx

@@ -8,7 +8,7 @@ function Mesas() {
   const [mantenimiento, setMantenimiento] = useState(false); // Checkbox Mantenimiento
   const [mensaje, setMensaje] = useState(""); // Mensaje dinámico
 
-  const handleConfirmar = (e: React.FormEvent) => {
+  const handleConfirmar = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (!mesa) {

app/Components/EviarMensaje/EnviarMensaje.tsx

@@ -12,7 +12,7 @@ const EnviarMensaje = ({ titulo, opciones }: EnviarMensajeProps) => {
   const [mensaje, setMensaje] = useState("");
   const [customMsg, setCustomMsg] = useState("");
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     // Aquí puedes manejar el envío (guardar en estado global, enviar a backend, etc.)
   };

app/Components/Global/AlertBox/AlertBox.css

@@ -1,57 +0,0 @@
-@keyframes slideInLeft {
-  0% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-  100% {
-    opacity: 0.9;
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideOutRight {
-  0% {
-    opacity: 0.9;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-
-.messageBox {
-  display: flex;
-  position: absolute;
-  padding: 0.5rem 1.25rem;
-  border-radius: 0 4px 4px 0;
-  font-weight: bold;
-  font-size: 2rem;
-  text-align: center;
-  z-index: 100;
-  top: 0;
-  left: 0;
-  max-width: 500px;
-  max-height: min-content;
-  opacity: 0;
-}
-
-.messageBox:not(.hidden) {
-  animation: slideInLeft 0.5s ease forwards;
-}
-
-.messageBox.hidden {
-  animation: slideOutRight 0.5s ease forwards;
-}
-
-.success {
-  background-color: #d1f7c4;
-  color: #000000;
-  border: 1px solid #a5d6a7;
-}
-
-.error {
-  background-color: #ffcdd2;
-  color: #000000;
-  border: 1px solid #ef9a9a;
-}

app/Components/Global/AlertBox/AlertBox.tsx

@@ -1,42 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import "./AlertBox.css";
-import ClearParams from "../ClearParams/ClearParams";
-
-interface AlertBoxProps {
-  message: string | null;
-  type: "error" | "success";
-  duration?: number;
-}
-
-export default function AlertBox({
-  message,
-  type,
-  duration = 6000,
-}: AlertBoxProps) {
-  const [visible, setVisible] = useState(false);
-  const [text, setText] = useState("");
-
-  useEffect(() => {
-    if (message) {
-      setText(message);
-      setVisible(true);
-
-      const timeout = setTimeout(() => {
-        setVisible(false);
-        setTimeout(() => setText(""), 500);
-      }, duration);
-
-      return () => clearTimeout(timeout);
-    }
-  }, [message, duration]);
-
-  if (!text) return null;
-
-  return (
-    <div className={`messageBox ${type} ${!visible ? "hidden" : ""}`}>
-      {text}
-    </div>
-  );
-}

app/Components/Global/ClearParams/ClearParams.tsx

@@ -1,28 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-
-interface ClearParamsProps {
-  paramsToClear: string[];
-}
-
-export default function ClearParams({ paramsToClear }: ClearParamsProps) {
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const url = new URL(window.location.href);
-    let changed = false;
-
-    paramsToClear.forEach((param) => {
-      if (url.searchParams.has(param)) {
-        url.searchParams.delete(param);
-        changed = true;
-      }
-    });
-
-    if (changed) {
-      window.history.replaceState({}, "", url.toString());
-    }
-  }, [paramsToClear]);
-
-  return null;
-}

app/Components/Global/FormHandle.tsx

@@ -1,40 +0,0 @@
-"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/Global/SearchUser/searchUser.tsx

@@ -19,11 +19,10 @@ function SearchUser(props: urlProp) {
     }
   }, [props.value]);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const params = new URLSearchParams(searchParams.toString());
     if (numAcount) {
-      params.delete("error");
       params.set("numAcount", `${numAcount}`);
       router.push(`${pathname}?${params.toString()}`);
     }

app/Components/Global/ShowError.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useEffect } from "react";
+import toast from "react-hot-toast";
+
+export default function ShowError({ message }: { message: string }) {
+  useEffect(() => {
+    if (message) {
+      toast.error(message);
+    }
+  }, [message]);
+
+  return null;
+}

app/Components/Global/visual/GlobalAlert.tsx

@@ -1,36 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import AlertBox from "@/app/Components/Global/AlertBox/AlertBox";
-import ClearParams from "@/app/Components/Global/ClearParams/ClearParams";
-import { useSearchParams } from "next/navigation";
-
-export default function GlobalAlert() {
-  const searchParams = useSearchParams();
-  const [showSuccess, setShowSuccess] = useState<string | null>(null);
-  const [showError, setShowError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const success = searchParams.get("success");
-    const error = searchParams.get("error");
-
-    if (success) setShowSuccess(success);
-    if (error) setShowError(error);
-  }, []);
-
-  return (
-    <section className="containerAlerts">
-      {showError && (
-        <>
-          <AlertBox key={Date.now()} message={showError} type="error" />
-        </>
-      )}
-
-      {showSuccess && (
-        <>
-          <AlertBox key={Date.now()} message={showSuccess} type="success" />
-        </>
-      )}
-    </section>
-  );
-}

app/Components/Impressions/impressions.tsx

@@ -4,6 +4,7 @@ import Cookies from "js-cookie";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { PostImpressions } from "@/app/lib/postImpressions";
+import toast from "react-hot-toast";
 
 interface CostOption {
   value: number;
@@ -27,24 +28,19 @@ 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) {
-      return setError("busca de nuevo al estudiante");
+      toast.error("busca de nuevo al estudiante");
+      return;
     }
 
     if (!pages) {
-      return setError("Ingresa el numero de hojas a imprimir");
+      toast.error("Ingresa el numero de hojas a imprimir");
+      return;
     }
 
     if (!cost) {
-      return setError("Selecciona un costo");
+      toast.error("Selecciona un costo");
+      return;
     }
 
     const result = await PostImpressions({
@@ -56,16 +52,15 @@ function Impressions({ costs, numAcount }: ImpressionsProps) {
     if (result.error) {
       if (result.error === "Token inválido") handleLogout();
       else {
-        return setError(`Error: ${result.error}`);
+        toast.error(result.error);
+        return;
       }
       return;
     }
 
     setPages("");
     setCost("");
-    params.delete("error");
-    params.set("success", "Impresion cobrada correctamente");
-    router.push(`${currentUrl}&${params.toString()}`);
+    toast.success("Impresion cobrada correctamente");
   };
 
   return (

app/Components/Receipt/Receipt.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import toast from "react-hot-toast";
 import { useState } from "react";
 import { PostReceipt } from "@/app/lib/postReceipt";
 import { useRouter } from "next/navigation";
@@ -28,28 +29,25 @@ function Receipt({ 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) {
-      return setError("busca de nuevo al estudiante");
+      toast.error("busca de nuevo al estudiante");
+      return;
     }
 
     if (!folio) {
-      return setError("Ingresa el folio del ticket");
+      toast.error("Ingresa el folio del ticket");
+      return;
     }
 
     if (!amount) {
-      return setError("Coloca el monto a depositar");
+      toast.error("Coloca el monto a depositar");
+      return;
     }
 
     if (!date) {
-      return setError("Coloca la fecha");
+      toast.error("Coloca la fecha");
+      return;
     }
 
     try {
@@ -64,11 +62,9 @@ function Receipt({ numAcount }: ReceiptsProps) {
       setAmount("");
       setDate("");
 
-      params.delete("error");
-      params.set("success", "Recibo guardado");
-      router.push(`${currentUrl}&${params.toString()}`);
+      toast.success("Recibo guardado");
     } catch (err: any) {
-      setError(String(err));
+      toast.error(String(err));
     }
   };
 
@@ -111,10 +107,7 @@ function Receipt({ numAcount }: ReceiptsProps) {
                 if (value === "" || numericValue <= 1000) {
                   setAmount(value);
                 } else {
-                  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()}`);
+                  toast.error("El monto no puede superar $1000.00");
                 }
               }
             }}

app/Components/SearchDateBetween/SearchDateBetween.tsx

@@ -6,7 +6,7 @@ function SearchDateBetween() {
   const [startDate, setStartDate] = useState("");
   const [endDate, setEndDate] = useState("");
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     console.log("Fecha inicio:", startDate);
     console.log("Fecha fin:", endDate);

app/Components/auth/ChangePassword/changePassword.tsx

@@ -6,7 +6,7 @@ export default function ChangePassword() {
   const [newPass, setNewPass] = useState("");
   const [confirmNewPass, setconfirmNewPass] = useState("");
 
-  const handleChangePass = (e: React.FormEvent) => {
+  const handleChangePass = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault;
     const data = { pass, newPass, confirmNewPass };
     console.log(data);

app/Components/auth/Login/Login.tsx

@@ -3,24 +3,32 @@ import { useState } from "react";
 import { loginUser } from "@/app/lib/login";
 import { useRouter } from "next/navigation";
 
+import toast from "react-hot-toast";
 import "./Login.css";
-import AlertBox from "../../Global/AlertBox/AlertBox";
 
 function Login() {
   const [user, setUser] = useState("");
   const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [alert, setAlert] = useState("");
 
   const router = useRouter();
 
   const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    if (!user) {
+      toast.error("Coloca un usuario");
+      return;
+    }
+
+    if (!password) {
+      toast.error("Coloca una contraseña");
+      return;
+    }
+
     const data = await loginUser(user, password);
 
     if ("error" in data) {
-      setError(data.error);
+      toast.error(data.error);
     } else {
       const token = data.access_token;
       const payload = JSON.parse(atob(token.split(".")[1]));
@@ -29,7 +37,7 @@ function Login() {
       document.cookie = `token=${token}; path=/; SameSite=Strict`;
       document.cookie = `usuario=${usuario}; path=/; SameSite=Strict`;
 
-      setAlert("Inicio de sesión exitoso");
+      toast.success("Inicio de sesión exitoso");
       router.push("/Impresiones");
     }
   };
@@ -70,9 +78,6 @@ function Login() {
         >
           Iniciar sesión
         </button>
-
-        {error && <AlertBox message={error} type="error" />}
-        {alert && <AlertBox message={alert} type="success" />}
       </form>
     </section>
   );

app/Components/layout/ToastProvider.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Toaster } from "react-hot-toast";
+import React from "react";
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      {children}
+      <Toaster
+        toastOptions={{
+          style: {
+            padding: "16px",
+            fontSize: "16px",
+          },
+
+          error: {
+            duration: 6000,
+            style: {
+              fontSize: "1.5rem",
+              backgroundColor: "#fee2e2dd",
+              color: "#000000ff",
+              fontWeight: "600",
+              padding:"1.5rem"
+            },
+          },
+
+          success: {
+            duration: 6000,
+            style: {
+              fontSize: "1.5rem",
+              backgroundColor: "#d1fae5dd",
+              color: "#000000ff",
+              fontWeight: "600",
+              padding:"1.5rem"
+            },
+          },
+        }}
+        position="top-left"
+        reverseOrder={false}
+      />
+    </>
+  );
+}

app/layout.tsx

@@ -5,6 +5,7 @@ import Header from "./Components/layout/Header/Header";
 import Footer from "./Components/layout/Footer/Footer";
 
 import "./globals.css";
+import { ToastProvider } from "./Components/layout/ToastProvider";
 
 const poppins = Poppins({
   variable: "--font-poppins",
@@ -27,9 +28,11 @@ export default function RootLayout({
   return (
     <html lang="es">
       <body className={poppins.variable} suppressHydrationWarning>
-        <Header />
-        <main>{children}</main>
-        <Footer />
+        <ToastProvider>
+          <Header />
+          <main>{children}</main>
+          <Footer />
+        </ToastProvider>
       </body>
     </html>
   );

app/lib/getSanciones.ts

@@ -6,6 +6,7 @@ export async function GetSanciones(numAcount: number) {
     const response = await axios.get(
       `${envConfig.apiUrl}/alumno-sancion/${numAcount}`
     );
+
     return response.data;
   } catch (error: any) {
     const msg =
@@ -15,3 +16,4 @@ export async function GetSanciones(numAcount: number) {
     return { error: msg };
   }
 }
+//IO

package-lock.json

@@ -13,6 +13,7 @@
         "next": "^15.5.3",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "react-hot-toast": "^2.6.0",
         "react-icons": "^5.5.0"
       },
       "devDependencies": {
@@ -748,7 +749,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/delayed-stream": {
@@ -911,6 +911,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -1139,6 +1148,23 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.6.0.tgz",
+      "integrity": "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev --turbopack",
     "build": "next build",
-    "start": "next start", 
+    "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
@@ -14,6 +14,7 @@
     "next": "^15.5.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0"
   },
   "devDependencies": {