1. Added route setup for the maintenance page in App.jsx.

2. Added a dashboard menu button for the maintenance page in DashboardMenu.
3. Moved content with CSS from the Incidents page to the Maintenance page.
4. Updated pathMap in PathMap.js to include the maintenance route.

Client/src/App.jsx

@@ -17,6 +17,7 @@ import SetNewPassword from "./Pages/SetNewPassword";
 import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
 import ToastComponent from "./Components/Toast";
 import ProtectedRoute from "./Components/ProtectedRoute";
+import Maintenance from "./Pages/Maintenance";
 
 function App() {
   return (
@@ -44,6 +45,10 @@ function App() {
             path="integrations"
             element={<ProtectedRoute Component={Integrations} />}
           />
+          <Route
+            path="maintenance"
+            element={<ProtectedRoute Component={Maintenance} />}
+          />
           <Route
             path="settings"
             element={<ProtectedRoute Component={Settings} />}

Client/src/Components/DashboardMenu/index.jsx

@@ -62,6 +62,13 @@ function DashboardMenu() {
         activeButton === "/integrations",
         () => handleClick(pathMap["/integrations"], "/integrations")
       )}
+      {DashboardMenuButton(
+        AllInclusiveIcon,
+        "Maintenance",
+        "/maintenance",
+        activeButton === "/maintenance",
+        () => handleClick(pathMap["/maintenance"], "/maintenance")
+      )}
       {DashboardMenuButton(
         SettingsIcon,
         "Settings",

Client/src/Pages/Incidents/index.css

@@ -1,36 +0,0 @@
-.maintenance-checklist-main {
-  max-width: 350px;
-  min-height: 390px;
-  margin: auto;
-  padding: 5px;
-}
-
-.maintenance-image {
-  width: 280px;
-  height: 150px;
-  background-color: whitesmoke;
-  border-radius: 10px;
-}
-
-.maintenance-title {
-  color: var(--env-var-color-2);
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 40px;
-  margin-bottom: 30px;
-}
-
-.checklist-item {
-  font-size: 13px;
-  color: var(--env-var-color-2);
-  display: flex;
-  margin-bottom: 10px;
-}
-
-.checklist-item-text {
-  margin-left: 10px;
-}
-
-.maintenance-checklist-main .maintenance-checklist-button {
-  margin-top: 30px;
-}

Client/src/Pages/Incidents/index.jsx

@@ -1,39 +1,7 @@
 import React from "react";
-import "./index.css";
-import WindowFrame from "./../../assets/Images/maintenance_window_frame.svg";
-import { Button } from "@mui/material";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 
 const Incidents = () => {
-  const maintenanceItems = [
-    { id: 1, text: "Mark your maintenance periods" },
-    { id: 2, text: "Eliminate any misunderstandings" },
-    { id: 3, text: "Stop sending alerts in maintenance windows" },
-  ];
-
-  return (
-    <div className="maintenance-checklist-main">
-      <img className="maintenance-image" src={WindowFrame} alt="WindowFrame" />
-      <div className="maintenance-title">Create a maintenance window to</div>
-      <div>
-        {maintenanceItems.map((item) => (
-          <div key={item.id} className="checklist-item">
-            <CheckCircleOutlineIcon color="primary" />
-            <div className="checklist-item-text">{item.text}</div>
-          </div>
-        ))}
-      </div>
-
-      <Button
-        variant="contained"
-        color="primary"
-        className="maintenance-checklist-button"
-        sx={{ textTransform: "none" }}
-      >
-        Let&apos;s create your maintenance window
-      </Button>
-    </div>
-  );
+  return <div>Incidents</div>;
 };
 
 export default Incidents;

Client/src/Pages/Maintenance/index.css

@@ -0,0 +1,36 @@
+.maintenance-checklist-main {
+  max-width: 350px;
+  min-height: 390px;
+  margin: auto;
+  padding: 5px;
+}
+
+.maintenance-image {
+  width: 280px;
+  height: 150px;
+  background-color: whitesmoke;
+  border-radius: 10px;
+}
+
+.maintenance-title {
+  color: var(--env-var-color-2);
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 40px;
+  margin-bottom: 30px;
+}
+
+.checklist-item {
+  font-size: 13px;
+  color: var(--env-var-color-2);
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.checklist-item-text {
+  margin-left: 10px;
+}
+
+.maintenance-checklist-main .maintenance-checklist-button {
+  margin-top: 30px;
+}

Client/src/Pages/Maintenance/index.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import "./index.css";
+import WindowFrame from "./../../assets/Images/maintenance_window_frame.svg";
+import { Button } from "@mui/material";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+
+const Maintenance = () => {
+  const maintenanceItems = [
+    { id: 1, text: "Mark your maintenance periods" },
+    { id: 2, text: "Eliminate any misunderstandings" },
+    { id: 3, text: "Stop sending alerts in maintenance windows" },
+  ];
+
+  return (
+    <div className="maintenance-checklist-main">
+      <img className="maintenance-image" src={WindowFrame} alt="WindowFrame" />
+      <div className="maintenance-title">Create a maintenance window to</div>
+      <div>
+        {maintenanceItems.map((item) => (
+          <div key={item.id} className="checklist-item">
+            <CheckCircleOutlineIcon color="primary" />
+            <div className="checklist-item-text">{item.text}</div>
+          </div>
+        ))}
+      </div>
+
+      <Button
+        variant="contained"
+        color="primary"
+        className="maintenance-checklist-button"
+        sx={{ textTransform: "none" }}
+      >
+        Let&apos;s create your maintenance window
+      </Button>
+    </div>
+  );
+};
+
+export default Maintenance;

Client/src/Utils/PathMap.js

@@ -1,9 +1,10 @@
 const pathMap = {
-    "/monitors": "Monitors",
-    "/incidents": "Incidents",
-    "/status" : "Status Pages",
-    "/integrations": "Integrations",
-    "/settings" : "Settings"
-}
+  "/monitors": "Monitors",
+  "/incidents": "Incidents",
+  "/status": "Status Pages",
+  "/integrations": "Integrations",
+  "/maintenance": "maintenance",
+  "/settings": "Settings",
+};
 
-export default pathMap;
+export default pathMap;