From 9b60e321258fca0c8e6385eddb20f47e90827dbe Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 9 Feb 2026 22:19:10 +0000 Subject: [PATCH 1/2] initial commit --- client/src/Pages/NotFound/index.jsx | 78 ----------------------------- client/src/Pages/NotFound/index.tsx | 62 +++++++++++++++++++++++ client/src/Routes/index.jsx | 24 +++++---- client/src/locales/en.json | 7 ++- 4 files changed, 83 insertions(+), 88 deletions(-) delete mode 100644 client/src/Pages/NotFound/index.jsx create mode 100644 client/src/Pages/NotFound/index.tsx diff --git a/client/src/Pages/NotFound/index.jsx b/client/src/Pages/NotFound/index.jsx deleted file mode 100644 index 27e3173b0..000000000 --- a/client/src/Pages/NotFound/index.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import PropTypes from "prop-types"; -import NotFoundSvg from "@/assets/Images/sushi_404.svg"; -import { Button, Stack, Typography } from "@mui/material"; -import { useNavigate } from "react-router-dom"; -import { useTheme } from "@emotion/react"; -import { useTranslation } from "react-i18next"; - -/** - * 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: "Oh no! You dropped your sushi!", - 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: - * - * - * @param {Object} props - The component props. - * @param {string} [props.title="Oh no! You dropped your sushi!"] - 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 NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => { - const navigate = useNavigate(); - const theme = useTheme(); - const { t } = useTranslation(); - - return ( - - - 404 - - {title} - - {desc} - - - - ); -}; - -NotFound.propTypes = { - title: PropTypes.string, - desc: PropTypes.string, -}; - -export default NotFound; diff --git a/client/src/Pages/NotFound/index.tsx b/client/src/Pages/NotFound/index.tsx new file mode 100644 index 000000000..9263a8d9c --- /dev/null +++ b/client/src/Pages/NotFound/index.tsx @@ -0,0 +1,62 @@ +import NotFoundSvg from "@/assets/Images/sushi_404.svg"; +import { Button } from "@/Components/v2/inputs"; +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; + +import { useNavigate } from "react-router-dom"; +import { useTheme } from "@mui/material"; +import { useTranslation } from "react-i18next"; + +interface NotFoundProps { + title: string; + desc: string; +} + +const NotFoundPage = ({ title, desc }: NotFoundProps) => { + const navigate = useNavigate(); + const theme = useTheme(); + const { t } = useTranslation(); + + if (!title || title === "") { + title = t("pages.notFound.title"); + } + + if (!desc || desc === "") { + desc = t("pages.notFound.subtitle"); + } + + return ( + + + 404 + + {title} + + {desc} + + + + ); +}; + +export default NotFoundPage; diff --git a/client/src/Routes/index.jsx b/client/src/Routes/index.jsx index 9f7238aa5..4711906c7 100644 --- a/client/src/Routes/index.jsx +++ b/client/src/Routes/index.jsx @@ -5,25 +5,25 @@ import { lightTheme, darkTheme } from "@/Utils/Theme/v2Theme"; import { useSelector } from "react-redux"; import { Navigate, Route, Routes as LibRoutes } from "react-router"; import HomeLayout from "@/Components/v1/Layouts/HomeLayout"; -import NotFound from "../Pages/NotFound/index.jsx"; +import NotFound from "@/Pages/NotFound"; // Auth -import AuthLogin from "../Pages/Auth/Login"; +import AuthLogin from "@/Pages/Auth/Login"; import AuthRegister from "@/Pages/Auth/Register"; import AuthForgotPassword from "@/Pages/Auth/Recovery"; import AuthSetNewPassword from "../Pages/Auth/SetNewPassword"; // Uptime -import Uptime from "../Pages/Uptime/Monitors"; -import UptimeDetails from "../Pages/Uptime/Details"; +import Uptime from "@/Pages/Uptime/Monitors"; +import UptimeDetails from "@/Pages/Uptime/Details"; // PageSpeed -import PageSpeed from "../Pages/PageSpeed/Monitors/index"; -import PageSpeedDetails from "../Pages/PageSpeed/Details/"; +import PageSpeed from "@/Pages/PageSpeed/Monitors/"; +import PageSpeedDetails from "@/Pages/PageSpeed/Details/"; // Infrastructure -import Infrastructure from "../Pages/Infrastructure/Monitors"; -import InfrastructureDetails from "../Pages/Infrastructure/Details/index"; +import Infrastructure from "@/Pages/Infrastructure/Monitors"; +import InfrastructureDetails from "@/Pages/Infrastructure/Details/index"; // Server Status import ServerUnreachable from "../Pages/ServerUnreachable.jsx"; @@ -442,7 +442,13 @@ const Routes = () => { /> } + element={ + <> + + + + + } /> ); diff --git a/client/src/locales/en.json b/client/src/locales/en.json index 35132ce6c..cbd9ea7b7 100644 --- a/client/src/locales/en.json +++ b/client/src/locales/en.json @@ -221,7 +221,8 @@ "test": "Test", "testNotifications": "Test notifications", "toggleTheme": "Toggles light & dark", - "flushQueue": "Flush queue" + "flushQueue": "Flush queue", + "notFound": "Go to the main dashboard" }, "charts": { "labels": { @@ -550,6 +551,10 @@ "now": "Now", "os": "OS", "pages": { + "notFound": { + "title": "Oh no! You dropped your sushi!", + "subtitle": "Either the URL doesn’t exist, or you don’t have access to it." + }, "account": { "tabs": { "profile": "Profile", From 06c571d89fd34c3d27bbe8a112c15b9722728e1b Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Mon, 9 Feb 2026 22:22:01 +0000 Subject: [PATCH 2/2] img -> box --- client/src/Pages/NotFound/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/client/src/Pages/NotFound/index.tsx b/client/src/Pages/NotFound/index.tsx index 9263a8d9c..709f808be 100644 --- a/client/src/Pages/NotFound/index.tsx +++ b/client/src/Pages/NotFound/index.tsx @@ -1,5 +1,6 @@ import NotFoundSvg from "@/assets/Images/sushi_404.svg"; import { Button } from "@/Components/v2/inputs"; +import Box from "@mui/material/Box"; import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; @@ -34,10 +35,11 @@ const NotFoundPage = ({ title, desc }: NotFoundProps) => { gap={theme.spacing(2)} alignItems="center" > - 404