From 442fc2ce22d37f1c77561f16bedb5ed17912ce9e Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Tue, 10 Feb 2026 23:24:51 +0000 Subject: [PATCH] account tab fix --- .../src/Components/v2/sidebar/Authfooter.tsx | 315 ++++++------------ client/src/Pages/Account/index.tsx | 7 +- 2 files changed, 117 insertions(+), 205 deletions(-) diff --git a/client/src/Components/v2/sidebar/Authfooter.tsx b/client/src/Components/v2/sidebar/Authfooter.tsx index 2bebb49b2..4b369cb67 100644 --- a/client/src/Components/v2/sidebar/Authfooter.tsx +++ b/client/src/Components/v2/sidebar/Authfooter.tsx @@ -1,103 +1,75 @@ import Stack from "@mui/material/Stack"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; -import Tooltip from "@mui/material/Tooltip"; import IconButton from "@mui/material/IconButton"; -import { Avatar, Icon } from "@/Components/v2/design-elements"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; -import { MoreVertical, LogOut } from "lucide-react"; - import { useTheme } from "@mui/material"; -import { useSelector } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; import { useTranslation } from "react-i18next"; import { useState } from "react"; import { useNavigate } from "react-router"; +import { MoreVertical, LogOut } from "lucide-react"; +import { Avatar, Icon } from "@/Components/v2/design-elements"; import { clearAuthState } from "@/Features/Auth/authSlice.js"; -import { useDispatch } from "react-redux"; import type { RootState } from "@/Types/state.js"; -const getFilteredAccountMenuItems = (user: any, items: any[]) => { - if (!user) return []; - - let filtered = [...items]; - - if (user.role?.includes("demo")) { - filtered = filtered.filter((item) => item.name !== "Password"); - } - - if (!user.role?.includes("superadmin")) { - filtered = filtered.filter((item) => item.name !== "Team"); - } - - return filtered; -}; - -const getRoleDisplayText = (user: any, t: Function) => { - if (!user?.role) return ""; - - if (user.role.includes("superadmin")) - return t("components.sidebar.authFooter.roles.superAdmin"); - if (user.role.includes("admin")) return t("components.sidebar.authFooter.roles.admin"); - if (user.role.includes("user")) - return t("components.sidebar.authFooter.roles.teamMember"); - if (user.role.includes("demo")) - return t("components.sidebar.authFooter.roles.demoUser"); - - return user.role; -}; - -export const AuthFooter = ({ - collapsed, - accountMenuItems, -}: { +interface AuthFooterProps { collapsed: boolean; - accountMenuItems: any[]; -}) => { + accountMenuItems: Array<{ + name: string; + path: string; + icon: React.ReactNode; + }>; +} + +export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) => { const { t } = useTranslation(); const theme = useTheme(); - const authState = useSelector((state: RootState) => state.auth); + const user = useSelector((state: RootState) => state.auth.user); const navigate = useNavigate(); const dispatch = useDispatch(); - const [anchorEl, setAnchorEl] = useState(null); - const openPopup = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); + const menuOpen = Boolean(anchorEl); + const handleMenuOpen = (e: React.MouseEvent) => + setAnchorEl(e.currentTarget); + const handleMenuClose = () => setAnchorEl(null); + + const handleNavigate = (path: string) => { + handleMenuClose(); + navigate(path); }; - const closePopup = () => { - setAnchorEl(null); - }; - - const logout = async () => { + const handleLogout = () => { dispatch(clearAuthState()); navigate("/login"); }; - const renderAccountMenuItems = (user: any, items: any[]) => { - const filteredItems = getFilteredAccountMenuItems(user, items); - return filteredItems.map((item) => ( - { - closePopup(); - navigate(item.path); - }} - sx={{ - gap: theme.spacing(2), - borderRadius: theme.shape.borderRadius, - pl: theme.spacing(4), - "& svg": { - stroke: theme.palette.text.secondary, - }, - }} - > - {item.icon} - {item.name} - - )); + const getRoleText = () => { + const role = user?.role ?? ""; + if (role.includes("superadmin")) + return t("components.sidebar.authFooter.roles.superAdmin"); + if (role.includes("admin")) return t("components.sidebar.authFooter.roles.admin"); + if (role.includes("user")) return t("components.sidebar.authFooter.roles.teamMember"); + if (role.includes("demo")) return t("components.sidebar.authFooter.roles.demoUser"); + return role; }; + + const filteredMenuItems = accountMenuItems.filter((item) => { + if (!user) return false; + if (item.name === "Password" && user.role?.includes("demo")) return false; + if (item.name === "Team" && !user.role?.includes("superadmin")) return false; + return true; + }); + + const menuItemSx = { + gap: theme.spacing(2), + borderRadius: theme.shape.borderRadius, + pl: theme.spacing(4), + "& svg": { stroke: theme.palette.text.secondary }, + }; + return ( { - openPopup(e); - }} - sx={{ - cursor: collapsed ? "pointer" : "default", - }} + small + onClick={collapsed ? handleMenuOpen : undefined} + sx={{ cursor: collapsed ? "pointer" : "default" }} /> - + {!collapsed && ( - - {authState.user?.firstName} {authState.user?.lastName} - - - {getRoleDisplayText(authState.user, t)} - - - + + {user?.firstName} {user?.lastName} + + + {getRoleText()} + + openPopup(event)} > - - + + )} + {collapsed && ( - - + - - {authState.user?.firstName} {authState.user?.lastName} - - - {authState.user?.role} - - - + {user?.firstName} {user?.lastName} + + + {getRoleText()} + + )} - {renderAccountMenuItems(authState.user, accountMenuItems)} + {filteredMenuItems.map((item) => ( + handleNavigate(item.path)} + sx={menuItemSx} + > + {item.icon} + {item.name} + + ))} { const { t } = useTranslation(); const [activeTab, setActiveTab] = useState(TAB_MAP[open]); + // Sync activeTab when open prop changes (e.g., navigating from sidebar) + useEffect(() => { + setActiveTab(TAB_MAP[open]); + }, [open]); + return (