Resolved conflicts

Client/src/App.jsx

@@ -24,6 +24,7 @@ import withAdminCheck from "./HOC/withAdminCheck";
 import Configure from "./Pages/Monitors/Configure";
 import PageSpeed from "./Pages/PageSpeed";
 import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed";
+import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWindow";
 import PageSpeedDetails from "./Pages/PageSpeed/Details";
 
 function App() {
@@ -70,6 +71,10 @@ function App() {
             path="maintenance"
             element={<ProtectedRoute Component={Maintenance} />}
           />
+          <Route
+            path="/maintenance/create"
+            element={<CreateNewMaintenanceWindow />}
+          />
           <Route
             path="settings"
             element={<ProtectedRoute Component={Settings} />}

Client/src/Components/BasicTable/index.jsx

@@ -135,7 +135,9 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
             {displayData.map((row) => {
               return (
                 <TableRow
-                  sx={{ cursor: row.handleClick ? "pointer" : "default" }}
+                  sx={{
+                    cursor: row.handleClick ? "pointer" : "default",
+                  }}
                   key={row.id}
                   onClick={row.handleClick ? row.handleClick : null}
                 >

Client/src/Components/Charts/ResponseTimeChart/index.jsx

@@ -8,7 +8,12 @@ const ResponseTimeChart = ({ checks = [] }) => {
   return (
     <div className="chart-container">
       <ResponsiveContainer width="100%" height="100%">
-        <BarChart width={150} height={40} data={normalizedChecks}>
+        <BarChart
+          width={150}
+          height={40}
+          data={normalizedChecks}
+          style={{ cursor: "pointer" }}
+        >
           <Bar maxBarSize={10} dataKey="responseTime">
             {normalizedChecks.map((check, index) => (
               <Cell

Client/src/Features/Auth/authSlice.js

@@ -61,7 +61,7 @@ export const update = createAsyncThunk(
       form.deleteProfileImage &&
         fd.append("deleteProfileImage", form.deleteProfileImage);
 
-      const res = await axiosInstance.post(`/auth/user/${user._id}`, fd, {
+      const res = await axiosInstance.put(`/auth/user/${user._id}`, fd, {
         headers: {
           Authorization: `Bearer ${token}`,
           "Content-Type": "multipart/form-data",
@@ -185,9 +185,7 @@ const handleForgotRejected = (state, action) => {
 const handleNewPasswordRejected = (state, action) => {
   state.isLoading = false;
   state.success = false;
-  state.msg = action.payload
-    ? action.payload.msg
-    : "Failed to reset password.";
+  state.msg = action.payload ? action.payload.msg : "Failed to reset password.";
 };
 
 const authSlice = createSlice({

Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js

@@ -77,9 +77,9 @@ export const updateUptimeMonitor = createAsyncThunk(
         name: monitor.name,
         description: monitor.description,
         interval: monitor.interval,
-        notifications: monitor.notifications
+        notifications: monitor.notifications,
       };
-      const res = await axiosInstance.post(
+      const res = await axiosInstance.put(
         `/monitors/edit/${monitor._id}`,
         updatedFields,
         {
@@ -104,16 +104,12 @@ export const deleteUptimeMonitor = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.post(
-        `/monitors/delete/${monitor._id}`,
-        {},
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-            "Content-Type": "application/json",
-          },
-        }
-      );
+      const res = await axiosInstance.delete(`/monitors/${monitor._id}`, {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+          "Content-Type": "application/json",
+        },
+      });
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css

@@ -0,0 +1,21 @@
+.maintenance-options > .MuiStack-root > .MuiStack-root.select-wrapper {
+  width: 380px;
+}
+
+.date-picker .MuiOutlinedInput-root,
+.time-picker .MuiOutlinedInput-root {
+  height: 34px;
+  font-size: var(--env-var-font-size-medium);
+}
+
+.date-picker .MuiOutlinedInput-root {
+  width: 140px;
+}
+
+.time-picker .MuiOutlinedInput-root {
+  width: 90px;
+}
+
+.MuiInputAdornment-outlined .MuiIconButton-root svg {
+  width: 20px;
+}

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx

@@ -0,0 +1,151 @@
+import { Box, Stack, Typography } from "@mui/material";
+import "./index.css";
+import React, { useState } from "react";
+import Button from "../../../Components/Button";
+import Back from "../../../assets/icons/left-arrow.svg?react";
+import Select from "../../../Components/Inputs/Select";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import dayjs from "dayjs";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
+
+const directory = {
+  title: "Create a maintenance window",
+  description: "Your pings won’t be sent in this time frame.",
+};
+
+const repeatOptions = [
+  { _id: 1, name: "Don't repeat" },
+  { _id: 2, name: "Repeat daily" },
+  { _id: 3, name: "Repeat weekly" },
+];
+
+const configOptionTitle = (title, description) => {
+  return (
+    <Stack width="40%" gap={1}>
+      <Typography
+        style={{
+          fontWeight: 600,
+          fontSize: "var(--env-var-font-size-medium)",
+        }}
+      >
+        {title}
+      </Typography>
+      {description && (
+        <Typography
+          style={{
+            fontSize: "var(--env-var-font-size-small)",
+          }}
+        >
+          {description}
+        </Typography>
+      )}
+    </Stack>
+  );
+};
+
+const CreateNewMaintenanceWindow = () => {
+  const [values, setValues] = useState({
+    repeat: 1,
+  });
+
+  const handleChange = (event, name) => {
+    const { value } = event.target;
+    setValues((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const configOptions = [
+    {
+      title: "Repeat",
+      component: (
+        <Select
+          onChange={(e) => handleChange(e, "repeat")}
+          id="repeat-mode"
+          items={repeatOptions}
+          value={values.repeat}
+        />
+      ),
+    },
+    {
+      title: "Date",
+      component: (
+        <LocalizationProvider
+          className="date-localization-provider"
+          dateAdapter={AdapterDayjs}
+        >
+          <DatePicker className="date-picker" defaultValue={dayjs()} />
+        </LocalizationProvider>
+      ),
+    },
+    {
+      title: "Start time",
+      description: "Your pings won’t be sent in this time frame.",
+      component: (
+        <LocalizationProvider
+          className="time-localization-provider"
+          dateAdapter={AdapterDayjs}
+        >
+          <MobileTimePicker className="time-picker" defaultValue={dayjs()} />
+        </LocalizationProvider>
+      ),
+    },
+  ];
+
+  return (
+    <div className="create-maintenance-window">
+      <Stack gap={3}>
+        <Button
+          id="btn-back"
+          sx={{
+            width: "100px",
+            height: "30px",
+            gap: "10px",
+            backgroundColor: "var(--env-var-color-32)",
+            color: "var(--env-var-color-5)",
+          }}
+          label="Back"
+          level="tertiary"
+          img={<Back />}
+        />
+        <Box>
+          <Typography
+            sx={{
+              fontSize: "var(--env-var-font-size-large)",
+              fontWeight: "600",
+              color: "var(--env-var-color-5)",
+            }}
+          >
+            {directory.title}
+          </Typography>
+
+          <Typography sx={{ fontSize: "var(--env-var-font-size-medium)" }}>
+            {directory.description}
+          </Typography>
+        </Box>
+        <Stack
+          gap={5}
+          paddingY={4}
+          paddingX={8}
+          sx={{
+            border: "1px solid var(--env-var-color-16)",
+            borderRadius: "var(--env-var-radius-1)",
+          }}
+          className="maintenance-options"
+        >
+          {configOptions.map((item, index) => (
+            <Stack key={index} display="-webkit-inline-box">
+              {configOptionTitle(item.title, item.description)}
+              {item.component && item.component}
+            </Stack>
+          ))}
+        </Stack>
+      </Stack>
+    </div>
+  );
+};
+
+export default CreateNewMaintenanceWindow;

Client/src/Pages/Maintenance/index.jsx

@@ -14,6 +14,7 @@ const Maintenance = () => {
           "Eliminate any misunderstandings",
           "Stop sending alerts in maintenance windows",
         ]}
+        link="/maintenance/create"
       />
     </div>
   );

Client/src/Pages/Monitors/index.jsx

@@ -41,7 +41,14 @@ import {
 const Host = ({ params }) => {
   return (
     <Stack direction="row" alignItems="center" className="host">
-      <a href={params.url} target="_blank" rel="noreferrer">
+      <a
+        href={params.url}
+        target="_blank"
+        rel="noreferrer"
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+      >
         <OpenInNewPage />
       </a>
       <Box>
@@ -64,6 +71,7 @@ const Monitors = () => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [actions, setActions] = useState({});
   const openMenu = (event, id, url) => {
+    event.preventDefault();
     setAnchorEl(event.currentTarget);
     setActions({ id: id, url: url });
   };
@@ -141,7 +149,7 @@ const Monitors = () => {
     return {
       id: monitor._id,
       // disabled for now
-      // handleClick: () => navigate(`/monitors/${monitor._id}`),
+      handleClick: () => navigate(`/monitors/${monitor._id}`),
       data: [
         { id: idx, data: <Host params={params} /> },
         {
@@ -167,7 +175,10 @@ const Monitors = () => {
             <>
               <IconButton
                 aria-label="monitor actions"
-                onClick={(event) => openMenu(event, monitor._id, monitor.url)}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  openMenu(event, monitor._id, monitor.url);
+                }}
                 sx={{
                   "&:focus": {
                     outline: "none",
@@ -231,7 +242,9 @@ const Monitors = () => {
         onClose={closeMenu}
       >
         <MenuItem
-          onClick={() => window.open(actions.url, "_blank", "noreferrer")}
+          onClick={() => {
+            window.open(actions.url, "_blank", "noreferrer");
+          }}
         >
           Open site
         </MenuItem>

Client/src/assets/icons/left-arrow.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

Client/src/index.css

@@ -50,6 +50,8 @@
   --env-var-color-28: #f79009;
   --env-var-color-29: #d0d5dd;
   --env-var-color-30: #fcfcfd;
+  --env-var-color-31: #1a1919;
+  --env-var-color-32: #f5f5f5;
 
   --env-var-radius-1: 4px;
   --env-var-radius-2: 8px;