From 3f0695d7434110bb9eae67492d972e0f4fda2bb3 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 16 Aug 2024 15:26:26 -0700
Subject: [PATCH 01/72] Updated config monitor controller

---
 Server/controllers/monitorController.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Server/controllers/monitorController.js b/Server/controllers/monitorController.js
index ac4e92da7..37aff6c96 100644
--- a/Server/controllers/monitorController.js
+++ b/Server/controllers/monitorController.js
@@ -303,7 +303,8 @@ const editMonitor = async (req, res, next) => {
   }
 
   try {
-    const monitorBeforeEdit = await req.db.getMonitorById(req, res);
+    const { monitorId } = req.params;
+    const monitorBeforeEdit = await req.db.getMonitorById(monitorId);
 
     // Get notifications from the request body
     const notifications = req.body.notifications;

From 58a4921f64a8515eb08bb94cca27dc02823b77a8 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 16 Aug 2024 18:38:40 -0400
Subject: [PATCH 02/72] Updated color and font weights

---
 Client/src/Components/BasicTable/index.css            | 2 +-
 Client/src/Components/Charts/Servers/serverStatus.css | 5 +++--
 Client/src/Components/Sidebar/index.css               | 4 ++++
 Client/src/Components/Sidebar/index.jsx               | 2 +-
 Client/src/Pages/Monitors/index.css                   | 2 +-
 Client/src/Pages/Monitors/index.jsx                   | 2 +-
 Client/src/index.css                                  | 2 +-
 7 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 14adc440c..629c8dd7b 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -10,7 +10,7 @@
 }
 .MuiTable-root .host div:nth-child(2) {
   width: fit-content;
-  font-weight: 700;
+  font-weight: 500;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css
index dd15e3e9b..fcbf470aa 100644
--- a/Client/src/Components/Charts/Servers/serverStatus.css
+++ b/Client/src/Components/Charts/Servers/serverStatus.css
@@ -22,9 +22,10 @@
 
 .server-status-tile-title {
   font-size: var(--font-size-0);
-  font-weight: bold;
+  font-weight: 500;
   margin-bottom: calc(var(--spacing-general-1) / 2);
-  color: var(--env-var-color-1);
+  color: var(--env-var-color-5);
+  opacity: 0.6;
 }
 
 .server-status-tile-value {
diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 63c365742..36415438c 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -65,6 +65,10 @@ aside
   > .MuiListItemButton-root:last-child::before {
   height: 50%;
 }
+aside .MuiCollapse-wrapperInner .MuiList-root svg {
+  width: 18px;
+  height: 18px;
+}
 
 aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
   content: "";
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 1ab2171cb..159b01503 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -183,7 +183,7 @@ function Sidebar() {
                         key={child.path}
                         onClick={() => navigate(`/${child.path}`)}
                         sx={{
-                          gap: theme.gap.medium,
+                          gap: theme.gap.small,
                           borderRadius: `${theme.shape.borderRadius}px`,
                           pl: theme.gap.small,
                         }}
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index 7b40f7464..9e34ddf52 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -1,7 +1,7 @@
 .monitors h1.MuiTypography-root,
 .monitors h2.MuiTypography-root {
   color: var(--env-var-color-1);
-  font-weight: 600;
+  font-weight: 500;
 }
 .monitors h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index f8efd7fa3..b80e88f5a 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -52,7 +52,7 @@ const Host = ({ params }) => {
           "&:focus": {
             outline: "none",
           },
-          mr: "3px",
+          mr: "5px",
         }}
       >
         <OpenInNewPage
diff --git a/Client/src/index.css b/Client/src/index.css
index 58e26ed71..9cdf72003 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -22,7 +22,7 @@
   --env-var-font-familt-1: "Roboto", "Helvetica", "Arial", sans-serif;
 
   --env-var-color-0: #fff;
-  --env-var-color-1: #101828;
+  --env-var-color-1: #1c2130;
   --env-var-color-2: #475467;
   --env-var-color-2-light: #838c99;
   --env-var-color-3: #1570ef;

From da2ca13b39914e30e55ec6e4e60a3e5c0eb07676 Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Fri, 16 Aug 2024 19:12:58 -0400
Subject: [PATCH 03/72] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2d0db36fc..838b06a6c 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
 
 <p align="center"><strong>An open source server monitoring application</strong></p>
 
-![1](https://github.com/user-attachments/assets/207c74a0-a494-42c5-ab8d-3d7c1e7ead8a)
+![Dashboard](https://github.com/user-attachments/assets/0f92d7a3-19cf-430c-8b0f-fe13ff46c51b)
 
 BlueWave Uptime is an open source server monitoring application used to track the operational status and performance of servers and websites. It regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
 

From c711b75cd7e687493bdaa483dbec62c35821b66b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 16 Aug 2024 19:30:37 -0700
Subject: [PATCH 04/72] Moved title, changed default value

---
 Client/src/Pages/NotFound/index.jsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx
index 113f3fd34..68120b0a3 100644
--- a/Client/src/Pages/NotFound/index.jsx
+++ b/Client/src/Pages/NotFound/index.jsx
@@ -11,7 +11,7 @@ import NotFoundSvg from "../../../src/assets/Images/sushi_404.svg";
  * So That why we're using JavaScript default parameters instead.
  */
 const DefaultValue = {
-  title: "We cannot find this page",
+  title: "Oh no! You dropped your sushi!",
   desc: "Either the URL doesn’t exist, or you don’t have access to it.",
 };
 
@@ -27,7 +27,7 @@ const DefaultValue = {
  * />
  *
  * @param {Object} props - The component props.
- * @param {string} [props.title="We cannot find this page"] - The title of the error page.
+ * @param {string} [props.title="Oh no! You dropped your sushi!"] - The title of the error page.
  * @param {string} [props.desc="Either the URL doesn’t exist, or you don’t have access to it."] - The description of the error page.
  * @returns {JSX.Element} The rendered error page component.
  */
@@ -37,10 +37,9 @@ const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
   return (
     <Stack className="not-found-page" justifyContent="center">
       <Stack gap="20px" alignItems="center">
+        <img src={NotFoundSvg} alt="404" style={{ maxHeight: "25rem" }} />
         <Typography component="h1">{title}</Typography>
         <Typography>{desc}</Typography>
-        <img src={NotFoundSvg} alt="404" style={{ maxHeight: "25rem" }} />
-        <Typography>Oh no! You dropped your sushi!</Typography>
         <Button
           label="Go to the main dashboard"
           level="primary"

From ceb8985afbd3c4a6a8b3cec6f7ee972828edd06c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 17 Aug 2024 09:35:50 -0700
Subject: [PATCH 05/72] Refactored uptimeMonitorsSlice axios requests

---
 .../UptimeMonitors/uptimeMonitorsSlice.js     | 80 +++----------------
 Client/src/Utils/axiosConfig.js               | 51 ++++++++++++
 2 files changed, 64 insertions(+), 67 deletions(-)

diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 27d616e1e..1e8b895a1 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -13,32 +13,7 @@ export const createUptimeMonitor = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-
-      const res = await axiosInstance.post(`/monitors`, monitor, {
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-          "Content-Type": "application/json",
-        },
-      });
-      return res.data;
-    } catch (error) {
-      if (error.response && error.response.data) {
-        return thunkApi.rejectWithValue(error.response.data);
-      }
-      const payload = {
-        status: false,
-        msg: error.message ? error.message : "Unknown error",
-      };
-      return thunkApi.rejectWithValue(payload);
-    }
-  }
-);
-
-export const getUptimeMonitors = createAsyncThunk(
-  "monitors/getMonitors",
-  async (token, thunkApi) => {
-    try {
-      const res = await axiosInstance.get("/monitors");
+      const res = await axiosInstance.createMonitor(authToken, monitor);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -58,13 +33,13 @@ export const getUptimeMonitorsByUserId = createAsyncThunk(
   async (token, thunkApi) => {
     const user = jwtDecode(token);
     try {
-      const res = await axiosInstance.get(
-        `/monitors/user/${user._id}?limit=25&type=http&type=ping&sortOrder=desc&normalize=true`,
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        }
+      const res = await axiosInstance.getMonitorsByUserId(
+        token,
+        user._id,
+        25,
+        ["http", "ping"],
+        "desc",
+        true
       );
       return res.data;
     } catch (error) {
@@ -91,15 +66,10 @@ export const updateUptimeMonitor = createAsyncThunk(
         interval: monitor.interval,
         notifications: monitor.notifications,
       };
-      const res = await axiosInstance.put(
-        `/monitors/${monitor._id}`,
-        updatedFields,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-            "Content-Type": "application/json",
-          },
-        }
+      const res = await axiosInstance.updateMonitor(
+        authToken,
+        monitor._id,
+        updatedFields
       );
       return res.data;
     } catch (error) {
@@ -120,12 +90,7 @@ export const deleteUptimeMonitor = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.delete(`/monitors/${monitor._id}`, {
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-          "Content-Type": "application/json",
-        },
-      });
+      const res = await axiosInstance.deleteMonitorById(authToken, monitor._id);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -153,25 +118,6 @@ const uptimeMonitorsSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
-      // *****************************************************
-      // All Monitors
-      // *****************************************************
-      .addCase(getUptimeMonitors.pending, (state) => {
-        state.isLoading = true;
-      })
-      .addCase(getUptimeMonitors.fulfilled, (state, action) => {
-        state.isLoading = false;
-        state.success = action.payload.success;
-        state.msg = action.payload.msg;
-        state.monitors = action.payload.data;
-      })
-      .addCase(getUptimeMonitors.rejected, (state, action) => {
-        state.isLoading = false;
-        state.success = false;
-        state.msg = action.payload
-          ? action.payload.msg
-          : "Getting uptime monitors failed";
-      })
       // *****************************************************
       // Monitors by userId
       // *****************************************************
diff --git a/Client/src/Utils/axiosConfig.js b/Client/src/Utils/axiosConfig.js
index 8d3040028..ca895709a 100644
--- a/Client/src/Utils/axiosConfig.js
+++ b/Client/src/Utils/axiosConfig.js
@@ -24,4 +24,55 @@ axiosInstance.interceptors.response.use(
   }
 );
 
+// Create a new monitor
+axiosInstance.createMonitor = async (authToken, monitor) => {
+  return axiosInstance.post(`/monitors`, monitor, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+    },
+  });
+};
+
+// Get all uptime monitors for a user
+axiosInstance.getMonitorsByUserId = async (
+  authToken,
+  userId,
+  limit,
+  types,
+  sortOrder,
+  normalize
+) => {
+  const typeQuery = types.reduce((acc, type) => acc + `&type=${type}`, "");
+  return axiosInstance.get(
+    `/monitors/user/${userId}?limit=${limit}${typeQuery}&sortOrder=${sortOrder}&normalize=${normalize}`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    }
+  );
+};
+
+// Updates a single monitor
+axiosInstance.updateMonitor = async (authToken, monitorId, updatedFields) => {
+  return axiosInstance.put(`/monitors/${monitorId}`, updatedFields, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+    },
+  });
+};
+
+// Deletes a single monitor
+axiosInstance.deleteMonitorById = async (authToken, monitorId) => {
+  return axiosInstance.delete(`/monitors/${monitorId}`, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+    },
+  });
+};
+
 export default axiosInstance;

From 10fceb6ff1aaa78e4f4446e80abd608169d5aac9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 17 Aug 2024 09:50:52 -0700
Subject: [PATCH 06/72] refactord pagespeed slice

---
 .../PageSpeedMonitor/pageSpeedMonitorSlice.js | 81 ++++---------------
 Client/src/Utils/axiosConfig.js               | 27 ++++---
 2 files changed, 31 insertions(+), 77 deletions(-)

diff --git a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
index 6af825a37..9b3e7fa8c 100644
--- a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
+++ b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
@@ -13,32 +13,7 @@ export const createPageSpeed = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-
-      const res = await axiosInstance.post(`/monitors`, monitor, {
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-          "Content-Type": "application/json",
-        },
-      });
-      return res.data;
-    } catch (error) {
-      if (error.response && error.response.data) {
-        return thunkApi.rejectWithValue(error.response.data);
-      }
-      const payload = {
-        status: false,
-        msg: error.message ? error.message : "Unknown error",
-      };
-      return thunkApi.rejectWithValue(payload);
-    }
-  }
-);
-
-export const getPageSpeedMonitors = createAsyncThunk(
-  "pageSpeedMonitors/getPageSpeedMonitors",
-  async (token, thunkApi) => {
-    try {
-      const res = await axiosInstance.get("/monitors");
+      const res = await axiosInstance.createMonitor(authToken, monitor);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -58,14 +33,15 @@ export const getPageSpeedByUserId = createAsyncThunk(
   async (token, thunkApi) => {
     const user = jwtDecode(token);
     try {
-      const res = await axiosInstance.get(
-        `/monitors/user/${user._id}?limit=25&type=pagespeed&sortOrder=desc`,
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        }
+      const res = await axiosInstance.getMonitorsByUserId(
+        token,
+        user._id,
+        25,
+        ["pagespeed"],
+        "desc",
+        false
       );
+
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -91,15 +67,10 @@ export const updatePageSpeed = createAsyncThunk(
         interval: monitor.interval,
         // notifications: monitor.notifications,
       };
-      const res = await axiosInstance.put(
-        `/monitors/${monitor._id}`,
-        updatedFields,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-            "Content-Type": "application/json",
-          },
-        }
+      const res = await axiosInstance.updateMonitor(
+        authToken,
+        monitor._id,
+        updatedFields
       );
       return res.data;
     } catch (error) {
@@ -120,12 +91,7 @@ export const deletePageSpeed = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.delete(`/monitors/${monitor._id}`, {
-        headers: {
-          Authorization: `Bearer ${authToken}`,
-          "Content-Type": "application/json",
-        },
-      });
+      const res = await axiosInstance.deleteMonitorById(authToken, monitor._id);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -153,25 +119,6 @@ const pageSpeedMonitorSlice = createSlice({
   },
   extraReducers: (builder) => {
     builder
-      // *****************************************************
-      // All Monitors
-      // *****************************************************
-      .addCase(getPageSpeedMonitors.pending, (state) => {
-        state.isLoading = true;
-      })
-      .addCase(getPageSpeedMonitors.fulfilled, (state, action) => {
-        state.isLoading = false;
-        state.success = action.payload.success;
-        state.msg = action.payload.msg;
-        state.monitors = action.payload.data;
-      })
-      .addCase(getPageSpeedMonitors.rejected, (state, action) => {
-        state.isLoading = false;
-        state.success = false;
-        state.msg = action.payload
-          ? action.payload.msg
-          : "Getting montiors failed";
-      })
       // *****************************************************
       // Monitors by userId
       // *****************************************************
diff --git a/Client/src/Utils/axiosConfig.js b/Client/src/Utils/axiosConfig.js
index ca895709a..1d15c8ce1 100644
--- a/Client/src/Utils/axiosConfig.js
+++ b/Client/src/Utils/axiosConfig.js
@@ -43,16 +43,23 @@ axiosInstance.getMonitorsByUserId = async (
   sortOrder,
   normalize
 ) => {
-  const typeQuery = types.reduce((acc, type) => acc + `&type=${type}`, "");
-  return axiosInstance.get(
-    `/monitors/user/${userId}?limit=${limit}${typeQuery}&sortOrder=${sortOrder}&normalize=${normalize}`,
-    {
-      headers: {
-        Authorization: `Bearer ${authToken}`,
-        "Content-Type": "application/json",
-      },
-    }
-  );
+  const params = new URLSearchParams();
+
+  if (limit) params.append("limit", limit);
+  if (types) {
+    types.forEach((type) => {
+      params.append("type", type);
+    });
+  }
+  if (sortOrder) params.append("sortOrder", sortOrder);
+  if (normalize) params.append("normalize", normalize);
+
+  return axiosInstance.get(`/monitors/user/${userId}?${params.toString()}`, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+    },
+  });
 };
 
 // Updates a single monitor

From 744a967961e6e0949487ba7dead3897b025a359b Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 13:41:17 -0400
Subject: [PATCH 07/72] Implemented breadcrumbs component

---
 Client/src/Components/Breadcrumbs/index.css   | 31 ++++++++++++++
 Client/src/Components/Breadcrumbs/index.jsx   | 42 +++++++++++++++++++
 Client/src/Pages/Monitors/Configure/index.jsx | 23 ++++------
 Client/src/assets/icons/right-arrow.svg       |  3 ++
 4 files changed, 84 insertions(+), 15 deletions(-)
 create mode 100644 Client/src/Components/Breadcrumbs/index.css
 create mode 100644 Client/src/Components/Breadcrumbs/index.jsx
 create mode 100644 Client/src/assets/icons/right-arrow.svg

diff --git a/Client/src/Components/Breadcrumbs/index.css b/Client/src/Components/Breadcrumbs/index.css
new file mode 100644
index 000000000..28f75a4b4
--- /dev/null
+++ b/Client/src/Components/Breadcrumbs/index.css
@@ -0,0 +1,31 @@
+.MuiBreadcrumbs-root {
+  height: 36px;
+}
+.MuiBreadcrumbs-root svg {
+  width: 16px;
+  height: 16px;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li a {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
+  opacity: 0.8;
+  font-weight: 400;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li:hover a {
+  color: var(--env-var-color-2);
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child):hover a {
+  opacity: 1;
+  background-color: #e3e3e3;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child) {
+  cursor: pointer;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-li:last-child a {
+  font-weight: 600;
+  opacity: 1;
+  cursor: default;
+}
+.MuiBreadcrumbs-root .MuiBreadcrumbs-separator {
+  margin: 0;
+}
diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx
new file mode 100644
index 000000000..adaf6315b
--- /dev/null
+++ b/Client/src/Components/Breadcrumbs/index.jsx
@@ -0,0 +1,42 @@
+import { Box, Breadcrumbs as MUIBreadcrumbs } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useNavigate } from "react-router";
+import ArrowRight from "../../assets/icons/right-arrow.svg?react";
+
+import "./index.css";
+
+const Breadcrumbs = ({ list }) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+
+  return (
+    <MUIBreadcrumbs
+      separator={<ArrowRight />}
+      aria-label="breadcrumb"
+      p={theme.gap.small}
+      width="fit-content"
+      backgroundColor={theme.palette.otherColors.fillGray}
+      borderRadius={`${theme.shape.borderRadius}px`}
+      lineHeight="18px"
+    >
+      {list.map((item, index) => {
+        return (
+          <Box
+            component="a"
+            key={`${item.name}-${index}`}
+            px={theme.gap.small}
+            pt={theme.gap.xs}
+            pb="6px"
+            sx={{ textTransform: "capitalize" }}
+            borderRadius={`${theme.shape.borderRadius}px`}
+            onClick={() => navigate(item.path)}
+          >
+            {item.name}
+          </Box>
+        );
+      })}
+    </MUIBreadcrumbs>
+  );
+};
+
+export default Breadcrumbs;
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index 08c8cbe39..a572e9151 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -21,6 +21,7 @@ import {
   deleteUptimeMonitor,
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Checkbox from "../../../Components/Inputs/Checkbox";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 /**
  * Parses a URL string and returns a URL object.
@@ -220,20 +221,12 @@ const Configure = () => {
         <SkeletonLayout />
       ) : (
         <>
-          <Button
-            level="tertiary"
-            label="Back"
-            animate="slideLeft"
-            img={<WestRoundedIcon />}
-            onClick={() => navigate(-1)}
-            sx={{
-              backgroundColor: "#f4f4f4",
-              px: theme.gap.ml,
-              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.small,
-                fill: theme.palette.otherColors.slateGray,
-              },
-            }}
+          <Breadcrumbs
+            list={[
+              { name: "monitors", path: "/monitors" },
+              { name: "details", path: `/monitors/${monitorId}` },
+              { name: "configure", path: `/monitors/configure/${monitorId}` },
+            ]}
           />
           <form
             className="configure-monitor-form"
@@ -460,7 +453,7 @@ const Configure = () => {
           }}
         >
           <Typography id="modal-delete-monitor" component="h2">
-          Do you really want to delete this monitor?
+            Do you really want to delete this monitor?
           </Typography>
           <Typography id="delete-monitor-confirmation">
             Once deleted, this monitor cannot be retrieved.
diff --git a/Client/src/assets/icons/right-arrow.svg b/Client/src/assets/icons/right-arrow.svg
new file mode 100644
index 000000000..6b02062f2
--- /dev/null
+++ b/Client/src/assets/icons/right-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 18L15 12L9 6" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 540e639d3e75f5e9a10db6bf708d074bee28b2b7 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 13:42:36 -0400
Subject: [PATCH 08/72] Added docs

---
 Client/src/Components/Breadcrumbs/index.jsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx
index adaf6315b..506263fce 100644
--- a/Client/src/Components/Breadcrumbs/index.jsx
+++ b/Client/src/Components/Breadcrumbs/index.jsx
@@ -1,3 +1,4 @@
+import PropTypes from "prop-types";
 import { Box, Breadcrumbs as MUIBreadcrumbs } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router";
@@ -5,6 +6,17 @@ import ArrowRight from "../../assets/icons/right-arrow.svg?react";
 
 import "./index.css";
 
+/**
+ * Breadcrumbs component that displays a list of breadcrumb items.
+ *
+ * @param {Object} props
+ * @param {Array} props.list - Array of breadcrumb items. Each item should have `name` and `path` properties.
+ * @param {string} props.list.name - The name to display for the breadcrumb.
+ * @param {string} props.list.path - The path to navigate to when the breadcrumb is clicked.
+ *
+ * @returns {JSX.Element} The rendered Breadcrumbs component.
+ */
+
 const Breadcrumbs = ({ list }) => {
   const theme = useTheme();
   const navigate = useNavigate();
@@ -39,4 +51,13 @@ const Breadcrumbs = ({ list }) => {
   );
 };
 
+Breadcrumbs.propTypes = {
+  list: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      path: PropTypes.string.isRequired,
+    }).isRequired
+  ).isRequired,
+};
+
 export default Breadcrumbs;

From 41f975cdfa727564d0c2dc7e8892441f3840b492 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 17 Aug 2024 12:55:57 -0700
Subject: [PATCH 09/72] Add comment formatting

---
 Client/src/Utils/axiosConfig.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/Client/src/Utils/axiosConfig.js b/Client/src/Utils/axiosConfig.js
index 1d15c8ce1..5cbfc9e06 100644
--- a/Client/src/Utils/axiosConfig.js
+++ b/Client/src/Utils/axiosConfig.js
@@ -24,7 +24,9 @@ axiosInstance.interceptors.response.use(
   }
 );
 
+// **********************************
 // Create a new monitor
+// **********************************
 axiosInstance.createMonitor = async (authToken, monitor) => {
   return axiosInstance.post(`/monitors`, monitor, {
     headers: {
@@ -34,7 +36,9 @@ axiosInstance.createMonitor = async (authToken, monitor) => {
   });
 };
 
+// **********************************
 // Get all uptime monitors for a user
+// **********************************
 axiosInstance.getMonitorsByUserId = async (
   authToken,
   userId,
@@ -62,7 +66,9 @@ axiosInstance.getMonitorsByUserId = async (
   });
 };
 
+// **********************************
 // Updates a single monitor
+// **********************************
 axiosInstance.updateMonitor = async (authToken, monitorId, updatedFields) => {
   return axiosInstance.put(`/monitors/${monitorId}`, updatedFields, {
     headers: {
@@ -72,7 +78,9 @@ axiosInstance.updateMonitor = async (authToken, monitorId, updatedFields) => {
   });
 };
 
+// **********************************
 // Deletes a single monitor
+// **********************************
 axiosInstance.deleteMonitorById = async (authToken, monitorId) => {
   return axiosInstance.delete(`/monitors/${monitorId}`, {
     headers: {

From 46bd31776081511b791100dd5726f5a63840dc2a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 17 Aug 2024 13:03:24 -0700
Subject: [PATCH 10/72] Refactor register and login thunks

---
 Client/src/Features/Auth/authSlice.js |  4 ++--
 Client/src/Utils/axiosConfig.js       | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js
index 6da315fc4..e51d427ab 100644
--- a/Client/src/Features/Auth/authSlice.js
+++ b/Client/src/Features/Auth/authSlice.js
@@ -14,7 +14,7 @@ export const register = createAsyncThunk(
   "auth/register",
   async (form, thunkApi) => {
     try {
-      const res = await axiosInstance.post("/auth/register", form);
+      const res = await axiosInstance.registerUser(form);
       return res.data;
     } catch (error) {
       if (error.response.data) {
@@ -31,7 +31,7 @@ export const register = createAsyncThunk(
 
 export const login = createAsyncThunk("auth/login", async (form, thunkApi) => {
   try {
-    const res = await axiosInstance.post(`/auth/login`, form);
+    const res = await axiosInstance.loginUser(form);
     return res.data;
   } catch (error) {
     if (error.response && error.response.data) {
diff --git a/Client/src/Utils/axiosConfig.js b/Client/src/Utils/axiosConfig.js
index 5cbfc9e06..518af41e1 100644
--- a/Client/src/Utils/axiosConfig.js
+++ b/Client/src/Utils/axiosConfig.js
@@ -90,4 +90,18 @@ axiosInstance.deleteMonitorById = async (authToken, monitorId) => {
   });
 };
 
+// **********************************
+// Register a new user
+// **********************************
+axiosInstance.registerUser = async (form) => {
+  return axiosInstance.post(`/auth/register`, form);
+};
+
+// **********************************
+// Log in an exisiting user
+// **********************************
+axiosInstance.loginUser = async (form) => {
+  return axiosInstance.post(`/auth/login`, form);
+};
+
 export default axiosInstance;

From 031463f8c59afdb245ba7e56754fc59020db574f Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 17:14:18 -0400
Subject: [PATCH 11/72] Small changes to configure monitor page

---
 Client/src/Pages/Monitors/Configure/index.css | 24 +++---
 Client/src/Pages/Monitors/Configure/index.jsx | 75 +++++++------------
 Client/src/index.css                          |  2 +-
 3 files changed, 38 insertions(+), 63 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index ac9cd8a0d..ec140887c 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -23,8 +23,7 @@
   opacity: 0.6;
 }
 .configure-monitor h6.MuiTypography-root,
-.configure-monitor p.MuiTypography-root:has(span),
-.configure-monitor p.MuiTypography-root span.MuiTypography-root {
+.configure-monitor h1.MuiTypography-root + span.MuiTypography-root {
   font-size: var(--env-var-font-size-small-plus);
 }
 .configure-monitor button.MuiButtonBase-root {
@@ -33,19 +32,20 @@
 .configure-monitor button.MuiButtonBase-root {
   height: var(--env-var-height-2);
 }
-.configure-monitor button.MuiButtonBase-root:has(svg) {
-  line-height: 1;
-}
 .configure-monitor .config-box {
-  padding: var(--env-var-spacing-4) 50px;
-  padding-bottom: 60px;
   border: 1px solid var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
   background-color: var(--env-var-color-8);
 }
-.configure-monitor .config-box .MuiBox-root,
-.configure-monitor .config-box .MuiStack-root {
+.configure-monitor .config-box > .MuiBox-root,
+.configure-monitor .config-box > .MuiStack-root {
   flex: 1;
+  padding: 24px 30px;
+  padding-bottom: 40px;
+}
+.configure-monitor .config-box > *:first-child {
+  flex: 0.7;
+  border-right: solid 1px var(--env-var-color-16);
 }
 .configure-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
   position: relative;
@@ -72,12 +72,6 @@
   border-color: var(--env-var-color-29);
 }
 
-.configure-monitor-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--env-var-spacing-2);
-}
-
 body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root,
 .configure-monitor .select-wrapper .select-component > .MuiSelect-select {
   text-transform: lowercase;
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index a572e9151..c873482a9 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -5,15 +5,11 @@ import { useEffect, useState } from "react";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import { Box, Modal, Skeleton, Stack, Typography } from "@mui/material";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import { getLastChecked } from "../../../Utils/monitorUtils";
-import "./index.css";
 import { monitorValidation } from "../../../Validation/validation";
 import Select from "../../../Components/Inputs/Select";
-import { formatDurationRounded } from "../../../Utils/timeUtils";
 import { createToast } from "../../../Utils/toastUtils";
 import {
   updateUptimeMonitor,
@@ -22,6 +18,7 @@ import {
 } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import "./index.css";
 
 /**
  * Parses a URL string and returns a URL object.
@@ -97,7 +94,6 @@ const Configure = () => {
   const { user, authToken } = useSelector((state) => state.auth);
   const { monitors } = useSelector((state) => state.uptimeMonitors);
   const [monitor, setMonitor] = useState({});
-  const [duration, setDuration] = useState(0);
   const [errors, setErrors] = useState({});
   const { monitorId } = useParams();
 
@@ -118,7 +114,6 @@ const Configure = () => {
     setMonitor({
       ...data,
     });
-    setDuration(formatDurationRounded(data?.interval));
   }, [monitorId, authToken, monitors]);
 
   const handleChange = (event, name) => {
@@ -211,12 +206,10 @@ const Configure = () => {
   const parsedUrl = parseUrl(monitor?.url);
   const protocol = parsedUrl?.protocol?.replace(":", "") || "";
 
-  var lastChecked = formatDurationRounded(getLastChecked(monitor?.checks));
-
   let loading = Object.keys(monitor).length === 0;
 
   return (
-    <Box className="configure-monitor">
+    <Stack className="configure-monitor" gap={theme.gap.large}>
       {loading ? (
         <SkeletonLayout />
       ) : (
@@ -228,49 +221,39 @@ const Configure = () => {
               { name: "configure", path: `/monitors/configure/${monitorId}` },
             ]}
           />
-          <form
-            className="configure-monitor-form"
+          <Stack
+            component="form"
             noValidate
             spellCheck="false"
-            style={{
-              marginTop: theme.gap.medium,
-            }}
+            gap={theme.gap.large}
+            flex={1}
           >
-            <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+            <Stack direction="row" gap={theme.gap.small}>
               {monitor?.status ? <GreenCheck /> : <RedCheck />}
               <Box>
                 {parsedUrl?.host ? (
-                  <Typography
-                    component="h1"
-                    mb={theme.gap.small}
-                    sx={{ lineHeight: 1 }}
-                  >
+                  <Typography component="h1" mb={theme.gap.xs} lineHeight={1}>
                     {parsedUrl.host || "..."}
                   </Typography>
                 ) : (
                   ""
                 )}
-                <Typography lineHeight={parsedUrl?.host ? 1 : theme.gap.large}>
-                  <Typography
-                    component="span"
-                    sx={{
-                      color: monitor?.status
-                        ? "var(--env-var-color-17)"
-                        : "var(--env-var-color-24)",
-                    }}
-                  >
-                    Your site is {monitor?.status ? "up" : "down"}.
-                  </Typography>{" "}
-                  Checking every {duration}.{" "}
-                  {lastChecked ? `Last time checked ${lastChecked} ago.` : ""}
+                <Typography
+                  component="span"
+                  lineHeight={theme.gap.large}
+                  sx={{
+                    color: monitor?.status
+                      ? "var(--env-var-color-17)"
+                      : "var(--env-var-color-24)",
+                  }}
+                >
+                  Your site is {monitor?.status ? "up" : "down"}.
                 </Typography>
               </Box>
-              <Stack
-                direction="row"
-                gap={theme.gap.medium}
+              <Box
                 sx={{
-                  ml: "auto",
                   alignSelf: "flex-end",
+                  ml: "auto",
                 }}
               >
                 <Button
@@ -279,9 +262,10 @@ const Configure = () => {
                   animate="rotate180"
                   img={<PauseCircleOutlineIcon />}
                   sx={{
-                    backgroundColor: "#f4f4f4",
+                    backgroundColor: theme.palette.otherColors.fillGray,
                     pl: theme.gap.small,
                     pr: theme.gap.medium,
+                    mr: theme.gap.medium,
                     "& svg": {
                       mr: theme.gap.xs,
                     },
@@ -296,17 +280,16 @@ const Configure = () => {
                   }}
                   onClick={() => setIsOpen(true)}
                 />
-              </Stack>
+              </Box>
             </Stack>
             <Stack
               className="config-box"
               direction="row"
               justifyContent="space-between"
-              gap={theme.gap.xxl}
             >
               <Box>
                 <Typography component="h2">General settings</Typography>
-                <Typography component="p" sx={{ mt: theme.gap.small }}>
+                <Typography component="p" sx={{ mt: theme.gap.xs }}>
                   Here you can select the URL of the host, together with the
                   type of monitor.
                 </Typography>
@@ -338,11 +321,10 @@ const Configure = () => {
               className="config-box"
               direction="row"
               justifyContent="space-between"
-              gap={theme.gap.xxl}
             >
               <Box>
                 <Typography component="h2">Incident notifications</Typography>
-                <Typography component="p" mt={theme.gap.small}>
+                <Typography component="p" mt={theme.gap.xs}>
                   When there is an incident, notify users.
                 </Typography>
               </Box>
@@ -401,7 +383,6 @@ const Configure = () => {
               className="config-box"
               direction="row"
               justifyContent="space-between"
-              gap={theme.gap.xxl}
             >
               <Box>
                 <Typography component="h2">Advanced settings</Typography>
@@ -416,7 +397,7 @@ const Configure = () => {
                 />
               </Stack>
             </Stack>
-            <Stack direction="row" justifyContent="flex-end">
+            <Stack direction="row" justifyContent="flex-end" mt="auto">
               <Button
                 level="primary"
                 label="Save"
@@ -424,7 +405,7 @@ const Configure = () => {
                 onClick={handleSubmit}
               />
             </Stack>
-          </form>
+          </Stack>
         </>
       )}
       <Modal
@@ -473,7 +454,7 @@ const Configure = () => {
           </Stack>
         </Stack>
       </Modal>
-    </Box>
+    </Stack>
   );
 };
 
diff --git a/Client/src/index.css b/Client/src/index.css
index 9cdf72003..ae0f49e0c 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -67,7 +67,7 @@
   --env-var-width-2: 360px;
 
   --env-var-height-1: 100vh;
-  --env-var-height-2: 34px;
+  --env-var-height-2: 36px;
 
   --env-var-nav-bar-height: 70px;
   --env-var-side-bar-width: 250px;

From 2f50893ead3da50cebb683d2ea1e58258f490e5c Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 17:26:48 -0400
Subject: [PATCH 12/72] Added breadcrumbs to monitor details

---
 Client/src/Components/Breadcrumbs/index.css |  2 +-
 Client/src/Pages/Monitors/Details/index.jsx | 42 ++++++---------------
 Client/src/index.css                        |  4 ++
 3 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/Client/src/Components/Breadcrumbs/index.css b/Client/src/Components/Breadcrumbs/index.css
index 28f75a4b4..b7d190de1 100644
--- a/Client/src/Components/Breadcrumbs/index.css
+++ b/Client/src/Components/Breadcrumbs/index.css
@@ -22,7 +22,7 @@
   cursor: pointer;
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li:last-child a {
-  font-weight: 600;
+  font-weight: 500;
   opacity: 1;
   cursor: default;
 }
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 15cfd2c82..79fba3b6b 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -7,7 +7,6 @@ import axiosInstance from "../../../Utils/axiosConfig";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "../../../Components/Button";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
@@ -18,6 +17,7 @@ import {
 } from "../../../Utils/timeUtils";
 import "./index.css";
 import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails60MinChart";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 const StatBox = ({ title, value }) => {
   return (
@@ -163,39 +163,19 @@ const DetailsPage = () => {
         <SkeletonLayout />
       ) : (
         <>
-          <Button
-            level="tertiary"
-            label="Back"
-            animate="slideLeft"
-            img={<WestRoundedIcon />}
-            onClick={() => navigate("/monitors")}
-            sx={{
-              backgroundColor: theme.palette.otherColors.fillGray,
-              px: theme.gap.ml,
-              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.small,
-                fill: theme.palette.otherColors.slateGray,
-              },
-            }}
+          <Breadcrumbs
+            list={[
+              { name: "monitors", path: "/monitors" },
+              { name: "details", path: `/monitors/${monitorId}` },
+            ]}
           />
-          <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
-            <Stack
-              direction="row"
-              gap={theme.gap.small}
-              mt={theme.gap.small}
-              alignItems="baseline"
-            >
+          <Stack gap={theme.gap.large} mt={theme.gap.large}>
+            <Stack direction="row" gap={theme.gap.small}>
               {monitor?.status ? <GreenCheck /> : <RedCheck />}
               <Box>
-                <Stack direction="row">
-                  <Typography
-                    component="h1"
-                    sx={{ lineHeight: 1, alignSelf: "flex-end" }}
-                  >
-                    {monitor.url?.replace(/^https?:\/\//, "") || "..."}
-                  </Typography>
-                  <MonitorDetails60MinChart data={monitor.statusBar} />
-                </Stack>
+                <Typography component="h1" sx={{ lineHeight: 1 }}>
+                  {monitor.url?.replace(/^https?:\/\//, "") || "..."}
+                </Typography>
                 <Typography mt={theme.gap.small}>
                   <Typography
                     component="span"
diff --git a/Client/src/index.css b/Client/src/index.css
index ae0f49e0c..1c80b4dab 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -141,6 +141,10 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+.MuiInputBase-root.Mui-disabled input {
+  cursor: not-allowed;
+}
+
 .Toastify__toast-container {
   width: auto;
 }

From 14cf13fd8287526291958134eacf2d2d9d82e3a7 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 17:39:22 -0400
Subject: [PATCH 13/72] Added breadcrumbs to create monitor

---
 .../Pages/Monitors/CreateMonitor/index.css    | 23 ++++-----
 .../Pages/Monitors/CreateMonitor/index.jsx    | 51 ++++++++-----------
 2 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css
index 3fa38f14a..ecb27969c 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.css
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.css
@@ -13,7 +13,9 @@
 .create-monitor button.MuiButtonBase-root {
   font-size: var(--env-var-font-size-medium);
 }
-.create-monitor h2.MuiTypography-root,
+.create-monitor h2.MuiTypography-root {
+  color: var(--env-var-color-5);
+}
 .create-monitor h6.MuiTypography-root,
 .create-monitor p.MuiTypography-root {
   color: var(--env-var-color-2);
@@ -43,23 +45,20 @@
   top: 100%;
 }
 .create-monitor .config-box {
-  padding: var(--env-var-spacing-4) 50px;
-  padding-bottom: 60px;
+  flex-direction: row;
   border: 1px solid var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
-  flex-direction: row;
-  gap: var(--env-var-spacing-4);
   background-color: var(--env-var-color-8);
 }
-.create-monitor .config-box .MuiBox-root,
-.create-monitor .config-box .MuiStack-root {
+.create-monitor .config-box > .MuiBox-root,
+.create-monitor .config-box > .MuiStack-root {
   flex: 1;
+  padding: 24px 30px;
+  padding-bottom: 40px;
 }
-
-.create-monitor-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--env-var-spacing-2);
+.create-monitor .config-box > *:first-child {
+  flex: 0.7;
+  border-right: solid 1px var(--env-var-color-16);
 }
 
 .create-monitor .MuiStack-root .MuiButtonGroup-root button {
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index e4e3f4d1c..50496cde7 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -8,11 +8,11 @@ import { monitorValidation } from "../../../Validation/validation";
 import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import { createToast } from "../../../Utils/toastUtils";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 const CreateMonitor = () => {
   const MS_PER_MINUTE = 60000;
@@ -143,33 +143,26 @@ const CreateMonitor = () => {
 
   return (
     <Box className="create-monitor">
-      <Button
-        level="tertiary"
-        label="Back"
-        animate="slideLeft"
-        img={<WestRoundedIcon />}
-        onClick={() => navigate("/monitors")}
-        sx={{
-          backgroundColor: theme.palette.otherColors.fillGray,
-          mb: theme.gap.medium,
-          px: theme.gap.ml,
-          "& svg.MuiSvgIcon-root": {
-            mr: theme.gap.small,
-            fill: theme.palette.otherColors.slateGray,
-          },
-        }}
+      <Breadcrumbs
+        list={[
+          { name: "monitors", path: "/monitors" },
+          { name: "details", path: `/monitors/create` },
+        ]}
       />
-      <form
+      <Stack
+        component="form"
         className="create-monitor-form"
         onSubmit={handleCreateMonitor}
         noValidate
         spellCheck="false"
+        gap={theme.gap.large}
+        mt={theme.gap.mlplus}
       >
         <Typography component="h1">Create new monitor</Typography>
         <Stack className="config-box">
           <Box>
             <Typography component="h2">General settings</Typography>
-            <Typography component="p" mt={theme.gap.small}>
+            <Typography component="p" mt={theme.gap.xs}>
               Here you can select the URL of the host, together with the type of
               monitor.
             </Typography>
@@ -200,7 +193,7 @@ const CreateMonitor = () => {
         <Stack className="config-box">
           <Box>
             <Typography component="h2">Checks to perform</Typography>
-            <Typography component="p" mt={theme.gap.small}>
+            <Typography component="p" mt={theme.gap.xs}>
               You can always add or remove checks after adding your site.
             </Typography>
           </Box>
@@ -249,28 +242,26 @@ const CreateMonitor = () => {
               checked={monitor.type === "ping"}
               onChange={(event) => handleChange(event)}
             />
-            <Box className="error-container">
-              {errors["type"] ? (
+            {errors["type"] ? (
+              <Box className="error-container">
                 <Typography component="p" className="input-error">
                   {errors["type"]}
                 </Typography>
-              ) : (
-                ""
-              )}
-            </Box>
+              </Box>
+            ) : (
+              ""
+            )}
           </Stack>
         </Stack>
         <Stack className="config-box">
           <Box>
             <Typography component="h2">Incident notifications</Typography>
-            <Typography component="p" mt={theme.gap.small}>
+            <Typography component="p" mt={theme.gap.xs}>
               When there is an incident, notify users.
             </Typography>
           </Box>
           <Stack gap={theme.gap.medium}>
-            <Typography component="p" mt={theme.gap.small}>
-              When there is a new incident,
-            </Typography>
+            <Typography component="p">When there is a new incident,</Typography>
             <Checkbox
               id="notify-sms"
               label="Notify via SMS (coming soon)"
@@ -404,7 +395,7 @@ const CreateMonitor = () => {
             disabled={Object.keys(errors).length !== 0 && true}
           />
         </Stack>
-      </form>
+      </Stack>
     </Box>
   );
 };

From 705eff338dace0c673467170d2d1b01b4abe4833 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 17:55:56 -0400
Subject: [PATCH 14/72] Added breadcrumbs to create and configure pagespeed

---
 .../Pages/Monitors/CreateMonitor/index.jsx    |  2 +-
 .../src/Pages/PageSpeed/Configure/index.css   |  9 ++--
 .../src/Pages/PageSpeed/Configure/index.jsx   | 41 +++++++-----------
 .../Pages/PageSpeed/CreatePageSpeed/index.css | 11 +++--
 .../Pages/PageSpeed/CreatePageSpeed/index.jsx | 42 +++++++------------
 5 files changed, 44 insertions(+), 61 deletions(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 50496cde7..d0eafb476 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -146,7 +146,7 @@ const CreateMonitor = () => {
       <Breadcrumbs
         list={[
           { name: "monitors", path: "/monitors" },
-          { name: "details", path: `/monitors/create` },
+          { name: "create", path: `/monitors/create` },
         ]}
       />
       <Stack
diff --git a/Client/src/Pages/PageSpeed/Configure/index.css b/Client/src/Pages/PageSpeed/Configure/index.css
index 577d18389..408e2d639 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.css
+++ b/Client/src/Pages/PageSpeed/Configure/index.css
@@ -2,7 +2,7 @@
   background-color: var(--env-var-color-8);
   border: solid 1px var(--env-var-color-6);
   border-radius: var(--env-var-radius-1);
-  padding: var(--env-var-default-2);
+  padding: var(--env-var-font-size-large-plus) var(--env-var-font-size-xlarge);
 }
 .configure-pagespeed h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
@@ -60,9 +60,12 @@ body:has(.configure-pagespeed) .select-dropdown .MuiMenuItem-root,
   text-transform: lowercase;
 }
 
+.configure-pagespeed h3.MuiTypography-root {
+  flex: 0.7;
+}
+
 .configure-pagespeed .field,
 .configure-pagespeed .section-disabled,
-.configure-pagespeed .select-wrapper,
-.configure-pagespeed h3.MuiTypography-root {
+.configure-pagespeed .select-wrapper {
   flex: 1;
 }
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 91d250dd9..5bd6c5ccc 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -20,6 +20,7 @@ import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 
 import "./index.css";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 /**
  * Renders a skeleton layout.
@@ -147,37 +148,25 @@ const PageSpeedConfigure = () => {
   let loading = Object.keys(monitor).length === 0;
 
   return (
-    <Box className="configure-pagespeed">
+    <Stack className="configure-pagespeed" gap={theme.gap.large}>
       {loading ? (
         <SkeletonLayout />
       ) : (
         <>
-          <Button
-            level="tertiary"
-            label="Back"
-            animate="slideLeft"
-            img={<WestRoundedIcon />}
-            onClick={() => navigate(-1)}
-            sx={{
-              backgroundColor: theme.palette.otherColors.fillGray,
-              mb: theme.gap.large,
-              px: theme.gap.ml,
-              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.small,
-                fill: theme.palette.otherColors.slateGray,
-              },
-            }}
+          <Breadcrumbs
+            list={[
+              { name: "pagespeed", path: "/pagespeed" },
+              { name: "details", path: `/pagespeed/${monitorId}` },
+              { name: "configure", path: `/pagespeed/configure/${monitorId}` },
+            ]}
           />
-          <form
+          <Stack
+            component="form"
             noValidate
             spellCheck="false"
             onSubmit={handleSave}
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: theme.gap.large,
-              maxWidth: "1000px",
-            }}
+            flex={1}
+            gap={theme.gap.large}
           >
             <Stack direction="row" gap={theme.gap.small}>
               {monitor?.status ? <GreenCheck /> : <RedCheck />}
@@ -300,7 +289,7 @@ const PageSpeedConfigure = () => {
                 </Stack>
               </Stack>
             </Stack>
-            <Stack direction="row" justifyContent="flex-end">
+            <Stack direction="row" justifyContent="flex-end" mt="auto">
               <Button
                 type="submit"
                 level="primary"
@@ -309,7 +298,7 @@ const PageSpeedConfigure = () => {
                 sx={{ px: theme.gap.large, mt: theme.gap.large }}
               />
             </Stack>
-          </form>
+          </Stack>
         </>
       )}
       <Modal
@@ -358,7 +347,7 @@ const PageSpeedConfigure = () => {
           </Stack>
         </Stack>
       </Modal>
-    </Box>
+    </Stack>
   );
 };
 
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
index f1f10621f..42ca0ffa8 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css
@@ -2,10 +2,10 @@
   background-color: var(--env-var-color-8);
   border: solid 1px var(--env-var-color-6);
   border-radius: var(--env-var-radius-1);
-  padding: var(--env-var-default-2);
+  padding: var(--env-var-font-size-large-plus) var(--env-var-font-size-xlarge);
 }
 .create-page-speed h1.MuiTypography-root {
-  font-size: var(--env-var-font-size-large);
+  font-size: 22px;
   color: var(--env-var-color-1);
 }
 .create-page-speed p.MuiTypography-root,
@@ -50,9 +50,12 @@ body:has(.create-page-speed) .select-dropdown .MuiMenuItem-root,
   text-transform: lowercase;
 }
 
+.create-page-speed h3.MuiTypography-root {
+  flex: 0.7;
+}
+
 .create-page-speed .field,
 .create-page-speed .section-disabled,
-.create-page-speed .select-wrapper,
-.create-page-speed h3.MuiTypography-root {
+.create-page-speed .select-wrapper {
   flex: 1;
 }
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index e9b271326..6b9e6dbde 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -10,7 +10,7 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import { monitorValidation } from "../../../Validation/validation";
 import { createToast } from "../../../Utils/toastUtils";
 import { createPageSpeed } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
 
 const CreatePageSpeed = () => {
@@ -97,34 +97,22 @@ const CreatePageSpeed = () => {
   };
 
   return (
-    <Box className="create-page-speed">
-      <Button
-        level="tertiary"
-        label="Back"
-        animate="slideLeft"
-        img={<WestRoundedIcon />}
-        onClick={() => navigate("/pagespeed")}
-        sx={{
-          backgroundColor: theme.palette.otherColors.fillGray,
-          mb: theme.gap.medium,
-          px: theme.gap.ml,
-          "& svg.MuiSvgIcon-root": {
-            mr: theme.gap.small,
-            fill: theme.palette.otherColors.slateGray,
-          },
-        }}
+    <Stack className="create-page-speed" gap={theme.gap.mlplus}>
+      <Breadcrumbs
+        list={[
+          { name: "pagespeed", path: "/pagespeed" },
+          { name: "create", path: `/pagespeed/create` },
+        ]}
       />
-      <form
+      <Stack
+        component="form"
         noValidate
         spellCheck="false"
         onSubmit={handleCreate}
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: theme.gap.large,
-        }}
+        gap={theme.gap.large}
+        flex={1}
       >
-        <Typography component="h1">Create a page speed monitor</Typography>
+        <Typography component="h1">Create pagespeed monitor</Typography>
         <Stack gap={theme.gap.xl}>
           <Stack direction="row">
             <Typography component="h3">Monitor friendly name</Typography>
@@ -197,7 +185,7 @@ const CreatePageSpeed = () => {
             </Stack>
           </Stack>
         </Stack>
-        <Stack direction="row" justifyContent="flex-end">
+        <Stack direction="row" justifyContent="flex-end" mt="auto">
           <Button
             type="submit"
             level="primary"
@@ -206,8 +194,8 @@ const CreatePageSpeed = () => {
             sx={{ px: theme.gap.large, mt: theme.gap.large }}
           />
         </Stack>
-      </form>
-    </Box>
+      </Stack>
+    </Stack>
   );
 };
 

From 1e107a2dfccc0cb70fd714058a26001970a6052b Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 17 Aug 2024 17:59:49 -0400
Subject: [PATCH 15/72] Added breadcrumbs to pagespeed details

---
 .../src/Pages/PageSpeed/Configure/index.jsx   |  3 +-
 Client/src/Pages/PageSpeed/Details/index.css  |  2 +-
 Client/src/Pages/PageSpeed/Details/index.jsx  | 29 +++++++------------
 3 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 5bd6c5ccc..0dff8d7eb 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -15,12 +15,11 @@ import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 import "./index.css";
-import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 /**
  * Renders a skeleton layout.
diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css
index 5d4d037b7..357177c78 100644
--- a/Client/src/Pages/PageSpeed/Details/index.css
+++ b/Client/src/Pages/PageSpeed/Details/index.css
@@ -37,7 +37,7 @@
 .page-speed-details > .MuiStack-root:last-child,
 .page-speed-details > .MuiBox-root:nth-last-child(3) {
   border: solid 1px var(--env-var-color-6);
-  border-radius: var(--env-var-radius-2);
+  border-radius: var(--env-var-radius-1);
   background-color: var(--env-var-color-8);
   min-width: 200px;
 }
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 006f2acf3..dda768956 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -11,16 +11,16 @@ import {
 } from "../../../Utils/timeUtils";
 import axiosInstance from "../../../Utils/axiosConfig";
 import Button from "../../../Components/Button";
-import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
 import LastCheckedIcon from "../../../assets/icons/calendar-check.svg?react";
 import ClockIcon from "../../../assets/icons/maintenance.svg?react";
 import IntervalCheckIcon from "../../../assets/icons/interval-check.svg?react";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
-
-import "./index.css";
 import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
+import "./index.css";
+
 
 /**
  * Displays a box with an icon, title, and value.
@@ -39,7 +39,8 @@ const StatBox = ({ icon, title, value }) => {
       className="stat-box"
       direction="row"
       gap={theme.gap.small}
-      p={theme.gap.ml}
+      pt={theme.gap.ml}
+      px={theme.gap.ml}
       pb={theme.gap.mlplus}
     >
       {icon}
@@ -306,21 +307,11 @@ const PageSpeedDetails = () => {
         <SkeletonLayout />
       ) : (
         <>
-          <Button
-            level="tertiary"
-            label="Back"
-            animate="slideLeft"
-            img={<WestRoundedIcon />}
-            onClick={() => navigate("/pagespeed")}
-            sx={{
-              width: "fit-content",
-              backgroundColor: theme.palette.otherColors.fillGray,
-              px: theme.gap.ml,
-              "& svg.MuiSvgIcon-root": {
-                mr: theme.gap.small,
-                fill: theme.palette.otherColors.slateGray,
-              },
-            }}
+          <Breadcrumbs
+            list={[
+              { name: "pagespeed", path: "/pagespeed" },
+              { name: "details", path: `/pagespeed/${monitorId}` },
+            ]}
           />
           <Stack direction="row" gap={theme.gap.small}>
             {monitor?.status ? <GreenCheck /> : <RedCheck />}

From c807f88176053fbe769466d30e9adfed069499e0 Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Sat, 17 Aug 2024 19:14:22 -0400
Subject: [PATCH 16/72] Update README.md

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 838b06a6c..923a4d550 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@ BlueWave Uptime is an open source server monitoring application used to track th
 - [x] Ping monitoring
 - [x] Incidents at a glance
 - [x] Page speed monitoring
+- [x] E-mail notifications 
 - [ ] Scheduled maintenance (in the works)
 
 **Roadmap (short term):**
@@ -59,6 +60,13 @@ Made with [contrib.rocks](https://contrib.rocks).
 
 ![Alt](https://repobeats.axiom.co/api/embed/c35d999c82dbb31e967427ea4166c14da4172e73.svg "Repobeats analytics image")
 
+Also check other developer and contributor friendly projects of BlueWave: 
+
+- [BlueWave HRM](https://github.com/bluewave-labs/bluewave-hrm)
+- [BlueWave Onboarding](https://github.com/bluewave-labs/bluewave-onboarding)
+- [BlueWave DataRoom](https://github.com/bluewave-labs/bluewave-dataroom)
+- [BlueWave ChatFabrica](https://github.com/bluewave-labs/bluewave-chatfabrica)
+
 ## Getting Started
 
 - Clone this repository to your local machine

From 6d99002fd172875949579ed0dbc727896c8f1cf5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 17 Aug 2024 20:23:34 -0700
Subject: [PATCH 17/72] Finish refactoring auth slice, fixed several bugs

---
 Client/src/Features/Auth/authSlice.js     | 26 +++----------
 Client/src/Utils/axiosConfig.js           | 47 +++++++++++++++++++++++
 Server/controllers/authController.js      |  3 ++
 Server/db/mongo/modules/monitorModule.js  |  2 +-
 Server/db/mongo/modules/recoveryModule.js |  1 +
 Server/index.js                           |  2 +-
 6 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js
index e51d427ab..070cc3eb3 100644
--- a/Client/src/Features/Auth/authSlice.js
+++ b/Client/src/Features/Auth/authSlice.js
@@ -51,9 +51,6 @@ export const update = createAsyncThunk(
     const { authToken: token, localData: form } = data;
     const user = jwtDecode(token);
     try {
-      //1.5s delay to show loading spinner
-      await new Promise((resolve) => setTimeout(resolve, 1500));
-
       const fd = new FormData();
       form.firstName && fd.append("firstName", form.firstName);
       form.lastName && fd.append("lastName", form.lastName);
@@ -69,12 +66,8 @@ export const update = createAsyncThunk(
       form.deleteProfileImage &&
         fd.append("deleteProfileImage", form.deleteProfileImage);
 
-      const res = await axiosInstance.put(`/auth/user/${user._id}`, fd, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-          "Content-Type": "multipart/form-data",
-        },
-      });
+      const res = await axiosInstance.updateUser(token, user._id, fd);
+
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -95,9 +88,7 @@ export const deleteUser = createAsyncThunk(
     const user = jwtDecode(data);
 
     try {
-      const res = await axiosInstance.delete(`/auth/user/${user._id}`, {
-        headers: { Authorization: `Bearer ${data}` },
-      });
+      const res = await axiosInstance.deleteUser(data, user._id);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -116,7 +107,7 @@ export const forgotPassword = createAsyncThunk(
   "auth/forgotPassword",
   async (form, thunkApi) => {
     try {
-      const res = await axiosInstance.post("/auth/recovery/request", form);
+      const res = await axiosInstance.forgotPassword(form);
       return res.data;
     } catch (error) {
       if (error.response.data) {
@@ -136,13 +127,8 @@ export const setNewPassword = createAsyncThunk(
   async (data, thunkApi) => {
     const { token, form } = data;
     try {
-      await axiosInstance.post("/auth/recovery/validate", {
-        recoveryToken: token,
-      });
-      const res = await axiosInstance.post("/auth/recovery/reset", {
-        ...form,
-        recoveryToken: token,
-      });
+      await axiosInstance.validateRecoveryToken(token);
+      const res = await axiosInstance.setNewPassword(token, form);
       return res.data;
     } catch (error) {
       if (error.response.data) {
diff --git a/Client/src/Utils/axiosConfig.js b/Client/src/Utils/axiosConfig.js
index 518af41e1..093210f90 100644
--- a/Client/src/Utils/axiosConfig.js
+++ b/Client/src/Utils/axiosConfig.js
@@ -104,4 +104,51 @@ axiosInstance.loginUser = async (form) => {
   return axiosInstance.post(`/auth/login`, form);
 };
 
+// **********************************
+// Update in an exisiting user
+// **********************************
+axiosInstance.updateUser = async (authToken, userId, form) => {
+  return axiosInstance.put(`/auth/user/${userId}`, form, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+    },
+  });
+};
+
+// **********************************
+// Delete an exisiting user
+// **********************************
+axiosInstance.deleteUser = async (authToken, userId) => {
+  return axiosInstance.delete(`/auth/user/${userId}`, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+      "Content-Type": "application/json",
+    },
+  });
+};
+
+// **********************************
+// Forgot password request
+// **********************************
+axiosInstance.forgotPassword = async (form) => {
+  return axiosInstance.post(`/auth/recovery/request`, form);
+};
+
+axiosInstance.validateRecoveryToken = async (recoveryToken) => {
+  return axiosInstance.post("/auth/recovery/validate", {
+    recoveryToken,
+  });
+};
+
+// **********************************
+// Set new password request
+// **********************************
+axiosInstance.setNewPassword = async (recoveryToken, form) => {
+  return axiosInstance.post("/auth/recovery/reset", {
+    ...form,
+    recoveryToken,
+  });
+};
+
 export default axiosInstance;
diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js
index 93c83c6b8..8efe2ae19 100644
--- a/Server/controllers/authController.js
+++ b/Server/controllers/authController.js
@@ -450,6 +450,8 @@ const deleteUserController = async (req, res, next) => {
     }
 
     // 1. Find all the monitors associated with the user id
+    console.log("wtf");
+
     const monitors = await req.db.getMonitorsByUserId({
       params: { userId: _id },
     });
@@ -459,6 +461,7 @@ const deleteUserController = async (req, res, next) => {
       await Promise.all(
         monitors.map(async (monitor) => {
           await req.jobQueue.deleteJob(monitor);
+
           await req.db.deleteChecks(monitor._id);
           await req.db.deleteAlertByMonitorId(monitor._id);
           await req.db.deletePageSpeedChecksByMonitorId(monitor._id);
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 0fc56c755..4d84700ca 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -294,7 +294,7 @@ const getMonitorById = async (monitorId) => {
  */
 const getMonitorsByUserId = async (req, res) => {
   try {
-    let { limit, type, status, sortOrder, normalize } = req.query;
+    let { limit, type, status, sortOrder, normalize } = req.query || {};
     const monitorQuery = { userId: req.params.userId };
 
     if (type !== undefined) {
diff --git a/Server/db/mongo/modules/recoveryModule.js b/Server/db/mongo/modules/recoveryModule.js
index c1cc23b94..b643a1664 100644
--- a/Server/db/mongo/modules/recoveryModule.js
+++ b/Server/db/mongo/modules/recoveryModule.js
@@ -1,3 +1,4 @@
+const UserModel = require("../../../models/user");
 const RecoveryToken = require("../../../models/RecoveryToken");
 const crypto = require("crypto");
 const { errorMessages } = require("../../../utils/messages");
diff --git a/Server/index.js b/Server/index.js
index 2cb941ed4..9a5f1797f 100644
--- a/Server/index.js
+++ b/Server/index.js
@@ -19,7 +19,7 @@ const JobQueue = require("./service/jobQueue");
 const NetworkService = require("./service/networkService");
 const EmailService = require("./service/emailService");
 const PageSpeedService = require("./service/pageSpeedService");
-
+const SERVICE_NAME = "Server";
 let cleaningUp = false;
 
 // Need to wrap server setup in a function to handle async nature of JobQueue

From 7690c04b7fd121d1d1b633ea7cfc29cb8f732493 Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Sun, 18 Aug 2024 01:57:16 -0400
Subject: [PATCH 18/72] Add star history chart

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 923a4d550..0a26a67b4 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,10 @@ Made with [contrib.rocks](https://contrib.rocks).
 
 ![Alt](https://repobeats.axiom.co/api/embed/c35d999c82dbb31e967427ea4166c14da4172e73.svg "Repobeats analytics image")
 
-Also check other developer and contributor friendly projects of BlueWave: 
+[![Star History Chart](https://api.star-history.com/svg?repos=bluewave-labs/bluewave-uptime&type=Date)](https://star-history.com/#bluewave-labs/bluewave-uptime&Date)
+
+
+Also check other developer and contributor-friendly projects of BlueWave: 
 
 - [BlueWave HRM](https://github.com/bluewave-labs/bluewave-hrm)
 - [BlueWave Onboarding](https://github.com/bluewave-labs/bluewave-onboarding)

From 5beb0684a7aaa668c9215380b8cdf9a610a656f5 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 18 Aug 2024 12:11:24 -0700
Subject: [PATCH 19/72] Renamed axiosConfig to NetworkService

---
 Client/src/Components/TabPanels/Account/TeamPanel.jsx         | 2 +-
 Client/src/Features/Auth/authSlice.js                         | 2 +-
 Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js | 2 +-
 Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js     | 2 +-
 Client/src/HOC/withAdminCheck.jsx                             | 2 +-
 Client/src/Pages/Auth/Login.jsx                               | 2 +-
 Client/src/Pages/Auth/Register/Register.jsx                   | 2 +-
 Client/src/Pages/Incidents/IncidentTable/index.jsx            | 2 +-
 Client/src/Pages/Incidents/index.jsx                          | 2 +-
 Client/src/Pages/Monitors/Details/PaginationTable/index.jsx   | 2 +-
 Client/src/Pages/Monitors/Details/index.jsx                   | 2 +-
 Client/src/Pages/PageSpeed/Details/index.jsx                  | 2 +-
 Client/src/Utils/{axiosConfig.js => NetworkService.js}        | 0
 Client/src/main.jsx                                           | 2 +-
 14 files changed, 13 insertions(+), 13 deletions(-)
 rename Client/src/Utils/{axiosConfig.js => NetworkService.js} (100%)

diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 07bbf6e68..553397f89 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import EditSvg from "../../../assets/icons/edit.svg?react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
-import axiosInstance from "../../../Utils/axiosConfig";
+import axiosInstance from "../../../Utils/NetworkService";
 import { createToast } from "../../../Utils/toastUtils";
 import { useSelector } from "react-redux";
 import BasicTable from "../../BasicTable";
diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js
index 070cc3eb3..9994c2bbb 100644
--- a/Client/src/Features/Auth/authSlice.js
+++ b/Client/src/Features/Auth/authSlice.js
@@ -1,4 +1,4 @@
-import axiosInstance from "../../Utils/axiosConfig";
+import axiosInstance from "../../Utils/NetworkService";
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
 
diff --git a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
index 9b3e7fa8c..1e75782d0 100644
--- a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
+++ b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
-import axiosInstance from "../../Utils/axiosConfig";
+import axiosInstance from "../../Utils/NetworkService";
 const initialState = {
   isLoading: false,
   monitors: [],
diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 1e8b895a1..076002259 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
-import axiosInstance from "../../Utils/axiosConfig";
+import axiosInstance from "../../Utils/NetworkService";
 const initialState = {
   isLoading: false,
   monitors: [],
diff --git a/Client/src/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx
index 23ee5dc1f..60c0ea088 100644
--- a/Client/src/HOC/withAdminCheck.jsx
+++ b/Client/src/HOC/withAdminCheck.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import axiosInstance from "../Utils/axiosConfig";
+import axiosInstance from "../Utils/NetworkService";
 
 const withAdminCheck = (WrappedComponent) => {
   const WithAdminCheck = (props) => {
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index 84f6c518e..d1f251925 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -7,7 +7,7 @@ import { login } from "../../Features/Auth/authSlice";
 import { useDispatch } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
 import Button from "../../Components/Button";
-import axiosInstance from "../../Utils/axiosConfig";
+import axiosInstance from "../../Utils/NetworkService";
 import Field from "../../Components/Inputs/Field";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 30b439f16..8a4c57f0e 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -15,7 +15,7 @@ import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import Check from "../../../Components/Check/Check";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
-import axiosInstance from "../../../Utils/axiosConfig";
+import axiosInstance from "../../../Utils/NetworkService";
 import "../index.css";
 
 /**
diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index 44a30decc..b60bb14f5 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -18,7 +18,7 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import axiosInstance from "../../../Utils/axiosConfig";
+import axiosInstance from "../../../Utils/NetworkService";
 import { StatusLabel } from "../../../Components/Label";
 
 const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index f9d53f7c0..730d0c512 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { ButtonGroup, Stack, Skeleton, Typography } from "@mui/material";
 import Button from "../../Components/Button";
-import axiosInstance from "../../Utils/axiosConfig";
+import axiosInstance from "../../Utils/NetworkService";
 import { useTheme } from "@emotion/react";
 import Select from "../../Components/Inputs/Select";
 import IncidentTable from "./IncidentTable";
diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
index 28a668977..6127bbe3e 100644
--- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -13,7 +13,7 @@ import {
 
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import axiosInstance from "../../../../Utils/axiosConfig";
+import axiosInstance from "../../../../Utils/NetworkService";
 import { StatusLabel } from "../../../../Components/Label";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 15cfd2c82..6c23f4a03 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
-import axiosInstance from "../../../Utils/axiosConfig";
+import axiosInstance from "../../../Utils/NetworkService";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "../../../Components/Button";
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 006f2acf3..c63ad9a86 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -9,7 +9,7 @@ import {
   formatDuration,
   formatDurationRounded,
 } from "../../../Utils/timeUtils";
-import axiosInstance from "../../../Utils/axiosConfig";
+import axiosInstance from "../../../Utils/NetworkService";
 import Button from "../../../Components/Button";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
diff --git a/Client/src/Utils/axiosConfig.js b/Client/src/Utils/NetworkService.js
similarity index 100%
rename from Client/src/Utils/axiosConfig.js
rename to Client/src/Utils/NetworkService.js
diff --git a/Client/src/main.jsx b/Client/src/main.jsx
index f9fa3d640..387d1f931 100644
--- a/Client/src/main.jsx
+++ b/Client/src/main.jsx
@@ -8,7 +8,7 @@ import { ThemeProvider } from "@mui/material";
 import { Provider } from "react-redux";
 import { persistor, store } from "./store";
 import { PersistGate } from "redux-persist/integration/react";
-import { injectStore } from "./Utils/axiosConfig.js";
+import { injectStore } from "./Utils/NetworkService.js";
 
 injectStore(store);
 

From f78e5ca94cdaf26c2e108f02a760103f7002fa78 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 18 Aug 2024 12:20:28 -0700
Subject: [PATCH 20/72] Add several endpoints

---
 .../TabPanels/Account/TeamPanel.jsx           |  5 +---
 Client/src/HOC/withAdminCheck.jsx             |  2 +-
 Client/src/Pages/Auth/Login.jsx               |  2 +-
 Client/src/Pages/Auth/Register/Register.jsx   |  4 +--
 Client/src/Utils/NetworkService.js            | 25 +++++++++++++++++++
 5 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 553397f89..3ff948a26 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -52,10 +52,7 @@ const TeamPanel = () => {
   useEffect(() => {
     const fetchTeam = async () => {
       try {
-        const response = await axiosInstance.get("/auth/users", {
-          headers: { Authorization: `Bearer ${authToken}` },
-        });
-
+        const response = await axiosInstance.getAllUsers(authToken);
         setMembers(response.data.data);
       } catch (error) {
         createToast({
diff --git a/Client/src/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx
index 60c0ea088..c6a939679 100644
--- a/Client/src/HOC/withAdminCheck.jsx
+++ b/Client/src/HOC/withAdminCheck.jsx
@@ -8,7 +8,7 @@ const withAdminCheck = (WrappedComponent) => {
 
     useEffect(() => {
       axiosInstance
-        .get("/auth/users/admin")
+        .doesAdminExist()
         .then((response) => {
           if (response.data.data === true) {
             navigate("/login");
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index d1f251925..6a408c970 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -249,7 +249,7 @@ const Login = () => {
 
   useEffect(() => {
     axiosInstance
-      .get("/auth/users/admin")
+      .doesAdminExist()
       .then((response) => {
         if (response.data.data === false) {
           navigate("/register");
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 8a4c57f0e..1dedaa0f1 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -397,9 +397,7 @@ const Register = ({ isAdmin }) => {
     const fetchInvite = async () => {
       if (token !== undefined) {
         try {
-          const res = await axiosInstance.post(`/auth/invite/verify`, {
-            token,
-          });
+          const res = await axiosInstance.verifyInvitationToken(token);
           const { role, email } = res.data.data;
           console.log(role);
           setForm({ ...form, email, role });
diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js
index 093210f90..58ef2951f 100644
--- a/Client/src/Utils/NetworkService.js
+++ b/Client/src/Utils/NetworkService.js
@@ -151,4 +151,29 @@ axiosInstance.setNewPassword = async (recoveryToken, form) => {
   });
 };
 
+// **********************************
+// Check for admin user
+// **********************************
+axiosInstance.doesAdminExist = async () => {
+  return axiosInstance.get("/auth/users/admin");
+};
+
+// **********************************
+// Get all users
+// **********************************
+axiosInstance.getAllUsers = async (authToken) => {
+  return axiosInstance.get("/auth/users", {
+    headers: { Authorization: `Bearer ${authToken}` },
+  });
+};
+
+// **********************************
+// Verify Invitation Token
+// **********************************
+axiosInstance.verifyInvitationToken = async (token) => {
+  return axiosInstance.post(`/auth/invite/verify`, {
+    token,
+  });
+};
+
 export default axiosInstance;

From 92877e20ec06694d35d3aa201541420270e3346b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 18 Aug 2024 17:18:16 -0700
Subject: [PATCH 21/72] Refactored remaining requests

---
 .../TabPanels/Account/TeamPanel.jsx           |  11 +-
 .../PageSpeedMonitor/pageSpeedMonitorSlice.js |   1 +
 .../UptimeMonitors/uptimeMonitorsSlice.js     |   1 +
 .../Pages/Incidents/IncidentTable/index.jsx   |  31 +++--
 Client/src/Pages/Incidents/index.jsx          |  15 +--
 .../Details/PaginationTable/index.jsx         |  16 +--
 Client/src/Pages/Monitors/Details/index.jsx   |  26 ++--
 Client/src/Pages/PageSpeed/Details/index.jsx  |  16 +--
 Client/src/Utils/NetworkService.js            | 119 ++++++++++++++++--
 Server/routes/checkRoute.js                   |   4 +-
 10 files changed, 174 insertions(+), 66 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 3ff948a26..ab35a41d1 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -176,13 +176,10 @@ const TeamPanel = () => {
       setErrors((prev) => ({ ...prev, email: error.details[0].message }));
     } else
       try {
-        await axiosInstance.post(
-          "/auth/invite",
-          {
-            email: toInvite.email,
-            role: toInvite.role,
-          },
-          { headers: { Authorization: `Bearer ${authToken}` } }
+        await axiosInstance.requestInvitationToken(
+          authToken,
+          toInvite.email,
+          toInvite.role
         );
 
         closeInviteModal();
diff --git a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
index 1e75782d0..d547e31fa 100644
--- a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
+++ b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
@@ -38,6 +38,7 @@ export const getPageSpeedByUserId = createAsyncThunk(
         user._id,
         25,
         ["pagespeed"],
+        null,
         "desc",
         false
       );
diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index 076002259..d92116a9a 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -38,6 +38,7 @@ export const getUptimeMonitorsByUserId = createAsyncThunk(
         user._id,
         25,
         ["http", "ping"],
+        null,
         "desc",
         true
       );
diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index b60bb14f5..971886551 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -43,17 +43,30 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
         return;
       }
       try {
-        let url = `/checks/${selectedMonitor}?sortOrder=desc&filter=${filter}&page=${paginationController.page}&rowsPerPage=${paginationController.rowsPerPage}`;
-
+        let res;
         if (selectedMonitor === "0") {
-          url = `/checks/user/${user._id}?sortOrder=desc&filter=${filter}&page=${paginationController.page}&rowsPerPage=${paginationController.rowsPerPage}`;
+          res = await axiosInstance.getChecksByUser(
+            authToken,
+            user._id,
+            "desc",
+            null,
+            null,
+            filter,
+            paginationController.page,
+            paginationController.rowsPerPage
+          );
+        } else {
+          res = await axiosInstance.getChecksByMonitor(
+            authToken,
+            selectedMonitor,
+            "desc",
+            null,
+            null,
+            filter,
+            paginationController.page,
+            paginationController.rowsPerPage
+          );
         }
-
-        const res = await axiosInstance.get(url, {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        });
         setChecks(res.data.data.checks);
         setChecksCount(res.data.data.checksCount);
       } catch (error) {
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 730d0c512..3a50d3194 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -48,13 +48,14 @@ const Incidents = () => {
   useEffect(() => {
     const fetchMonitors = async () => {
       setLoading(true);
-      const res = await axiosInstance.get(
-        `/monitors/user/${authState.user._id}?status=false&limit=1`,
-        {
-          headers: {
-            Authorization: `Bearer ${authState.authToken}`,
-          },
-        }
+      const res = await axiosInstance.getMonitorsByUserId(
+        authState.authToken,
+        authState.user._id,
+        1,
+        null,
+        null,
+        null,
+        null
       );
 
       // Reduce to a lookup object for 0(1) lookup
diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
index 6127bbe3e..2df061e82 100644
--- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -37,13 +37,15 @@ const PaginationTable = ({ monitorId, dateRange }) => {
   useEffect(() => {
     const fetchPage = async () => {
       try {
-        const res = await axiosInstance.get(
-          `/checks/${monitorId}?sortOrder=desc&dateRange=${dateRange}&page=${paginationController.page}&rowsPerPage=${paginationController.rowsPerPage}`,
-          {
-            headers: {
-              Authorization: `Bearer ${authToken}`,
-            },
-          }
+        const res = await axiosInstance.getChecksByMonitor(
+          authToken,
+          monitorId,
+          "desc",
+          null,
+          dateRange,
+          null,
+          paginationController.page,
+          paginationController.rowsPerPage
         );
         setChecks(res.data.data.checks);
         setChecksCount(res.data.data.checksCount);
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 6c23f4a03..950fe3ee9 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -121,16 +121,18 @@ const DetailsPage = () => {
 
   const fetchMonitor = useCallback(async () => {
     try {
-      const res = await axiosInstance.get(
-        `/monitors/stats/${monitorId}?dateRange=${dateRange}&numToDisplay=50&normalize=true`,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        }
+      const res = await axiosInstance.getStatsByMonitorId(
+        authToken,
+        monitorId,
+        null,
+        null,
+        dateRange,
+        50,
+        true
       );
       setMonitor(res.data.data);
     } catch (error) {
+      console.log(error);
       console.error("Error fetching monitor of id: " + monitorId);
       navigate("/not-found");
     }
@@ -142,13 +144,9 @@ const DetailsPage = () => {
 
   useEffect(() => {
     const fetchCertificate = async () => {
-      const res = await axiosInstance.get(
-        `/monitors/certificate/${monitorId}`,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        }
+      const res = await axiosInstance.getCertificateExpiry(
+        authToken,
+        monitorId
       );
       setCertificateExpiry(res.data.data.certificateDate);
     };
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index c63ad9a86..10ae1fc7e 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -186,15 +186,15 @@ const PageSpeedDetails = () => {
   useEffect(() => {
     const fetchMonitor = async () => {
       try {
-        const res = await axiosInstance.get(
-          `/monitors/stats/${monitorId}?sortOrder=desc&limit=50`,
-          {
-            headers: {
-              Authorization: `Bearer ${authToken}`,
-            },
-          }
+        const res = await axiosInstance.getStatsByMonitorId(
+          authToken,
+          monitorId,
+          "desc",
+          50,
+          null,
+          null,
+          null
         );
-
         setMonitor(res.data.data);
         setAudits(res.data.data.checks[0].audits);
       } catch (error) {
diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js
index 58ef2951f..2c112f22c 100644
--- a/Client/src/Utils/NetworkService.js
+++ b/Client/src/Utils/NetworkService.js
@@ -44,6 +44,7 @@ axiosInstance.getMonitorsByUserId = async (
   userId,
   limit,
   types,
+  status,
   sortOrder,
   normalize
 ) => {
@@ -55,6 +56,7 @@ axiosInstance.getMonitorsByUserId = async (
       params.append("type", type);
     });
   }
+  if (status) params.append("status", status);
   if (sortOrder) params.append("sortOrder", sortOrder);
   if (normalize) params.append("normalize", normalize);
 
@@ -66,6 +68,35 @@ axiosInstance.getMonitorsByUserId = async (
   });
 };
 
+// **********************************
+// Get stats for a monitor
+// **********************************
+axiosInstance.getStatsByMonitorId = async (
+  authToken,
+  monitorId,
+  sortOrder,
+  limit,
+  dateRange,
+  numToDisplay,
+  normalize
+) => {
+  const params = new URLSearchParams();
+  if (sortOrder) params.append("sortOrder", sortOrder);
+  if (limit) params.append("limit", limit);
+  if (dateRange) params.append("dateRange", dateRange);
+  if (numToDisplay) params.append("numToDisplay", numToDisplay);
+  if (normalize) params.append("normalize", normalize);
+
+  return axiosInstance.get(
+    `/monitors/stats/${monitorId}?${params.toString()}`,
+    {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+      },
+    }
+  );
+};
+
 // **********************************
 // Updates a single monitor
 // **********************************
@@ -90,6 +121,17 @@ axiosInstance.deleteMonitorById = async (authToken, monitorId) => {
   });
 };
 
+// **********************************
+// Get certificate
+// **********************************
+axiosInstance.getCertificateExpiry = async (authToken, monitorId) => {
+  return axiosInstance.get(`/monitors/certificate/${monitorId}`, {
+    headers: {
+      Authorization: `Bearer ${authToken}`,
+    },
+  });
+};
+
 // **********************************
 // Register a new user
 // **********************************
@@ -116,18 +158,6 @@ axiosInstance.updateUser = async (authToken, userId, form) => {
   });
 };
 
-// **********************************
-// Delete an exisiting user
-// **********************************
-axiosInstance.deleteUser = async (authToken, userId) => {
-  return axiosInstance.delete(`/auth/user/${userId}`, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
-
 // **********************************
 // Forgot password request
 // **********************************
@@ -167,6 +197,19 @@ axiosInstance.getAllUsers = async (authToken) => {
   });
 };
 
+// **********************************
+// Request Invitation Token
+// **********************************
+axiosInstance.requestInvitationToken = async (authToken, email, role) => {
+  return axiosInstance.post(
+    `/auth/invite`,
+    { email, role },
+    {
+      headers: { Authorization: `Bearer ${authToken}` },
+    }
+  );
+};
+
 // **********************************
 // Verify Invitation Token
 // **********************************
@@ -176,4 +219,56 @@ axiosInstance.verifyInvitationToken = async (token) => {
   });
 };
 
+// **********************************
+// Get all checks for a given monitor
+// **********************************
+
+axiosInstance.getChecksByMonitor = async (
+  authToken,
+  monitorId,
+  sortOrder,
+  limit,
+  dateRange,
+  filter,
+  page,
+  rowsPerPage
+) => {
+  const params = new URLSearchParams();
+  if (sortOrder) params.append("sortOrder", sortOrder);
+  if (limit) params.append("limit", limit);
+  if (dateRange) params.append("dateRange", dateRange);
+  if (filter) params.append("filter", filter);
+  if (page) params.append("page", page);
+  if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
+
+  return axiosInstance.get(`/checks/${monitorId}?${params.toString()}`, {
+    headers: { Authorization: `Bearer ${authToken}` },
+  });
+};
+
+// **********************************
+// Get all checks for a given user
+// **********************************
+axiosInstance.getChecksByUser = async (
+  authToken,
+  userId,
+  sortOrder,
+  limit,
+  dateRange,
+  filter,
+  page,
+  rowsPerPage
+) => {
+  const params = new URLSearchParams();
+  if (sortOrder) params.append("sortOrder", sortOrder);
+  if (limit) params.append("limit", limit);
+  if (dateRange) params.append("dateRange", dateRange);
+  if (filter) params.append("filter", filter);
+  if (page) params.append("page", page);
+  if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
+  return axiosInstance.get(`/checks/user/${userId}?${params.toString()}`, {
+    headers: { Authorization: `Bearer ${authToken}` },
+  });
+};
+
 export default axiosInstance;
diff --git a/Server/routes/checkRoute.js b/Server/routes/checkRoute.js
index 69aa682af..4bba24e79 100644
--- a/Server/routes/checkRoute.js
+++ b/Server/routes/checkRoute.js
@@ -15,12 +15,12 @@ router.get(
   checkController.getChecks
 );
 
+router.get("/user/:userId", checkController.getUserChecks);
+
 router.delete(
   "/:monitorId",
   verifyOwnership(Monitor, "monitorId"),
   checkController.deleteChecks
 );
 
-router.get("/user/:userId", checkController.getUserChecks);
-
 module.exports = router;

From 20e4c7ef078cca2cf6de586e64b4b6cca7048631 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 18 Aug 2024 17:42:49 -0700
Subject: [PATCH 22/72] Refactored axios util into a service

---
 .../TabPanels/Account/TeamPanel.jsx           |   6 +-
 Client/src/Features/Auth/authSlice.js         |  18 +-
 .../PageSpeedMonitor/pageSpeedMonitorSlice.js |  13 +-
 .../UptimeMonitors/uptimeMonitorsSlice.js     |  13 +-
 Client/src/HOC/withAdminCheck.jsx             |   4 +-
 Client/src/Pages/Auth/Login.jsx               |   4 +-
 Client/src/Pages/Auth/Register/Register.jsx   |   4 +-
 .../Pages/Incidents/IncidentTable/index.jsx   |   6 +-
 Client/src/Pages/Incidents/index.jsx          |   4 +-
 .../Details/PaginationTable/index.jsx         |   4 +-
 Client/src/Pages/Monitors/Details/index.jsx   |   6 +-
 Client/src/Pages/PageSpeed/Details/index.jsx  |   4 +-
 Client/src/Utils/NetworkService.js            | 490 +++++++++---------
 Client/src/main.jsx                           |   6 +-
 14 files changed, 293 insertions(+), 289 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index ab35a41d1..95df3e294 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import EditSvg from "../../../assets/icons/edit.svg?react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import { createToast } from "../../../Utils/toastUtils";
 import { useSelector } from "react-redux";
 import BasicTable from "../../BasicTable";
@@ -52,7 +52,7 @@ const TeamPanel = () => {
   useEffect(() => {
     const fetchTeam = async () => {
       try {
-        const response = await axiosInstance.getAllUsers(authToken);
+        const response = await networkService.getAllUsers(authToken);
         setMembers(response.data.data);
       } catch (error) {
         createToast({
@@ -176,7 +176,7 @@ const TeamPanel = () => {
       setErrors((prev) => ({ ...prev, email: error.details[0].message }));
     } else
       try {
-        await axiosInstance.requestInvitationToken(
+        await networkService.requestInvitationToken(
           authToken,
           toInvite.email,
           toInvite.role
diff --git a/Client/src/Features/Auth/authSlice.js b/Client/src/Features/Auth/authSlice.js
index 9994c2bbb..fa1f0471e 100644
--- a/Client/src/Features/Auth/authSlice.js
+++ b/Client/src/Features/Auth/authSlice.js
@@ -1,4 +1,4 @@
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
 
@@ -14,7 +14,7 @@ export const register = createAsyncThunk(
   "auth/register",
   async (form, thunkApi) => {
     try {
-      const res = await axiosInstance.registerUser(form);
+      const res = await networkService.registerUser(form);
       return res.data;
     } catch (error) {
       if (error.response.data) {
@@ -31,7 +31,7 @@ export const register = createAsyncThunk(
 
 export const login = createAsyncThunk("auth/login", async (form, thunkApi) => {
   try {
-    const res = await axiosInstance.loginUser(form);
+    const res = await networkService.loginUser(form);
     return res.data;
   } catch (error) {
     if (error.response && error.response.data) {
@@ -57,7 +57,7 @@ export const update = createAsyncThunk(
       form.password && fd.append("password", form.password);
       form.newPassword && fd.append("newPassword", form.newPassword);
       if (form.file && form.file !== "") {
-        const imageResult = await axiosInstance.get(form.file, {
+        const imageResult = await networkService.get(form.file, {
           responseType: "blob",
           baseURL: "",
         });
@@ -66,7 +66,7 @@ export const update = createAsyncThunk(
       form.deleteProfileImage &&
         fd.append("deleteProfileImage", form.deleteProfileImage);
 
-      const res = await axiosInstance.updateUser(token, user._id, fd);
+      const res = await networkService.updateUser(token, user._id, fd);
 
       return res.data;
     } catch (error) {
@@ -88,7 +88,7 @@ export const deleteUser = createAsyncThunk(
     const user = jwtDecode(data);
 
     try {
-      const res = await axiosInstance.deleteUser(data, user._id);
+      const res = await networkService.deleteUser(data, user._id);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -107,7 +107,7 @@ export const forgotPassword = createAsyncThunk(
   "auth/forgotPassword",
   async (form, thunkApi) => {
     try {
-      const res = await axiosInstance.forgotPassword(form);
+      const res = await networkService.forgotPassword(form);
       return res.data;
     } catch (error) {
       if (error.response.data) {
@@ -127,8 +127,8 @@ export const setNewPassword = createAsyncThunk(
   async (data, thunkApi) => {
     const { token, form } = data;
     try {
-      await axiosInstance.validateRecoveryToken(token);
-      const res = await axiosInstance.setNewPassword(token, form);
+      await networkService.validateRecoveryToken(token);
+      const res = await networkService.setNewPassword(token, form);
       return res.data;
     } catch (error) {
       if (error.response.data) {
diff --git a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
index d547e31fa..22e2b3324 100644
--- a/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
+++ b/Client/src/Features/PageSpeedMonitor/pageSpeedMonitorSlice.js
@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 const initialState = {
   isLoading: false,
   monitors: [],
@@ -13,7 +13,7 @@ export const createPageSpeed = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.createMonitor(authToken, monitor);
+      const res = await networkService.createMonitor(authToken, monitor);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -33,7 +33,7 @@ export const getPageSpeedByUserId = createAsyncThunk(
   async (token, thunkApi) => {
     const user = jwtDecode(token);
     try {
-      const res = await axiosInstance.getMonitorsByUserId(
+      const res = await networkService.getMonitorsByUserId(
         token,
         user._id,
         25,
@@ -68,7 +68,7 @@ export const updatePageSpeed = createAsyncThunk(
         interval: monitor.interval,
         // notifications: monitor.notifications,
       };
-      const res = await axiosInstance.updateMonitor(
+      const res = await networkService.updateMonitor(
         authToken,
         monitor._id,
         updatedFields
@@ -92,7 +92,10 @@ export const deletePageSpeed = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.deleteMonitorById(authToken, monitor._id);
+      const res = await networkService.deleteMonitorById(
+        authToken,
+        monitor._id
+      );
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
diff --git a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
index d92116a9a..9ab7d385b 100644
--- a/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
+++ b/Client/src/Features/UptimeMonitors/uptimeMonitorsSlice.js
@@ -1,6 +1,6 @@
 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import { jwtDecode } from "jwt-decode";
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 const initialState = {
   isLoading: false,
   monitors: [],
@@ -13,7 +13,7 @@ export const createUptimeMonitor = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.createMonitor(authToken, monitor);
+      const res = await networkService.createMonitor(authToken, monitor);
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
@@ -33,7 +33,7 @@ export const getUptimeMonitorsByUserId = createAsyncThunk(
   async (token, thunkApi) => {
     const user = jwtDecode(token);
     try {
-      const res = await axiosInstance.getMonitorsByUserId(
+      const res = await networkService.getMonitorsByUserId(
         token,
         user._id,
         25,
@@ -67,7 +67,7 @@ export const updateUptimeMonitor = createAsyncThunk(
         interval: monitor.interval,
         notifications: monitor.notifications,
       };
-      const res = await axiosInstance.updateMonitor(
+      const res = await networkService.updateMonitor(
         authToken,
         monitor._id,
         updatedFields
@@ -91,7 +91,10 @@ export const deleteUptimeMonitor = createAsyncThunk(
   async (data, thunkApi) => {
     try {
       const { authToken, monitor } = data;
-      const res = await axiosInstance.deleteMonitorById(authToken, monitor._id);
+      const res = await networkService.deleteMonitorById(
+        authToken,
+        monitor._id
+      );
       return res.data;
     } catch (error) {
       if (error.response && error.response.data) {
diff --git a/Client/src/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx
index c6a939679..55e94d4db 100644
--- a/Client/src/HOC/withAdminCheck.jsx
+++ b/Client/src/HOC/withAdminCheck.jsx
@@ -1,13 +1,13 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import axiosInstance from "../Utils/NetworkService";
+import { networkService } from "../main";
 
 const withAdminCheck = (WrappedComponent) => {
   const WithAdminCheck = (props) => {
     const navigate = useNavigate();
 
     useEffect(() => {
-      axiosInstance
+      networkService
         .doesAdminExist()
         .then((response) => {
           if (response.data.data === true) {
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index 6a408c970..12dc52bef 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -7,7 +7,7 @@ import { login } from "../../Features/Auth/authSlice";
 import { useDispatch } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
 import Button from "../../Components/Button";
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 import Field from "../../Components/Inputs/Field";
 import background from "../../assets/Images/background_pattern_decorative.png";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
@@ -248,7 +248,7 @@ const Login = () => {
   const [step, setStep] = useState(0);
 
   useEffect(() => {
-    axiosInstance
+    networkService
       .doesAdminExist()
       .then((response) => {
         if (response.data.data === false) {
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 1dedaa0f1..b7dd70dc9 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -15,7 +15,7 @@ import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import Check from "../../../Components/Check/Check";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import "../index.css";
 
 /**
@@ -397,7 +397,7 @@ const Register = ({ isAdmin }) => {
     const fetchInvite = async () => {
       if (token !== undefined) {
         try {
-          const res = await axiosInstance.verifyInvitationToken(token);
+          const res = await networkService.verifyInvitationToken(token);
           const { role, email } = res.data.data;
           console.log(role);
           setForm({ ...form, email, role });
diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index 971886551..e476eac1f 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -18,7 +18,7 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
 
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import { StatusLabel } from "../../../Components/Label";
 
 const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
@@ -45,7 +45,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
       try {
         let res;
         if (selectedMonitor === "0") {
-          res = await axiosInstance.getChecksByUser(
+          res = await networkService.getChecksByUser(
             authToken,
             user._id,
             "desc",
@@ -56,7 +56,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
             paginationController.rowsPerPage
           );
         } else {
-          res = await axiosInstance.getChecksByMonitor(
+          res = await networkService.getChecksByMonitor(
             authToken,
             selectedMonitor,
             "desc",
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 3a50d3194..34768f7f9 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { ButtonGroup, Stack, Skeleton, Typography } from "@mui/material";
 import Button from "../../Components/Button";
-import axiosInstance from "../../Utils/NetworkService";
+import { networkService } from "../../main";
 import { useTheme } from "@emotion/react";
 import Select from "../../Components/Inputs/Select";
 import IncidentTable from "./IncidentTable";
@@ -48,7 +48,7 @@ const Incidents = () => {
   useEffect(() => {
     const fetchMonitors = async () => {
       setLoading(true);
-      const res = await axiosInstance.getMonitorsByUserId(
+      const res = await networkService.getMonitorsByUserId(
         authState.authToken,
         authState.user._id,
         1,
diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
index 2df061e82..28795dff5 100644
--- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -13,7 +13,7 @@ import {
 
 import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
-import axiosInstance from "../../../../Utils/NetworkService";
+import { networkService } from "../../../../main";
 import { StatusLabel } from "../../../../Components/Label";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
@@ -37,7 +37,7 @@ const PaginationTable = ({ monitorId, dateRange }) => {
   useEffect(() => {
     const fetchPage = async () => {
       try {
-        const res = await axiosInstance.getChecksByMonitor(
+        const res = await networkService.getChecksByMonitor(
           authToken,
           monitorId,
           "desc",
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 950fe3ee9..46f181f97 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import MonitorDetailsAreaChart from "../../../Components/Charts/MonitorDetailsAreaChart";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Button from "../../../Components/Button";
@@ -121,7 +121,7 @@ const DetailsPage = () => {
 
   const fetchMonitor = useCallback(async () => {
     try {
-      const res = await axiosInstance.getStatsByMonitorId(
+      const res = await networkService.getStatsByMonitorId(
         authToken,
         monitorId,
         null,
@@ -144,7 +144,7 @@ const DetailsPage = () => {
 
   useEffect(() => {
     const fetchCertificate = async () => {
-      const res = await axiosInstance.getCertificateExpiry(
+      const res = await networkService.getCertificateExpiry(
         authToken,
         monitorId
       );
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 10ae1fc7e..4c2185e13 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -9,7 +9,7 @@ import {
   formatDuration,
   formatDurationRounded,
 } from "../../../Utils/timeUtils";
-import axiosInstance from "../../../Utils/NetworkService";
+import { networkService } from "../../../main";
 import Button from "../../../Components/Button";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import SettingsIcon from "../../../assets/icons/settings-bold.svg?react";
@@ -186,7 +186,7 @@ const PageSpeedDetails = () => {
   useEffect(() => {
     const fetchMonitor = async () => {
       try {
-        const res = await axiosInstance.getStatsByMonitorId(
+        const res = await networkService.getStatsByMonitorId(
           authToken,
           monitorId,
           "desc",
diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js
index 2c112f22c..1c0eb3acb 100644
--- a/Client/src/Utils/NetworkService.js
+++ b/Client/src/Utils/NetworkService.js
@@ -2,273 +2,273 @@ import axios from "axios";
 import { clearAuthState } from "../Features/Auth/authSlice";
 const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 
-let store;
-
-export const injectStore = (s) => {
-  store = s;
-};
-
-const axiosInstance = axios.create({
-  baseURL: BASE_URL,
-});
-
-axiosInstance.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    console.error(error);
-    if (error.response && error.response.status === 401) {
-      console.log("Invalid token revoked");
-      store.dispatch(clearAuthState());
-    }
-    return Promise.reject(error);
+class NetworkService {
+  constructor(store) {
+    this.store = store;
+    this.axiosInstance = axios.create({ baseURL: BASE_URL });
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        console.error(error);
+        if (error.response && error.response.status === 401) {
+          console.log("Invalid token revoked");
+          networkService;
+        }
+        return Promise.reject(error);
+      }
+    );
   }
-);
 
-// **********************************
-// Create a new monitor
-// **********************************
-axiosInstance.createMonitor = async (authToken, monitor) => {
-  return axiosInstance.post(`/monitors`, monitor, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
-
-// **********************************
-// Get all uptime monitors for a user
-// **********************************
-axiosInstance.getMonitorsByUserId = async (
-  authToken,
-  userId,
-  limit,
-  types,
-  status,
-  sortOrder,
-  normalize
-) => {
-  const params = new URLSearchParams();
-
-  if (limit) params.append("limit", limit);
-  if (types) {
-    types.forEach((type) => {
-      params.append("type", type);
+  // **********************************
+  // Create a new monitor
+  // **********************************
+  async createMonitor(authToken, monitor) {
+    return this.axiosInstance.post(`/monitors`, monitor, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
     });
   }
-  if (status) params.append("status", status);
-  if (sortOrder) params.append("sortOrder", sortOrder);
-  if (normalize) params.append("normalize", normalize);
 
-  return axiosInstance.get(`/monitors/user/${userId}?${params.toString()}`, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
+  // **********************************
+  // Get all uptime monitors for a user
+  // **********************************
+  async getMonitorsByUserId(
+    authToken,
+    userId,
+    limit,
+    types,
+    status,
+    sortOrder,
+    normalize
+  ) {
+    const params = new URLSearchParams();
 
-// **********************************
-// Get stats for a monitor
-// **********************************
-axiosInstance.getStatsByMonitorId = async (
-  authToken,
-  monitorId,
-  sortOrder,
-  limit,
-  dateRange,
-  numToDisplay,
-  normalize
-) => {
-  const params = new URLSearchParams();
-  if (sortOrder) params.append("sortOrder", sortOrder);
-  if (limit) params.append("limit", limit);
-  if (dateRange) params.append("dateRange", dateRange);
-  if (numToDisplay) params.append("numToDisplay", numToDisplay);
-  if (normalize) params.append("normalize", normalize);
+    if (limit) params.append("limit", limit);
+    if (types) {
+      types.forEach((type) => {
+        params.append("type", type);
+      });
+    }
+    if (status) params.append("status", status);
+    if (sortOrder) params.append("sortOrder", sortOrder);
+    if (normalize) params.append("normalize", normalize);
 
-  return axiosInstance.get(
-    `/monitors/stats/${monitorId}?${params.toString()}`,
-    {
+    return this.axiosInstance.get(
+      `/monitors/user/${userId}?${params.toString()}`,
+      {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+          "Content-Type": "application/json",
+        },
+      }
+    );
+  }
+
+  // **********************************
+  // Get stats for a monitor
+  // **********************************
+  async getStatsByMonitorId(
+    authToken,
+    monitorId,
+    sortOrder,
+    limit,
+    dateRange,
+    numToDisplay,
+    normalize
+  ) {
+    const params = new URLSearchParams();
+    if (sortOrder) params.append("sortOrder", sortOrder);
+    if (limit) params.append("limit", limit);
+    if (dateRange) params.append("dateRange", dateRange);
+    if (numToDisplay) params.append("numToDisplay", numToDisplay);
+    if (normalize) params.append("normalize", normalize);
+
+    return this.axiosInstance.get(
+      `/monitors/stats/${monitorId}?${params.toString()}`,
+      {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      }
+    );
+  }
+
+  // **********************************
+  // Updates a single monitor
+  // **********************************
+  async updateMonitor(authToken, monitorId, updatedFields) {
+    return this.axiosInstance.put(`/monitors/${monitorId}`, updatedFields, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
+  // **********************************
+  // Deletes a single monitor
+  // **********************************
+  async deleteMonitorById(authToken, monitorId) {
+    return this.axiosInstance.delete(`/monitors/${monitorId}`, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
+  // **********************************
+  // Get certificate
+  // **********************************
+  async getCertificateExpiry(authToken, monitorId) {
+    return this.axiosInstance.get(`/monitors/certificate/${monitorId}`, {
       headers: {
         Authorization: `Bearer ${authToken}`,
       },
-    }
-  );
-};
+    });
+  }
 
-// **********************************
-// Updates a single monitor
-// **********************************
-axiosInstance.updateMonitor = async (authToken, monitorId, updatedFields) => {
-  return axiosInstance.put(`/monitors/${monitorId}`, updatedFields, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
+  // **********************************
+  // Register a new user
+  // **********************************
+  async registerUser(form) {
+    return this.axiosInstance.post(`/auth/register`, form);
+  }
 
-// **********************************
-// Deletes a single monitor
-// **********************************
-axiosInstance.deleteMonitorById = async (authToken, monitorId) => {
-  return axiosInstance.delete(`/monitors/${monitorId}`, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
+  // **********************************
+  // Log in an exisiting user
+  // **********************************
+  async loginUser(form) {
+    return this.axiosInstance.post(`/auth/login`, form);
+  }
 
-// **********************************
-// Get certificate
-// **********************************
-axiosInstance.getCertificateExpiry = async (authToken, monitorId) => {
-  return axiosInstance.get(`/monitors/certificate/${monitorId}`, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-    },
-  });
-};
+  // **********************************
+  // Update in an exisiting user
+  // **********************************
+  async updateUser(authToken, userId, form) {
+    return this.axiosInstance.put(`/auth/user/${userId}`, form, {
+      headers: {
+        Authorization: `Bearer ${authToken}`,
+        "Content-Type": "application/json",
+      },
+    });
+  }
 
-// **********************************
-// Register a new user
-// **********************************
-axiosInstance.registerUser = async (form) => {
-  return axiosInstance.post(`/auth/register`, form);
-};
+  // **********************************
+  // Forgot password request
+  // **********************************
+  async forgotPassword(form) {
+    return this.axiosInstance.post(`/auth/recovery/request`, form);
+  }
 
-// **********************************
-// Log in an exisiting user
-// **********************************
-axiosInstance.loginUser = async (form) => {
-  return axiosInstance.post(`/auth/login`, form);
-};
+  async validateRecoveryToken(recoveryToken) {
+    return this.axiosInstance.post("/auth/recovery/validate", {
+      recoveryToken,
+    });
+  }
 
-// **********************************
-// Update in an exisiting user
-// **********************************
-axiosInstance.updateUser = async (authToken, userId, form) => {
-  return axiosInstance.put(`/auth/user/${userId}`, form, {
-    headers: {
-      Authorization: `Bearer ${authToken}`,
-      "Content-Type": "application/json",
-    },
-  });
-};
+  // **********************************
+  // Set new password request
+  // **********************************
+  async setNewPassword(recoveryToken, form) {
+    return this.axiosInstance.post("/auth/recovery/reset", {
+      ...form,
+      recoveryToken,
+    });
+  }
 
-// **********************************
-// Forgot password request
-// **********************************
-axiosInstance.forgotPassword = async (form) => {
-  return axiosInstance.post(`/auth/recovery/request`, form);
-};
+  // **********************************
+  // Check for admin user
+  // **********************************
+  async doesAdminExist() {
+    return this.axiosInstance.get("/auth/users/admin");
+  }
 
-axiosInstance.validateRecoveryToken = async (recoveryToken) => {
-  return axiosInstance.post("/auth/recovery/validate", {
-    recoveryToken,
-  });
-};
-
-// **********************************
-// Set new password request
-// **********************************
-axiosInstance.setNewPassword = async (recoveryToken, form) => {
-  return axiosInstance.post("/auth/recovery/reset", {
-    ...form,
-    recoveryToken,
-  });
-};
-
-// **********************************
-// Check for admin user
-// **********************************
-axiosInstance.doesAdminExist = async () => {
-  return axiosInstance.get("/auth/users/admin");
-};
-
-// **********************************
-// Get all users
-// **********************************
-axiosInstance.getAllUsers = async (authToken) => {
-  return axiosInstance.get("/auth/users", {
-    headers: { Authorization: `Bearer ${authToken}` },
-  });
-};
-
-// **********************************
-// Request Invitation Token
-// **********************************
-axiosInstance.requestInvitationToken = async (authToken, email, role) => {
-  return axiosInstance.post(
-    `/auth/invite`,
-    { email, role },
-    {
+  // **********************************
+  // Get all users
+  // **********************************
+  async getAllUsers(authToken) {
+    return this.axiosInstance.get("/auth/users", {
       headers: { Authorization: `Bearer ${authToken}` },
-    }
-  );
-};
+    });
+  }
 
-// **********************************
-// Verify Invitation Token
-// **********************************
-axiosInstance.verifyInvitationToken = async (token) => {
-  return axiosInstance.post(`/auth/invite/verify`, {
-    token,
-  });
-};
+  // **********************************
+  // Request Invitation Token
+  // **********************************
+  async requestInvitationToken(authToken, email, role) {
+    return this.axiosInstance.post(
+      `/auth/invite`,
+      { email, role },
+      {
+        headers: { Authorization: `Bearer ${authToken}` },
+      }
+    );
+  }
 
-// **********************************
-// Get all checks for a given monitor
-// **********************************
+  // **********************************
+  // Verify Invitation Token
+  // **********************************
+  async verifyInvitationToken(token) {
+    return this.axiosInstance.post(`/auth/invite/verify`, {
+      token,
+    });
+  }
 
-axiosInstance.getChecksByMonitor = async (
-  authToken,
-  monitorId,
-  sortOrder,
-  limit,
-  dateRange,
-  filter,
-  page,
-  rowsPerPage
-) => {
-  const params = new URLSearchParams();
-  if (sortOrder) params.append("sortOrder", sortOrder);
-  if (limit) params.append("limit", limit);
-  if (dateRange) params.append("dateRange", dateRange);
-  if (filter) params.append("filter", filter);
-  if (page) params.append("page", page);
-  if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
+  // **********************************
+  // Get all checks for a given monitor
+  // **********************************
 
-  return axiosInstance.get(`/checks/${monitorId}?${params.toString()}`, {
-    headers: { Authorization: `Bearer ${authToken}` },
-  });
-};
+  async getChecksByMonitor(
+    authToken,
+    monitorId,
+    sortOrder,
+    limit,
+    dateRange,
+    filter,
+    page,
+    rowsPerPage
+  ) {
+    const params = new URLSearchParams();
+    if (sortOrder) params.append("sortOrder", sortOrder);
+    if (limit) params.append("limit", limit);
+    if (dateRange) params.append("dateRange", dateRange);
+    if (filter) params.append("filter", filter);
+    if (page) params.append("page", page);
+    if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
 
-// **********************************
-// Get all checks for a given user
-// **********************************
-axiosInstance.getChecksByUser = async (
-  authToken,
-  userId,
-  sortOrder,
-  limit,
-  dateRange,
-  filter,
-  page,
-  rowsPerPage
-) => {
-  const params = new URLSearchParams();
-  if (sortOrder) params.append("sortOrder", sortOrder);
-  if (limit) params.append("limit", limit);
-  if (dateRange) params.append("dateRange", dateRange);
-  if (filter) params.append("filter", filter);
-  if (page) params.append("page", page);
-  if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
-  return axiosInstance.get(`/checks/user/${userId}?${params.toString()}`, {
-    headers: { Authorization: `Bearer ${authToken}` },
-  });
-};
+    return this.axiosInstance.get(`/checks/${monitorId}?${params.toString()}`, {
+      headers: { Authorization: `Bearer ${authToken}` },
+    });
+  }
 
-export default axiosInstance;
+  // **********************************
+  // Get all checks for a given user
+  // **********************************
+  async getChecksByUser(
+    authToken,
+    userId,
+    sortOrder,
+    limit,
+    dateRange,
+    filter,
+    page,
+    rowsPerPage
+  ) {
+    const params = new URLSearchParams();
+    if (sortOrder) params.append("sortOrder", sortOrder);
+    if (limit) params.append("limit", limit);
+    if (dateRange) params.append("dateRange", dateRange);
+    if (filter) params.append("filter", filter);
+    if (page) params.append("page", page);
+    if (rowsPerPage) params.append("rowsPerPage", rowsPerPage);
+    return this.axiosInstance.get(
+      `/checks/user/${userId}?${params.toString()}`,
+      {
+        headers: { Authorization: `Bearer ${authToken}` },
+      }
+    );
+  }
+}
+
+export default NetworkService;
diff --git a/Client/src/main.jsx b/Client/src/main.jsx
index 387d1f931..00cec7d14 100644
--- a/Client/src/main.jsx
+++ b/Client/src/main.jsx
@@ -8,10 +8,8 @@ import { ThemeProvider } from "@mui/material";
 import { Provider } from "react-redux";
 import { persistor, store } from "./store";
 import { PersistGate } from "redux-persist/integration/react";
-import { injectStore } from "./Utils/NetworkService.js";
-
-injectStore(store);
-
+import NetworkService from "./Utils/NetworkService.js";
+export const networkService = new NetworkService(store);
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>

From 69597b3df0a4b52b8bc5cec21dff1976b91f0e08 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 18 Aug 2024 17:56:18 -0700
Subject: [PATCH 23/72] Add jsdocs

---
 Client/src/Utils/NetworkService.js | 262 +++++++++++++++++++++++------
 1 file changed, 211 insertions(+), 51 deletions(-)

diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js
index 1c0eb3acb..21f1c1845 100644
--- a/Client/src/Utils/NetworkService.js
+++ b/Client/src/Utils/NetworkService.js
@@ -19,9 +19,17 @@ class NetworkService {
     );
   }
 
-  // **********************************
-  // Create a new monitor
-  // **********************************
+  /**
+   *
+   * ************************************
+   * Create a new monitor
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {Object} monitor - The monitor object to be sent in the request body.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   */
   async createMonitor(authToken, monitor) {
     return this.axiosInstance.post(`/monitors`, monitor, {
       headers: {
@@ -31,9 +39,21 @@ class NetworkService {
     });
   }
 
-  // **********************************
-  // Get all uptime monitors for a user
-  // **********************************
+  /**
+   * ************************************
+   * Get all uptime monitors for a user
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} userId - The ID of the user whose monitors are to be retrieved.
+   * @param {number} [limit] - The maximum number of monitors to retrieve.
+   * @param {Array<string>} [types] - The types of monitors to retrieve.
+   * @param {string} [status] - The status of the monitors to retrieve.
+   * @param {string} [sortOrder] - The order in which to sort the retrieved monitors.
+   * @param {boolean} [normalize] - Whether to normalize the retrieved monitors.
+   * @returns {Promise<AxiosResponse>} The response from the axios GET request.
+   */
   async getMonitorsByUserId(
     authToken,
     userId,
@@ -66,9 +86,21 @@ class NetworkService {
     );
   }
 
-  // **********************************
-  // Get stats for a monitor
-  // **********************************
+  /**
+   * ************************************
+   * Get stats for a monitor
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} monitorId - The ID of the monitor whose statistics are to be retrieved.
+   * @param {string} [sortOrder] - The order in which to sort the retrieved statistics.
+   * @param {number} [limit] - The maximum number of statistics to retrieve.
+   * @param {string} [dateRange] - The date range for which to retrieve statistics.
+   * @param {number} [numToDisplay] - The number of statistics to display.
+   * @param {boolean} [normalize] - Whether to normalize the retrieved statistics.
+   * @returns {Promise<AxiosResponse>} The response from the axios GET request.
+   */
   async getStatsByMonitorId(
     authToken,
     monitorId,
@@ -95,9 +127,17 @@ class NetworkService {
     );
   }
 
-  // **********************************
-  // Updates a single monitor
-  // **********************************
+  /**
+   * ************************************
+   * Updates a single monitor
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} monitorId - The ID of the monitor to be updated.
+   * @param {Object} updatedFields - The fields to be updated for the monitor.
+   * @returns {Promise<AxiosResponse>} The response from the axios PUT request.
+   */
   async updateMonitor(authToken, monitorId, updatedFields) {
     return this.axiosInstance.put(`/monitors/${monitorId}`, updatedFields, {
       headers: {
@@ -106,9 +146,17 @@ class NetworkService {
       },
     });
   }
-  // **********************************
-  // Deletes a single monitor
-  // **********************************
+
+  /**
+   * ************************************
+   * Deletes a single monitor by its ID
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} monitorId - The ID of the monitor to be deleted.
+   * @returns {Promise<AxiosResponse>} The response from the axios DELETE request.
+   */
   async deleteMonitorById(authToken, monitorId) {
     return this.axiosInstance.delete(`/monitors/${monitorId}`, {
       headers: {
@@ -117,9 +165,18 @@ class NetworkService {
       },
     });
   }
-  // **********************************
-  // Get certificate
-  // **********************************
+
+  /**
+   * ************************************
+   * Gets the certificate expiry for a monitor
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} monitorId - The ID of the monitor whose certificate expiry is to be retrieved.
+   * @returns {Promise<AxiosResponse>} The response from the axios GET request.
+   *
+   */
   async getCertificateExpiry(authToken, monitorId) {
     return this.axiosInstance.get(`/monitors/certificate/${monitorId}`, {
       headers: {
@@ -128,23 +185,45 @@ class NetworkService {
     });
   }
 
-  // **********************************
-  // Register a new user
-  // **********************************
+  /**
+   * ************************************
+   * Registers a new user
+   * ************************************
+   *
+   * @async
+   * @param {Object} form - The form data for the new user to be registered.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   */
   async registerUser(form) {
     return this.axiosInstance.post(`/auth/register`, form);
   }
 
-  // **********************************
-  // Log in an exisiting user
-  // **********************************
+  /**
+   * ************************************
+   * Logs in a user
+   * ************************************
+   *
+   * @async
+   * @param {Object} form - The form data for the user to be logged in.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   *
+   */
   async loginUser(form) {
     return this.axiosInstance.post(`/auth/login`, form);
   }
 
-  // **********************************
-  // Update in an exisiting user
-  // **********************************
+  /**
+   * ************************************
+   * Updates a user
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} userId - The ID of the user to be updated.
+   * @param {Object} form - The form data for the user to be updated.
+   * @returns {Promise<AxiosResponse>} The response from the axios PUT request.
+   *
+   */
   async updateUser(authToken, userId, form) {
     return this.axiosInstance.put(`/auth/user/${userId}`, form, {
       headers: {
@@ -154,22 +233,46 @@ class NetworkService {
     });
   }
 
-  // **********************************
-  // Forgot password request
-  // **********************************
+  /**
+   * ************************************
+   * Forgot password request
+   * ************************************
+   *
+   * @async
+   * @param {Object} form - The form data for the password recovery request.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   *
+   */
   async forgotPassword(form) {
     return this.axiosInstance.post(`/auth/recovery/request`, form);
   }
 
+  /**
+   * ************************************
+   * Validates a recovery token
+   * ************************************
+   *
+   * @async
+   * @param {string} recoveryToken - The recovery token to be validated.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   *
+   */
   async validateRecoveryToken(recoveryToken) {
     return this.axiosInstance.post("/auth/recovery/validate", {
       recoveryToken,
     });
   }
 
-  // **********************************
-  // Set new password request
-  // **********************************
+  /**
+   * ************************************
+   * Requests password recovery
+   * ************************************
+   *
+   * @async
+   * @param {Object} form - The form data for the password recovery request.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   *
+   */
   async setNewPassword(recoveryToken, form) {
     return this.axiosInstance.post("/auth/recovery/reset", {
       ...form,
@@ -177,25 +280,47 @@ class NetworkService {
     });
   }
 
-  // **********************************
-  // Check for admin user
-  // **********************************
+  /**
+   * ************************************
+   * Checks if an admin user exists
+   * ************************************
+   *
+   * @async
+   * @returns {Promise<AxiosResponse>} The response from the axios GET request.
+   *
+   */
   async doesAdminExist() {
     return this.axiosInstance.get("/auth/users/admin");
   }
 
-  // **********************************
-  // Get all users
-  // **********************************
+  /**
+   * ************************************
+   * Get all users
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @returns {Promise<AxiosResponse>} The response from the axios GET request.
+   *
+   */
   async getAllUsers(authToken) {
     return this.axiosInstance.get("/auth/users", {
       headers: { Authorization: `Bearer ${authToken}` },
     });
   }
 
-  // **********************************
-  // Request Invitation Token
-  // **********************************
+  /**
+   * ************************************
+   * Requests an invitation token
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} email - The email of the user to be invited.
+   * @param {string} role - The role of the user to be invited.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   *
+   */
   async requestInvitationToken(authToken, email, role) {
     return this.axiosInstance.post(
       `/auth/invite`,
@@ -206,18 +331,39 @@ class NetworkService {
     );
   }
 
-  // **********************************
-  // Verify Invitation Token
-  // **********************************
+  /**
+   * ************************************
+   * Verifies an invitation token
+   * ************************************
+   *
+   * @async
+   * @param {string} token - The invitation token to be verified.
+   * @returns {Promise<AxiosResponse>} The response from the axios POST request.
+   *
+   */
   async verifyInvitationToken(token) {
     return this.axiosInstance.post(`/auth/invite/verify`, {
       token,
     });
   }
 
-  // **********************************
-  // Get all checks for a given monitor
-  // **********************************
+  /**
+   * ************************************
+   * Get all checks for a given monitor
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} monitorId - The ID of the monitor.
+   * @param {string} sortOrder - The order in which to sort the checks.
+   * @param {number} limit - The maximum number of checks to retrieve.
+   * @param {string} dateRange - The range of dates for which to retrieve checks.
+   * @param {string} filter - The filter to apply to the checks.
+   * @param {number} page - The page number to retrieve in a paginated list.
+   * @param {number} rowsPerPage - The number of rows per page in a paginated list.
+   * @returns {Promise<AxiosResponse>} The response from the axios GET request.
+   *
+   */
 
   async getChecksByMonitor(
     authToken,
@@ -242,9 +388,23 @@ class NetworkService {
     });
   }
 
-  // **********************************
-  // Get all checks for a given user
-  // **********************************
+  /**
+   * ************************************
+   * Get all checks for a given user
+   * ************************************
+   *
+   * @async
+   * @param {string} authToken - The authorization token to be used in the request header.
+   * @param {string} userId - The ID of the user.
+   * @param {string} sortOrder - The order in which to sort the checks.
+   * @param {number} limit - The maximum number of checks to retrieve.
+   * @param {string} dateRange - The range of dates for which to retrieve checks.
+   * @param {string} filter - The filter to apply to the checks.
+   * @param {number} page - The page number to retrieve in a paginated list.
+   * @param {number} rowsPerPage - The number of rows per page in a paginated list.
+   * @returns {Promise<AxiosResponse>} The response from the axios GET request.
+   *
+   */
   async getChecksByUser(
     authToken,
     userId,

From 3f19c713308d3994548832549047f121c260a008 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 18 Aug 2024 19:17:50 -0700
Subject: [PATCH 24/72] Migrate from serve to nginx

---
 Docker/client.Dockerfile   | 12 ++++++++----
 Docker/docker-compose.yaml |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/Docker/client.Dockerfile b/Docker/client.Dockerfile
index 61b090ed7..5b43527f2 100644
--- a/Docker/client.Dockerfile
+++ b/Docker/client.Dockerfile
@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:20-alpine as build
 
 WORKDIR /app
 
@@ -10,8 +10,12 @@ COPY ./Client .
 
 RUN npm run build
 
-RUN npm install -g serve
+# RUN npm install -g serve
 
-CMD ["serve","-s", "dist", "-l", "5173"]
+# CMD ["serve","-s", "dist", "-l", "5173"]
 
-EXPOSE 5000
+FROM nginx:1.27.1-alpine
+
+COPY --from=build /app/dist /usr/share/nginx/html
+
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/Docker/docker-compose.yaml b/Docker/docker-compose.yaml
index a60345765..1abbce9d4 100644
--- a/Docker/docker-compose.yaml
+++ b/Docker/docker-compose.yaml
@@ -3,7 +3,7 @@ services:
   client:
     image: uptime_client:latest
     ports:
-      - "80:5173"
+      - "80:80"
     depends_on:
       - server
   server:

From 85a82bb8c78c74a50651c1621cd7075765e7406d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 18 Aug 2024 22:07:36 -0700
Subject: [PATCH 25/72] removed log statement

---
 Server/controllers/authController.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Server/controllers/authController.js b/Server/controllers/authController.js
index 8efe2ae19..4b5f51121 100644
--- a/Server/controllers/authController.js
+++ b/Server/controllers/authController.js
@@ -450,7 +450,6 @@ const deleteUserController = async (req, res, next) => {
     }
 
     // 1. Find all the monitors associated with the user id
-    console.log("wtf");
 
     const monitors = await req.db.getMonitorsByUserId({
       params: { userId: _id },

From 1ef7483fed0137bec0962ed7bdf489c44049700b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 18 Aug 2024 22:52:58 -0700
Subject: [PATCH 26/72] Refactored action menu

---
 .../src/Pages/Monitors/ActionMenu/index.jsx   | 88 +++++++++++++++++++
 Client/src/Pages/Monitors/index.jsx           | 73 ++-------------
 2 files changed, 95 insertions(+), 66 deletions(-)
 create mode 100644 Client/src/Pages/Monitors/ActionMenu/index.jsx

diff --git a/Client/src/Pages/Monitors/ActionMenu/index.jsx b/Client/src/Pages/Monitors/ActionMenu/index.jsx
new file mode 100644
index 000000000..a8fb437bc
--- /dev/null
+++ b/Client/src/Pages/Monitors/ActionMenu/index.jsx
@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { Box, IconButton, Menu, MenuItem } from "@mui/material";
+import Settings from "../../../assets/icons/settings-bold.svg?react";
+import { useNavigate } from "react-router-dom";
+
+const ActionsMenu = ({ monitor }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [actions, setActions] = useState({});
+  const openMenu = (event, id, url) => {
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+    setActions({ id: id, url: url });
+  };
+
+  const openRemove = () => {
+    closeMenu();
+    setIsOpen(true);
+  };
+
+  const closeMenu = () => {
+    setAnchorEl(null);
+  };
+
+  const navigate = useNavigate();
+  return (
+    <>
+      <IconButton
+        aria-label="monitor actions"
+        onClick={(event) => {
+          event.stopPropagation();
+          openMenu(
+            event,
+            monitor._id,
+            monitor.type === "ping" ? null : monitor.url
+          );
+        }}
+        sx={{
+          "&:focus": {
+            outline: "none",
+          },
+        }}
+      >
+        <Settings />
+      </IconButton>
+
+      <Menu
+        className="actions-menu"
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={closeMenu}
+      >
+        {actions.url !== null ? (
+          <MenuItem
+            onClick={() => {
+              window.open(actions.url, "_blank", "noreferrer");
+            }}
+          >
+            Open site
+          </MenuItem>
+        ) : (
+          ""
+        )}
+        <MenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+            navigate(`/monitors/${actions.id}`);
+          }}
+        >
+          Details
+        </MenuItem>
+        {/* TODO - pass monitor id to Incidents page */}
+        <MenuItem disabled>Incidents</MenuItem>
+        <MenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+
+            navigate(`/monitors/configure/${actions.id}`);
+          }}
+        >
+          Configure
+        </MenuItem>
+        <MenuItem onClick={openRemove}>Remove</MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default ActionsMenu;
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index b80e88f5a..24ab4d172 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -11,7 +11,6 @@ import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import { useTheme } from "@emotion/react";
 import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
 import OpenInNewPage from "../../assets/icons/open-in-new-page.svg?react";
-import Settings from "../../assets/icons/settings-bold.svg?react";
 import BasicTable from "../../Components/BasicTable";
 import { StatusLabel } from "../../Components/Label";
 import { createToast } from "../../Utils/toastUtils";
@@ -26,6 +25,7 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
+import ActionsMenu from "./ActionMenu";
 
 /**
  * Host component.
@@ -111,22 +111,8 @@ const Monitors = () => {
   const authState = useSelector((state) => state.auth);
   const dispatch = useDispatch({});
 
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [actions, setActions] = useState({});
-  const openMenu = (event, id, url) => {
-    event.preventDefault();
-    setAnchorEl(event.currentTarget);
-    setActions({ id: id, url: url });
-  };
-  const closeMenu = () => {
-    setAnchorEl(null);
-  };
-
   const [isOpen, setIsOpen] = useState(false);
-  const openRemove = () => {
-    closeMenu();
-    setIsOpen(true);
-  };
+
   const handleRemove = async (event) => {
     event.preventDefault();
     let monitor = { _id: actions.id };
@@ -191,7 +177,9 @@ 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} /> },
         {
@@ -213,28 +201,7 @@ const Monitors = () => {
         },
         {
           id: idx + 4,
-          data: (
-            <>
-              <IconButton
-                aria-label="monitor actions"
-                onClick={(event) => {
-                  event.stopPropagation();
-                  openMenu(
-                    event,
-                    monitor._id,
-                    monitor.type === "ping" ? null : monitor.url
-                  );
-                }}
-                sx={{
-                  "&:focus": {
-                    outline: "none",
-                  },
-                }}
-              >
-                <Settings />
-              </IconButton>
-            </>
-          ),
+          data: <ActionsMenu monitor={monitor} />,
         },
       ],
     };
@@ -327,33 +294,7 @@ const Monitors = () => {
           )}
         </>
       )}
-      <Menu
-        className="actions-menu"
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={closeMenu}
-      >
-        {actions.url !== null ? (
-          <MenuItem
-            onClick={() => {
-              window.open(actions.url, "_blank", "noreferrer");
-            }}
-          >
-            Open site
-          </MenuItem>
-        ) : (
-          ""
-        )}
-        <MenuItem onClick={() => navigate(`/monitors/${actions.id}`)}>
-          Details
-        </MenuItem>
-        {/* TODO - pass monitor id to Incidents page */}
-        <MenuItem disabled>Incidents</MenuItem>
-        <MenuItem onClick={() => navigate(`/monitors/configure/${actions.id}`)}>
-          Configure
-        </MenuItem>
-        <MenuItem onClick={openRemove}>Remove</MenuItem>
-      </Menu>
+
       <Modal
         aria-labelledby="modal-delete-monitor"
         aria-describedby="delete-monitor-confirmation"

From bf336ce0a58fe3f14c1064d2b65bdd12e3277603 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 09:48:45 -0700
Subject: [PATCH 27/72] Add null monitor check to Network Service

---
 Server/service/networkService.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/Server/service/networkService.js b/Server/service/networkService.js
index 375380f2e..b688b6fff 100644
--- a/Server/service/networkService.js
+++ b/Server/service/networkService.js
@@ -16,6 +16,14 @@ class NetworkService {
   async handleNotification(job, isAlive) {
     const { _id } = job.data;
     const monitor = await this.db.getMonitorById(_id);
+    if (monitor === null || monitor === undefined) {
+      logger.error(`Null Monitor: ${_id}`, {
+        method: "handleNotification",
+        service: this.SERVICE_NAME,
+        jobId: job.id,
+      });
+      return;
+    }
 
     // If monitor status changes, update monitor status and send notification
     if (monitor.status !== isAlive) {

From 6d3ed27f317289a60988904e5922e561120c040c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 10:02:12 -0700
Subject: [PATCH 28/72] Parsed mongo doc correctly in Normalization function

---
 Client/src/Pages/Monitors/Details/index.jsx | 1 -
 Server/db/mongo/modules/monitorModule.js    | 1 -
 Server/utils/dataUtils.js                   | 2 +-
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 79fba3b6b..b64398f4e 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -16,7 +16,6 @@ import {
   formatDurationRounded,
 } from "../../../Utils/timeUtils";
 import "./index.css";
-import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails60MinChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 const StatBox = ({ title, value }) => {
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 0fc56c755..d99de3e01 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -260,7 +260,6 @@ const getMonitorStatsById = async (req) => {
     monitorStats.latestResponseTime = getLatestResponseTime(checksAll);
     monitorStats.incidents = incidents;
     monitorStats.checks = dateRangeChecks;
-
     return monitorStats;
   } catch (error) {
     console.log(error);
diff --git a/Server/utils/dataUtils.js b/Server/utils/dataUtils.js
index f1c4b39b2..b1180802b 100644
--- a/Server/utils/dataUtils.js
+++ b/Server/utils/dataUtils.js
@@ -40,7 +40,7 @@ const NormalizeData = (checks, rangeMin, rangeMax) => {
     return normalizedChecks;
   } else {
     return checks.map((check) => {
-      return { ...check, originalResponseTime: check.responseTime };
+      return { ...check._doc, originalResponseTime: check.responseTime };
     });
   }
 };

From a2d54ce7d77bd017f2a7685af7deaee1abbfd33e Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 13:23:17 -0400
Subject: [PATCH 29/72] Added collapse/expand button

---
 Client/src/Components/Sidebar/index.css       |  16 ++-
 Client/src/Components/Sidebar/index.jsx       | 114 ++++++++++++++----
 Client/src/Layouts/HomeLayout/index.css       |   5 -
 .../CreateMaintenanceWindow/index.jsx         |   2 +-
 Client/src/assets/icons/left-arrow-long.svg   |   3 +
 Client/src/assets/icons/left-arrow.svg        |   4 +-
 6 files changed, 109 insertions(+), 35 deletions(-)
 create mode 100644 Client/src/assets/icons/left-arrow-long.svg

diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 36415438c..d41778624 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -52,7 +52,7 @@ aside
   > .MuiListItemButton-root::before {
   content: "";
   position: absolute;
-  left: -8px;
+  left: -7px;
   top: 0;
   height: 100%;
   width: 100%;
@@ -65,7 +65,8 @@ aside
   > .MuiListItemButton-root:last-child::before {
   height: 50%;
 }
-aside .MuiCollapse-wrapperInner .MuiList-root svg {
+aside .MuiCollapse-wrapperInner .MuiList-root svg,
+aside .MuiList-root .MuiListItemText-root + svg {
   width: 18px;
   height: 18px;
 }
@@ -73,11 +74,18 @@ aside .MuiCollapse-wrapperInner .MuiList-root svg {
 aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
   content: "";
   position: absolute;
-  left: -8px;
+  left: -7px;
   top: 50%;
   height: 1px;
-  width: 7px;
+  width: 6px;
   border-radius: 50%;
   background-color: var(--env-var-color-5);
   opacity: 0.3;
 }
+
+aside {
+  transition: flex 300ms ease-out;
+}
+aside .MuiList-root {
+  transition: padding 100ms ease;
+}
\ No newline at end of file
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 159b01503..74e868aa8 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -36,6 +36,8 @@ import PageSpeed from "../../assets/icons/page-speed.svg?react";
 import Settings from "../../assets/icons/settings.svg?react";
 import ArrowDown from "../../assets/icons/down-arrow.svg?react";
 import ArrowUp from "../../assets/icons/up-arrow.svg?react";
+import ArrowRight from "../../assets/icons/right-arrow.svg?react";
+import ArrowLeft from "../../assets/icons/left-arrow.svg?react";
 
 import "./index.css";
 
@@ -82,6 +84,7 @@ function Sidebar() {
   const dispatch = useDispatch();
   const authState = useSelector((state) => state.auth);
   const [open, setOpen] = useState({ Dashboard: false, Account: false });
+  const [collapsed, setCollapsed] = useState(false);
 
   /**
    * Handles logging out the user
@@ -105,9 +108,42 @@ function Sidebar() {
   }, []);
 
   return (
-    <Stack component="aside" gap={theme.gap.medium}>
-      <Box py={theme.gap.large} pl={theme.gap.lgplus}>
-        <BWULogo alt="BlueWave Uptime Logo" />
+    <Stack
+      component="aside"
+      gap={theme.gap.medium}
+      sx={{ flex: collapsed ? 0 : 1 }}
+    >
+      <Box
+        width="100%"
+        py={theme.gap.large}
+        pl={collapsed ? theme.gap.medium : theme.gap.lgplus}
+      >
+        {!collapsed && <BWULogo alt="BlueWave Uptime Logo" />}
+        <IconButton
+          sx={{
+            position: "absolute",
+            right: 0,
+            transform: `translate(50%, 0)`,
+            backgroundColor: theme.palette.otherColors.fillGray,
+            border: `solid 1px ${theme.palette.otherColors.graishWhite}`,
+            p: "5px",
+            "& svg": {
+              width: theme.gap.ml,
+              height: theme.gap.ml,
+              "& path": {
+                stroke: theme.palette.otherColors.bluishGray,
+              },
+            },
+            "&:focus": { outline: "none" },
+            "&:hover": {
+              backgroundColor: "#e3e3e3",
+              borderColor: theme.palette.otherColors.graishWhite,
+            },
+          }}
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          {collapsed ? <ArrowRight /> : <ArrowLeft />}
+        </IconButton>
       </Box>
       {/* menu */}
       <List
@@ -118,11 +154,16 @@ function Sidebar() {
           <ListSubheader
             component="div"
             id="nested-menu-subheader"
-            sx={{ pt: theme.gap.small }}
+            sx={{
+              pt: theme.gap.small,
+              px: collapsed ? theme.gap.xs : theme.gap.ml,
+              textAlign: collapsed ? "center" : "left",
+            }}
           >
             Menu
           </ListSubheader>
         }
+        sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
       >
         {menu.map((item) =>
           item.path ? (
@@ -135,10 +176,23 @@ function Sidebar() {
               sx={{
                 gap: theme.gap.medium,
                 borderRadius: `${theme.shape.borderRadius}px`,
+                justifyContent: collapsed ? "center" : "flex-start",
               }}
             >
               <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-              <ListItemText>{item.name}</ListItemText>
+              {!collapsed && <ListItemText>{item.name}</ListItemText>}
+            </ListItemButton>
+          ) : collapsed ? (
+            <ListItemButton
+              key={item.name}
+              sx={{
+                gap: theme.gap.medium,
+                borderRadius: `${theme.shape.borderRadius}px`,
+                justifyContent: collapsed ? "center" : "flex-start",
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+              {!collapsed && <ListItemText>{item.name}</ListItemText>}
             </ListItemButton>
           ) : (
             <React.Fragment key={item.name}>
@@ -152,6 +206,7 @@ function Sidebar() {
                 sx={{
                   gap: theme.gap.medium,
                   borderRadius: `${theme.shape.borderRadius}px`,
+                  justifyContent: collapsed ? "center" : "flex-start",
                 }}
               >
                 <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
@@ -210,11 +265,16 @@ function Sidebar() {
           <ListSubheader
             component="div"
             id="nested-other-subheader"
-            sx={{ pt: theme.gap.small }}
+            sx={{
+              pt: theme.gap.small,
+              px: collapsed ? theme.gap.xs : theme.gap.ml,
+              textAlign: collapsed ? "center" : "left",
+            }}
           >
             Other
           </ListSubheader>
         }
+        sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
       >
         {other.map((item) => (
           <ListItemButton
@@ -234,16 +294,20 @@ function Sidebar() {
             sx={{
               gap: theme.gap.medium,
               borderRadius: `${theme.shape.borderRadius}px`,
+              justifyContent: collapsed ? "center" : "flex-start",
             }}
           >
             <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-            <ListItemText>{item.name}</ListItemText>
+            {!collapsed && <ListItemText>{item.name}</ListItemText>}
           </ListItemButton>
         ))}
       </List>
       <Divider sx={{ mt: "auto" }} />
+
       <Stack
         direction="row"
+        height="50px"
+        justifyContent={collapsed ? "center" : "flex-start"}
         alignItems="center"
         py={theme.gap.small}
         px={theme.gap.medium}
@@ -251,22 +315,26 @@ function Sidebar() {
         borderRadius={`${theme.shape.borderRadius}px`}
       >
         <Avatar small={true} />
-        <Box ml={theme.gap.xs}>
-          <Typography component="span" fontWeight={500}>
-            {authState.user?.firstName} {authState.user?.lastName}
-          </Typography>
-          <Typography sx={{ textTransform: "capitalize" }}>
-            {authState.user?.role}
-          </Typography>
-        </Box>
-        <Tooltip title="Log Out">
-          <IconButton
-            sx={{ ml: "auto", "&:focus": { outline: "none" } }}
-            onClick={logout}
-          >
-            <LogoutSvg style={{ width: "20px", height: "20px" }} />
-          </IconButton>
-        </Tooltip>
+        {!collapsed && (
+          <>
+            <Box ml={theme.gap.xs}>
+              <Typography component="span" fontWeight={500}>
+                {authState.user?.firstName} {authState.user?.lastName}
+              </Typography>
+              <Typography sx={{ textTransform: "capitalize" }}>
+                {authState.user?.role}
+              </Typography>
+            </Box>
+            <Tooltip title="Log Out">
+              <IconButton
+                sx={{ ml: "auto", "&:focus": { outline: "none" } }}
+                onClick={logout}
+              >
+                <LogoutSvg style={{ width: "20px", height: "20px" }} />
+              </IconButton>
+            </Tooltip>
+          </>
+        )}
       </Stack>
     </Stack>
   );
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index f143b3fd9..dcdcf0535 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -19,7 +19,6 @@
 
   height: calc(100vh - var(--env-var-spacing-2) * 2);
   max-width: var(--env-var-side-bar-width);
-  flex: 1;
 
   border: 1px solid var(--color-border-0);
   border-radius: var(--env-var-radius-1);
@@ -27,10 +26,6 @@
 
   padding: var(--env-var-spacing-1) 0;
 }
-.home-layout aside > *:not(:first-child) {
-  padding-left: var(--env-var-spacing-1-plus);
-  padding-right: var(--env-var-spacing-1-plus);
-}
 
 .home-layout > div {
   min-height: calc(100vh - var(--env-var-spacing-2) * 2);
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index 187d9c63d..8fff6e4a1 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -2,7 +2,7 @@ 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 Back from "../../../assets/icons/left-arrow-long.svg?react";
 import Select from "../../../Components/Inputs/Select";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
diff --git a/Client/src/assets/icons/left-arrow-long.svg b/Client/src/assets/icons/left-arrow-long.svg
new file mode 100644
index 000000000..db9b827ed
--- /dev/null
+++ b/Client/src/assets/icons/left-arrow-long.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>
diff --git a/Client/src/assets/icons/left-arrow.svg b/Client/src/assets/icons/left-arrow.svg
index db9b827ed..8b38c408a 100644
--- a/Client/src/assets/icons/left-arrow.svg
+++ b/Client/src/assets/icons/left-arrow.svg
@@ -1,3 +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 width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 18L9 12L15 6" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

From a11006c7f6b7fba8134a15a55832cc082d3b7e8d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 10:34:53 -0700
Subject: [PATCH 30/72] Add null data checks to pagespeed

---
 Client/src/Pages/PageSpeed/Details/index.jsx | 43 +++++++++++++-------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index dda768956..8ed0ec5c2 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -20,17 +20,8 @@ import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
+import PropTypes from "prop-types";
 
-
-/**
- * Displays a box with an icon, title, and value.
- *
- * @param {Object} props
- * @param {ReactNode} props.icon - The icon to display in the box.
- * @param {string} props.title - The title text to display above the value.
- * @param {string | number} props.value - The value text to display in the box.
- * @returns {JSX.Element}
- */
 const StatBox = ({ icon, title, value }) => {
   const theme = useTheme();
 
@@ -54,6 +45,12 @@ const StatBox = ({ icon, title, value }) => {
   );
 };
 
+StatBox.propTypes = {
+  icon: PropTypes.element,
+  title: PropTypes.string,
+  value: PropTypes.node,
+};
+
 /**
  * Renders a centered label within a pie chart.
  *
@@ -86,6 +83,12 @@ const PieCenterLabel = ({ value, color, setExpand }) => {
   );
 };
 
+PieCenterLabel.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  color: PropTypes.string,
+  setExpand: PropTypes.func,
+};
+
 /**
  * A component that renders a label on a pie chart slice.
  * The label is positioned relative to the center of the pie chart and is optionally highlighted.
@@ -129,6 +132,14 @@ const PieValueLabel = ({ value, startAngle, endAngle, color, highlighted }) => {
   );
 };
 
+PieValueLabel.propTypes = {
+  value: PropTypes.number,
+  startAngle: PropTypes.number,
+  endAngle: PropTypes.number,
+  color: PropTypes.string,
+  highlighted: PropTypes.bool,
+};
+
 /**
  * Renders a skeleton layout.
  *
@@ -196,16 +207,16 @@ const PageSpeedDetails = () => {
           }
         );
 
-        setMonitor(res.data.data);
-        setAudits(res.data.data.checks[0].audits);
+        setMonitor(res?.data?.data ?? {});
+        setAudits(res?.data?.data?.checks?.[0]?.audits ?? []);
       } catch (error) {
-        console.error("Error fetching pagespeed monitor of id: " + monitorId);
+        console.log(error);
         navigate("/not-found");
       }
     };
 
     fetchMonitor();
-  }, [monitorId]);
+  }, [monitorId, authToken, navigate]);
 
   /**
    * Weight constants for different performance metrics.
@@ -653,4 +664,8 @@ const PageSpeedDetails = () => {
   );
 };
 
+PageSpeedDetails.propTypes = {
+  push: PropTypes.func,
+};
+
 export default PageSpeedDetails;

From a28caa38cd78460feb13cdb1442dcb84b2abf6b2 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 14:01:26 -0400
Subject: [PATCH 31/72] Added nested button menu popup

---
 Client/src/Components/Sidebar/index.css | 32 +++++++++-
 Client/src/Components/Sidebar/index.jsx | 79 +++++++++++++++++++++----
 2 files changed, 99 insertions(+), 12 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index d41778624..68e1988b0 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -1,4 +1,5 @@
 aside .selected-path,
+.sidebar-popup .selected-path,
 aside .MuiListItemButton-root:hover {
   background-color: var(--env-var-color-13);
 }
@@ -88,4 +89,33 @@ aside {
 }
 aside .MuiList-root {
   transition: padding 100ms ease;
-}
\ No newline at end of file
+}
+
+.sidebar-popup .MuiPaper-root {
+  box-shadow: var(--env-var-shadow-1);
+  border: solid 1px var(--env-var-color-6);
+  border-radius: var(--env-var-radius-1);
+  gap: 1px;
+}
+.sidebar-popup .MuiList-root {
+  padding: 6px 8px;
+  min-width: 100px;
+}
+.sidebar-popup li.MuiButtonBase-root {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
+  padding: 5px 8px;
+  border-radius: var(--env-var-radius-1);
+}
+.sidebar-popup li.MuiButtonBase-root:hover{
+  background-color: var(--env-var-color-13);
+}
+.sidebar-popup .MuiModal-root p.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
+}
+.sidebar-popup svg{
+  width: 16px;
+  height: 16px;
+  opacity: 0.9;
+}
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 74e868aa8..dd7d07bd7 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -9,6 +9,8 @@ import {
   ListItemIcon,
   ListItemText,
   ListSubheader,
+  Menu,
+  MenuItem,
   Stack,
   Tooltip,
   Typography,
@@ -85,6 +87,16 @@ function Sidebar() {
   const authState = useSelector((state) => state.auth);
   const [open, setOpen] = useState({ Dashboard: false, Account: false });
   const [collapsed, setCollapsed] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [popup, setPopup] = useState();
+
+  const openPopup = (event, id) => {
+    setAnchorEl(event.currentTarget);
+    setPopup(id);
+  };
+  const closePopup = () => {
+    setAnchorEl(null);
+  };
 
   /**
    * Handles logging out the user
@@ -183,17 +195,62 @@ function Sidebar() {
               {!collapsed && <ListItemText>{item.name}</ListItemText>}
             </ListItemButton>
           ) : collapsed ? (
-            <ListItemButton
-              key={item.name}
-              sx={{
-                gap: theme.gap.medium,
-                borderRadius: `${theme.shape.borderRadius}px`,
-                justifyContent: collapsed ? "center" : "flex-start",
-              }}
-            >
-              <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-              {!collapsed && <ListItemText>{item.name}</ListItemText>}
-            </ListItemButton>
+            <React.Fragment key={item.name}>
+              <ListItemButton
+                className={popup === item.name ? "selected-path" : ""}
+                onClick={(event) => openPopup(event, item.name)}
+                sx={{
+                  position: "relative",
+                  gap: theme.gap.medium,
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                  justifyContent: collapsed ? "center" : "flex-start",
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+                {!collapsed && <ListItemText>{item.name}</ListItemText>}
+              </ListItemButton>
+              <Menu
+                className="sidebar-popup"
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl) && popup === item.name}
+                onClose={closePopup}
+                anchorOrigin={{
+                  vertical: "top",
+                  horizontal: "right",
+                }}
+                sx={{ ml: theme.gap.small }}
+              >
+                {item.nested.map((child) => {
+                  if (
+                    child.name === "Team" &&
+                    authState.user?.role &&
+                    !authState.user.role.includes("admin")
+                  ) {
+                    return null;
+                  }
+
+                  return (
+                    <MenuItem
+                      className={
+                        location.pathname.includes(child.path)
+                          ? "selected-path"
+                          : ""
+                      }
+                      key={child.path}
+                      onClick={() => navigate(`/${child.path}`)}
+                      sx={{
+                        gap: theme.gap.small,
+                        borderRadius: `${theme.shape.borderRadius}px`,
+                        pl: theme.gap.small,
+                      }}
+                    >
+                      {child.icon}
+                      {child.name}
+                    </MenuItem>
+                  );
+                })}
+              </Menu>
+            </React.Fragment>
           ) : (
             <React.Fragment key={item.name}>
               <ListItemButton

From 1250bf9421bc17e856be3922a11e31667dbc3477 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 11:28:56 -0700
Subject: [PATCH 32/72] Moved action menu back into Monitor page as separate
 component, refactored modal

---
 .../src/Pages/Monitors/ActionMenu/index.jsx   |  88 -------
 Client/src/Pages/Monitors/index.jsx           | 231 +++++++++++++-----
 2 files changed, 166 insertions(+), 153 deletions(-)
 delete mode 100644 Client/src/Pages/Monitors/ActionMenu/index.jsx

diff --git a/Client/src/Pages/Monitors/ActionMenu/index.jsx b/Client/src/Pages/Monitors/ActionMenu/index.jsx
deleted file mode 100644
index a8fb437bc..000000000
--- a/Client/src/Pages/Monitors/ActionMenu/index.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useState } from "react";
-import { Box, IconButton, Menu, MenuItem } from "@mui/material";
-import Settings from "../../../assets/icons/settings-bold.svg?react";
-import { useNavigate } from "react-router-dom";
-
-const ActionsMenu = ({ monitor }) => {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [actions, setActions] = useState({});
-  const openMenu = (event, id, url) => {
-    event.preventDefault();
-    setAnchorEl(event.currentTarget);
-    setActions({ id: id, url: url });
-  };
-
-  const openRemove = () => {
-    closeMenu();
-    setIsOpen(true);
-  };
-
-  const closeMenu = () => {
-    setAnchorEl(null);
-  };
-
-  const navigate = useNavigate();
-  return (
-    <>
-      <IconButton
-        aria-label="monitor actions"
-        onClick={(event) => {
-          event.stopPropagation();
-          openMenu(
-            event,
-            monitor._id,
-            monitor.type === "ping" ? null : monitor.url
-          );
-        }}
-        sx={{
-          "&:focus": {
-            outline: "none",
-          },
-        }}
-      >
-        <Settings />
-      </IconButton>
-
-      <Menu
-        className="actions-menu"
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={closeMenu}
-      >
-        {actions.url !== null ? (
-          <MenuItem
-            onClick={() => {
-              window.open(actions.url, "_blank", "noreferrer");
-            }}
-          >
-            Open site
-          </MenuItem>
-        ) : (
-          ""
-        )}
-        <MenuItem
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate(`/monitors/${actions.id}`);
-          }}
-        >
-          Details
-        </MenuItem>
-        {/* TODO - pass monitor id to Incidents page */}
-        <MenuItem disabled>Incidents</MenuItem>
-        <MenuItem
-          onClick={(e) => {
-            e.stopPropagation();
-
-            navigate(`/monitors/configure/${actions.id}`);
-          }}
-        >
-          Configure
-        </MenuItem>
-        <MenuItem onClick={openRemove}>Remove</MenuItem>
-      </Menu>
-    </>
-  );
-};
-
-export default ActionsMenu;
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 24ab4d172..19a4b4c4f 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -25,7 +25,172 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-import ActionsMenu from "./ActionMenu";
+
+import Settings from "../../assets/icons/settings-bold.svg?react";
+
+const ActionsMenu = ({ monitor }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [actions, setActions] = useState({});
+  const [isOpen, setIsOpen] = useState(false);
+  const dispatch = useDispatch();
+  const theme = useTheme();
+  const authState = useSelector((state) => state.auth);
+
+  const handleRemove = async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    let monitor = { _id: actions.id };
+    const action = await dispatch(
+      deleteUptimeMonitor({ authToken: authState.authToken, monitor })
+    );
+    if (action.meta.requestStatus === "fulfilled") {
+      setIsOpen(false); // close modal
+      dispatch(getUptimeMonitorsByUserId(authState.authToken));
+      createToast({ body: "Monitor deleted successfully." });
+    } else {
+      createToast({ body: "Failed to delete monitor." });
+    }
+  };
+
+  const openMenu = (event, id, url) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+    setActions({ id: id, url: url });
+  };
+
+  const openRemove = (e) => {
+    closeMenu(e);
+    setIsOpen(true);
+  };
+
+  const closeMenu = (e) => {
+    e.stopPropagation();
+    setAnchorEl(null);
+  };
+
+  const navigate = useNavigate();
+  return (
+    <>
+      <IconButton
+        aria-label="monitor actions"
+        onClick={(event) => {
+          event.stopPropagation();
+          openMenu(
+            event,
+            monitor._id,
+            monitor.type === "ping" ? null : monitor.url
+          );
+        }}
+        sx={{
+          "&:focus": {
+            outline: "none",
+          },
+        }}
+      >
+        <Settings />
+      </IconButton>
+
+      <Menu
+        className="actions-menu"
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={(e) => closeMenu(e)}
+      >
+        {actions.url !== null ? (
+          <MenuItem
+            onClick={(e) => {
+              closeMenu(e);
+              e.stopPropagation();
+              window.open(actions.url, "_blank", "noreferrer");
+            }}
+          >
+            Open site
+          </MenuItem>
+        ) : (
+          ""
+        )}
+        <MenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+            navigate(`/monitors/${actions.id}`);
+          }}
+        >
+          Details
+        </MenuItem>
+        {/* TODO - pass monitor id to Incidents page */}
+        <MenuItem disabled>Incidents</MenuItem>
+        <MenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+
+            navigate(`/monitors/configure/${actions.id}`);
+          }}
+        >
+          Configure
+        </MenuItem>
+        <MenuItem
+          onClick={(e) => {
+            e.stopPropagation();
+            openRemove(e);
+          }}
+        >
+          Remove
+        </MenuItem>
+      </Menu>
+      <Modal
+        aria-labelledby="modal-delete-monitor"
+        aria-describedby="delete-monitor-confirmation"
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        disablePortal
+      >
+        <Stack
+          gap={theme.gap.xs}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 400,
+            bgcolor: "white",
+            border: "solid 1px #f2f2f2",
+            borderRadius: `${theme.shape.borderRadius}px`,
+            boxShadow: 24,
+            p: "30px",
+            "&:focus": {
+              outline: "none",
+            },
+          }}
+        >
+          <Typography id="modal-delete-monitor" component="h2">
+            Do you really want to delete this monitor?
+          </Typography>
+          <Typography id="delete-monitor-confirmation">
+            Once deleted, this monitor cannot be retrieved.
+          </Typography>
+          <Stack
+            direction="row"
+            gap={theme.gap.small}
+            mt={theme.gap.large}
+            justifyContent="flex-end"
+          >
+            <Button
+              level="tertiary"
+              label="Cancel"
+              onClick={() => setIsOpen(false)}
+            />
+            <Button
+              level="error"
+              label="Delete"
+              onClick={(e) => handleRemove(e)}
+            />
+          </Stack>
+        </Stack>
+      </Modal>
+    </>
+  );
+};
 
 /**
  * Host component.
@@ -111,23 +276,6 @@ const Monitors = () => {
   const authState = useSelector((state) => state.auth);
   const dispatch = useDispatch({});
 
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleRemove = async (event) => {
-    event.preventDefault();
-    let monitor = { _id: actions.id };
-    const action = await dispatch(
-      deleteUptimeMonitor({ authToken: authState.authToken, monitor })
-    );
-    if (action.meta.requestStatus === "fulfilled") {
-      setIsOpen(false); // close modal
-      dispatch(getUptimeMonitorsByUserId(authState.authToken));
-      createToast({ body: "Monitor deleted successfully." });
-    } else {
-      createToast({ body: "Failed to delete monitor." });
-    }
-  };
-
   useEffect(() => {
     dispatch(getUptimeMonitorsByUserId(authState.authToken));
   }, [authState.authToken, dispatch]);
@@ -294,53 +442,6 @@ const Monitors = () => {
           )}
         </>
       )}
-
-      <Modal
-        aria-labelledby="modal-delete-monitor"
-        aria-describedby="delete-monitor-confirmation"
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        disablePortal
-      >
-        <Stack
-          gap={theme.gap.xs}
-          sx={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            width: 400,
-            bgcolor: "white",
-            border: "solid 1px #f2f2f2",
-            borderRadius: `${theme.shape.borderRadius}px`,
-            boxShadow: 24,
-            p: "30px",
-            "&:focus": {
-              outline: "none",
-            },
-          }}
-        >
-          <Typography id="modal-delete-monitor" component="h2">
-            Do you really want to delete this monitor?
-          </Typography>
-          <Typography id="delete-monitor-confirmation">
-            Once deleted, this monitor cannot be retrieved.
-          </Typography>
-          <Stack
-            direction="row"
-            gap={theme.gap.small}
-            mt={theme.gap.large}
-            justifyContent="flex-end"
-          >
-            <Button
-              level="tertiary"
-              label="Cancel"
-              onClick={() => setIsOpen(false)}
-            />
-            <Button level="error" label="Delete" onClick={handleRemove} />
-          </Stack>
-        </Stack>
-      </Modal>
     </Stack>
   );
 };

From d15b2c0f133abc6be8abb0b8e2bfe0f8277d0ba2 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 14:30:44 -0400
Subject: [PATCH 33/72] Added logout popup

---
 Client/src/Components/Sidebar/index.css |  6 ++
 Client/src/Components/Sidebar/index.jsx | 76 +++++++++++++++++++++++--
 2 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 68e1988b0..2b2aef8b2 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -110,6 +110,12 @@ aside .MuiList-root {
 .sidebar-popup li.MuiButtonBase-root:hover{
   background-color: var(--env-var-color-13);
 }
+.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root):hover{
+  background-color: white;
+}
+.sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root){
+  padding-bottom: 0;
+}
 .sidebar-popup .MuiModal-root p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index dd7d07bd7..dd8ce8087 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -197,7 +197,11 @@ function Sidebar() {
           ) : collapsed ? (
             <React.Fragment key={item.name}>
               <ListItemButton
-                className={popup === item.name ? "selected-path" : ""}
+                className={
+                  Boolean(anchorEl) && popup === item.name
+                    ? "selected-path"
+                    : ""
+                }
                 onClick={(event) => openPopup(event, item.name)}
                 sx={{
                   position: "relative",
@@ -237,7 +241,10 @@ function Sidebar() {
                           : ""
                       }
                       key={child.path}
-                      onClick={() => navigate(`/${child.path}`)}
+                      onClick={() => {
+                        navigate(`/${child.path}`);
+                        closePopup();
+                      }}
                       sx={{
                         gap: theme.gap.small,
                         borderRadius: `${theme.shape.borderRadius}px`,
@@ -371,9 +378,70 @@ function Sidebar() {
         gap={theme.gap.xs}
         borderRadius={`${theme.shape.borderRadius}px`}
       >
-        <Avatar small={true} />
-        {!collapsed && (
+        {collapsed ? (
           <>
+            <Tooltip
+              title="Options"
+              slotProps={{
+                popper: {
+                  modifiers: [
+                    {
+                      name: "offset",
+                      options: {
+                        offset: [0, -10],
+                      },
+                    },
+                  ],
+                },
+              }}
+            >
+              <IconButton
+                onClick={(event) => openPopup(event, "logout")}
+                sx={{ p: 0, "&:focus": { outline: "none" } }}
+              >
+                <Avatar small={true} />
+              </IconButton>
+            </Tooltip>
+            <Menu
+              className="sidebar-popup"
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl) && popup === "logout"}
+              onClose={closePopup}
+              anchorOrigin={{
+                vertical: "top",
+                horizontal: "right",
+              }}
+              sx={{ ml: theme.gap.ml }}
+            >
+              <MenuItem sx={{ cursor: "default", minWidth: "150px" }}>
+                <Box>
+                  <Typography component="span" fontWeight={500} fontSize="13px">
+                    {authState.user?.firstName} {authState.user?.lastName}
+                  </Typography>
+                  <Typography
+                    sx={{ textTransform: "capitalize", fontSize: "12px" }}
+                  >
+                    {authState.user?.role}
+                  </Typography>
+                </Box>
+              </MenuItem>
+              <Divider />
+              <MenuItem
+                onClick={logout}
+                sx={{
+                  gap: theme.gap.small,
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                  pl: theme.gap.small,
+                }}
+              >
+                <LogoutSvg />
+                Log out
+              </MenuItem>
+            </Menu>
+          </>
+        ) : (
+          <>
+            <Avatar small={true} />
             <Box ml={theme.gap.xs}>
               <Typography component="span" fontWeight={500}>
                 {authState.user?.firstName} {authState.user?.lastName}

From 592169d94f10cb15142cef1d617f4e59ea2101ed Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 11:35:12 -0700
Subject: [PATCH 34/72] Add proptypes

---
 Client/src/Pages/Monitors/index.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 19a4b4c4f..1b541c72b 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -27,6 +27,7 @@ import {
 } from "@mui/material";
 
 import Settings from "../../assets/icons/settings-bold.svg?react";
+import PropTypes from "prop-types";
 
 const ActionsMenu = ({ monitor }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -192,6 +193,14 @@ const ActionsMenu = ({ monitor }) => {
   );
 };
 
+ActionsMenu.propTypes = {
+  monitor: PropTypes.shape({
+    _id: PropTypes.string,
+    url: PropTypes.string,
+    type: PropTypes.string,
+  }).isRequired,
+};
+
 /**
  * Host component.
  * This subcomponent receives a params object and displays the host details.
@@ -237,6 +246,15 @@ const Host = ({ params }) => {
   );
 };
 
+Host.propTypes = {
+  params: PropTypes.shape({
+    url: PropTypes.string,
+    title: PropTypes.string,
+    percentageColor: PropTypes.string,
+    percentage: PropTypes.number,
+  }).isRequired,
+};
+
 /**
  * Renders a skeleton layout.
  *

From 1ae85ad9ea329f722c423117f7290e7f75535358 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 14:37:25 -0400
Subject: [PATCH 35/72] Added abbreviated bluewave uptime logo

---
 Client/src/Components/Sidebar/index.jsx     | 17 +++++++++++------
 Client/src/assets/icons/bwu-abbreviated.svg |  4 ++++
 2 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 Client/src/assets/icons/bwu-abbreviated.svg

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index dd8ce8087..f6e319b76 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -26,6 +26,7 @@ import UserSvg from "../../assets/icons/user.svg?react";
 import TeamSvg from "../../assets/icons/user-two.svg?react";
 import LogoutSvg from "../../assets/icons/logout.svg?react";
 import BWULogo from "../../assets/Images/bwl-logo.svg?react";
+import BWULogoAbbreviated from "../../assets/icons/bwu-abbreviated.svg?react";
 import Support from "../../assets/icons/support.svg?react";
 import Dashboard from "../../assets/icons/dashboard.svg?react";
 import Account from "../../assets/icons/user-edit.svg?react";
@@ -125,17 +126,21 @@ function Sidebar() {
       gap={theme.gap.medium}
       sx={{ flex: collapsed ? 0 : 1 }}
     >
-      <Box
-        width="100%"
+      <Stack
+        alignItems={collapsed ? "center" : "flex-start"}
         py={theme.gap.large}
-        pl={collapsed ? theme.gap.medium : theme.gap.lgplus}
+        pl={collapsed ? 0 : theme.gap.lgplus}
       >
-        {!collapsed && <BWULogo alt="BlueWave Uptime Logo" />}
+        {collapsed ? (
+          <BWULogoAbbreviated />
+        ) : (
+          <BWULogo alt="BlueWave Uptime Logo" />
+        )}
         <IconButton
           sx={{
             position: "absolute",
             right: 0,
-            transform: `translate(50%, 0)`,
+            transform: `translate(50%, 50%)`,
             backgroundColor: theme.palette.otherColors.fillGray,
             border: `solid 1px ${theme.palette.otherColors.graishWhite}`,
             p: "5px",
@@ -156,7 +161,7 @@ function Sidebar() {
         >
           {collapsed ? <ArrowRight /> : <ArrowLeft />}
         </IconButton>
-      </Box>
+      </Stack>
       {/* menu */}
       <List
         component="nav"
diff --git a/Client/src/assets/icons/bwu-abbreviated.svg b/Client/src/assets/icons/bwu-abbreviated.svg
new file mode 100644
index 000000000..a5e00f484
--- /dev/null
+++ b/Client/src/assets/icons/bwu-abbreviated.svg
@@ -0,0 +1,4 @@
+<svg width="26" height="16" viewBox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.761364 15V0.454545H5.84659C6.85985 0.454545 7.69555 0.629735 8.35369 0.980114C9.01184 1.32576 9.50189 1.79214 9.82386 2.37926C10.1458 2.96165 10.3068 3.60795 10.3068 4.31818C10.3068 4.94318 10.1955 5.45928 9.97301 5.86648C9.75521 6.27367 9.46638 6.59564 9.10653 6.83239C8.75142 7.06913 8.36553 7.24432 7.94886 7.35795V7.5C8.39394 7.52841 8.84138 7.68466 9.29119 7.96875C9.741 8.25284 10.1174 8.66004 10.4205 9.19034C10.7235 9.72064 10.875 10.3693 10.875 11.1364C10.875 11.8655 10.7093 12.5213 10.3778 13.1037C10.0464 13.6861 9.5232 14.1477 8.80824 14.4886C8.09328 14.8295 7.16288 15 6.01705 15H0.761364ZM2.52273 13.4375H6.01705C7.16761 13.4375 7.98438 13.215 8.46733 12.7699C8.95502 12.3201 9.19886 11.7756 9.19886 11.1364C9.19886 10.6439 9.07339 10.1894 8.82244 9.77273C8.5715 9.35133 8.21402 9.01515 7.75 8.7642C7.28598 8.50852 6.73674 8.38068 6.10227 8.38068H2.52273V13.4375ZM2.52273 6.84659H5.78977C6.32008 6.84659 6.7983 6.74242 7.22443 6.53409C7.6553 6.32576 7.99621 6.0322 8.24716 5.65341C8.50284 5.27462 8.63068 4.82955 8.63068 4.31818C8.63068 3.67898 8.40814 3.13684 7.96307 2.69176C7.51799 2.24195 6.8125 2.01705 5.84659 2.01705H2.52273V6.84659Z" fill="#344054"/>
+<path d="M23.3146 0.454545H25.076V10.0852C25.076 11.0795 24.8416 11.9673 24.3729 12.7486C23.9089 13.5251 23.2531 14.1383 22.4055 14.5881C21.558 15.0331 20.5637 15.2557 19.4226 15.2557C18.2815 15.2557 17.2872 15.0331 16.4396 14.5881C15.5921 14.1383 14.9339 13.5251 14.4652 12.7486C14.0012 11.9673 13.7692 11.0795 13.7692 10.0852V0.454545H15.5305V9.94318C15.5305 10.6534 15.6868 11.2855 15.9993 11.8395C16.3118 12.3887 16.7569 12.822 17.3345 13.1392C17.9169 13.4517 18.6129 13.608 19.4226 13.608C20.2322 13.608 20.9283 13.4517 21.5107 13.1392C22.093 12.822 22.5381 12.3887 22.8459 11.8395C23.1584 11.2855 23.3146 10.6534 23.3146 9.94318V0.454545Z" fill="#1570EF"/>
+</svg>

From 22827fe99b7f201698087effffc7d642053562d1 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 11:46:42 -0700
Subject: [PATCH 36/72] Add redirect to login page if user already logged in

---
 Client/src/Pages/Auth/Login.jsx | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index 84f6c518e..a928347b0 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -4,7 +4,7 @@ import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { credentials } from "../../Validation/validation";
 import { login } from "../../Features/Auth/authSlice";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { createToast } from "../../Utils/toastUtils";
 import Button from "../../Components/Button";
 import axiosInstance from "../../Utils/axiosConfig";
@@ -13,6 +13,7 @@ import background from "../../assets/Images/background_pattern_decorative.png";
 import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Mail from "../../assets/icons/mail.svg?react";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import PropTypes from "prop-types";
 
 import "./index.css";
 
@@ -63,6 +64,10 @@ const LandingPage = ({ onContinue }) => {
   );
 };
 
+LandingPage.propTypes = {
+  onContinue: PropTypes.func.isRequired,
+};
+
 /**
  * Renders the first step of the login process.
  *
@@ -136,6 +141,14 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
   );
 };
 
+StepOne.propTypes = {
+  form: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
 /**
  * Renders the second step of the login process, including a password input field.
  *
@@ -230,11 +243,22 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
   );
 };
 
+StepTwo.propTypes = {
+  form: PropTypes.object.isRequired,
+  errors: PropTypes.object.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
 const Login = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const theme = useTheme();
 
+  const authState = useSelector((state) => state.auth);
+  const { authToken } = authState;
+
   const idMap = {
     "login-email-input": "email",
     "login-password-input": "password",
@@ -248,6 +272,10 @@ const Login = () => {
   const [step, setStep] = useState(0);
 
   useEffect(() => {
+    if (authToken) {
+      navigate("/monitors");
+      return;
+    }
     axiosInstance
       .get("/auth/users/admin")
       .then((response) => {
@@ -258,7 +286,7 @@ const Login = () => {
       .catch((error) => {
         console.log(error);
       });
-  }, [navigate]);
+  }, [authToken, navigate]);
 
   const handleChange = (event) => {
     const { value, id } = event.target;

From c20600d1021f724c01a2729e03f22d9712ffbafa Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 14:50:24 -0400
Subject: [PATCH 37/72] Updated padding and transition

---
 Client/src/Components/Sidebar/index.css | 5 +----
 Client/src/Components/Sidebar/index.jsx | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 2b2aef8b2..59924b1a1 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -87,9 +87,6 @@ aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
 aside {
   transition: flex 300ms ease-out;
 }
-aside .MuiList-root {
-  transition: padding 100ms ease;
-}
 
 .sidebar-popup .MuiPaper-root {
   box-shadow: var(--env-var-shadow-1);
@@ -98,7 +95,7 @@ aside .MuiList-root {
   gap: 1px;
 }
 .sidebar-popup .MuiList-root {
-  padding: 6px 8px;
+  padding: 6px 6px;
   min-width: 100px;
 }
 .sidebar-popup li.MuiButtonBase-root {
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index f6e319b76..cb1232b9c 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -132,7 +132,7 @@ function Sidebar() {
         pl={collapsed ? 0 : theme.gap.lgplus}
       >
         {collapsed ? (
-          <BWULogoAbbreviated />
+          <BWULogoAbbreviated alt="BlueWave Uptime Logo" />
         ) : (
           <BWULogo alt="BlueWave Uptime Logo" />
         )}

From 880f7cccdb2572307ce237f9704b982e5a4b0c88 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 11:57:35 -0700
Subject: [PATCH 38/72] Add PR template

---
 .github/PULL_REQUEST_TEMPLATE/pull_request_template.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .github/PULL_REQUEST_TEMPLATE/pull_request_template.md

diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md
new file mode 100644
index 000000000..c884b2e12
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE/pull_request_template.md
@@ -0,0 +1,9 @@
+## Describe your changes
+
+## Issue Number if applicable
+
+## Checklist before requesting a review
+
+- [ ] I have performed a self-review of my code
+- [ ] I have inlcuded the issue # in the PR if applicable
+- [ ] I have labelled the PR correctly

From 1c31b13438cd795a1759a2ee066d9c7372b902ba Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 15:00:11 -0400
Subject: [PATCH 39/72] Added tooltips to buttons in collapsed view

---
 Client/src/Components/Sidebar/index.jsx | 133 ++++++++++++++++--------
 1 file changed, 92 insertions(+), 41 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index cb1232b9c..e197f2dbf 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -184,32 +184,29 @@ function Sidebar() {
       >
         {menu.map((item) =>
           item.path ? (
-            <ListItemButton
-              className={
-                location.pathname.includes(item.path) ? "selected-path" : ""
-              }
-              key={item.path}
-              onClick={() => navigate(`/${item.path}`)}
-              sx={{
-                gap: theme.gap.medium,
-                borderRadius: `${theme.shape.borderRadius}px`,
-                justifyContent: collapsed ? "center" : "flex-start",
+            <Tooltip
+              placement="right"
+              title={collapsed ? item.name : ""}
+              slotProps={{
+                popper: {
+                  modifiers: [
+                    {
+                      name: "offset",
+                      options: {
+                        offset: [0, -16],
+                      },
+                    },
+                  ],
+                },
               }}
             >
-              <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-              {!collapsed && <ListItemText>{item.name}</ListItemText>}
-            </ListItemButton>
-          ) : collapsed ? (
-            <React.Fragment key={item.name}>
               <ListItemButton
                 className={
-                  Boolean(anchorEl) && popup === item.name
-                    ? "selected-path"
-                    : ""
+                  location.pathname.includes(item.path) ? "selected-path" : ""
                 }
-                onClick={(event) => openPopup(event, item.name)}
+                key={item.path}
+                onClick={() => navigate(`/${item.path}`)}
                 sx={{
-                  position: "relative",
                   gap: theme.gap.medium,
                   borderRadius: `${theme.shape.borderRadius}px`,
                   justifyContent: collapsed ? "center" : "flex-start",
@@ -218,6 +215,43 @@ function Sidebar() {
                 <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
                 {!collapsed && <ListItemText>{item.name}</ListItemText>}
               </ListItemButton>
+            </Tooltip>
+          ) : collapsed ? (
+            <React.Fragment key={item.name}>
+              <Tooltip
+                placement="right"
+                title={collapsed ? item.name : ""}
+                slotProps={{
+                  popper: {
+                    modifiers: [
+                      {
+                        name: "offset",
+                        options: {
+                          offset: [0, -16],
+                        },
+                      },
+                    ],
+                  },
+                }}
+              >
+                <ListItemButton
+                  className={
+                    Boolean(anchorEl) && popup === item.name
+                      ? "selected-path"
+                      : ""
+                  }
+                  onClick={(event) => openPopup(event, item.name)}
+                  sx={{
+                    position: "relative",
+                    gap: theme.gap.medium,
+                    borderRadius: `${theme.shape.borderRadius}px`,
+                    justifyContent: collapsed ? "center" : "flex-start",
+                  }}
+                >
+                  <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+                  {!collapsed && <ListItemText>{item.name}</ListItemText>}
+                </ListItemButton>
+              </Tooltip>
               <Menu
                 className="sidebar-popup"
                 anchorEl={anchorEl}
@@ -346,29 +380,46 @@ function Sidebar() {
         sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
       >
         {other.map((item) => (
-          <ListItemButton
-            className={
-              location.pathname.includes(item.path) ? "selected-path" : ""
-            }
-            key={item.path}
-            onClick={() =>
-              item.path === "support"
-                ? window.open(
-                    "https://github.com/bluewave-labs/bluewave-uptime",
-                    "_blank",
-                    "noreferrer"
-                  )
-                : navigate(`/${item.path}`)
-            }
-            sx={{
-              gap: theme.gap.medium,
-              borderRadius: `${theme.shape.borderRadius}px`,
-              justifyContent: collapsed ? "center" : "flex-start",
+          <Tooltip
+            placement="right"
+            title={collapsed ? item.name : ""}
+            slotProps={{
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -16],
+                    },
+                  },
+                ],
+              },
             }}
           >
-            <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-            {!collapsed && <ListItemText>{item.name}</ListItemText>}
-          </ListItemButton>
+            <ListItemButton
+              className={
+                location.pathname.includes(item.path) ? "selected-path" : ""
+              }
+              key={item.path}
+              onClick={() =>
+                item.path === "support"
+                  ? window.open(
+                      "https://github.com/bluewave-labs/bluewave-uptime",
+                      "_blank",
+                      "noreferrer"
+                    )
+                  : navigate(`/${item.path}`)
+              }
+              sx={{
+                gap: theme.gap.medium,
+                borderRadius: `${theme.shape.borderRadius}px`,
+                justifyContent: collapsed ? "center" : "flex-start",
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+              {!collapsed && <ListItemText>{item.name}</ListItemText>}
+            </ListItemButton>
+          </Tooltip>
         ))}
       </List>
       <Divider sx={{ mt: "auto" }} />

From b27712a62933845510619f7ff469a788304d03bd Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 15:04:04 -0400
Subject: [PATCH 40/72] Fixed key prop error

---
 Client/src/Components/Sidebar/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index e197f2dbf..38baa33ec 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -185,6 +185,7 @@ function Sidebar() {
         {menu.map((item) =>
           item.path ? (
             <Tooltip
+              key={item.path}
               placement="right"
               title={collapsed ? item.name : ""}
               slotProps={{
@@ -204,7 +205,6 @@ function Sidebar() {
                 className={
                   location.pathname.includes(item.path) ? "selected-path" : ""
                 }
-                key={item.path}
                 onClick={() => navigate(`/${item.path}`)}
                 sx={{
                   gap: theme.gap.medium,
@@ -381,6 +381,7 @@ function Sidebar() {
       >
         {other.map((item) => (
           <Tooltip
+            key={item.path}
             placement="right"
             title={collapsed ? item.name : ""}
             slotProps={{
@@ -400,7 +401,6 @@ function Sidebar() {
               className={
                 location.pathname.includes(item.path) ? "selected-path" : ""
               }
-              key={item.path}
               onClick={() =>
                 item.path === "support"
                   ? window.open(

From 0ac2492e7058b38b1efca817a6b39c659e067ad2 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 13:33:50 -0700
Subject: [PATCH 41/72] Add safe data access to monitorDetails

---
 Client/src/Pages/Monitors/Details/index.jsx | 28 ++++++++++++---------
 Client/src/Pages/NotFound/index.jsx         |  1 -
 Server/db/mongo/modules/monitorModule.js    |  5 +++-
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 79fba3b6b..f7b13a0e8 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -16,7 +16,6 @@ import {
   formatDurationRounded,
 } from "../../../Utils/timeUtils";
 import "./index.css";
-import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails60MinChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 
 const StatBox = ({ title, value }) => {
@@ -129,9 +128,10 @@ const DetailsPage = () => {
           },
         }
       );
-      setMonitor(res.data.data);
+      setMonitor(res?.data?.data ?? {});
     } catch (error) {
-      console.error("Error fetching monitor of id: " + monitorId);
+      console.error(error);
+
       navigate("/not-found");
     }
   }, [authToken, monitorId, navigate, dateRange]);
@@ -142,15 +142,19 @@ const DetailsPage = () => {
 
   useEffect(() => {
     const fetchCertificate = async () => {
-      const res = await axiosInstance.get(
-        `/monitors/certificate/${monitorId}`,
-        {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
-          },
-        }
-      );
-      setCertificateExpiry(res.data.data.certificateDate);
+      try {
+        const res = await axiosInstance.get(
+          `/monitors/certificate/${monitorId}`,
+          {
+            headers: {
+              Authorization: `Bearer ${authToken}`,
+            },
+          }
+        );
+        setCertificateExpiry(res?.data?.data?.certificateDate ?? "N/A");
+      } catch (error) {
+        console.error(error);
+      }
     };
     fetchCertificate();
   }, [authToken, monitorId]);
diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx
index 68120b0a3..ef4b37839 100644
--- a/Client/src/Pages/NotFound/index.jsx
+++ b/Client/src/Pages/NotFound/index.jsx
@@ -33,7 +33,6 @@ const DefaultValue = {
  */
 const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
   const navigate = useNavigate();
-  console.log("NOT FOUND");
   return (
     <Stack className="not-found-page" justifyContent="center">
       <Stack gap="20px" alignItems="center">
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 0fc56c755..05cef7646 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -172,6 +172,9 @@ const getMonitorStatsById = async (req) => {
 
     // Get monitor
     const monitor = await Monitor.findById(monitorId);
+    if (monitor === null || monitor === undefined) {
+      throw new Error(errorMessages.DB_FIND_MONTIOR_BY_ID(monitorId));
+    }
 
     // Determine if this is a pagespeed monitor or an http/ping monitor
     let model =
@@ -263,7 +266,7 @@ const getMonitorStatsById = async (req) => {
 
     return monitorStats;
   } catch (error) {
-    console.log(error);
+    throw error;
   }
 };
 

From 9eb92903ad1b229f46deb2b94233ec637e508667 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 13:43:27 -0700
Subject: [PATCH 42/72] Replace current page with 404 when navigating to
 not-found

---
 Client/src/Pages/Monitors/Details/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 79fba3b6b..519f2991f 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -132,7 +132,7 @@ const DetailsPage = () => {
       setMonitor(res.data.data);
     } catch (error) {
       console.error("Error fetching monitor of id: " + monitorId);
-      navigate("/not-found");
+      navigate("/not-found", { replace: true });
     }
   }, [authToken, monitorId, navigate, dateRange]);
 

From 92142395cc8a48e62d21d05ba37abe6d38a3ad4d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 13:46:40 -0700
Subject: [PATCH 43/72] Add replace true to remaining methods

---
 Client/src/Pages/Monitors/Configure/index.jsx  | 4 ++--
 Client/src/Pages/PageSpeed/Configure/index.jsx | 2 +-
 Client/src/Pages/PageSpeed/Details/index.jsx   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index c873482a9..5a64f7167 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -109,12 +109,12 @@ const Configure = () => {
     const data = monitors.find((monitor) => monitor._id === monitorId);
     if (!data) {
       console.error("Error fetching monitor of id: " + monitorId);
-      navigate("/not-found");
+      navigate("/not-found", { replace: true });
     }
     setMonitor({
       ...data,
     });
-  }, [monitorId, authToken, monitors]);
+  }, [monitorId, authToken, monitors, navigate]);
 
   const handleChange = (event, name) => {
     let { value, id } = event.target;
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 0dff8d7eb..ed91a2f3e 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -93,7 +93,7 @@ const PageSpeedConfigure = () => {
     const data = monitors.find((monitor) => monitor._id === monitorId);
     if (!data) {
       console.error("Error fetching pagespeed monitor of id: " + monitorId);
-      navigate("/not-found");
+      navigate("/not-found", { replace: true });
     }
     setMonitor({
       ...data,
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 8ed0ec5c2..42ef4421e 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -211,7 +211,7 @@ const PageSpeedDetails = () => {
         setAudits(res?.data?.data?.checks?.[0]?.audits ?? []);
       } catch (error) {
         console.log(error);
-        navigate("/not-found");
+        navigate("/not-found", { replace: true });
       }
     };
 

From 5c561d87ce711a8774b86618e08d333f99408a86 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 14:20:55 -0700
Subject: [PATCH 44/72] implement basic logger, replace console.log statements
 with logger methods

---
 .../TabPanels/Account/ProfilePanel.jsx        |  3 ++-
 Client/src/HOC/withAdminCheck.jsx             |  3 ++-
 Client/src/Pages/Auth/Login.jsx               |  4 ++--
 Client/src/Pages/Auth/Register/Register.jsx   |  4 ++--
 .../Pages/Incidents/IncidentTable/index.jsx   |  4 ++--
 Client/src/Pages/Monitors/Configure/index.jsx |  9 ++++----
 .../Pages/Monitors/CreateMonitor/index.jsx    |  7 +++---
 .../Details/PaginationTable/index.jsx         |  3 ++-
 Client/src/Pages/Monitors/Details/index.jsx   |  3 ++-
 Client/src/Pages/Monitors/index.jsx           |  2 +-
 Client/src/Pages/NotFound/index.jsx           |  1 -
 .../src/Pages/PageSpeed/Configure/index.jsx   |  5 +++--
 .../Pages/PageSpeed/CreatePageSpeed/index.jsx |  3 ++-
 Client/src/Pages/PageSpeed/Details/index.jsx  |  3 ++-
 Client/src/Pages/Settings/index.jsx           |  8 +++----
 Client/src/Utils/Logger.js                    | 22 +++++++++++++++++++
 16 files changed, 57 insertions(+), 27 deletions(-)
 create mode 100644 Client/src/Utils/Logger.js

diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 355b09ca6..398c10c54 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -19,6 +19,7 @@ import ProgressUpload from "../../ProgressBars";
 import { formatBytes } from "../../../Utils/fileUtils";
 import { clearUptimeMonitorState } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { createToast } from "../../../Utils/toastUtils";
+import { logger } from "../../../Utils/Logger";
 
 /**
  * ProfilePanel component displays a form for editing user profile information
@@ -256,7 +257,7 @@ const ProfilePanel = () => {
             placeholder="Enter your email"
             autoComplete="email"
             // TODO - add onChange
-            onChange={() => console.log("Disabled.")}
+            onChange={() => logger.warn("disabled")}
             // error={errors[idToName["edit-email"]]}
             disabled={true}
           />
diff --git a/Client/src/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx
index 23ee5dc1f..6c5087926 100644
--- a/Client/src/HOC/withAdminCheck.jsx
+++ b/Client/src/HOC/withAdminCheck.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import axiosInstance from "../Utils/axiosConfig";
+import { logger } from "../Utils/Logger";
 
 const withAdminCheck = (WrappedComponent) => {
   const WithAdminCheck = (props) => {
@@ -15,7 +16,7 @@ const withAdminCheck = (WrappedComponent) => {
           }
         })
         .catch((error) => {
-          console.log(error);
+          logger.error(error);
         });
     }, [navigate]);
     return <WrappedComponent {...props} isAdmin={true} />;
diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index a928347b0..d5757e0cd 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -14,7 +14,7 @@ import Logo from "../../assets/icons/bwu-icon.svg?react";
 import Mail from "../../assets/icons/mail.svg?react";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import PropTypes from "prop-types";
-
+import { logger } from "../../Utils/Logger";
 import "./index.css";
 
 /**
@@ -284,7 +284,7 @@ const Login = () => {
         }
       })
       .catch((error) => {
-        console.log(error);
+        logger.error(error);
       });
   }, [authToken, navigate]);
 
diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 30b439f16..10e81c176 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -17,6 +17,7 @@ import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import axiosInstance from "../../../Utils/axiosConfig";
 import "../index.css";
+import { logger } from "../../../Utils/Logger";
 
 /**
  * Displays the initial landing page.
@@ -401,10 +402,9 @@ const Register = ({ isAdmin }) => {
             token,
           });
           const { role, email } = res.data.data;
-          console.log(role);
           setForm({ ...form, email, role });
         } catch (error) {
-          console.log(error);
+          logger.error(error);
         }
       }
     };
diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index 44a30decc..473062bbc 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -20,6 +20,7 @@ import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import axiosInstance from "../../../Utils/axiosConfig";
 import { StatusLabel } from "../../../Components/Label";
+import { logger } from "../../../Utils/Logger";
 
 const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
   const { authToken, user } = useSelector((state) => state.auth);
@@ -57,7 +58,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
         setChecks(res.data.data.checks);
         setChecksCount(res.data.data.checksCount);
       } catch (error) {
-        console.log(error);
+        logger.error(error);
       }
     };
     fetchPage();
@@ -72,7 +73,6 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
   ]);
 
   const handlePageChange = (_, newPage) => {
-    console.log(newPage);
     setPaginationController({
       ...paginationController,
       page: newPage - 1, // 0-indexed
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index c873482a9..86ea62960 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -19,6 +19,7 @@ import {
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
+import { logger } from "../../../Utils/Logger";
 
 /**
  * Parses a URL string and returns a URL object.
@@ -108,7 +109,7 @@ const Configure = () => {
   useEffect(() => {
     const data = monitors.find((monitor) => monitor._id === monitorId);
     if (!data) {
-      console.error("Error fetching monitor of id: " + monitorId);
+      logger.error("Error fetching monitor of id: " + monitorId);
       navigate("/not-found");
     }
     setMonitor({
@@ -337,7 +338,7 @@ const Configure = () => {
                   label="Notify via SMS (coming soon)"
                   isChecked={false}
                   value=""
-                  onChange={() => console.log("disabled")}
+                  onChange={() => logger.warn("disabled")}
                   isDisabled={true}
                 />
                 <Checkbox
@@ -356,7 +357,7 @@ const Configure = () => {
                   label="Also notify via email to multiple addresses (coming soon)"
                   isChecked={false}
                   value=""
-                  onChange={() => console.log("disabled")}
+                  onChange={() => logger.warn("disabled")}
                   isDisabled={true}
                 />
                 {monitor?.notifications?.some(
@@ -368,7 +369,7 @@ const Configure = () => {
                       type="text"
                       placeholder="name@gmail.com"
                       value=""
-                      onChange={() => console.log("disabled")}
+                      onChange={() => logger.warn("disabled")}
                     />
                     <Typography mt={theme.gap.small}>
                       You can separate multiple emails with a comma
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index d0eafb476..442558f8e 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -13,6 +13,7 @@ import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import { createToast } from "../../../Utils/toastUtils";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { logger } from "../../../Utils/Logger";
 
 const CreateMonitor = () => {
   const MS_PER_MINUTE = 60000;
@@ -267,7 +268,7 @@ const CreateMonitor = () => {
               label="Notify via SMS (coming soon)"
               isChecked={false}
               value=""
-              onChange={() => console.log("disabled")}
+              onChange={() => logger.warn("disabled")}
               isDisabled={true}
             />
             <Checkbox
@@ -284,7 +285,7 @@ const CreateMonitor = () => {
               label="Also notify via email to multiple addresses (coming soon)"
               isChecked={false}
               value=""
-              onChange={() => console.log("disabled")}
+              onChange={() => logger.warn("disabled")}
               isDisabled={true}
             />
             {monitor.notifications.some(
@@ -296,7 +297,7 @@ const CreateMonitor = () => {
                   type="text"
                   placeholder="name@gmail.com"
                   value=""
-                  onChange={() => console.log("disabled")}
+                  onChange={() => logger.warn("disabled")}
                 />
                 <Typography mt={theme.gap.small}>
                   You can separate multiple emails with a comma
diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
index 28a668977..f7e03171f 100644
--- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -17,6 +17,7 @@ import axiosInstance from "../../../../Utils/axiosConfig";
 import { StatusLabel } from "../../../../Components/Label";
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
 import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
+import { logger } from "../../../../Utils/Logger";
 
 const PaginationTable = ({ monitorId, dateRange }) => {
   const { authToken } = useSelector((state) => state.auth);
@@ -48,7 +49,7 @@ const PaginationTable = ({ monitorId, dateRange }) => {
         setChecks(res.data.data.checks);
         setChecksCount(res.data.data.checksCount);
       } catch (error) {
-        console.log(error);
+        logger.error(error);
       }
     };
     fetchPage();
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 79fba3b6b..92969ce64 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -18,6 +18,7 @@ import {
 import "./index.css";
 import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails60MinChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { logger } from "../../../Utils/Logger";
 
 const StatBox = ({ title, value }) => {
   return (
@@ -131,7 +132,7 @@ const DetailsPage = () => {
       );
       setMonitor(res.data.data);
     } catch (error) {
-      console.error("Error fetching monitor of id: " + monitorId);
+      logger.error(error);
       navigate("/not-found");
     }
   }, [authToken, monitorId, navigate, dateRange]);
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 1b541c72b..c33cf16dc 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -28,6 +28,7 @@ import {
 
 import Settings from "../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
+import { logger } from "../../Utils/Logger";
 
 const ActionsMenu = ({ monitor }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -36,7 +37,6 @@ const ActionsMenu = ({ monitor }) => {
   const dispatch = useDispatch();
   const theme = useTheme();
   const authState = useSelector((state) => state.auth);
-
   const handleRemove = async (event) => {
     event.preventDefault();
     event.stopPropagation();
diff --git a/Client/src/Pages/NotFound/index.jsx b/Client/src/Pages/NotFound/index.jsx
index 68120b0a3..ef4b37839 100644
--- a/Client/src/Pages/NotFound/index.jsx
+++ b/Client/src/Pages/NotFound/index.jsx
@@ -33,7 +33,6 @@ const DefaultValue = {
  */
 const NotFound = ({ title = DefaultValue.title, desc = DefaultValue.desc }) => {
   const navigate = useNavigate();
-  console.log("NOT FOUND");
   return (
     <Stack className="not-found-page" justifyContent="center">
       <Stack gap="20px" alignItems="center">
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 0dff8d7eb..36a136165 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -18,6 +18,7 @@ import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { logger } from "../../../Utils/Logger";
 
 import "./index.css";
 
@@ -92,7 +93,7 @@ const PageSpeedConfigure = () => {
   useEffect(() => {
     const data = monitors.find((monitor) => monitor._id === monitorId);
     if (!data) {
-      console.error("Error fetching pagespeed monitor of id: " + monitorId);
+      logger.error("Error fetching pagespeed monitor of id: " + monitorId);
       navigate("/not-found");
     }
     setMonitor({
@@ -278,7 +279,7 @@ const PageSpeedConfigure = () => {
                       id="notify-emails-list"
                       placeholder="notifications@gmail.com"
                       value=""
-                      onChange={() => console.log("disabled")}
+                      onChange={() => logger.warn("disabled")}
                       error=""
                     />
                     <Typography mt={theme.gap.small}>
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index 6b9e6dbde..c707db319 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -12,6 +12,7 @@ import { createToast } from "../../../Utils/toastUtils";
 import { createPageSpeed } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
+import { logger } from "../../../Utils/Logger";
 
 const CreatePageSpeed = () => {
   const theme = useTheme();
@@ -175,7 +176,7 @@ const CreatePageSpeed = () => {
                   id="notify-emails-list"
                   placeholder="notifications@gmail.com"
                   value=""
-                  onChange={() => console.log("disabled")}
+                  onChange={() => logger.warn("disabled")}
                   error=""
                 />
                 <Typography mt={theme.gap.small}>
diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx
index 8ed0ec5c2..4ce031973 100644
--- a/Client/src/Pages/PageSpeed/Details/index.jsx
+++ b/Client/src/Pages/PageSpeed/Details/index.jsx
@@ -21,6 +21,7 @@ import PageSpeedLineChart from "../../../Components/Charts/PagespeedLineChart";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
 import PropTypes from "prop-types";
+import { logger } from "../../../Utils/Logger";
 
 const StatBox = ({ icon, title, value }) => {
   const theme = useTheme();
@@ -210,7 +211,7 @@ const PageSpeedDetails = () => {
         setMonitor(res?.data?.data ?? {});
         setAudits(res?.data?.data?.checks?.[0]?.audits ?? []);
       } catch (error) {
-        console.log(error);
+        logger.error(logger);
         navigate("/not-found");
       }
     };
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 3ee029675..2b6f40682 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -4,7 +4,7 @@ import Button from "../../Components/Button";
 import Field from "../../Components/Inputs/Field";
 import Link from "../../Components/Link";
 import Select from "../../Components/Inputs/Select";
-
+import { logger } from "../../Utils/Logger";
 import "./index.css";
 
 const Settings = () => {
@@ -40,14 +40,14 @@ const Settings = () => {
               id="display-timezone"
               label="Display timezone"
               value="est"
-              onChange={() => console.log("disabled")}
+              onChange={() => logger.warn("disabled")}
               items={[{ _id: "est", name: "America / Toronto" }]}
             />
             <Select
               id="server-timezone"
               label="Server timezone"
               value="est"
-              onChange={() => console.log("disabled")}
+              onChange={() => logger.warn("disabled")}
               items={[{ _id: "est", name: "America / Toronto" }]}
             />
           </Stack>
@@ -74,7 +74,7 @@ const Settings = () => {
               optionalLabel="0 for infinite"
               placeholder="90"
               value=""
-              onChange={() => console.log("Disabled")}
+              onChange={() => logger.warn("Disabled")}
             />
             <Box>
               <Typography>Clear all stats. This is irreversible.</Typography>
diff --git a/Client/src/Utils/Logger.js b/Client/src/Utils/Logger.js
new file mode 100644
index 000000000..722800910
--- /dev/null
+++ b/Client/src/Utils/Logger.js
@@ -0,0 +1,22 @@
+const LOG_LEVEL = import.meta.env.VITE_APP_LOG_LEVEL;
+class Logger {
+  constructor(logLevel) {
+    const NO_OP = () => {};
+
+    this.error = console.error.bind(console);
+
+    if (logLevel === "error") {
+      this.warn = NO_OP;
+      this.log = NO_OP;
+      return;
+    }
+    this.warn = console.warn.bind(console);
+
+    if (logLevel === "warn") {
+      this.log = NO_OP;
+    }
+    this.log = console.log.bind(console);
+  }
+}
+
+export const logger = new Logger(LOG_LEVEL);

From 5eb022a3c2741aa06a203507a37869d772b1c6f6 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 19 Aug 2024 14:28:18 -0700
Subject: [PATCH 45/72] Add none logging level, update readme

---
 Client/src/Utils/Logger.js |  8 ++++++++
 README.md                  | 13 +++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/Client/src/Utils/Logger.js b/Client/src/Utils/Logger.js
index 722800910..02fffd6be 100644
--- a/Client/src/Utils/Logger.js
+++ b/Client/src/Utils/Logger.js
@@ -3,6 +3,13 @@ class Logger {
   constructor(logLevel) {
     const NO_OP = () => {};
 
+    if (logLevel === "none") {
+      this.error = NO_OP;
+      this.warn = NO_OP;
+      this.log = NO_OP;
+      return;
+    }
+
     this.error = console.error.bind(console);
 
     if (logLevel === "error") {
@@ -14,6 +21,7 @@ class Logger {
 
     if (logLevel === "warn") {
       this.log = NO_OP;
+      return;
     }
     this.log = console.log.bind(console);
   }
diff --git a/README.md b/README.md
index 0a26a67b4..adb9bc68f 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ BlueWave Uptime is an open source server monitoring application used to track th
 - [x] Ping monitoring
 - [x] Incidents at a glance
 - [x] Page speed monitoring
-- [x] E-mail notifications 
+- [x] E-mail notifications
 - [ ] Scheduled maintenance (in the works)
 
 **Roadmap (short term):**
@@ -62,8 +62,7 @@ Made with [contrib.rocks](https://contrib.rocks).
 
 [![Star History Chart](https://api.star-history.com/svg?repos=bluewave-labs/bluewave-uptime&type=Date)](https://star-history.com/#bluewave-labs/bluewave-uptime&Date)
 
-
-Also check other developer and contributor-friendly projects of BlueWave: 
+Also check other developer and contributor-friendly projects of BlueWave:
 
 - [BlueWave HRM](https://github.com/bluewave-labs/bluewave-hrm)
 - [BlueWave Onboarding](https://github.com/bluewave-labs/bluewave-onboarding)
@@ -191,6 +190,7 @@ SYSTEM_EMAIL_PASSWORD=<system_email_password>
 
 ```
 VITE_APP_API_BASE_URL="http://localhost:5000/api/v1"
+VITE_APP_API_LOG_LEVEL="debug"
 ```
 
 4.  In the `Docker` directory run `docker compose up` to run the `docker-compose.yaml` file and start all four images.
@@ -211,9 +211,10 @@ That's it, the application is ready to use on port 80.
 
 ##### Environmental Variables <a id="env-vars-client"></a>
 
-| ENV Variable Name     | Required/Optional | Type     | Description        | Accepted Values |
-| --------------------- | ----------------- | -------- | ------------------ | --------------- |
-| VITE_APP_API_BASE_URL | Required          | `string` | Base URL of server | {host}/api/v1   |
+| ENV Variable Name     | Required/Optional | Type     | Description        | Accepted Values                    |
+| --------------------- | ----------------- | -------- | ------------------ | ---------------------------------- |
+| VITE_APP_API_BASE_URL | Required          | `string` | Base URL of server | {host}/api/v1                      |
+| VITE_APP_LOG_LEVEL    | Optional          | `string` | Log level          | `"none"`\|`"error"` \| `"warn"` \| |
 
 <br/>
 

From 171bc69efd0fc72727081526081cb64951d19ea7 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 17:34:10 -0400
Subject: [PATCH 46/72] Added table pagination

---
 Client/src/Components/BasicTable/index.jsx    | 116 ++++++++++++------
 Client/src/assets/icons/left-arrow-double.svg |   3 +
 .../src/assets/icons/right-arrow-double.svg   |   3 +
 3 files changed, 83 insertions(+), 39 deletions(-)
 create mode 100644 Client/src/assets/icons/left-arrow-double.svg
 create mode 100644 Client/src/assets/icons/right-arrow-double.svg

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 76f1c61c7..26caf2afc 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -1,3 +1,5 @@
+import PropTypes from "prop-types";
+import { useState, useEffect } from "react";
 import {
   TableContainer,
   Paper,
@@ -6,14 +8,66 @@ import {
   TableRow,
   TableCell,
   TableBody,
-  Pagination,
-  PaginationItem,
+  TablePagination,
+  Box,
+  IconButton,
 } from "@mui/material";
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
+import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
+import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
+import LeftArrow from "../../assets/icons/left-arrow.svg?react";
+import RightArrow from "../../assets/icons/right-arrow.svg?react";
 import "./index.css";
-import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
-import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
+
+const TablePaginationActions = (props) => {
+  const { count, page, rowsPerPage, onPageChange } = props;
+  console.log(count);
+
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+
+  return (
+    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+      >
+        <LeftArrowDouble />
+      </IconButton>
+      <IconButton
+        onClick={handleBackButtonClick}
+        disabled={page === 0}
+        aria-label="previous page"
+      >
+        <LeftArrow />
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        <RightArrow />
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        <RightArrowDouble />
+      </IconButton>
+    </Box>
+  );
+};
 
 /**
  * BasicTable Component
@@ -68,10 +122,11 @@ import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded";
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
+const BasicTable = ({ data, paginated, type, reversed, rows = 5 }) => {
   // Add headers to props validation
 
   const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(rows);
 
   useEffect(() => {
     setPage(0);
@@ -81,6 +136,11 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
     setPage(newPage);
   };
 
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
   let displayData = [];
 
   if (data && data.rows) {
@@ -94,36 +154,6 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
     return <div>No data</div>;
   }
 
-  let paginationComponent = <></>;
-  if (paginated === true && data.rows.length > rowsPerPage) {
-    paginationComponent = (
-      <Pagination
-        count={Math.ceil(data.rows.length / rowsPerPage)}
-        page={page + 1}
-        onChange={(event, value) => handleChangePage(event, value - 1)}
-        shape="rounded"
-        renderItem={(item) => (
-          <PaginationItem
-            slots={{
-              previous: ArrowBackRoundedIcon,
-              next: ArrowForwardRoundedIcon,
-            }}
-            {...item}
-            sx={{
-              "&:focus": {
-                outline: "none",
-              },
-              "& .MuiTouchRipple-root": {
-                pointerEvents: "none",
-                display: "none",
-              },
-            }}
-          />
-        )}
-      />
-    );
-  }
-
   return (
     <>
       <TableContainer component={Paper}>
@@ -154,8 +184,16 @@ const BasicTable = ({ data, paginated, reversed, rowsPerPage = 5 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-
-      {paginationComponent}
+      <TablePagination
+        component="div"
+        count={data.rows.length}
+        page={page}
+        onPageChange={handleChangePage}
+        rowsPerPage={rowsPerPage}
+        rowsPerPageOptions={[5, 10, 15, 25]}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+        ActionsComponent={TablePaginationActions}
+      />
     </>
   );
 };
diff --git a/Client/src/assets/icons/left-arrow-double.svg b/Client/src/assets/icons/left-arrow-double.svg
new file mode 100644
index 000000000..6001a3ead
--- /dev/null
+++ b/Client/src/assets/icons/left-arrow-double.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 17L13 12L18 7M11 17L6 12L11 7" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/right-arrow-double.svg b/Client/src/assets/icons/right-arrow-double.svg
new file mode 100644
index 000000000..4235134d7
--- /dev/null
+++ b/Client/src/assets/icons/right-arrow-double.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 17L11 12L6 7M13 17L18 12L13 7" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 6042d87a7d6dc32a4d2ca836780b7735a4da9c73 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 17:58:48 -0400
Subject: [PATCH 47/72] Styled buttons

---
 Client/src/Components/BasicTable/index.css | 25 +++++++++++++++
 Client/src/Components/BasicTable/index.jsx | 37 ++++++++++++----------
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 629c8dd7b..19831a425 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -125,3 +125,28 @@
 .MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root {
   user-select: none;
 }
+
+.MuiTablePagination-root p {
+  color: var(--env-var-color-5);
+}
+.MuiTablePagination-root button {
+  min-width: 0;
+  padding: 4px;
+  margin-left: 5px;
+  border-color: #ebebeb;
+}
+.MuiTablePagination-root svg {
+  width: 22px;
+  height: 22px;
+}
+.MuiTablePagination-root svg path {
+  stroke: var(--env-var-color-5);
+  stroke-width: 1.3;
+}
+.MuiTablePagination-root button.Mui-disabled {
+  opacity: 0.4;
+}
+.MuiTablePagination-root button:not(.Mui-disabled):hover {
+  background-color: #f4f4f4;
+  border-color: #f4f4f4;
+}
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 26caf2afc..8c9031a9e 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -17,10 +17,10 @@ import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
 import LeftArrow from "../../assets/icons/left-arrow.svg?react";
 import RightArrow from "../../assets/icons/right-arrow.svg?react";
 import "./index.css";
+import Button from "../Button";
 
 const TablePaginationActions = (props) => {
   const { count, page, rowsPerPage, onPageChange } = props;
-  console.log(count);
 
   const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
@@ -37,34 +37,34 @@ const TablePaginationActions = (props) => {
 
   return (
     <Box sx={{ flexShrink: 0, ml: 2.5 }}>
-      <IconButton
+      <Button
+        level="secondary"
+        img={<LeftArrowDouble />}
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}
         aria-label="first page"
-      >
-        <LeftArrowDouble />
-      </IconButton>
-      <IconButton
+      />
+      <Button
+        level="secondary"
+        img={<LeftArrow />}
         onClick={handleBackButtonClick}
         disabled={page === 0}
         aria-label="previous page"
-      >
-        <LeftArrow />
-      </IconButton>
-      <IconButton
+      />
+      <Button
+        level="secondary"
+        img={<RightArrow />}
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="next page"
-      >
-        <RightArrow />
-      </IconButton>
-      <IconButton
+      />
+      <Button
+        level="secondary"
+        img={<RightArrowDouble />}
         onClick={handleLastPageButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
         aria-label="last page"
-      >
-        <RightArrowDouble />
-      </IconButton>
+      />
     </Box>
   );
 };
@@ -193,6 +193,9 @@ const BasicTable = ({ data, paginated, type, reversed, rows = 5 }) => {
         rowsPerPageOptions={[5, 10, 15, 25]}
         onRowsPerPageChange={handleChangeRowsPerPage}
         ActionsComponent={TablePaginationActions}
+        labelDisplayedRows={({ page, count }) =>
+          `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
+        }
       />
     </>
   );

From e22f7276d48a5af8cb5e70e77dff54e4e9e84650 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 18:49:14 -0400
Subject: [PATCH 48/72] Styled rows per page select component

---
 Client/src/Components/BasicTable/index.css    | 39 +++++++++++++++++--
 Client/src/Components/BasicTable/index.jsx    | 34 ++++++++++++++--
 Client/src/Pages/Monitors/index.css           |  2 +-
 Client/src/Pages/Monitors/index.jsx           |  1 -
 Client/src/assets/icons/selector-vertical.svg |  3 ++
 5 files changed, 70 insertions(+), 9 deletions(-)
 create mode 100644 Client/src/assets/icons/selector-vertical.svg

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 19831a425..ef39c0f46 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -10,7 +10,6 @@
 }
 .MuiTable-root .host div:nth-child(2) {
   width: fit-content;
-  font-weight: 500;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
@@ -127,13 +126,22 @@
 }
 
 .MuiTablePagination-root p {
-  color: var(--env-var-color-5);
+  color: var(--env-var-color-2);
+  font-weight: 500;
+}
+.MuiTablePagination-root button,
+.MuiTablePagination-root .MuiSelect-select {
+  border: solid 1px #ebebeb;
+  border-radius: var(--env-var-radius-1);
+}
+.MuiTablePagination-root .MuiTablePagination-select.MuiSelect-select {
+  text-align: left;
+  text-align-last: left;
 }
 .MuiTablePagination-root button {
   min-width: 0;
   padding: 4px;
   margin-left: 5px;
-  border-color: #ebebeb;
 }
 .MuiTablePagination-root svg {
   width: 22px;
@@ -143,6 +151,13 @@
   stroke: var(--env-var-color-5);
   stroke-width: 1.3;
 }
+.MuiTablePagination-root .MuiSelect-icon {
+  width: 16px;
+  height: 16px;
+  top: 50%;
+  right: 8%;
+  transform: translateY(-50%);
+}
 .MuiTablePagination-root button.Mui-disabled {
   opacity: 0.4;
 }
@@ -150,3 +165,21 @@
   background-color: #f4f4f4;
   border-color: #f4f4f4;
 }
+
+.pagination-dropdown.MuiPaper-root {
+  box-shadow: var(--env-var-shadow-1);
+  border: solid 1px var(--env-var-color-6);
+  border-radius: var(--env-var-radius-1);
+}
+.pagination-dropdown ul {
+  padding: 4px;
+  min-width: 100px;
+}
+.pagination-dropdown li {
+  font-size: var(--env-var-font-size-medium);
+  padding: 4px;
+}
+.pagination-dropdown li.Mui-selected,
+.pagination-dropdown li.Mui-selected:hover  {
+  background-color: #f4f4f4;
+}
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 8c9031a9e..10b747a55 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -10,14 +10,14 @@ import {
   TableBody,
   TablePagination,
   Box,
-  IconButton,
 } from "@mui/material";
 import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
 import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
 import LeftArrow from "../../assets/icons/left-arrow.svg?react";
 import RightArrow from "../../assets/icons/right-arrow.svg?react";
-import "./index.css";
+import SelectorVertical from "../../assets/icons/selector-vertical.svg?react";
 import Button from "../Button";
+import "./index.css";
 
 const TablePaginationActions = (props) => {
   const { count, page, rowsPerPage, onPageChange } = props;
@@ -36,9 +36,10 @@ const TablePaginationActions = (props) => {
   };
 
   return (
-    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+    <Box sx={{ flexShrink: 0, ml: "25px" }}>
       <Button
         level="secondary"
+        label=""
         img={<LeftArrowDouble />}
         onClick={handleFirstPageButtonClick}
         disabled={page === 0}
@@ -46,6 +47,7 @@ const TablePaginationActions = (props) => {
       />
       <Button
         level="secondary"
+        label=""
         img={<LeftArrow />}
         onClick={handleBackButtonClick}
         disabled={page === 0}
@@ -53,6 +55,7 @@ const TablePaginationActions = (props) => {
       />
       <Button
         level="secondary"
+        label=""
         img={<RightArrow />}
         onClick={handleNextButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
@@ -60,6 +63,7 @@ const TablePaginationActions = (props) => {
       />
       <Button
         level="secondary"
+        label=""
         img={<RightArrowDouble />}
         onClick={handleLastPageButtonClick}
         disabled={page >= Math.ceil(count / rowsPerPage) - 1}
@@ -122,7 +126,7 @@ const TablePaginationActions = (props) => {
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated, type, reversed, rows = 5 }) => {
+const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
   // Add headers to props validation
 
   const [page, setPage] = useState(0);
@@ -193,9 +197,31 @@ const BasicTable = ({ data, paginated, type, reversed, rows = 5 }) => {
         rowsPerPageOptions={[5, 10, 15, 25]}
         onRowsPerPageChange={handleChangeRowsPerPage}
         ActionsComponent={TablePaginationActions}
+        labelRowsPerPage="Rows per page"
         labelDisplayedRows={({ page, count }) =>
           `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
         }
+        slotProps={{
+          select: {
+            MenuProps: {
+              PaperProps: {
+                className: "pagination-dropdown",
+              },
+              transformOrigin: { vertical: "bottom", horizontal: "left" },
+              anchorOrigin: { vertical: "top", horizontal: "left" },
+              sx: { mt: "-4px" },
+            },
+            inputProps: { id: "pagination-dropdown" },
+            IconComponent: SelectorVertical,
+            sx: {
+              ml: "8px",
+              mr: "25px",
+              minWidth: "50px",
+              textAlign: "left",
+              "&.Mui-focused > div": { backgroundColor: "white" },
+            },
+          },
+        }}
       />
     </>
   );
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index 9e34ddf52..7b40f7464 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -1,7 +1,7 @@
 .monitors h1.MuiTypography-root,
 .monitors h2.MuiTypography-root {
   color: var(--env-var-color-1);
-  font-weight: 500;
+  font-weight: 600;
 }
 .monitors h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 1b541c72b..394ab9a45 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -439,7 +439,6 @@ const Monitors = () => {
               <Stack
                 gap={theme.gap.large}
                 p={theme.gap.lgplus}
-                flex={1}
                 border={1}
                 borderColor={theme.palette.otherColors.graishWhite}
                 backgroundColor={theme.palette.otherColors.white}
diff --git a/Client/src/assets/icons/selector-vertical.svg b/Client/src/assets/icons/selector-vertical.svg
new file mode 100644
index 000000000..29d9a4998
--- /dev/null
+++ b/Client/src/assets/icons/selector-vertical.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 15L12 20L17 15M7 9L12 4L17 9" stroke="#667085" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From e15152a618882308f7fc7ab72e48dca4379bdd0b Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 19:07:07 -0400
Subject: [PATCH 49/72] Added monitor range displayed

---
 Client/src/Components/BasicTable/index.jsx | 79 +++++++++++++---------
 1 file changed, 46 insertions(+), 33 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 10b747a55..37bc73d85 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -10,6 +10,8 @@ import {
   TableBody,
   TablePagination,
   Box,
+  Typography,
+  Stack,
 } from "@mui/material";
 import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
 import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
@@ -158,6 +160,12 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
     return <div>No data</div>;
   }
 
+  const getRange = () => {
+    let start = page * rowsPerPage + 1;
+    let end = Math.min(page * rowsPerPage + rowsPerPage, data.rows.length);
+    return `${start} - ${end}`;
+  };
+
   return (
     <>
       <TableContainer component={Paper}>
@@ -188,41 +196,46 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-      <TablePagination
-        component="div"
-        count={data.rows.length}
-        page={page}
-        onPageChange={handleChangePage}
-        rowsPerPage={rowsPerPage}
-        rowsPerPageOptions={[5, 10, 15, 25]}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-        ActionsComponent={TablePaginationActions}
-        labelRowsPerPage="Rows per page"
-        labelDisplayedRows={({ page, count }) =>
-          `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
-        }
-        slotProps={{
-          select: {
-            MenuProps: {
-              PaperProps: {
-                className: "pagination-dropdown",
+      <Stack direction="row" alignItems="center" justifyContent="space-between">
+        <Typography sx={{ opacity: 0.7 }}>
+          Showing {getRange()} of {data.rows.length} monitor(s)
+        </Typography>
+        <TablePagination
+          component="div"
+          count={data.rows.length}
+          page={page}
+          onPageChange={handleChangePage}
+          rowsPerPage={rowsPerPage}
+          rowsPerPageOptions={[5, 10, 15, 25]}
+          onRowsPerPageChange={handleChangeRowsPerPage}
+          ActionsComponent={TablePaginationActions}
+          labelRowsPerPage="Rows per page"
+          labelDisplayedRows={({ page, count }) =>
+            `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
+          }
+          slotProps={{
+            select: {
+              MenuProps: {
+                PaperProps: {
+                  className: "pagination-dropdown",
+                },
+                transformOrigin: { vertical: "bottom", horizontal: "left" },
+                anchorOrigin: { vertical: "top", horizontal: "left" },
+                sx: { mt: "-4px" },
+              },
+              inputProps: { id: "pagination-dropdown" },
+              IconComponent: SelectorVertical,
+              sx: {
+                ml: "8px",
+                mr: "25px",
+                minWidth: "50px",
+                textAlign: "left",
+                "&.Mui-focused > div": { backgroundColor: "white" },
               },
-              transformOrigin: { vertical: "bottom", horizontal: "left" },
-              anchorOrigin: { vertical: "top", horizontal: "left" },
-              sx: { mt: "-4px" },
             },
-            inputProps: { id: "pagination-dropdown" },
-            IconComponent: SelectorVertical,
-            sx: {
-              ml: "8px",
-              mr: "25px",
-              minWidth: "50px",
-              textAlign: "left",
-              "&.Mui-focused > div": { backgroundColor: "white" },
-            },
-          },
-        }}
-      />
+          }}
+        />
+      </Stack>
     </>
   );
 };

From 31ea57542b36dc0ac13ab350a95db7f33a760dfa Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 19:08:43 -0400
Subject: [PATCH 50/72] Added docs

---
 Client/src/Components/BasicTable/index.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 37bc73d85..09e8f5936 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -21,6 +21,18 @@ import SelectorVertical from "../../assets/icons/selector-vertical.svg?react";
 import Button from "../Button";
 import "./index.css";
 
+/**
+ * Component for pagination actions (first, previous, next, last).
+ *
+ * @component
+ * @param {Object} props
+ * @param {number} props.count - Total number of items.
+ * @param {number} props.page - Current page number.
+ * @param {number} props.rowsPerPage - Number of rows per page.
+ * @param {function} props.onPageChange - Callback function to handle page change.
+ *
+ * @returns {JSX.Element} Pagination actions component.
+ */
 const TablePaginationActions = (props) => {
   const { count, page, rowsPerPage, onPageChange } = props;
 
@@ -160,6 +172,10 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
     return <div>No data</div>;
   }
 
+  /**
+   * Helper function to calculate the range of displayed rows.
+   * @returns {string}
+   */
   const getRange = () => {
     let start = page * rowsPerPage + 1;
     let end = Math.min(page * rowsPerPage + rowsPerPage, data.rows.length);

From 720913dcd3d9a99c02e722aef06a223fcf2a10da Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 19:11:06 -0400
Subject: [PATCH 51/72] Fixed background color not changing on focus visible

---
 Client/src/Components/BasicTable/index.css | 1 +
 Client/src/Components/BasicTable/index.jsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index ef39c0f46..9003ce7b6 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -180,6 +180,7 @@
   padding: 4px;
 }
 .pagination-dropdown li.Mui-selected,
+.pagination-dropdown li.Mui-selected.Mui-focusVisible,
 .pagination-dropdown li.Mui-selected:hover  {
   background-color: #f4f4f4;
 }
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 09e8f5936..5228c68fb 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -232,6 +232,7 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           slotProps={{
             select: {
               MenuProps: {
+                keepMounted: true,
                 PaperProps: {
                   className: "pagination-dropdown",
                 },

From 3c5882f687de8e8799deec952d376d6871397aac Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 19 Aug 2024 19:28:58 -0400
Subject: [PATCH 52/72] Replaced hardcoded values with theme variables

---
 Client/src/Components/BasicTable/index.css |  3 ++-
 Client/src/Components/BasicTable/index.jsx | 18 ++++++++++--------
 Client/src/Pages/Monitors/index.jsx        |  7 +++----
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 9003ce7b6..821726cf4 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -177,10 +177,11 @@
 }
 .pagination-dropdown li {
   font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
   padding: 4px;
 }
 .pagination-dropdown li.Mui-selected,
 .pagination-dropdown li.Mui-selected.Mui-focusVisible,
-.pagination-dropdown li.Mui-selected:hover  {
+.pagination-dropdown li.Mui-selected:hover {
   background-color: #f4f4f4;
 }
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 5228c68fb..b9bbb795e 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -1,5 +1,6 @@
 import PropTypes from "prop-types";
 import { useState, useEffect } from "react";
+import { useTheme } from "@emotion/react";
 import {
   TableContainer,
   Paper,
@@ -20,7 +21,6 @@ import RightArrow from "../../assets/icons/right-arrow.svg?react";
 import SelectorVertical from "../../assets/icons/selector-vertical.svg?react";
 import Button from "../Button";
 import "./index.css";
-
 /**
  * Component for pagination actions (first, previous, next, last).
  *
@@ -50,7 +50,7 @@ const TablePaginationActions = (props) => {
   };
 
   return (
-    <Box sx={{ flexShrink: 0, ml: "25px" }}>
+    <Box sx={{ flexShrink: 0, ml: "24px" }}>
       <Button
         level="secondary"
         label=""
@@ -141,8 +141,7 @@ const TablePaginationActions = (props) => {
  */
 
 const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
-  // Add headers to props validation
-
+  const theme = useTheme();
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(rows);
 
@@ -243,14 +242,17 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
               inputProps: { id: "pagination-dropdown" },
               IconComponent: SelectorVertical,
               sx: {
-                ml: "8px",
-                mr: "25px",
-                minWidth: "50px",
+                ml: theme.gap.small,
+                mr: theme.gap.large,
+                minWidth: theme.gap.xl,
                 textAlign: "left",
-                "&.Mui-focused > div": { backgroundColor: "white" },
+                "&.Mui-focused > div": {
+                  backgroundColor: theme.palette.otherColors.white,
+                },
               },
             },
           }}
+          sx={{ mt: theme.gap.medium }}
         />
       </Stack>
     </>
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 394ab9a45..af4cb7429 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -436,8 +436,7 @@ const Monitors = () => {
                 <ServerStatus title="Down" value={down} state="down" />
                 <ServerStatus title="Paused" value={0} state="pause" />
               </Stack>
-              <Stack
-                gap={theme.gap.large}
+              <Box
                 p={theme.gap.lgplus}
                 border={1}
                 borderColor={theme.palette.otherColors.graishWhite}
@@ -446,7 +445,7 @@ const Monitors = () => {
                   borderRadius: `${theme.shape.borderRadius}px`,
                 }}
               >
-                <Stack direction="row" alignItems="center">
+                <Stack direction="row" alignItems="center" mb={theme.gap.large}>
                   <Typography component="h2">Current monitors</Typography>
                   <Box className="current-monitors-counter">
                     {monitorState.monitors.length}
@@ -454,7 +453,7 @@ const Monitors = () => {
                   {/* TODO - add search bar */}
                 </Stack>
                 <BasicTable data={data} paginated={true} />
-              </Stack>{" "}
+              </Box>
             </>
           )}
         </>

From 726e2fc6c17d18c779b8efdc24379ba1fa0e9f9c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 20 Aug 2024 10:34:29 -0700
Subject: [PATCH 53/72] Remove unused lines from NetworkService

---
 Client/src/Utils/NetworkService.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/Client/src/Utils/NetworkService.js b/Client/src/Utils/NetworkService.js
index 21f1c1845..32fcb6aa8 100644
--- a/Client/src/Utils/NetworkService.js
+++ b/Client/src/Utils/NetworkService.js
@@ -1,7 +1,6 @@
 import axios from "axios";
-import { clearAuthState } from "../Features/Auth/authSlice";
 const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
-
+import { logger } from "./Logger";
 class NetworkService {
   constructor(store) {
     this.store = store;
@@ -9,10 +8,9 @@ class NetworkService {
     this.axiosInstance.interceptors.response.use(
       (response) => response,
       (error) => {
-        console.error(error);
+        logger.error(error);
         if (error.response && error.response.status === 401) {
-          console.log("Invalid token revoked");
-          networkService;
+          logger.error("Invalid token received");
         }
         return Promise.reject(error);
       }

From 1076c2377c92c0367d506fb6058bef5e005ba36a Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 20 Aug 2024 10:42:20 -0700
Subject: [PATCH 54/72] Add proptypes and missing dependency to Register

---
 Client/src/Pages/Auth/Register/Register.jsx | 31 ++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 225fb16f0..046aad64b 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -69,6 +69,11 @@ const LandingPage = ({ isAdmin, onSignup }) => {
   );
 };
 
+LandingPage.propTypes = {
+  isAdmin: PropTypes.bool,
+  onSignup: PropTypes.func,
+};
+
 /**
  * Renders the first step of the sign up process.
  *
@@ -152,6 +157,14 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
   );
 };
 
+StepOne.propTypes = {
+  form: PropTypes.object,
+  errors: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  onBack: PropTypes.func,
+};
+
 /**
  * Renders the second step of the sign up process.
  *
@@ -224,6 +237,14 @@ const StepTwo = ({ form, errors, onSubmit, onChange, onBack }) => {
   );
 };
 
+StepTwo.propTypes = {
+  form: PropTypes.object,
+  errors: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  onBack: PropTypes.func,
+};
+
 /**
  * Renders the third step of the sign up process.
  *
@@ -369,6 +390,14 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
   );
 };
 
+StepThree.propTypes = {
+  form: PropTypes.object,
+  errors: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  onBack: PropTypes.func,
+};
+
 const Register = ({ isAdmin }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -407,7 +436,7 @@ const Register = ({ isAdmin }) => {
       }
     };
     fetchInvite();
-  }, [token]);
+  }, [token, form]);
 
   /**
    * Validates the form data against the validation schema.

From b1a0b11bbc42e3b9d8276367cce5fe21e8cb986b Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 20 Aug 2024 10:44:03 -0700
Subject: [PATCH 55/72] Escaped apostrophe

---
 Client/src/Pages/Auth/CheckEmail.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Auth/CheckEmail.jsx b/Client/src/Pages/Auth/CheckEmail.jsx
index 0ede66831..4a0daf68a 100644
--- a/Client/src/Pages/Auth/CheckEmail.jsx
+++ b/Client/src/Pages/Auth/CheckEmail.jsx
@@ -145,7 +145,7 @@ const CheckEmail = () => {
             }}
           />
           <Typography sx={{ alignSelf: "center", mb: theme.gap.medium }}>
-            Didn't receive the email?{" "}
+            Didn&apos;t receive the email?{" "}
             <Typography
               component="span"
               onClick={resendToken}

From 1f14247b2ebe398e75be2f29b24930cbdf46db29 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 20 Aug 2024 10:44:35 -0700
Subject: [PATCH 56/72] Escaped apostrophe

---
 Client/src/Pages/Auth/ForgotPassword.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Auth/ForgotPassword.jsx b/Client/src/Pages/Auth/ForgotPassword.jsx
index c51417c91..06afb05fa 100644
--- a/Client/src/Pages/Auth/ForgotPassword.jsx
+++ b/Client/src/Pages/Auth/ForgotPassword.jsx
@@ -131,7 +131,7 @@ const ForgotPassword = () => {
             <Key alt="password key icon" />
             <Typography component="h1">Forgot password?</Typography>
             <Typography>
-              No worries, we'll send you reset instructions.
+              No worries, we&apos;ll send you reset instructions.
             </Typography>
           </Box>
           <Box width="100%" textAlign="left">

From 7a8ea60e659f9afb1b67b66ff55b62fbf9aad1e1 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 20 Aug 2024 10:47:27 -0700
Subject: [PATCH 57/72] Escaped apostrophe

---
 Client/src/Pages/Auth/Login.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/Auth/Login.jsx b/Client/src/Pages/Auth/Login.jsx
index 79e8d7e12..00de688f6 100644
--- a/Client/src/Pages/Auth/Login.jsx
+++ b/Client/src/Pages/Auth/Login.jsx
@@ -427,7 +427,9 @@ const Login = () => {
         )}
       </Stack>
       <Box textAlign="center" p={theme.gap.large}>
-        <Typography display="inline-block">Don't have an account? —</Typography>
+        <Typography display="inline-block">
+          Don&apos;t have an account? —
+        </Typography>
         <Typography
           component="span"
           ml={theme.gap.xs}

From 8b87bf3c9ec9e6491377bb230e8e8d861a62a5be Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 20 Aug 2024 10:54:28 -0700
Subject: [PATCH 58/72] Remove unused imports, add missing dependencies

---
 Client/src/Pages/Home/index.css                  |  1 -
 Client/src/Pages/Home/index.jsx                  | 16 ----------------
 .../src/Pages/Incidents/IncidentTable/index.jsx  |  2 +-
 .../CreateMaintenanceWindow/index.jsx            |  2 +-
 Client/src/Pages/Maintenance/index.jsx           |  3 ---
 .../src/Pages/Monitors/CreateMonitor/index.jsx   |  2 +-
 .../Monitors/Details/PaginationTable/index.jsx   |  2 +-
 Client/src/Pages/Monitors/Details/index.jsx      | 13 ++++++-------
 Client/src/Pages/Monitors/index.jsx              |  1 -
 Client/src/Pages/PageSpeed/Configure/index.jsx   |  2 +-
 10 files changed, 11 insertions(+), 33 deletions(-)
 delete mode 100644 Client/src/Pages/Home/index.css
 delete mode 100644 Client/src/Pages/Home/index.jsx

diff --git a/Client/src/Pages/Home/index.css b/Client/src/Pages/Home/index.css
deleted file mode 100644
index fdb4ddd1b..000000000
--- a/Client/src/Pages/Home/index.css
+++ /dev/null
@@ -1 +0,0 @@
-/* Home Page Styles*/
\ No newline at end of file
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
deleted file mode 100644
index 161650512..000000000
--- a/Client/src/Pages/Home/index.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import DropdownTeamMember from "../../Components/DropdownTeamMember";
-import Search from "../../Components/Search";
-import "./index.css";
-import DashboardMenu from "../../Components/DashboardMenu";
-import Integrations from "../../Components/Integrations";
-
-const Home = () => {
-  const token = localStorage.getItem("token");
-  return (
-    <>
-      <div>Home</div>
-    </>
-  );
-};
-
-export default Home;
diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index 705daa70c..741ee144a 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -36,7 +36,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
       ...paginationController,
       page: 0,
     });
-  }, [filter, selectedMonitor]);
+  }, [filter, selectedMonitor, paginationController]);
 
   useEffect(() => {
     const fetchPage = async () => {
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index 8fff6e4a1..d207bfc98 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -1,6 +1,6 @@
 import { Box, Stack, Typography } from "@mui/material";
 import "./index.css";
-import React, { useState } from "react";
+import { useState } from "react";
 import Button from "../../../Components/Button";
 import Back from "../../../assets/icons/left-arrow-long.svg?react";
 import Select from "../../../Components/Inputs/Select";
diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx
index c589552f7..e9c28d905 100644
--- a/Client/src/Pages/Maintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/index.jsx
@@ -1,10 +1,7 @@
-import { useTheme } from "@emotion/react";
 import Fallback from "../../Components/Fallback";
 import "./index.css";
 
 const Maintenance = () => {
-  const theme = useTheme();
-
   return (
     <div className="maintenance">
       <Fallback
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 442558f8e..28493080a 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -1,5 +1,5 @@
 import "./index.css";
-import React, { useState } from "react";
+import { useState } from "react";
 import RadioButton from "../../../Components/RadioButton";
 import Button from "../../../Components/Button";
 import { Box, ButtonGroup, Stack, Typography } from "@mui/material";
diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
index da4a0cb1e..b9416e961 100644
--- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -33,7 +33,7 @@ const PaginationTable = ({ monitorId, dateRange }) => {
       ...paginationController,
       page: 0,
     });
-  }, [dateRange]);
+  }, [dateRange, paginationController]);
 
   useEffect(() => {
     const fetchPage = async () => {
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 7a04a24e2..b636444bd 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useSelector } from "react-redux";
@@ -144,15 +144,14 @@ const DetailsPage = () => {
   useEffect(() => {
     const fetchCertificate = async () => {
       try {
-      const res = await networkService.getCertificateExpiry(
-        authToken,
-        monitorId
-      );
-      setCertificateExpiry(res?.data?.data?.certificateDate ?? "N/A");
+        const res = await networkService.getCertificateExpiry(
+          authToken,
+          monitorId
+        );
+        setCertificateExpiry(res?.data?.data?.certificateDate ?? "N/A");
       } catch (error) {
         console.error(error);
       }
-
     };
     fetchCertificate();
   }, [authToken, monitorId]);
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 0aae47984..198cdc716 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -28,7 +28,6 @@ import {
 
 import Settings from "../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
-import { logger } from "../../Utils/Logger";
 
 const ActionsMenu = ({ monitor }) => {
   const [anchorEl, setAnchorEl] = useState(null);
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 1cb164fcf..bc759db17 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -99,7 +99,7 @@ const PageSpeedConfigure = () => {
     setMonitor({
       ...data,
     });
-  }, [monitorId]);
+  }, [monitorId, monitors, navigate]);
 
   const handleChange = (event, id) => {
     let { value } = event.target;

From a11202d6120d376239db85b116415c9ef421d585 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 20 Aug 2024 10:55:54 -0700
Subject: [PATCH 59/72] Add proptypes, remove unused imports

---
 Client/src/Pages/PageSpeed/index.jsx | 7 ++++++-
 Client/src/Pages/Status/index.jsx    | 3 ---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx
index 771a692c1..368ae2062 100644
--- a/Client/src/Pages/PageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/index.jsx
@@ -11,6 +11,7 @@ import "./index.css";
 import Button from "../../Components/Button";
 import { useNavigate } from "react-router";
 import { getLastChecked } from "../../Utils/monitorUtils";
+import PropTypes from "prop-types";
 
 const Card = ({ data }) => {
   const theme = useTheme();
@@ -57,6 +58,10 @@ const Card = ({ data }) => {
   );
 };
 
+Card.propTypes = {
+  data: PropTypes.object.isRequired,
+};
+
 /**
  * Renders a skeleton layout.
  *
@@ -129,7 +134,7 @@ const PageSpeed = () => {
   );
   useEffect(() => {
     dispatch(getPageSpeedByUserId(authToken));
-  }, []);
+  }, [authToken, dispatch]);
 
   // will show skeletons only on initial load
   // since monitor state is being added to redux persist, there's no reason to display skeletons on every render
diff --git a/Client/src/Pages/Status/index.jsx b/Client/src/Pages/Status/index.jsx
index 474375ede..d280132c4 100644
--- a/Client/src/Pages/Status/index.jsx
+++ b/Client/src/Pages/Status/index.jsx
@@ -1,9 +1,6 @@
 import Fallback from "../../Components/Fallback";
-import { useTheme } from "@emotion/react";
 
 const Status = () => {
-  const theme = useTheme();
-
   return (
     <div className="status">
       <Fallback

From b4b53e418f64ec23a2b38ae5ffad17499d09d8cf Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 20 Aug 2024 11:07:34 -0700
Subject: [PATCH 60/72] Fixed useEffect infinite render loops

---
 Client/src/Pages/Incidents/IncidentTable/index.jsx        | 8 ++++----
 .../src/Pages/Monitors/Details/PaginationTable/index.jsx  | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index 741ee144a..7a77208f8 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -32,11 +32,11 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
   });
 
   useEffect(() => {
-    setPaginationController({
-      ...paginationController,
+    setPaginationController((prevPaginationController) => ({
+      ...prevPaginationController,
       page: 0,
-    });
-  }, [filter, selectedMonitor, paginationController]);
+    }));
+  }, [filter, selectedMonitor]);
 
   useEffect(() => {
     const fetchPage = async () => {
diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
index b9416e961..ad8248ab0 100644
--- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
+++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx
@@ -29,11 +29,11 @@ const PaginationTable = ({ monitorId, dateRange }) => {
   });
 
   useEffect(() => {
-    setPaginationController({
-      ...paginationController,
+    setPaginationController((prevPaginationController) => ({
+      ...prevPaginationController,
       page: 0,
-    });
-  }, [dateRange, paginationController]);
+    }));
+  }, [dateRange]);
 
   useEffect(() => {
     const fetchPage = async () => {

From a0f1b5bee8b5e16412bf7593ca1ffbac66a02a9f Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:03:19 -0400
Subject: [PATCH 61/72] Small styling changes

---
 Client/src/Components/BasicTable/index.css           |  5 +++--
 Client/src/Components/BasicTable/index.jsx           |  4 ++--
 Client/src/Components/Sidebar/index.css              | 12 ++++++------
 .../Components/TabPanels/Account/ProfilePanel.jsx    |  6 +++---
 Client/src/Pages/Account/index.jsx                   |  7 +++----
 Client/src/Pages/Monitors/index.css                  |  2 --
 Client/src/Pages/Monitors/index.jsx                  |  5 +++--
 7 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 821726cf4..f64a9b5cc 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -148,7 +148,7 @@
   height: 22px;
 }
 .MuiTablePagination-root svg path {
-  stroke: var(--env-var-color-5);
+  stroke: var(--env-var-color-2);
   stroke-width: 1.3;
 }
 .MuiTablePagination-root .MuiSelect-icon {
@@ -175,7 +175,8 @@
   padding: 4px;
   min-width: 100px;
 }
-.pagination-dropdown li {
+.pagination-dropdown li,
+body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-2);
   padding: 4px;
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index b9bbb795e..435ce77bd 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -211,7 +211,7 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-      <Stack direction="row" alignItems="center" justifyContent="space-between">
+      {paginated && <Stack direction="row" alignItems="center" justifyContent="space-between">
         <Typography sx={{ opacity: 0.7 }}>
           Showing {getRange()} of {data.rows.length} monitor(s)
         </Typography>
@@ -254,7 +254,7 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           }}
           sx={{ mt: theme.gap.medium }}
         />
-      </Stack>
+      </Stack>}
     </>
   );
 };
diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 59924b1a1..10cdfc77d 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -58,7 +58,7 @@ aside
   height: 100%;
   width: 100%;
   border-left: solid 1px var(--env-var-color-5);
-  opacity: 0.3;
+  opacity: 0.2;
 }
 aside
   .MuiCollapse-wrapperInner
@@ -75,13 +75,13 @@ aside .MuiList-root .MuiListItemText-root + svg {
 aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
   content: "";
   position: absolute;
-  left: -7px;
+  left: -8px;
   top: 50%;
-  height: 1px;
-  width: 6px;
+  transform: translateY(-50%);
+  height: 3px;
+  width: 3px;
   border-radius: 50%;
-  background-color: var(--env-var-color-5);
-  opacity: 0.3;
+  background-color: #d6d9dd;
 }
 
 aside {
diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 398c10c54..e42d9f20f 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -322,13 +322,13 @@ const ProfilePanel = () => {
       <Divider aria-hidden="true" />
       <form className="delete-profile-form" noValidate spellCheck="false">
         <div className="delete-profile-form__wrapper">
-          <Stack direction="column" gap="15px">
+          <Stack direction="column" gap="8px">
             <Typography component="h1">Delete account</Typography>
             <Typography component="p">
               Note that deleting your account will remove all data from our
               system. This is permanent and non-recoverable.
             </Typography>
-            <Box sx={{ mt: theme.spacing(1) }}>
+            <Box sx={{ mt: theme.spacing(2) }}>
               <Button
                 level="error"
                 label="Delete account"
@@ -399,7 +399,7 @@ const ProfilePanel = () => {
             top: "50%",
             left: "50%",
             transform: "translate(-50%, -50%)",
-            width: 400,
+            width: 450,
             bgcolor: "white",
             border: "solid 1px #f2f2f2",
             borderRadius: `${theme.shape.borderRadius}px`,
diff --git a/Client/src/Pages/Account/index.jsx b/Client/src/Pages/Account/index.jsx
index 700e8c6e8..2fed926b8 100644
--- a/Client/src/Pages/Account/index.jsx
+++ b/Client/src/Pages/Account/index.jsx
@@ -1,14 +1,13 @@
 import PropTypes from "prop-types";
-import { useState } from "react";
+import { useNavigate } from "react-router";
+import { useSelector } from "react-redux";
 import { Box, Tab, useTheme } from "@mui/material";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
-import "./index.css";
 import ProfilePanel from "../../Components/TabPanels/Account/ProfilePanel";
 import PasswordPanel from "../../Components/TabPanels/Account/PasswordPanel";
 import TeamPanel from "../../Components/TabPanels/Account/TeamPanel";
-import { useNavigate } from "react-router";
-import { useSelector } from "react-redux";
+import "./index.css";
 
 /**
  * Account component renders a settings page with tabs for Profile, Password, and Team settings.
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index 7b40f7464..1f46b3517 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -11,8 +11,6 @@
 }
 .monitors p.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
-}
-.monitors p.MuiTypography-root {
   color: var(--env-var-color-5);
 }
 .monitors .MuiStack-root > button:not(.MuiIconButton-root) {
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 0aae47984..7857aaefa 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -376,7 +376,7 @@ const Monitors = () => {
   let loading = monitorState.isLoading && monitorState.monitors.length === 0;
 
   return (
-    <Stack className="monitors" pt={theme.gap.xl} gap={theme.gap.large}>
+    <Stack className="monitors" gap={theme.gap.large}>
       {loading ? (
         <SkeletonLayout />
       ) : (
@@ -395,10 +395,11 @@ const Monitors = () => {
             {monitorState.monitors?.length !== 0 && (
               <Button
                 level="primary"
-                label="Create new monitor"
+                label="Create monitor"
                 onClick={() => {
                   navigate("/monitors/create");
                 }}
+                sx={{ fontWeight: 500 }}
               />
             )}
           </Stack>

From 6c0d8586226cc669a594c753b9b4cbc2534df64c Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:10:03 -0400
Subject: [PATCH 62/72] Created ui slice

---
 Client/src/Features/UI/uiSlice.js | 22 ++++++++++++++++++++++
 Client/src/store.js               |  4 +++-
 2 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 Client/src/Features/UI/uiSlice.js

diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
new file mode 100644
index 000000000..bbee3082b
--- /dev/null
+++ b/Client/src/Features/UI/uiSlice.js
@@ -0,0 +1,22 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  table: {
+    rowsPerPage: 5,
+  },
+  sidebar: {
+    collapsed: false,
+  },
+};
+
+const uiSlice = createSlice({
+  name: "ui",
+  initialState,
+  reducers: {
+    setRowsPerPage: (state, action) => {},
+    setCollapsed: (state, action) => {},
+  },
+});
+
+export default uiSlice.reducer;
+export const { setRowsPerPage, setCollapsed } = uiSlice.actions;
diff --git a/Client/src/store.js b/Client/src/store.js
index 27141202d..a11fdf409 100644
--- a/Client/src/store.js
+++ b/Client/src/store.js
@@ -3,6 +3,7 @@ import { configureStore, combineReducers } from "@reduxjs/toolkit";
 import uptimeMonitorsReducer from "./Features/UptimeMonitors/uptimeMonitorsSlice";
 import pageSpeedMonitorReducer from "./Features/PageSpeedMonitor/pageSpeedMonitorSlice";
 import authReducer from "./Features/Auth/authSlice";
+import uiReducer from "./Features/UI/uiSlice";
 import storage from "redux-persist/lib/storage";
 import { persistReducer, persistStore, createTransform } from "redux-persist";
 
@@ -14,7 +15,7 @@ const authTransform = createTransform(
   // No transformation on rehydration
   null,
   // Only applies to auth
-  { whitelist: ["auth"] }
+  { whitelist: ["auth", "ui"] }
 );
 
 const persistConfig = {
@@ -28,6 +29,7 @@ const rootReducer = combineReducers({
   uptimeMonitors: uptimeMonitorsReducer,
   auth: authReducer,
   pageSpeedMonitors: pageSpeedMonitorReducer,
+  ui: uiReducer,
 });
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);

From c3793485815c2d82038e93dcadfde384aea92d45 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:18:02 -0400
Subject: [PATCH 63/72] Added toggle sidebar action

---
 Client/src/Components/Sidebar/index.jsx |  6 ++++--
 Client/src/Features/UI/uiSlice.js       | 10 +++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 38baa33ec..34221c406 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -19,6 +19,7 @@ import { useLocation, useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { clearAuthState } from "../../Features/Auth/authSlice";
+import { toggleSidebar } from "../../Features/UI/uiSlice";
 import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import Avatar from "../Avatar";
 import LockSvg from "../../assets/icons/lock.svg?react";
@@ -86,8 +87,9 @@ function Sidebar() {
   const location = useLocation();
   const dispatch = useDispatch();
   const authState = useSelector((state) => state.auth);
+  const { sidebar } = useSelector((state) => state.ui);
+  let collapsed = sidebar.collapsed;
   const [open, setOpen] = useState({ Dashboard: false, Account: false });
-  const [collapsed, setCollapsed] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const [popup, setPopup] = useState();
 
@@ -157,7 +159,7 @@ function Sidebar() {
               borderColor: theme.palette.otherColors.graishWhite,
             },
           }}
-          onClick={() => setCollapsed(!collapsed)}
+          onClick={() => dispatch(toggleSidebar())}
         >
           {collapsed ? <ArrowRight /> : <ArrowLeft />}
         </IconButton>
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index bbee3082b..17523977a 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -13,10 +13,14 @@ const uiSlice = createSlice({
   name: "ui",
   initialState,
   reducers: {
-    setRowsPerPage: (state, action) => {},
-    setCollapsed: (state, action) => {},
+    setTablePreferences: (state, action) => {
+      state.table = { ...action };
+    },
+    toggleSidebar: (state) => {
+      state.sidebar.collapsed = !state.sidebar.collapsed;
+    },
   },
 });
 
 export default uiSlice.reducer;
-export const { setRowsPerPage, setCollapsed } = uiSlice.actions;
+export const { setTablePreferences, toggleSidebar } = uiSlice.actions;

From 1419b20591b8845de7deca59e79aa7bf5363ae45 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:27:07 -0400
Subject: [PATCH 64/72] Added action to change rows per page

---
 Client/src/Components/BasicTable/index.jsx | 99 ++++++++++++----------
 Client/src/Features/UI/uiSlice.js          |  6 +-
 2 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index 435ce77bd..af71ee3a5 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -14,6 +14,8 @@ import {
   Typography,
   Stack,
 } from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import { setRowsPerPage } from "../../Features/UI/uiSlice";
 import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
 import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
 import LeftArrow from "../../assets/icons/left-arrow.svg?react";
@@ -142,8 +144,10 @@ const TablePaginationActions = (props) => {
 
 const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
   const theme = useTheme();
+  const dispatch = useDispatch();
+  const { table } = useSelector((state) => state.ui);
+  let rowsPerPage = table.rowsPerPage;
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(rows);
 
   useEffect(() => {
     setPage(0);
@@ -154,7 +158,7 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
   };
 
   const handleChangeRowsPerPage = (event) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
+    dispatch(setRowsPerPage(parseInt(event.target.value, 10)));
     setPage(0);
   };
 
@@ -211,50 +215,59 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
           </TableBody>
         </Table>
       </TableContainer>
-      {paginated && <Stack direction="row" alignItems="center" justifyContent="space-between">
-        <Typography sx={{ opacity: 0.7 }}>
-          Showing {getRange()} of {data.rows.length} monitor(s)
-        </Typography>
-        <TablePagination
-          component="div"
-          count={data.rows.length}
-          page={page}
-          onPageChange={handleChangePage}
-          rowsPerPage={rowsPerPage}
-          rowsPerPageOptions={[5, 10, 15, 25]}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-          ActionsComponent={TablePaginationActions}
-          labelRowsPerPage="Rows per page"
-          labelDisplayedRows={({ page, count }) =>
-            `Page ${page + 1} of ${Math.max(0, Math.ceil(count / rowsPerPage))}`
-          }
-          slotProps={{
-            select: {
-              MenuProps: {
-                keepMounted: true,
-                PaperProps: {
-                  className: "pagination-dropdown",
+      {paginated && (
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Typography sx={{ opacity: 0.7 }}>
+            Showing {getRange()} of {data.rows.length} monitor(s)
+          </Typography>
+          <TablePagination
+            component="div"
+            count={data.rows.length}
+            page={page}
+            onPageChange={handleChangePage}
+            rowsPerPage={rowsPerPage}
+            rowsPerPageOptions={[5, 10, 15, 25]}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            ActionsComponent={TablePaginationActions}
+            labelRowsPerPage="Rows per page"
+            labelDisplayedRows={({ page, count }) =>
+              `Page ${page + 1} of ${Math.max(
+                0,
+                Math.ceil(count / rowsPerPage)
+              )}`
+            }
+            slotProps={{
+              select: {
+                MenuProps: {
+                  keepMounted: true,
+                  PaperProps: {
+                    className: "pagination-dropdown",
+                  },
+                  transformOrigin: { vertical: "bottom", horizontal: "left" },
+                  anchorOrigin: { vertical: "top", horizontal: "left" },
+                  sx: { mt: "-4px" },
                 },
-                transformOrigin: { vertical: "bottom", horizontal: "left" },
-                anchorOrigin: { vertical: "top", horizontal: "left" },
-                sx: { mt: "-4px" },
-              },
-              inputProps: { id: "pagination-dropdown" },
-              IconComponent: SelectorVertical,
-              sx: {
-                ml: theme.gap.small,
-                mr: theme.gap.large,
-                minWidth: theme.gap.xl,
-                textAlign: "left",
-                "&.Mui-focused > div": {
-                  backgroundColor: theme.palette.otherColors.white,
+                inputProps: { id: "pagination-dropdown" },
+                IconComponent: SelectorVertical,
+                sx: {
+                  ml: theme.gap.small,
+                  mr: theme.gap.large,
+                  minWidth: theme.gap.xl,
+                  textAlign: "left",
+                  "&.Mui-focused > div": {
+                    backgroundColor: theme.palette.otherColors.white,
+                  },
                 },
               },
-            },
-          }}
-          sx={{ mt: theme.gap.medium }}
-        />
-      </Stack>}
+            }}
+            sx={{ mt: theme.gap.medium }}
+          />
+        </Stack>
+      )}
     </>
   );
 };
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index 17523977a..a68492d5c 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -13,8 +13,8 @@ const uiSlice = createSlice({
   name: "ui",
   initialState,
   reducers: {
-    setTablePreferences: (state, action) => {
-      state.table = { ...action };
+    setRowsPerPage: (state, action) => {
+      state.table.rowsPerPage = action.payload;
     },
     toggleSidebar: (state) => {
       state.sidebar.collapsed = !state.sidebar.collapsed;
@@ -23,4 +23,4 @@ const uiSlice = createSlice({
 });
 
 export default uiSlice.reducer;
-export const { setTablePreferences, toggleSidebar } = uiSlice.actions;
+export const { setRowsPerPage, toggleSidebar } = uiSlice.actions;

From 689f74bf11425f92aa9cee8b943ac157d7856e24 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 17:34:54 -0400
Subject: [PATCH 65/72] Added docs and fix to tooltip hover

---
 Client/src/Components/BasicTable/index.css | 3 +++
 Client/src/Components/Sidebar/index.jsx    | 4 ++++
 Client/src/Features/UI/uiSlice.js          | 2 ++
 3 files changed, 9 insertions(+)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index f64a9b5cc..604dc412e 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -186,3 +186,6 @@ body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
 .pagination-dropdown li.Mui-selected:hover {
   background-color: #f4f4f4;
 }
+body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
+  font-size: var(--env-var-font-size-small-plus);
+}
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 34221c406..69b44c125 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -202,6 +202,7 @@ function Sidebar() {
                   ],
                 },
               }}
+              disableInteractive
             >
               <ListItemButton
                 className={
@@ -235,6 +236,7 @@ function Sidebar() {
                     ],
                   },
                 }}
+                disableInteractive
               >
                 <ListItemButton
                   className={
@@ -398,6 +400,7 @@ function Sidebar() {
                 ],
               },
             }}
+            disableInteractive
           >
             <ListItemButton
               className={
@@ -452,6 +455,7 @@ function Sidebar() {
                   ],
                 },
               }}
+              disableInteractive
             >
               <IconButton
                 onClick={(event) => openPopup(event, "logout")}
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index a68492d5c..1ae7f5c74 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -1,5 +1,7 @@
 import { createSlice } from "@reduxjs/toolkit";
 
+// Initial state for UI settings.
+// Add more settings as needed (e.g., theme preferences, user settings)
 const initialState = {
   table: {
     rowsPerPage: 5,

From af31c564cd5ae33843648915e706fa2b4a8f6893 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 18:40:03 -0400
Subject: [PATCH 66/72] Added more tables to track

---
 Client/src/Components/BasicTable/index.jsx | 16 ++++++++++++----
 Client/src/Features/UI/uiSlice.js          |  7 +++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index af71ee3a5..8b6cafd91 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -15,6 +15,7 @@ import {
   Stack,
 } from "@mui/material";
 import { useDispatch, useSelector } from "react-redux";
+import { useLocation, useParams } from "react-router-dom";
 import { setRowsPerPage } from "../../Features/UI/uiSlice";
 import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react";
 import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react";
@@ -142,11 +143,13 @@ const TablePaginationActions = (props) => {
  * <BasicTable data={data} rows={rows} paginated={true} />
  */
 
-const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
+const BasicTable = ({ data, paginated, reversed }) => {
   const theme = useTheme();
+  const location = useLocation();
   const dispatch = useDispatch();
-  const { table } = useSelector((state) => state.ui);
-  let rowsPerPage = table.rowsPerPage;
+  const uiState = useSelector((state) => state.ui);
+  let table = location.pathname.split("/").pop();
+  let rowsPerPage = uiState[table].rowsPerPage;
   const [page, setPage] = useState(0);
 
   useEffect(() => {
@@ -158,7 +161,12 @@ const BasicTable = ({ data, paginated, reversed, rows = 5 }) => {
   };
 
   const handleChangeRowsPerPage = (event) => {
-    dispatch(setRowsPerPage(parseInt(event.target.value, 10)));
+    dispatch(
+      setRowsPerPage({
+        value: parseInt(event.target.value, 10),
+        table: table,
+      })
+    );
     setPage(0);
   };
 
diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js
index 1ae7f5c74..ebea20bf1 100644
--- a/Client/src/Features/UI/uiSlice.js
+++ b/Client/src/Features/UI/uiSlice.js
@@ -3,7 +3,10 @@ import { createSlice } from "@reduxjs/toolkit";
 // Initial state for UI settings.
 // Add more settings as needed (e.g., theme preferences, user settings)
 const initialState = {
-  table: {
+  monitors: {
+    rowsPerPage: 5,
+  },
+  team: {
     rowsPerPage: 5,
   },
   sidebar: {
@@ -16,7 +19,7 @@ const uiSlice = createSlice({
   initialState,
   reducers: {
     setRowsPerPage: (state, action) => {
-      state.table.rowsPerPage = action.payload;
+      state[action.payload.table].rowsPerPage = action.payload.value;
     },
     toggleSidebar: (state) => {
       state.sidebar.collapsed = !state.sidebar.collapsed;

From cd0d631a0f668a211d8b82cfc86661839c7b371e Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 18:56:21 -0400
Subject: [PATCH 67/72] Fixed select dropdown styling

---
 Client/src/Components/Inputs/Select/index.css | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/Client/src/Components/Inputs/Select/index.css b/Client/src/Components/Inputs/Select/index.css
index 1952feb43..be1a92503 100644
--- a/Client/src/Components/Inputs/Select/index.css
+++ b/Client/src/Components/Inputs/Select/index.css
@@ -15,7 +15,7 @@
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-5);
 }
-.select-wrapper h3.MuiTypography-root{
+.select-wrapper h3.MuiTypography-root {
   font-weight: 500;
 }
 .MuiInputBase-root:has(> .MuiSelect-select) fieldset {
@@ -24,3 +24,23 @@
 .MuiInputBase-root:not(.Mui-focused):has(> .MuiSelect-select):hover fieldset {
   border-color: var(--env-var-color-29);
 }
+
+.select-dropdown.MuiPaper-root {
+  box-shadow: var(--env-var-shadow-1);
+  border: solid 1px var(--env-var-color-6);
+  border-radius: var(--env-var-radius-1);
+}
+.select-dropdown .MuiList-root {
+  min-width: 100px;
+}
+.select-dropdown li {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
+  padding: 5px 8px;
+  border-radius: var(--env-var-radius-1);
+}
+.select-dropdown li.Mui-selected,
+.select-dropdown li.Mui-selected.Mui-focusVisible,
+.select-dropdown li.Mui-selected:hover {
+  background-color: #f4f4f4;
+}

From abd785cdf08ce3bf29842d9724c9e2a4a7bfe03c Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 19:01:59 -0400
Subject: [PATCH 68/72] Moved ui slice to persist config

---
 Client/src/store.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/store.js b/Client/src/store.js
index a11fdf409..0c9a18b54 100644
--- a/Client/src/store.js
+++ b/Client/src/store.js
@@ -15,13 +15,13 @@ const authTransform = createTransform(
   // No transformation on rehydration
   null,
   // Only applies to auth
-  { whitelist: ["auth", "ui"] }
+  { whitelist: ["auth"] }
 );
 
 const persistConfig = {
   key: "root",
   storage,
-  whitielist: ["auth", "monitors", "pageSpeed"],
+  whitielist: ["auth", "monitors", "pageSpeed", "ui"],
   transforms: [authTransform],
 };
 

From 0ec5e6dcde39dc1cc84edc814e48cd21a74456fe Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 19:34:56 -0400
Subject: [PATCH 69/72] Refactored profile tab

---
 .../TabPanels/Account/ProfilePanel.jsx        | 85 ++++++++++---------
 Client/src/Pages/Account/index.css            | 23 +----
 2 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index e42d9f20f..5dc8b6840 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -217,11 +217,17 @@ const ProfilePanel = () => {
 
   return (
     <TabPanel value="profile">
-      <form className="edit-profile-form" noValidate spellCheck="false">
-        <div className="edit-profile-form__wrapper">
-          <Stack>
+      <Stack
+        component="form"
+        className="edit-profile-form"
+        noValidate
+        spellCheck="false"
+        gap={theme.gap.xl}
+      >
+        <Stack direction="row">
+          <Box flex={0.9}>
             <Typography component="h1">First name</Typography>
-          </Stack>
+          </Box>
           <Field
             id="edit-first-name"
             value={localData.firstName}
@@ -230,11 +236,11 @@ const ProfilePanel = () => {
             onChange={handleChange}
             error={errors[idToName["edit-first-name"]]}
           />
-        </div>
-        <div className="edit-profile-form__wrapper">
-          <Stack>
+        </Stack>
+        <Stack direction="row">
+          <Box flex={0.9}>
             <Typography component="h1">Last name</Typography>
-          </Stack>
+          </Box>
           <Field
             id="edit-last-name"
             placeholder="Enter your last name"
@@ -243,11 +249,11 @@ const ProfilePanel = () => {
             onChange={handleChange}
             error={errors[idToName["edit-last-name"]]}
           />
-        </div>
-        <div className="edit-profile-form__wrapper">
-          <Stack>
+        </Stack>
+        <Stack direction="row">
+          <Stack flex={0.9}>
             <Typography component="h1">Email</Typography>
-            <Typography component="p">
+            <Typography component="p" sx={{ opacity: 0.6 }}>
               This is your current email address — it cannot be changed.
             </Typography>
           </Stack>
@@ -256,20 +262,19 @@ const ProfilePanel = () => {
             value={user.email}
             placeholder="Enter your email"
             autoComplete="email"
-            // TODO - add onChange
             onChange={() => logger.warn("disabled")}
             // error={errors[idToName["edit-email"]]}
             disabled={true}
           />
-        </div>
-        <div className="edit-profile-form__wrapper">
-          <Stack>
+        </Stack>
+        <Stack direction="row">
+          <Stack flex={0.9}>
             <Typography component="h1">Your photo</Typography>
-            <Typography component="p">
+            <Typography component="p" sx={{ opacity: 0.6 }}>
               This photo will be displayed in your profile page.
             </Typography>
           </Stack>
-          <Stack className="row-stack" direction="row" alignItems="center">
+          <Stack direction="row" alignItems="center" flex={1}>
             <Avatar
               src={
                 localData?.deleteProfileImage
@@ -294,7 +299,7 @@ const ProfilePanel = () => {
               }}
             />
           </Stack>
-        </div>
+        </Stack>
         <Divider
           aria-hidden="true"
           className="short-divider"
@@ -313,31 +318,33 @@ const ProfilePanel = () => {
                 Object.keys(errors).length !== 0 && !errors?.picture && true
               }
               sx={{
-                paddingX: "40px",
+                paddingX: theme.gap.large,
               }}
             />
           </Box>
         </Stack>
-      </form>
+      </Stack>
       <Divider aria-hidden="true" />
-      <form className="delete-profile-form" noValidate spellCheck="false">
-        <div className="delete-profile-form__wrapper">
-          <Stack direction="column" gap="8px">
-            <Typography component="h1">Delete account</Typography>
-            <Typography component="p">
-              Note that deleting your account will remove all data from our
-              system. This is permanent and non-recoverable.
-            </Typography>
-            <Box sx={{ mt: theme.spacing(2) }}>
-              <Button
-                level="error"
-                label="Delete account"
-                onClick={() => setIsOpen("delete")}
-              />
-            </Box>
-          </Stack>
-        </div>
-      </form>
+      <Stack
+        component="form"
+        noValidate
+        spellCheck="false"
+        gap={theme.gap.small}
+      >
+        <Box>
+          <Typography component="h1">Delete account</Typography>
+          <Typography component="p" sx={{ opacity: 0.6 }}>
+            Note that deleting your account will remove all data from our
+            system. This is permanent and non-recoverable.
+          </Typography>
+        </Box>
+        <Button
+          level="error"
+          label="Delete account"
+          onClick={() => setIsOpen("delete")}
+          sx={{ width: "fit-content", mt: theme.gap.small }}
+        />
+      </Stack>
       {/* TODO - Update ModalPopup Component with @mui for reusability */}
       <Modal
         aria-labelledby="modal-delete-account"
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index c05cc01e7..28a554afa 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -15,11 +15,6 @@
 .account h1.MuiTypography-root {
   font-weight: 600;
 }
-.account .MuiStack-root:not(.table-stack) {
-  flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-}
 .account .MuiTabPanel-root {
   padding: 0;
   margin-top: 50px;
@@ -34,6 +29,9 @@
 .account button:not(.MuiIconButton-root) {
   height: 34px;
 }
+.account .field {
+  flex: 1;
+}
 .account [class$="-form"] {
   width: inherit;
 }
@@ -44,22 +42,16 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.edit-profile-form__wrapper > .MuiStack-root:not(.row-stack),
 .edit-password-form__wrapper > .MuiStack-root:not(.row-stack) {
   flex-direction: column;
   gap: 8px;
   margin-right: 10px;
 }
-.edit-profile-form__wrapper p.MuiTypography-root,
-.delete-profile-form__wrapper p.MuiTypography-root {
-  opacity: 0.6;
-}
 #modal-delete-account,
 #modal-edit-org-name,
 #modal-invite-member {
   font-size: var(--env-var-font-size-large);
 }
-.edit-profile-form__wrapper:not(:first-of-type),
 .edit-password-form__wrapper:not(:first-of-type),
 .edit-team-form__wrapper:not(:first-of-type) {
   margin-top: var(--env-var-spacing-4);
@@ -70,15 +62,6 @@
   align-items: center;
 }
 
-/* for testing, will remove later */
-@media only screen and (max-width: 1600px) {
-  .edit-profile-form__wrapper .MuiStack-root:not(.row-stack),
-  .edit-password-form__wrapper .MuiStack-root:not(.row-stack),
-  .edit-organization-form__wrapper .MuiStack-root:not(.row-stack) {
-    margin-right: 30px;
-  }
-}
-
 .account .MuiStack-root:has(span.MuiTypography-root.input-error) {
   position: relative;
 }

From 9a1934a77ad50323e013cb8aa11a9eb80fb714fe Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 19:39:55 -0400
Subject: [PATCH 70/72] Refactored password tab

---
 .../TabPanels/Account/PasswordPanel.jsx       | 66 +++++++++----------
 Client/src/Pages/Account/index.css            |  6 --
 2 files changed, 33 insertions(+), 39 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
index 6247a57a9..602816e6c 100644
--- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx
@@ -98,16 +98,17 @@ const PasswordPanel = () => {
 
   return (
     <TabPanel value="password">
-      <form
+      <Stack
+        component="form"
         onSubmit={handleSubmit}
-        className="edit-password-form"
         noValidate
         spellCheck="false"
+        gap={theme.gap.xl}
       >
-        <div className="edit-password-form__wrapper">
-          <Stack>
+        <Stack direction="row">
+          <Box flex={0.9}>
             <Typography component="h1">Current password</Typography>
-          </Stack>
+          </Box>
           <Field
             type="password"
             id="edit-current-password"
@@ -117,11 +118,11 @@ const PasswordPanel = () => {
             onChange={handleChange}
             error={errors[idToName["edit-current-password"]]}
           />
-        </div>
-        <div className="edit-password-form__wrapper">
-          <Stack>
+        </Stack>
+        <Stack direction="row">
+          <Box flex={0.9}>
             <Typography component="h1">New password</Typography>
-          </Stack>
+          </Box>
           <Field
             type="password"
             id="edit-new-password"
@@ -131,11 +132,11 @@ const PasswordPanel = () => {
             onChange={handleChange}
             error={errors[idToName["edit-new-password"]]}
           />
-        </div>
-        <div className="edit-password-form__wrapper">
-          <Stack>
+        </Stack>
+        <Stack direction="row">
+          <Box flex={0.9}>
             <Typography component="h1">Confirm new password</Typography>
-          </Stack>
+          </Box>
           <Field
             type="password"
             id="edit-confirm-password"
@@ -145,33 +146,32 @@ const PasswordPanel = () => {
             onChange={handleChange}
             error={errors[idToName["edit-confirm-password"]]}
           />
-        </div>
-        <div className="edit-password-form__wrapper">
-          <Stack></Stack>
+        </Stack>
+        <Stack direction="row">
+          <Box flex={0.9}></Box>
           <Box sx={{ flex: 1 }}>
             <Alert
               variant="warning"
               body="New password must contain at least 8 characters and must have at least one uppercase letter, one number and one symbol."
             />
           </Box>
-        </div>
-        <Divider aria-hidden="true" width="0" />
-        <Stack direction="row" justifyContent="flex-end">
-          <Box width="fit-content">
-            <ButtonSpinner
-              level="primary"
-              label="Save"
-              onClick={handleSubmit}
-              isLoading={isLoading}
-              loadingText="Saving..."
-              disabled={Object.keys(errors).length !== 0 && true}
-              sx={{
-                paddingX: theme.gap.xl,
-              }}
-            />
-          </Box>
         </Stack>
-      </form>
+        <Stack direction="row" justifyContent="flex-end">
+          <ButtonSpinner
+            level="primary"
+            label="Save"
+            onClick={handleSubmit}
+            isLoading={isLoading}
+            loadingText="Saving..."
+            disabled={Object.keys(errors).length !== 0 && true}
+            sx={{
+              paddingX: theme.gap.large,
+              width: "fit-content",
+              mt: theme.gap.xl,
+            }}
+          />
+        </Stack>
+      </Stack>
     </TabPanel>
   );
 };
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index 28a554afa..8421f56ec 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -42,17 +42,11 @@
   justify-content: space-between;
   align-items: flex-start;
 }
-.edit-password-form__wrapper > .MuiStack-root:not(.row-stack) {
-  flex-direction: column;
-  gap: 8px;
-  margin-right: 10px;
-}
 #modal-delete-account,
 #modal-edit-org-name,
 #modal-invite-member {
   font-size: var(--env-var-font-size-large);
 }
-.edit-password-form__wrapper:not(:first-of-type),
 .edit-team-form__wrapper:not(:first-of-type) {
   margin-top: var(--env-var-spacing-4);
 }

From 91df54adc47db711af4bd75900fc20d0923b72d3 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 19:46:22 -0400
Subject: [PATCH 71/72] Refactored team tab

---
 .../TabPanels/Account/ProfilePanel.jsx        |  3 +-
 .../TabPanels/Account/TeamPanel.jsx           | 41 ++++---------------
 Client/src/Pages/Account/index.css            |  4 +-
 3 files changed, 9 insertions(+), 39 deletions(-)

diff --git a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
index 5dc8b6840..7d18b48c5 100644
--- a/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
+++ b/Client/src/Components/TabPanels/Account/ProfilePanel.jsx
@@ -302,7 +302,6 @@ const ProfilePanel = () => {
         </Stack>
         <Divider
           aria-hidden="true"
-          className="short-divider"
           width="0"
           sx={{ marginY: theme.spacing(1) }}
         />
@@ -324,7 +323,7 @@ const ProfilePanel = () => {
           </Box>
         </Stack>
       </Stack>
-      <Divider aria-hidden="true" />
+      <Divider aria-hidden="true" sx={{ marginY: theme.spacing(6) }} />
       <Stack
         component="form"
         noValidate
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 95df3e294..a6c378a60 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -131,9 +131,6 @@ const TeamPanel = () => {
   };
   const handleRename = () => {};
 
-  //TODO - implement save team function
-  const handleSaveTeam = () => {};
-
   // INVITE MEMBER
   const [isOpen, setIsOpen] = useState(false);
 
@@ -200,12 +197,11 @@ const TeamPanel = () => {
 
   return (
     <TabPanel value="team">
-      <form className="edit-organization-form">
+      <Stack component="form">
         <Box sx={{ alignSelf: "flex-start" }}>
           <Typography component="h1">Organization name</Typography>
         </Box>
         <Stack
-          className="row-stack"
           direction="row"
           justifyContent="flex-end"
           alignItems="center"
@@ -245,21 +241,13 @@ const TeamPanel = () => {
             }}
           />
         </Stack>
-      </form>
-      <Divider
-        aria-hidden="true"
-        className="short-divider"
-        sx={{ marginY: theme.spacing(4) }}
-      />
-      <form
-        className="edit-team-form"
+      </Stack>
+      <Divider aria-hidden="true" sx={{ marginY: theme.spacing(4) }} />
+      <Stack
+        component="form"
         noValidate
         spellCheck="false"
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: theme.gap.large,
-        }}
+        gap={theme.gap.large}
       >
         <Typography component="h1">Team members</Typography>
         <Stack direction="row" justifyContent="space-between">
@@ -307,22 +295,7 @@ const TeamPanel = () => {
           />
         </Stack>
         <BasicTable data={tableData} paginated={false} reversed={true} />
-        <Stack direction="row" justifyContent="flex-end">
-          <Box width="fit-content">
-            <ButtonSpinner
-              level="primary"
-              label="Save"
-              onClick={handleSaveTeam}
-              isLoading={false}
-              loadingText="Saving..."
-              disabled={true}
-              sx={{
-                paddingX: "40px",
-              }}
-            />
-          </Box>
-        </Stack>
-      </form>
+      </Stack>
       <Modal
         aria-labelledby="modal-invite-member"
         aria-describedby="invite-member-to-team"
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index 8421f56ec..9f5919ed4 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -19,9 +19,7 @@
   padding: 0;
   margin-top: 50px;
 }
-.account .MuiDivider-root:not(.short-divider) {
-  margin: 50px 0;
-}
+
 .account .MuiDivider-root,
 .account .MuiButtonGroup-root button {
   border-color: var(--env-var-color-16);

From c53aa54b30635baec0505d2c61a96903fbfaf3d9 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Tue, 20 Aug 2024 19:49:04 -0400
Subject: [PATCH 72/72] Removed redundant css

---
 Client/src/Pages/Account/index.css | 40 +++---------------------------
 1 file changed, 4 insertions(+), 36 deletions(-)

diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index 9f5919ed4..594b7b839 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -19,7 +19,6 @@
   padding: 0;
   margin-top: 50px;
 }
-
 .account .MuiDivider-root,
 .account .MuiButtonGroup-root button {
   border-color: var(--env-var-color-16);
@@ -30,29 +29,11 @@
 .account .field {
   flex: 1;
 }
-.account [class$="-form"] {
-  width: inherit;
-}
-.account [class$="__wrapper"],
-.account [class$="__wrapper compact"] {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-}
 #modal-delete-account,
 #modal-edit-org-name,
 #modal-invite-member {
   font-size: var(--env-var-font-size-large);
 }
-.edit-team-form__wrapper:not(:first-of-type) {
-  margin-top: var(--env-var-spacing-4);
-}
-.edit-team-form__wrapper.compact {
-  margin-top: var(--env-var-spacing-3);
-  justify-content: flex-start;
-  align-items: center;
-}
 
 .account .MuiStack-root:has(span.MuiTypography-root.input-error) {
   position: relative;
@@ -62,22 +43,9 @@
   top: 100%;
 }
 
-.edit-profile-form__wrapper .MuiFormControl-root,
-.edit-password-form__wrapper .MuiFormControl-root {
-  width: 100%;
+.account .MuiTable-root .MuiTableBody-root .MuiTableCell-root {
+  color: var(--env-var-color-25);
 }
-.edit-profile-form__wrapper .MuiStack-root:has(.MuiFormControl-root),
-.edit-password-form__wrapper .MuiStack-root:has(.MuiFormControl-root) {
-  margin: 0;
-}
-
-.edit-organization-form {
-  display: flex;
-  align-items: center;
-}
-.edit-team-form .MuiTableCell-root {
-  color: var(--env-var-color-25) !important;
-}
-.edit-team-form .MuiTableBody-root .MuiTableCell-root {
-  padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2) !important;
+.account .MuiTableBody-root .MuiTableCell-root {
+  padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
 }