Merge pull request #657 from bluewave-labs/fix/sidebar-layout

Sidebar layout
2026-01-20 16:49:46 -06:00 · 2024-08-16 14:04:51 -07:00
parent 9b4c72e7e7 5c71531fb0
commit eeb7812ca5
14 changed files with 290 additions and 189 deletions
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -1,68 +1,79 @@
-aside .MuiStack-root {
-  cursor: pointer;
-}
-aside > svg {
-  margin: var(--env-var-spacing-2) var(--env-var-spacing-1);
-}
 aside .selected-path,
-aside .MuiStack-root:hover {
+aside .MuiListItemButton-root:hover {
  background-color: var(--env-var-color-13);
 }
-aside .MuiStack-root svg {
+aside .MuiList-root svg {
  width: 20px;
  height: 20px;
-  opacity: 0.8;
+  opacity: 0.9;
+}
+aside .MuiList-root svg path {
+  stroke: var(--env-var-color-2);
 }
 aside span.MuiTypography-root {
  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-5);
  line-height: 1;
 }
-aside .MuiStack-root:nth-last-child(3) {
-  margin-top: auto;
+aside .MuiListSubheader-root {
+  font-size: var(--env-var-font-size-small);
+  font-weight: 500;
+  line-height: 1.5;
+  text-transform: uppercase;
+  margin-bottom: 2px;
+  opacity: 0.6;
 }
-aside .MuiStack-root:last-child,
-aside .MuiStack-root:nth-last-child(3) {
+aside span.MuiTypography-root,
+aside p.MuiTypography-root,
+aside .MuiListSubheader-root {
+  color: var(--env-var-color-5);
+}
+aside p.MuiTypography-root {
+  font-size: var(--env-var-font-size-small);
+  opacity: 0.8;
+}
+aside .MuiListItemButton-root:not(.selected-path) > * {
+  opacity: 0.9;
+}
+aside .selected-path > * {
+  opacity: 1;
+}
+aside .selected-path span.MuiTypography-root {
+  font-weight: 600;
+}
+aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root {
  position: relative;
 }
-aside .MuiStack-root:last-child:before {
+aside .MuiDivider-root {
+  border-color: var(--env-var-color-6);
+}
+aside
+  .MuiCollapse-wrapperInner
+  .MuiList-root
+  > .MuiListItemButton-root::before {
  content: "";
  position: absolute;
-  top: -10px;
-  left: 0;
+  left: -8px;
+  top: 0;
+  height: 100%;
  width: 100%;
-  border-top: solid 1px var(--env-var-color-6);
+  border-left: solid 1px var(--env-var-color-5);
+  opacity: 0.3;
 }
-aside .MuiStack-root:last-child {
-  margin-top: 15px;
+aside
+  .MuiCollapse-wrapperInner
+  .MuiList-root
+  > .MuiListItemButton-root:last-child::before {
+  height: 50%;
 }

-.sidebar-menu {
-  margin-top: -20px;
-}
-.sidebar-menu .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-menu .MuiList-root {
-  min-width: 100px;
-  width: 150px;
-  padding-bottom: 0;
-}
-.sidebar-menu li.MuiButtonBase-root:last-child {
-  border-top: solid 1px var(--env-var-color-6);
-  padding: 12px 16px;
-}
-.sidebar-menu li.MuiButtonBase-root {
-  min-height: fit-content;
-}
-.sidebar-menu .MuiList-root svg {
-  width: 16px;
-  height: 16px;
-}
-.sidebar-menu span {
-  font-size: var(--env-var-font-size-medium);
-  color: var(--env-var-color-2);
+aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
+  content: "";
+  position: absolute;
+  left: -8px;
+  top: 50%;
+  height: 1px;
+  width: 7px;
+  border-radius: 50%;
+  background-color: var(--env-var-color-5);
+  opacity: 0.3;
 }
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -1,12 +1,23 @@
-import { useState } from "react";
-import { Menu, MenuItem, Stack, Tooltip, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  Collapse,
+  Divider,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/material";
 import { useLocation, useNavigate } from "react-router";
 import { useTheme } from "@emotion/react";
 import { useDispatch, useSelector } from "react-redux";
 import { clearAuthState } from "../../Features/Auth/authSlice";
 import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
-import { createToast } from "../../Utils/toastUtils";
-import axiosInstance from "../../Utils/axiosConfig";
 import Avatar from "../Avatar";
 import LockSvg from "../../assets/icons/lock.svg?react";
 import UserSvg from "../../assets/icons/user.svg?react";
@@ -14,6 +25,8 @@ 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 Support from "../../assets/icons/support.svg?react";
+import Dashboard from "../../assets/icons/dashboard.svg?react";
+import Account from "../../assets/icons/user-edit.svg?react";
 import StatusPages from "../../assets/icons/status-pages.svg?react";
 import Maintenance from "../../assets/icons/maintenance.svg?react";
 import Monitors from "../../assets/icons/monitors.svg?react";
@@ -21,28 +34,40 @@ import Incidents from "../../assets/icons/incidents.svg?react";
 import Integrations from "../../assets/icons/integrations.svg?react";
 import PageSpeed from "../../assets/icons/page-speed.svg?react";
 import Settings from "../../assets/icons/settings.svg?react";
-import Arrow from "../../assets/icons/down-arrow.svg?react";
+import ArrowDown from "../../assets/icons/down-arrow.svg?react";
+import ArrowUp from "../../assets/icons/up-arrow.svg?react";

 import "./index.css";

 const menu = [
-  { name: "Monitors", path: "monitors", icon: <Monitors /> },
+  {
+    name: "Dashboard",
+    icon: <Dashboard />,
+    nested: [
+      { name: "Monitors", path: "monitors", icon: <Monitors /> },
+      { name: "Pagespeed", path: "pagespeed", icon: <PageSpeed /> },
+    ],
+  },
  { name: "Incidents", path: "incidents", icon: <Incidents /> },
  { name: "Status pages", path: "status", icon: <StatusPages /> },
  { name: "Maintenance", path: "maintenance", icon: <Maintenance /> },
-  { name: "Page speed", path: "pagespeed", icon: <PageSpeed /> },
  { name: "Integrations", path: "integrations", icon: <Integrations /> },
+  {
+    name: "Account",
+    icon: <Account />,
+    nested: [
+      { name: "Profile", path: "account/profile", icon: <UserSvg /> },
+      { name: "Password", path: "account/password", icon: <LockSvg /> },
+      { name: "Team", path: "account/team", icon: <TeamSvg /> },
+    ],
+  },
+];
+
+const other = [
  { name: "Support", path: "support", icon: <Support /> },
  { name: "Settings", path: "settings", icon: <Settings /> },
 ];

-const icons = {
-  Profile: <UserSvg />,
-  Team: <TeamSvg />,
-  Password: <LockSvg />,
-  Logout: <LogoutSvg />,
-};
-
 /**
 * @component
 * Sidebar component serves as a sidebar containing a menu.
@@ -55,23 +80,8 @@ function Sidebar() {
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useDispatch();
-  const [anchorElUser, setAnchorElUser] = useState(null);
  const authState = useSelector((state) => state.auth);
-
-  // Initialize settings and update based on user role
-  let settings = ["Profile", "Password", "Team", "Logout"];
-  if (authState.user?.role && !authState.user.role.includes("admin")) {
-    settings = ["Profile", "Password", "Logout"];
-  }
-
-  /**
-   * 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);
-  };
+  const [open, setOpen] = useState({ Dashboard: false, Account: false });

  /**
   * Handles logging out the user
@@ -84,113 +94,180 @@ function Sidebar() {
    navigate("/login");
  };

-  /**
-   * Handles closing the user menu.
-   */
-  const handleCloseUserMenu = (setting) => {
-    setAnchorElUser(null);
-    switch (setting) {
-      case "Profile":
-        navigate("/account/profile");
-        break;
-      case "Team":
-        navigate("/account/team");
-        break;
-      case "Password":
-        navigate("/account/password");
-        break;
-      case "Logout":
-        logout();
-        break;
-      default:
-        break;
-    }
-  };
+  useEffect(() => {
+    if (
+      location.pathname.includes("monitors") ||
+      location.pathname.includes("pagespeed")
+    )
+      setOpen((prev) => ({ ...prev, Dashboard: true }));
+    else if (location.pathname.includes("/account"))
+      setOpen((prev) => ({ ...prev, Account: true }));
+  }, []);

  return (
-    <Stack component="aside" gap={theme.gap.xs}>
-      <BWULogo alt="BlueWave Uptime Logo" />
-      {menu.map((item) => (
-        <Stack
-          className={
-            location.pathname.includes(item.path) ? "selected-path" : ""
-          }
-          key={item.path}
-          direction="row"
-          alignItems="center"
-          py={theme.gap.small}
-          px={theme.gap.medium}
-          gap={theme.gap.small}
-          borderRadius={`${theme.shape.borderRadius}px`}
-          onClick={() =>
-            item.path === "support"
-              ? window.open(
-                  "https://github.com/bluewave-labs/bluewave-uptime",
-                  "_blank",
-                  "noreferrer"
-                )
-              : navigate(`/${item.path}`)
-          }
-        >
-          {item.icon}
-          <Typography component="span">{item.name}</Typography>
-        </Stack>
-      ))}
-      <Tooltip
-        title="Open settings"
-        slotProps={{
-          popper: {
-            modifiers: [
-              {
-                name: "offset",
-                options: {
-                  offset: [0, -14],
-                },
-              },
-            ],
-          },
-        }}
+    <Stack component="aside" gap={theme.gap.medium}>
+      <Box py={theme.gap.large} pl={theme.gap.lgplus}>
+        <BWULogo alt="BlueWave Uptime Logo" />
+      </Box>
+      {/* menu */}
+      <List
+        component="nav"
+        aria-labelledby="nested-menu-subheader"
+        disablePadding
+        subheader={
+          <ListSubheader
+            component="div"
+            id="nested-menu-subheader"
+            sx={{ pt: theme.gap.small }}
+          >
+            Menu
+          </ListSubheader>
+        }
      >
-        <Stack
-          direction="row"
-          alignItems="center"
-          py={theme.gap.small}
-          px={theme.gap.medium}
-          gap={theme.gap.xs}
-          borderRadius={`${theme.shape.borderRadius}px`}
-          onClick={handleOpenUserMenu}
-        >
-          <Avatar small={true} />
-          <Typography component="span" ml={theme.gap.xs}>
+        {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`,
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+              <ListItemText>{item.name}</ListItemText>
+            </ListItemButton>
+          ) : (
+            <React.Fragment key={item.name}>
+              <ListItemButton
+                onClick={() =>
+                  setOpen((prev) => ({
+                    ...prev,
+                    [`${item.name}`]: !prev[`${item.name}`],
+                  }))
+                }
+                sx={{
+                  gap: theme.gap.medium,
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+                <ListItemText>{item.name}</ListItemText>
+                {open[`${item.name}`] ? <ArrowUp /> : <ArrowDown />}
+              </ListItemButton>
+              <Collapse in={open[`${item.name}`]} timeout="auto">
+                <List
+                  component="div"
+                  disablePadding
+                  sx={{ pl: theme.gap.lgplus }}
+                >
+                  {item.nested.map((child) => {
+                    if (
+                      child.name === "Team" &&
+                      authState.user?.role &&
+                      !authState.user.role.includes("admin")
+                    ) {
+                      return null;
+                    }
+
+                    return (
+                      <ListItemButton
+                        className={
+                          location.pathname.includes(child.path)
+                            ? "selected-path"
+                            : ""
+                        }
+                        key={child.path}
+                        onClick={() => navigate(`/${child.path}`)}
+                        sx={{
+                          gap: theme.gap.medium,
+                          borderRadius: `${theme.shape.borderRadius}px`,
+                          pl: theme.gap.small,
+                        }}
+                      >
+                        <ListItemIcon sx={{ minWidth: 0 }}>
+                          {child.icon}
+                        </ListItemIcon>
+                        <ListItemText>{child.name}</ListItemText>
+                      </ListItemButton>
+                    );
+                  })}
+                </List>
+              </Collapse>
+            </React.Fragment>
+          )
+        )}
+      </List>
+      <Divider sx={{ my: theme.gap.small }} />
+      {/* other */}
+      <List
+        component="nav"
+        aria-labelledby="nested-other-subheader"
+        subheader={
+          <ListSubheader
+            component="div"
+            id="nested-other-subheader"
+            sx={{ pt: theme.gap.small }}
+          >
+            Other
+          </ListSubheader>
+        }
+      >
+        {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`,
+            }}
+          >
+            <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+            <ListItemText>{item.name}</ListItemText>
+          </ListItemButton>
+        ))}
+      </List>
+      <Divider sx={{ mt: "auto" }} />
+      <Stack
+        direction="row"
+        alignItems="center"
+        py={theme.gap.small}
+        px={theme.gap.medium}
+        gap={theme.gap.xs}
+        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>
-          <Arrow style={{ marginTop: "2px", marginLeft: "auto" }} />
-        </Stack>
-      </Tooltip>
-      <Menu
-        className="sidebar-menu"
-        anchorEl={anchorElUser}
-        anchorOrigin={{
-          vertical: "top",
-          horizontal: "center",
-        }}
-        keepMounted
-        open={Boolean(anchorElUser)}
-        onClose={handleCloseUserMenu}
-        autoFocus={false}
-        sx={{
-          ml: theme.gap.xxl,
-        }}
-      >
-        {settings.map((setting) => (
-          <MenuItem key={setting} onClick={() => handleCloseUserMenu(setting)}>
-            {icons[setting]}
-            <Typography component="span" ml={theme.gap.small}>
-              {setting}
-            </Typography>
-          </MenuItem>
-        ))}
-      </Menu>
+          <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>
  );
 }
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -25,7 +25,11 @@
  border-radius: var(--env-var-radius-1);
  background-color: var(--env-var-color-8);

-  padding: var(--env-var-spacing-1) var(--env-var-spacing-1-plus);
+  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 {
--- a/Client/src/assets/icons/dashboard.svg
+++ b/Client/src/assets/icons/dashboard.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="M8 17H16M11.0177 2.764L4.23539 8.03912C3.78202 8.39175 3.55534 8.56806 3.39203 8.78886C3.24737 8.98444 3.1396 9.20478 3.07403 9.43905C3 9.70352 3 9.9907 3 10.5651V17.8C3 18.9201 3 19.4801 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4801 21 18.9201 21 17.8V10.5651C21 9.9907 21 9.70352 20.926 9.43905C20.8604 9.20478 20.7526 8.98444 20.608 8.78886C20.4447 8.56806 20.218 8.39175 19.7646 8.03913L12.9823 2.764C12.631 2.49075 12.4553 2.35412 12.2613 2.3016C12.0902 2.25526 11.9098 2.25526 11.7387 2.3016C11.5447 2.35412 11.369 2.49075 11.0177 2.764Z" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/Client/src/assets/icons/down-arrow.svg
+++ b/Client/src/assets/icons/down-arrow.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 9L12 15L18 9" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 9L12 15L18 9" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/Client/src/assets/icons/incidents.svg
+++ b/Client/src/assets/icons/incidents.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 8V12M12 16H12.01M2 8.52274V15.4773C2 15.7218 2 15.8441 2.02763 15.9592C2.05213 16.0613 2.09253 16.1588 2.14736 16.2483C2.2092 16.3492 2.29568 16.4357 2.46863 16.6086L7.39137 21.5314C7.56432 21.7043 7.6508 21.7908 7.75172 21.8526C7.84119 21.9075 7.93873 21.9479 8.04077 21.9724C8.15586 22 8.27815 22 8.52274 22H15.4773C15.7218 22 15.8441 22 15.9592 21.9724C16.0613 21.9479 16.1588 21.9075 16.2483 21.8526C16.3492 21.7908 16.4357 21.7043 16.6086 21.5314L21.5314 16.6086C21.7043 16.4357 21.7908 16.3492 21.8526 16.2483C21.9075 16.1588 21.9479 16.0613 21.9724 15.9592C22 15.8441 22 15.7218 22 15.4773V8.52274C22 8.27815 22 8.15586 21.9724 8.04077C21.9479 7.93873 21.9075 7.84119 21.8526 7.75172C21.7908 7.6508 21.7043 7.56432 21.5314 7.39137L16.6086 2.46863C16.4357 2.29568 16.3492 2.2092 16.2483 2.14736C16.1588 2.09253 16.0613 2.05213 15.9592 2.02763C15.8441 2 15.7218 2 15.4773 2H8.52274C8.27815 2 8.15586 2 8.04077 2.02763C7.93873 2.05213 7.84119 2.09253 7.75172 2.14736C7.6508 2.2092 7.56432 2.29568 7.39137 2.46863L2.46863 7.39137C2.29568 7.56432 2.2092 7.6508 2.14736 7.75172C2.09253 7.84119 2.05213 7.93873 2.02763 8.04077C2 8.15586 2 8.27815 2 8.52274Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 8V12M12 16H12.01M2 8.52274V15.4773C2 15.7218 2 15.8441 2.02763 15.9592C2.05213 16.0613 2.09253 16.1588 2.14736 16.2483C2.2092 16.3492 2.29568 16.4357 2.46863 16.6086L7.39137 21.5314C7.56432 21.7043 7.6508 21.7908 7.75172 21.8526C7.84119 21.9075 7.93873 21.9479 8.04077 21.9724C8.15586 22 8.27815 22 8.52274 22H15.4773C15.7218 22 15.8441 22 15.9592 21.9724C16.0613 21.9479 16.1588 21.9075 16.2483 21.8526C16.3492 21.7908 16.4357 21.7043 16.6086 21.5314L21.5314 16.6086C21.7043 16.4357 21.7908 16.3492 21.8526 16.2483C21.9075 16.1588 21.9479 16.0613 21.9724 15.9592C22 15.8441 22 15.7218 22 15.4773V8.52274C22 8.27815 22 8.15586 21.9724 8.04077C21.9479 7.93873 21.9075 7.84119 21.8526 7.75172C21.7908 7.6508 21.7043 7.56432 21.5314 7.39137L16.6086 2.46863C16.4357 2.29568 16.3492 2.2092 16.2483 2.14736C16.1588 2.09253 16.0613 2.05213 15.9592 2.02763C15.8441 2 15.7218 2 15.4773 2H8.52274C8.27815 2 8.15586 2 8.04077 2.02763C7.93873 2.05213 7.84119 2.09253 7.75172 2.14736C7.6508 2.2092 7.56432 2.29568 7.39137 2.46863L2.46863 7.39137C2.29568 7.56432 2.2092 7.6508 2.14736 7.75172C2.09253 7.84119 2.05213 7.93873 2.02763 8.04077C2 8.15586 2 8.27815 2 8.52274Z" stroke="#667085" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/Client/src/assets/icons/integrations.svg
+++ b/Client/src/assets/icons/integrations.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.0002 13C10.4297 13.5741 10.9776 14.0491 11.6067 14.3929C12.2359 14.7367 12.9317 14.9411 13.6468 14.9923C14.362 15.0435 15.0798 14.9403 15.7515 14.6897C16.4233 14.4392 17.0333 14.047 17.5402 13.54L20.5402 10.54C21.451 9.59695 21.955 8.33394 21.9436 7.02296C21.9322 5.71198 21.4063 4.45791 20.4793 3.53087C19.5523 2.60383 18.2982 2.07799 16.9872 2.0666C15.6762 2.0552 14.4132 2.55918 13.4702 3.46997L11.7502 5.17997M14.0002 11C13.5707 10.4258 13.0228 9.95078 12.3936 9.60703C11.7645 9.26327 11.0687 9.05885 10.3535 9.00763C9.63841 8.95641 8.92061 9.0596 8.24885 9.31018C7.5771 9.56077 6.96709 9.9529 6.4602 10.46L3.4602 13.46C2.54941 14.403 2.04544 15.666 2.05683 16.977C2.06822 18.288 2.59407 19.542 3.52111 20.4691C4.44815 21.3961 5.70221 21.9219 7.01319 21.9333C8.32418 21.9447 9.58719 21.4408 10.5302 20.53L12.2402 18.82" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.0002 13C10.4297 13.5741 10.9776 14.0491 11.6067 14.3929C12.2359 14.7367 12.9317 14.9411 13.6468 14.9923C14.362 15.0435 15.0798 14.9403 15.7515 14.6897C16.4233 14.4392 17.0333 14.047 17.5402 13.54L20.5402 10.54C21.451 9.59695 21.955 8.33394 21.9436 7.02296C21.9322 5.71198 21.4063 4.45791 20.4793 3.53087C19.5523 2.60383 18.2982 2.07799 16.9872 2.0666C15.6762 2.0552 14.4132 2.55918 13.4702 3.46997L11.7502 5.17997M14.0002 11C13.5707 10.4258 13.0228 9.95078 12.3936 9.60703C11.7645 9.26327 11.0687 9.05885 10.3535 9.00763C9.63841 8.95641 8.92061 9.0596 8.24885 9.31018C7.5771 9.56077 6.96709 9.9529 6.4602 10.46L3.4602 13.46C2.54941 14.403 2.04544 15.666 2.05683 16.977C2.06822 18.288 2.59407 19.542 3.52111 20.4691C4.44815 21.3961 5.70221 21.9219 7.01319 21.9333C8.32418 21.9447 9.58719 21.4408 10.5302 20.53L12.2402 18.82" stroke="#667085" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/Client/src/assets/icons/lock.svg
+++ b/Client/src/assets/icons/lock.svg
@@ -1,3 +1,3 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.3337 5.66667V4.33333C10.3337 2.49238 8.84127 1 7.00033 1C5.15938 1 3.66699 2.49238 3.66699 4.33333V5.66667M7.00033 8.66667V10M4.86699 13H9.13366C10.2538 13 10.8138 13 11.2416 12.782C11.618 12.5903 11.9239 12.2843 12.1157 11.908C12.3337 11.4802 12.3337 10.9201 12.3337 9.8V8.86667C12.3337 7.74656 12.3337 7.18651 12.1157 6.75869C11.9239 6.38236 11.618 6.0764 11.2416 5.88465C10.8138 5.66667 10.2538 5.66667 9.13366 5.66667H4.86699C3.74689 5.66667 3.18683 5.66667 2.75901 5.88465C2.38269 6.0764 2.07673 6.38236 1.88498 6.75869C1.66699 7.18651 1.66699 7.74656 1.66699 8.86667V9.8C1.66699 10.9201 1.66699 11.4802 1.88498 11.908C2.07673 12.2843 2.38269 12.5903 2.75901 12.782C3.18683 13 3.74689 13 4.86699 13Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.3337 5.66667V4.33333C10.3337 2.49238 8.84127 1 7.00033 1C5.15938 1 3.66699 2.49238 3.66699 4.33333V5.66667M7.00033 8.66667V10M4.86699 13H9.13366C10.2538 13 10.8138 13 11.2416 12.782C11.618 12.5903 11.9239 12.2843 12.1157 11.908C12.3337 11.4802 12.3337 10.9201 12.3337 9.8V8.86667C12.3337 7.74656 12.3337 7.18651 12.1157 6.75869C11.9239 6.38236 11.618 6.0764 11.2416 5.88465C10.8138 5.66667 10.2538 5.66667 9.13366 5.66667H4.86699C3.74689 5.66667 3.18683 5.66667 2.75901 5.88465C2.38269 6.0764 2.07673 6.38236 1.88498 6.75869C1.66699 7.18651 1.66699 7.74656 1.66699 8.86667V9.8C1.66699 10.9201 1.66699 11.4802 1.88498 11.908C2.07673 12.2843 2.38269 12.5903 2.75901 12.782C3.18683 13 3.74689 13 4.86699 13Z" stroke="#667085" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/Client/src/assets/icons/logout.svg
+++ b/Client/src/assets/icons/logout.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6M6 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.7157 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14H6" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6M6 2H5.2C4.0799 2 3.51984 2 3.09202 2.21799C2.7157 2.40973 2.40973 2.71569 2.21799 3.09202C2 3.51984 2 4.07989 2 5.2V10.8C2 11.9201 2 12.4802 2.21799 12.908C2.40973 13.2843 2.71569 13.5903 3.09202 13.782C3.51984 14 4.0799 14 5.2 14H6" stroke="#667085" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/Client/src/assets/icons/maintenance.svg
+++ b/Client/src/assets/icons/maintenance.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#667085" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/Client/src/assets/icons/up-arrow.svg
+++ b/Client/src/assets/icons/up-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="M18 15L12 9L6 15" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/Client/src/assets/icons/user-edit.svg
+++ b/Client/src/assets/icons/user-edit.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 15.5H7.5C6.10444 15.5 5.40665 15.5 4.83886 15.6722C3.56045 16.06 2.56004 17.0605 2.17224 18.3389C2 18.9067 2 19.6044 2 21M14.5 7.5C14.5 9.98528 12.4853 12 10 12C7.51472 12 5.5 9.98528 5.5 7.5C5.5 5.01472 7.51472 3 10 3C12.4853 3 14.5 5.01472 14.5 7.5ZM11 21L14.1014 20.1139C14.2499 20.0715 14.3241 20.0502 14.3934 20.0184C14.4549 19.9902 14.5134 19.9558 14.5679 19.9158C14.6293 19.8707 14.6839 19.8161 14.7932 19.7068L21.25 13.25C21.9404 12.5597 21.9404 11.4403 21.25 10.75C20.5597 10.0596 19.4404 10.0596 18.75 10.75L12.2932 17.2068C12.1839 17.3161 12.1293 17.3707 12.0842 17.4321C12.0442 17.4866 12.0098 17.5451 11.9816 17.6066C11.9497 17.6759 11.9285 17.7501 11.8861 17.8987L11 21Z" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/Client/src/assets/icons/user-two.svg
+++ b/Client/src/assets/icons/user-two.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.6663 14V12.6667C14.6663 11.4241 13.8165 10.38 12.6663 10.084M10.333 2.19384C11.3103 2.58943 11.9997 3.54754 11.9997 4.66667C11.9997 5.78579 11.3103 6.7439 10.333 7.13949M11.333 14C11.333 12.7575 11.333 12.1362 11.13 11.6462C10.8594 10.9928 10.3402 10.4736 9.68683 10.203C9.19677 10 8.57552 10 7.33301 10H5.33301C4.0905 10 3.46924 10 2.97919 10.203C2.32578 10.4736 1.80665 10.9928 1.536 11.6462C1.33301 12.1362 1.33301 12.7575 1.33301 14M8.99967 4.66667C8.99967 6.13943 7.80577 7.33333 6.33301 7.33333C4.86025 7.33333 3.66634 6.13943 3.66634 4.66667C3.66634 3.19391 4.86025 2 6.33301 2C7.80577 2 8.99967 3.19391 8.99967 4.66667Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.6663 14V12.6667C14.6663 11.4241 13.8165 10.38 12.6663 10.084M10.333 2.19384C11.3103 2.58943 11.9997 3.54754 11.9997 4.66667C11.9997 5.78579 11.3103 6.7439 10.333 7.13949M11.333 14C11.333 12.7575 11.333 12.1362 11.13 11.6462C10.8594 10.9928 10.3402 10.4736 9.68683 10.203C9.19677 10 8.57552 10 7.33301 10H5.33301C4.0905 10 3.46924 10 2.97919 10.203C2.32578 10.4736 1.80665 10.9928 1.536 11.6462C1.33301 12.1362 1.33301 12.7575 1.33301 14M8.99967 4.66667C8.99967 6.13943 7.80577 7.33333 6.33301 7.33333C4.86025 7.33333 3.66634 6.13943 3.66634 4.66667C3.66634 3.19391 4.86025 2 6.33301 2C7.80577 2 8.99967 3.19391 8.99967 4.66667Z" stroke="#667085" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
--- a/Client/src/assets/icons/user.svg
+++ b/Client/src/assets/icons/user.svg
@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.3337 14C13.3337 13.0696 13.3337 12.6044 13.2188 12.2259C12.9603 11.3736 12.2934 10.7067 11.4411 10.4482C11.0626 10.3333 10.5974 10.3333 9.66699 10.3333H6.33366C5.40328 10.3333 4.93809 10.3333 4.55956 10.4482C3.7073 10.7067 3.04035 11.3736 2.78182 12.2259C2.66699 12.6044 2.66699 13.0696 2.66699 14M11.0003 5C11.0003 6.65685 9.65718 8 8.00033 8C6.34347 8 5.00033 6.65685 5.00033 5C5.00033 3.34315 6.34347 2 8.00033 2C9.65718 2 11.0003 3.34315 11.0003 5Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.3337 14C13.3337 13.0696 13.3337 12.6044 13.2188 12.2259C12.9603 11.3736 12.2934 10.7067 11.4411 10.4482C11.0626 10.3333 10.5974 10.3333 9.66699 10.3333H6.33366C5.40328 10.3333 4.93809 10.3333 4.55956 10.4482C3.7073 10.7067 3.04035 11.3736 2.78182 12.2259C2.66699 12.6044 2.66699 13.0696 2.66699 14M11.0003 5C11.0003 6.65685 9.65718 8 8.00033 8C6.34347 8 5.00033 6.65685 5.00033 5C5.00033 3.34315 6.34347 2 8.00033 2C9.65718 2 11.0003 3.34315 11.0003 5Z" stroke="#667085" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>