From a417662f68680b5fd60ede8156e6b470a0544bc6 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Mon, 27 May 2024 17:26:12 -0700
Subject: [PATCH 1/2] Implemented the dashboard settings icon with its dropdown
 menu.

---
 .../DashboardSettingsIcon/index.css           |  0
 .../DashboardSettingsIcon/index.jsx           | 78 +++++++++++++++++++
 Client/src/Layouts/HomeLayout/index.jsx       |  2 +
 3 files changed, 80 insertions(+)
 create mode 100644 Client/src/Components/DashboardSettingsIcon/index.css
 create mode 100644 Client/src/Components/DashboardSettingsIcon/index.jsx

diff --git a/Client/src/Components/DashboardSettingsIcon/index.css b/Client/src/Components/DashboardSettingsIcon/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/DashboardSettingsIcon/index.jsx b/Client/src/Components/DashboardSettingsIcon/index.jsx
new file mode 100644
index 000000000..e1f1d59da
--- /dev/null
+++ b/Client/src/Components/DashboardSettingsIcon/index.jsx
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import Tooltip from '@mui/material/Tooltip';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import SvgIcon from '@mui/material/SvgIcon';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { useTheme } from '@mui/material/styles';
+
+const settings = ['Open Site', 'Detailed View', 'Incidents', 'Configure', 'Remove'];
+
+/**
+ * DashboardSettings component
+ *
+ * A component that provides a settings menu accessible from an icon.
+ *
+ * @component
+ * @example
+ * return (
+ *   <DashboardSettings />
+ * )
+ */
+function DashboardSettings() {
+  const theme = useTheme();
+  const [anchorElUser, setAnchorElUser] = useState(null);
+
+  /**
+   * Handles opening the user menu.
+   *
+   * @param {React.MouseEvent<HTMLElement>} event - The event triggered by clicking the user menu button.
+   */
+  const handleOpenUserMenu = (event) => {
+    setAnchorElUser(event.currentTarget);
+  };
+
+  /**
+   * Handles closing the user menu.
+   */
+  const handleCloseUserMenu = () => {
+    setAnchorElUser(null);
+  };
+
+  return (
+    <Box sx={{ flexGrow: 0 }}>
+      <Tooltip title="Open settings">
+        <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+          <SvgIcon component={SettingsIcon} />
+        </IconButton>
+      </Tooltip>
+      <Menu
+        sx={{ mt: theme.spacing(5.5) }}
+        id="menu-appbar"
+        anchorEl={anchorElUser}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        keepMounted
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        open={Boolean(anchorElUser)}
+        onClose={handleCloseUserMenu}
+      >
+        {settings.map((setting) => (
+          <MenuItem key={setting} onClick={handleCloseUserMenu}>
+            <Typography textAlign="center">{setting}</Typography>
+          </MenuItem>
+        ))}
+      </Menu>
+    </Box>
+  );
+}
+
+export default DashboardSettings;
diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx
index bb37d4768..e75863b3b 100644
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -3,6 +3,7 @@ import { Outlet } from 'react-router'
 import Home from '../../Pages/Home'
 import './index.css'
 import ChartsOverviewDemo from '../../Components/DashboardProgressBars'
+import DashboardSettings from '../../Components/DashboardSettings'
 
 
 const HomeLayout = () => {
@@ -12,6 +13,7 @@ const HomeLayout = () => {
             <Home />
             <Outlet />
             <ChartsOverviewDemo />
+            <DashboardSettings />
         </>
     )
 }

From d24b5d8ada832342116bdb95f1477354a0697675 Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Mon, 27 May 2024 23:11:23 -0700
Subject: [PATCH 2/2] Addressed comments and fixed the issue with the import
 statement.

---
 Client/src/Layouts/HomeLayout/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx
index e75863b3b..ed1d06fe6 100644
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -3,7 +3,7 @@ import { Outlet } from 'react-router'
 import Home from '../../Pages/Home'
 import './index.css'
 import ChartsOverviewDemo from '../../Components/DashboardProgressBars'
-import DashboardSettings from '../../Components/DashboardSettings'
+import DashboardSettings from '../../Components/DashboardSettingsIcon'
 
 
 const HomeLayout = () => {