From 1e5c0f05fb5693a7bbdde0d78ae317a606e46bd8 Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Mon, 22 Jul 2024 22:51:15 +0330
Subject: [PATCH] Error page implemented

---
 Client/src/App.jsx                |  2 +
 Client/src/Pages/Errors/index.css | 40 ++++++++++++++++++++
 Client/src/Pages/Errors/index.jsx | 63 +++++++++++++++++++++++++++++++
 3 files changed, 105 insertions(+)
 create mode 100644 Client/src/Pages/Errors/index.css
 create mode 100644 Client/src/Pages/Errors/index.jsx

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 0482aec5d..4d0b7a7ae 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -20,6 +20,7 @@ import Details from "./Pages/Monitors/Details";
 import Maintenance from "./Pages/Maintenance";
 import "react-toastify/dist/ReactToastify.css";
 import { ToastContainer } from "react-toastify";
+import ErrorPage from "./Pages/Errors";
 
 function App() {
   return (
@@ -89,6 +90,7 @@ function App() {
           path="/new-password-confirmed"
           element={<NewPasswordConfirmed />}
         />
+        <Route exact path="/error" element={<ErrorPage />} />
       </Routes>
       <ToastContainer />
     </>
diff --git a/Client/src/Pages/Errors/index.css b/Client/src/Pages/Errors/index.css
new file mode 100644
index 000000000..fef0d001d
--- /dev/null
+++ b/Client/src/Pages/Errors/index.css
@@ -0,0 +1,40 @@
+.error-page,
+.error-template,
+.error-title,
+.error-description {
+  justify-content: center;
+  align-items: center;
+}
+
+.error-page {
+  display: flex;
+  min-height: 100vh;
+}
+
+.error-template {
+  min-height: 170px;
+}
+
+.error-title,
+.error-description {
+  text-align: center;
+}
+
+.error-title {
+  font-size: var(--env-var-font-size-large);
+  color: var(--env-var-color-5);
+  font-weight: 600;
+}
+
+.error-description {
+  font-size: var(--env-var-font-size-medium);
+  font-weight: 500;
+}
+
+.error-page-gap-medium {
+  height: var(--env-var-spacing-2);
+}
+
+.error-page-gap-xlarge {
+  height: calc(var(--env-var-spacing-4) + var(--env-var-spacing-2));
+}
diff --git a/Client/src/Pages/Errors/index.jsx b/Client/src/Pages/Errors/index.jsx
new file mode 100644
index 000000000..afaadfe4a
--- /dev/null
+++ b/Client/src/Pages/Errors/index.jsx
@@ -0,0 +1,63 @@
+import Button from "../../Components/Button";
+import "./index.css";
+import React from "react";
+import PropTypes from "prop-types";
+
+/**
+ * Support for defaultProps will be removed from function components in a future major release
+ * So That why we're using JavaScript default parameters instead.
+ */
+const DefaultValue = {
+  title: "We cannot find this page",
+  desc: "Either the URL doesn’t exist, or you don’t have access to it.",
+};
+
+/**
+ * Renders an error page component with a customizable title and description.
+ *
+ * @component
+ * @example
+ * // Usage:
+ * <ErrorPage
+ *   title="Page Not Found"
+ *   desc="The requested page could not be found."
+ * />
+ *
+ * @param {Object} props - The component props.
+ * @param {string} [props.title="We cannot find this page"] - The title of the error page.
+ * @param {string} [props.desc="Either the URL doesn’t exist, or you don’t have access to it."] - The description of the error page.
+ * @returns {JSX.Element} The rendered error page component.
+ */
+const ErrorPage = ({
+  title = DefaultValue.title,
+  desc = DefaultValue.desc,
+}) => {
+  return (
+    <div className="error-page">
+      <div className="error-template">
+        <div className="error-title">{title}</div>
+        <div className="error-page-gap-medium"></div>
+        <div className="error-description">{desc}</div>
+        <div className="error-page-gap-xlarge"></div>
+        <div
+          className="button-container"
+          style={{ display: "flex", justifyContent: "center" }}
+        >
+          <Button
+            label="Go to the main dashboard"
+            level="primary"
+            id="error-page-action"
+            sx={{ fontSize: "var(--env-var-font-size-medium)" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ErrorPage.propTypes = {
+  title: PropTypes.string,
+  desc: PropTypes.string,
+};
+
+export default ErrorPage;