Merge branch 'bluewave-labs:master' into forgot-password

Client/src/Components/DashboardProgressBars/index.jsx

@@ -0,0 +1,19 @@
+import { BarChart } from '@mui/x-charts/BarChart';
+
+const ChartsOverviewDemo = () => {
+  return (
+    <BarChart
+      series={[
+        { data: [35, 44, 24, 34] },
+        { data: [51, 6, 49, 30] },
+        { data: [15, 25, 30, 50] },
+        { data: [60, 50, 15, 25] },
+      ]}
+      height={290}
+      xAxis={[{ data: ['Q1', 'Q2', 'Q3', 'Q4'], scaleType: 'band' }]}
+      margin={{ top: 10, bottom: 30, left: 40, right: 10 }}
+    />
+  );
+};
+
+export default ChartsOverviewDemo;

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;

Client/src/Layouts/HomeLayout/index.jsx

@@ -1,8 +1,10 @@
-import React from 'react'
 import NavBar from '../../Components/NavBar'
 import { Outlet } from 'react-router'
 import Home from '../../Pages/Home'
 import './index.css'
+import ChartsOverviewDemo from '../../Components/DashboardProgressBars'
+import DashboardSettings from '../../Components/DashboardSettingsIcon'
+
 
 const HomeLayout = () => {
     return (
@@ -10,6 +12,8 @@ const HomeLayout = () => {
             <NavBar />
             <Home />
             <Outlet />
+            <ChartsOverviewDemo />
+            <DashboardSettings />
         </>
     )
 }