From 219dd5cca7c46cdd3c075c9214b19f07b3c0bbad Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Fri, 19 Jul 2024 14:35:11 -0400
Subject: [PATCH] Added configure monitor route

---
 Client/src/App.jsx                            |  5 +++
 .../TabPanels/Account/TeamPanel.jsx           |  2 +
 Client/src/Pages/Monitors/Configure/index.css |  0
 Client/src/Pages/Monitors/Configure/index.jsx | 42 +++++++++++++++++++
 4 files changed, 49 insertions(+)
 create mode 100644 Client/src/Pages/Monitors/Configure/index.css
 create mode 100644 Client/src/Pages/Monitors/Configure/index.jsx

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index a10228795..1443be30c 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -21,6 +21,7 @@ import ProtectedRoute from "./Components/ProtectedRoute";
 import Details from "./Pages/Monitors/Details";
 import Maintenance from "./Pages/Maintenance";
 import withAdminCheck from "./HOC/withAdminCheck";
+import Configure from "./Pages/Monitors/Configure";
 
 function App() {
   const AdminCheckedRegister = withAdminCheck(Register);
@@ -45,6 +46,10 @@ function App() {
             path="/monitors/:monitorId/"
             element={<ProtectedRoute Component={Details} />}
           />
+          <Route
+            path="/monitors/configure/:monitorId/"
+            element={<ProtectedRoute Component={Configure} />}
+          />
           <Route
             path="incidents"
             element={<ProtectedRoute Component={Incidents} />}
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index 5ef356f9c..9312c3228 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -23,6 +23,7 @@ import { useState } from "react";
 import EditSvg from "../../../assets/icons/edit.svg?react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 /**
  * TeamPanel component manages the organization and team members,
@@ -504,6 +505,7 @@ const TeamPanel = () => {
                 style: { padding: 0 },
               },
             }}
+            IconComponent={KeyboardArrowDownIcon}
             sx={{ mt: theme.gap.xs }}
           >
             <MenuItem disableRipple id="role-default" value="">
diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
new file mode 100644
index 000000000..901a97122
--- /dev/null
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -0,0 +1,42 @@
+import { useNavigate } from "react-router";
+import Button from "../../../Components/Button";
+import WestRoundedIcon from "@mui/icons-material/WestRounded";
+
+import "./index.css";
+import { useTheme } from "@emotion/react";
+
+/**
+ * Configure component displays monitor configurations and allows for editing actions.
+ * @component
+ */
+const Configure = () => {
+  const navigate = useNavigate();
+  const theme = useTheme();
+
+  return (
+    <div
+      className="configure-monitor"
+      style={{
+        maxWidth: "1200px",
+        padding: `${theme.content.pY} ${theme.content.pX}`,
+      }}
+    >
+      <Button
+        level="tertiary"
+        label="Back"
+        img={<WestRoundedIcon />}
+        onClick={() => navigate(-1)}
+        sx={{
+          backgroundColor: "#f4f4f4",
+          mb: theme.gap.medium,
+          px: theme.gap.ml,
+          "& svg.MuiSvgIcon-root": {
+            pr: theme.gap.small,
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default Configure;