[#62] Implement NotFoundPage

Replace NoMatch Component with NotFoundPage

src/Router.jsx

@@ -4,7 +4,7 @@ import HomePage from "./pages/Home/HomePage.jsx";
 import Executions from "./components/Executions.jsx";
 import ScriptsPage from "./pages/Script/ScriptsPage.jsx";
 import Dagre from "./components/dagre/Dagre.jsx";
-import NoMatch from "./components/NoMatch.jsx";
+import NotFoundPage from "./pages/Error/NotFoundPage.jsx";
 import Layout from "./layouts/Layout.jsx";
 
 const Router = () => {
@@ -16,7 +16,7 @@ const Router = () => {
           <Route path="scripts" element={<ScriptsPage />} />
           <Route path="executions" element={<Executions />} />
           <Route path="script" element={<Dagre />} />
-          <Route path="*" element={<NoMatch />} />
+          <Route path="*" element={<NotFoundPage />} />
         </Route>
       </Routes>
     </BrowserRouter>

src/pages/Error/NotFoundPage.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Typography, Button } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { SentimentDissatisfied } from "@mui/icons-material";
+import { useNavigate } from "react-router-dom";
+
+const NotFoundPage = () => {
+  const navigate = useNavigate();
+
+  const handleGoHome = () => {
+    navigate("/");
+  };
+
+  return (
+    <Grid
+      container
+      spacing={2}
+      direction="column"
+      alignItems="center"
+      justifyContent="center"
+      style={{ textAlign: "center" }}
+    >
+      <Grid item>
+        <SentimentDissatisfied style={{ fontSize: 100, color: "#f44336" }} />
+      </Grid>
+      <Grid item>
+        <Typography variant="h4" component="h1" gutterBottom>
+          Oops! Page Not Found
+        </Typography>
+        <Typography variant="body1" gutterBottom>
+          The page you are looking for does not exist.
+        </Typography>
+      </Grid>
+      <Grid item>
+        <Button variant="contained" color="primary" onClick={handleGoHome}>
+          Go to Home
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default NotFoundPage;