Added configure monitor route

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} />}

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="">

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;