Moved CreateNewMonitor to its own directory as it is a page unto itself

Client/src/App.jsx

@@ -7,6 +7,7 @@ import HomeLayout from "./Layouts/HomeLayout";
 import Demo from "./Pages/Demo/Demo";
 import PlayGround from "./Pages/PlayGround/PlayGround";
 import Monitors from "./Pages/Monitors";
+import CreateNewMonitor from "./Pages/CreateNewMonitor";
 import Incidents from "./Pages/Incidents";
 import Status from "./Pages/Status";
 import Integrations from "./Pages/Integrations";
@@ -32,6 +33,10 @@ function App() {
             path="/monitors"
             element={<ProtectedRoute Component={Monitors} />}
           />
+          <Route
+            path="/monitors/create"
+            element={<ProtectedRoute Component={CreateNewMonitor} />}
+          />
           <Route
             path="incidents"
             element={<ProtectedRoute Component={Incidents} />}

Client/src/Pages/CreateNewMonitor/index.css

@@ -0,0 +1,83 @@
+.monitors,
+.new-monitor {
+  width: 70vw;
+  padding: 4vw;
+}
+
+.monitors-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.monitors-bar-title {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.monitors-stats {
+  display: flex;
+  gap: 24px;
+}
+
+.monitors-gaps-medium {
+  height: var(--env-var-spacing-2);
+}
+
+.monitors-gaps-small-plus {
+  height: var(--env-var-spacing-1-plus);
+}
+
+.new-monitor-header {
+  color: var(--env-var-color-1);
+  font-size: var(--env-var-font-size-large-plus);
+  font-weight: 600;
+}
+
+.service-check-list-title {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-medium);
+}
+
+.service-check-list-desc {
+  color: var(--env-var-color-25);
+  font-size: var(--env-var-font-size-small);
+}
+
+.host-status-box-text {
+  font-size: var(--env-var-font-size-medium);
+}
+
+.monitors-dropdown-holder {
+  padding-left: 30px;
+}
+
+#ports-list {
+  width: 172.92px;
+  height: 12px;
+  font-size: var(--env-var-font-size-small);
+  align-items: center;
+}
+
+.incident-notif-config-title,
+.adv-setting-title {
+  color: var(--env-var-color-5);
+  font-size: var(--env-var-font-size-medium);
+}
+
+.adv-setting-title {
+  font-weight: 500;
+}
+
+.config-box-inputs,
+.service-check-list,
+.incident-notif-config,
+.advanced-setting-config,
+.proxy-setting-config {
+  padding-right: 40px;
+}
+
+.monitors-create-button-holder {
+  display: flex;
+  justify-content: end;
+}

Client/src/Pages/Monitors/CurrentStats.jsx

@@ -3,6 +3,7 @@ import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import CurrentMonitors from "../../Components/CurrentMonitors";
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 /**
  * CurrentStats displays the current status of monitor
@@ -12,6 +13,7 @@ import { useSelector } from "react-redux";
  */
 
 const CurrentStats = ({ monitors }) => {
+  const navigate = useNavigate();
   const authState = useSelector((state) => state.auth);
   const up = monitors.reduce((acc, cur) => {
     if (cur.checks.length > 0) {
@@ -38,6 +40,9 @@ const CurrentStats = ({ monitors }) => {
         <Button
           level="primary"
           label="Create new monitor"
+          onClick={() => {
+            navigate("/monitors/create");
+          }}
           sx={{ padding: "10px 20px", fontSize: "13px" }}
         />
       </div>

Client/src/Pages/Monitors/index.jsx

@@ -1,4 +1,3 @@
-import CreateNewMonitor from "./CreateNewMonitor";
 import CurrentStats from "./CurrentStats";
 import "./index.css";
 import { useEffect } from "react";