Merge pull request #3265 from bluewave-labs/feat/v2-not-found

feat: v2 not found

client/src/Pages/NotFound/index.jsx

@@ -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:
- * <ErrorPage
- *   title="Page Not Found"
- *   desc="The requested page could not be found."
- * />
- *
- * @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 (
-		<Stack
-			height="100vh"
-			justifyContent="center"
-		>
-			<Stack
-				gap={theme.spacing(2)}
-				alignItems="center"
-			>
-				<img
-					src={NotFoundSvg}
-					alt="404"
-					style={{ maxHeight: "25rem" }}
-				/>
-				<Typography
-					component="h1"
-					variant="h1"
-					fontSize={16}
-				>
-					{title}
-				</Typography>
-				<Typography variant="body1">{desc}</Typography>
-				<Button
-					variant="contained"
-					color="accent"
-					sx={{ mt: theme.spacing(10) }}
-					onClick={() => navigate("/")}
-				>
-					{t("notFoundButton")}
-				</Button>
-			</Stack>
-		</Stack>
-	);
-};
-
-NotFound.propTypes = {
-	title: PropTypes.string,
-	desc: PropTypes.string,
-};
-
-export default NotFound;

client/src/Pages/NotFound/index.tsx

@@ -0,0 +1,64 @@
+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";
+
+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 (
+		<Stack
+			height="100vh"
+			justifyContent="center"
+		>
+			<Stack
+				gap={theme.spacing(2)}
+				alignItems="center"
+			>
+				<Box
+					component="img"
+					src={NotFoundSvg}
+					alt="404"
+					maxHeight={"25rem"}
+				/>
+				<Typography
+					component="h1"
+					variant="h1"
+				>
+					{title}
+				</Typography>
+				<Typography variant="body1">{desc}</Typography>
+				<Button
+					variant="contained"
+					color="primary"
+					sx={{ mt: theme.spacing(10) }}
+					onClick={() => navigate("/")}
+				>
+					{t("common.buttons.notFound")}
+				</Button>
+			</Stack>
+		</Stack>
+	);
+};
+
+export default NotFoundPage;

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 = () => {
 			/>
 			<Route
 				path="*"
-				element={<NotFound />}
+				element={
+					<>
+						<ThemeProvider theme={v2theme}>
+							<NotFound />
+						</ThemeProvider>
+					</>
+				}
 			/>
 		</LibRoutes>
 	);

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",