added toust and cleaned code

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>
-  );
-}