Merge pull request #288 from terryjung0244/feat/issue-225-Maintenance-page

Feat/issue 225 maintenance page

Client/src/App.jsx

@@ -18,6 +18,7 @@ import CheckEmail from "./Pages/CheckEmail";
 import SetNewPassword from "./Pages/SetNewPassword";
 import NewPasswordConfirmed from "./Pages/NewPasswordConfirmed";
 import ProtectedRoute from "./Components/ProtectedRoute";
+import Maintenance from "./Pages/Maintenance";
 
 function App() {
   return (
@@ -49,6 +50,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

@@ -5,6 +5,7 @@ import Monitors from "../../assets/Images/Icon-monitor-gray.png";
 import Incidents from "../../assets/Images/Icon-warning-gray.png";
 import SensorsIcon from "../../assets/Images/Icon-signal-gray.png";
 import AllInclusiveIcon from "../../assets/Images/Icon-link-gray.png";
+import MaintenanceIcon from "../../assets/Images/Icon-maintenance-gray.png";
 import SettingsIcon from "../../assets/Images/Icon-setting-gray.png";
 import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
@@ -62,6 +63,13 @@ function DashboardMenu() {
         activeButton === "/integrations",
         () => handleClick(pathMap["/integrations"], "/integrations")
       )}
+      {DashboardMenuButton(
+        MaintenanceIcon,
+        "Maintenance",
+        "/maintenance",
+        activeButton === "/maintenance",
+        () => handleClick(pathMap["/maintenance"], "/maintenance")
+      )}
       {DashboardMenuButton(
         SettingsIcon,
         "Settings",

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/Pages/Status/index.jsx

@@ -1,9 +1,7 @@
-import React from 'react'
+import React from "react";
 
 const Status = () => {
-    return (
-        <div>Status</div>
-    )
-}
+  return <div>Status</div>;
+};
 
-export default Status
+export default Status;

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;

Client/src/assets/Images/maintenance_window_frame.svg

@@ -0,0 +1,9 @@
+<svg width="256" height="136" viewBox="0 0 256 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.390244" y="0.390244" width="255.22" height="135.22" rx="7.41463" fill="white"/>
+<rect x="0.390244" y="0.390244" width="255.22" height="135.22" rx="7.41463" stroke="#EBEBEB" stroke-width="0.780488"/>
+<rect x="17.9512" y="16.3901" width="220.098" height="54.6341" rx="3.12195" fill="#EFF2FF"/>
+<rect x="17.9512" y="78.8293" width="85.0732" height="9.36585" rx="3.12195" fill="#D9D9D9"/>
+<rect x="111" y="79" width="127" height="9" rx="3.12195" fill="#F3F3F3"/>
+<rect width="85" height="9" rx="3.12195" transform="matrix(-1 0 0 1 238 98)" fill="#D9D9D9"/>
+<rect width="127" height="9" rx="3.12195" transform="matrix(-1 0 0 1 145 98)" fill="#F3F3F3"/>
+</svg>