From dce377b5866475a9041ed7d3f5cd95b4ec3e69a5 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Wed, 24 Sep 2025 18:34:13 -0600
Subject: [PATCH] Modified Alerts

---
 app/(private)/Alta/page.tsx                   |  4 +-
 app/(private)/Impresiones/page.tsx            |  5 ++-
 app/(private)/Programas/page.tsx              |  4 +-
 app/Components/AlertBox/AlertBox.css          |  1 -
 .../ChangePassword/changePassword.tsx         |  2 +-
 app/Components/ClearParams/ClearParams.tsx    | 27 ++++++++++++++
 app/Components/visual/GlobalAlert.tsx         | 37 +++++++++++++++++++
 app/globals.css                               | 18 +++++++++
 app/layout.tsx                                |  3 +-
 9 files changed, 91 insertions(+), 10 deletions(-)
 create mode 100644 app/Components/ClearParams/ClearParams.tsx
 create mode 100644 app/Components/visual/GlobalAlert.tsx

diff --git a/app/(private)/Alta/page.tsx b/app/(private)/Alta/page.tsx
index dc08afd..54113ab 100644
--- a/app/(private)/Alta/page.tsx
+++ b/app/(private)/Alta/page.tsx
@@ -11,7 +11,7 @@ export default function Page() {
       <h1 className="title">ALTA</h1>
 
       <StepNavigator totalSteps={2} onFinish={() => console.log()}>
-        <form className="containerForm">
+        <form className="containerForm gap">
           <label className="label">No.Cuenta</label>
           <input
             type="text"
@@ -44,7 +44,7 @@ export default function Page() {
             placeholder="Coloca el apellido materno"
           />
         </form>
-        <form>
+        <form className="gap">
           <label className="label">Email</label>
           <input
             type="text"
diff --git a/app/(private)/Impresiones/page.tsx b/app/(private)/Impresiones/page.tsx
index 2a95fa9..c83e1cd 100644
--- a/app/(private)/Impresiones/page.tsx
+++ b/app/(private)/Impresiones/page.tsx
@@ -7,7 +7,6 @@ import AlertBox from "@/app/Components/AlertBox/AlertBox";
 import { GetStudent } from "@/app/lib/getStudent";
 
 import "@/app/globals.css";
-
 export default async function Page(props: {
   searchParams?: Promise<{
     numAcount: string;
@@ -34,7 +33,9 @@ export default async function Page(props: {
   return (
     <section className="containerSection">
       {showError && (
-        <AlertBox key={Date.now()} message={showError} type="error" />
+        <>
+          <AlertBox key={Date.now()} message={showError} type="error" />
+        </>
       )}
 
       {showSuccess && (
diff --git a/app/(private)/Programas/page.tsx b/app/(private)/Programas/page.tsx
index 3722faf..4477740 100644
--- a/app/(private)/Programas/page.tsx
+++ b/app/(private)/Programas/page.tsx
@@ -62,7 +62,7 @@ export default function Page() {
           <div className="margin">
             <button className="button buttonSearch">Guardar</button>
             <button
-              className={`button buttonSearch ${styleprograms.button}`}
+              className={`button buttonCancel ${styleprograms.button}`}
               onClick={handleCancelar}
             >
               Cancelar
@@ -79,7 +79,7 @@ export default function Page() {
           <div className="margin">
             <button className="button buttonSearch">Insertar</button>
             <button
-              className={`button buttonSearch ${styleprograms.button}`}
+              className={`button buttonCancel ${styleprograms.button}`}
               onClick={handleCancelar}
             >
               Cancelar
diff --git a/app/Components/AlertBox/AlertBox.css b/app/Components/AlertBox/AlertBox.css
index 894252f..cceac3f 100644
--- a/app/Components/AlertBox/AlertBox.css
+++ b/app/Components/AlertBox/AlertBox.css
@@ -1,4 +1,3 @@
-/* Animaciones */
 @keyframes slideInLeft {
   0% {
     opacity: 0;
diff --git a/app/Components/ChangePassword/changePassword.tsx b/app/Components/ChangePassword/changePassword.tsx
index 95b95a6..c02db53 100644
--- a/app/Components/ChangePassword/changePassword.tsx
+++ b/app/Components/ChangePassword/changePassword.tsx
@@ -61,7 +61,7 @@ export default function ChangePassword() {
           </button>
 
           <button
-            className="button buttonSearch"
+            className="button buttonCancel"
             style={{ maxWidth: "100%", width: "100%" }}
             type="submit"
           >
diff --git a/app/Components/ClearParams/ClearParams.tsx b/app/Components/ClearParams/ClearParams.tsx
new file mode 100644
index 0000000..fb9e4fb
--- /dev/null
+++ b/app/Components/ClearParams/ClearParams.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+
+interface ClearParamsProps {
+  paramsToClear: string[];
+}
+
+export default function ClearParams({ paramsToClear }: ClearParamsProps) {
+  useEffect(() => {
+    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;
+}
diff --git a/app/Components/visual/GlobalAlert.tsx b/app/Components/visual/GlobalAlert.tsx
new file mode 100644
index 0000000..5f97eef
--- /dev/null
+++ b/app/Components/visual/GlobalAlert.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import AlertBox from "@/app/Components/AlertBox/AlertBox";
+import ClearParams from "@/app/Components/ClearParams/ClearParams";
+
+export default function GlobalAlert() {
+  const [showSuccess, setShowSuccess] = useState<string | null>(null);
+  const [showError, setShowError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    const success = url.searchParams.get("success");
+    const error = url.searchParams.get("error");
+
+    if (success) setShowSuccess(success);
+    if (error) setShowError(error);
+  }, []);
+
+  return (
+    <section className="containerAlerts">
+      {showError && (
+        <>
+          <AlertBox key={Date.now()} message={showError} type="error" />
+          <ClearParams paramsToClear={["error"]} />
+        </>
+      )}
+
+      {showSuccess && (
+        <>
+          <AlertBox key={Date.now()} message={showSuccess} type="success" />
+          <ClearParams paramsToClear={["success"]} />
+        </>
+      )}
+    </section>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index cbd6271..e101602 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -26,6 +26,10 @@ body {
   overflow: hidden;
 }
 
+main {
+  position: relative;
+}
+
 header {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -215,6 +219,14 @@ button {
   background-color: #15803d;
 }
 
+.buttonCancel {
+  background-color: #d32f2f;
+}
+
+.buttonCancel:hover {
+  background-color: #d12020;
+}
+
 .absoluteButton {
   position: absolute;
   bottom: 1rem;
@@ -406,6 +418,12 @@ table tr {
   width: 300px;
 }
 
+.containerAlert {
+  position: absolute;
+  background-color: #003e79;
+  z-index: 10;
+}
+
 @media (max-width: 1330px) {
   .mainContainer {
     grid-template-rows: 60px 1fr;
diff --git a/app/layout.tsx b/app/layout.tsx
index fe7789d..5ad6218 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,10 +2,9 @@ import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 import Header from "./Components/Header/Header";
 import Footer from "./Components/Footer/Footer";
-import FallingSquares from "./Components/visual/FallingSquares/FallingSquares";
-import WavesBackground from "./Components/visual/Wave/wavesBack";
 
 import "./globals.css";
+import GlobalAlert from "./Components/visual/GlobalAlert";
 
 const poppins = Poppins({
   variable: "--font-poppins",