feat: v2 not found

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