varminer-app-header 2.1.2 → 2.1.3

package/dist/index.js

@@ -201,6 +201,145 @@ const setI18nLocaleToStorage = (locale) => {
         console.error("Error setting i18n locale to localStorage:", err);
     }
 };
+/**
+ * Decodes a JWT token and returns its payload
+ * @param token - JWT token string
+ * @returns Decoded payload object or null if decoding fails
+ */
+const decodeJWT = (token) => {
+    try {
+        if (!token)
+            return null;
+        // JWT format: header.payload.signature
+        const parts = token.split('.');
+        if (parts.length !== 3)
+            return null;
+        // Decode the payload (second part)
+        const payload = parts[1];
+        // Base64 decode and parse JSON
+        // Replace URL-safe base64 characters and add padding if needed
+        const base64 = payload.replace(/-/g, '+').replace(/_/g, '/');
+        const padded = base64 + '='.repeat((4 - (base64.length % 4)) % 4);
+        const decoded = atob(padded);
+        return JSON.parse(decoded);
+    }
+    catch (err) {
+        console.error("Error decoding JWT token:", err);
+        return null;
+    }
+};
+/**
+ * Get all data from localStorage (persist:userdb) including decoded accessToken
+ * This function reads all available data without hardcoding and doesn't require any parameters
+ * @returns Comprehensive object containing all available data from localStorage and decoded JWT payload
+ */
+const getAllDataFromStorage = () => {
+    const userDbString = localStorage.getItem("persist:userdb");
+    if (!userDbString) {
+        return {
+            auth: null,
+            user: null,
+            authDetails: null,
+            userDetails: null,
+            profile: null,
+            notifications: null,
+            messages: null,
+            app: null,
+            decodedToken: null,
+            rawData: null,
+        };
+    }
+    try {
+        const parsedOuter = JSON.parse(userDbString);
+        // Helper function to parse nested JSON strings
+        const parseNested = (value) => {
+            if (typeof value === 'string') {
+                try {
+                    return JSON.parse(value);
+                }
+                catch {
+                    return value;
+                }
+            }
+            return value;
+        };
+        // Parse all top-level keys dynamically (no hardcoding)
+        const parsedData = {};
+        let authData = null;
+        // Helper to recursively find auth data (contains accessToken or refreshToken)
+        const findAuthData = (obj) => {
+            if (!obj || typeof obj !== 'object')
+                return null;
+            // Check if this object itself is auth data
+            if (obj.accessToken || obj.refreshToken) {
+                return obj;
+            }
+            // Recursively search in nested objects
+            for (const key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    const nested = findAuthData(obj[key]);
+                    if (nested)
+                        return nested;
+                }
+            }
+            return null;
+        };
+        // Parse all keys in parsedOuter dynamically
+        Object.keys(parsedOuter).forEach((key) => {
+            parsedData[key] = parseNested(parsedOuter[key]);
+            // Dynamically find auth data in any structure
+            const foundAuth = findAuthData(parsedData[key]);
+            if (foundAuth && !authData) {
+                authData = foundAuth;
+                parsedData.auth = authData;
+            }
+        });
+        // Get accessToken and decode it
+        let decodedToken = null;
+        const accessToken = authData?.accessToken || parsedData.auth?.accessToken || parsedData.authDetails?.accessToken;
+        if (accessToken) {
+            decodedToken = decodeJWT(accessToken);
+        }
+        // Extract all auth-related fields from authData dynamically (no hardcoding)
+        const authFields = authData ? Object.keys(authData).reduce((acc, key) => {
+            acc[key] = authData[key] !== undefined ? authData[key] : null;
+            return acc;
+        }, {}) : null;
+        // Build return object dynamically with all parsed data
+        const result = {
+            ...Object.keys(parsedData).reduce((acc, key) => {
+                acc[key] = parsedData[key] !== undefined ? parsedData[key] : null;
+                return acc;
+            }, {}),
+            decodedToken: decodedToken ? Object.keys(decodedToken).reduce((acc, key) => {
+                acc[key] = decodedToken[key] !== undefined ? decodedToken[key] : null;
+                return acc;
+            }, {}) : null,
+            rawData: parsedOuter, // Include raw parsed data for any other fields
+        };
+        // Add auth field if we have authData
+        if (authFields) {
+            result.auth = authFields;
+        }
+        return result;
+    }
+    catch (err) {
+        console.error("Error parsing all data from localStorage:", err);
+        return {
+            auth: null,
+            user: null,
+            authDetails: null,
+            userDetails: null,
+            profile: null,
+            notifications: null,
+            messages: null,
+            app: null,
+            decodedToken: null,
+            rawData: null,
+            error: err instanceof Error ? err.message : 'Unknown error',
+        };
+    }
+};
 
 const translations = {
     en: {
@@ -310,8 +449,8 @@ const LanguageSelector = ({ currentLanguage, onLanguageChange, }) => {
 
 const DEFAULT_ROUTES = {
     settings: "/account/overview",
-    profile: "/profile",
-    logout: "/logout",
+    profile: "/user/profile",
+    logout: "/user/logout",
 };
 const AppHeader = ({ language: languageProp }) => {
     // Get initial language from props, URL, localStorage, or default to 'en'
@@ -344,14 +483,61 @@ const AppHeader = ({ language: languageProp }) => {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);
     const [user, setUser] = React.useState(() => {
+        const allData = getAllDataFromStorage();
+        // Try to get user data from various sources
+        let userName = "";
+        let userEmail = "";
+        let userRole = "";
+        // Priority 1: From decoded token
+        if (allData.decodedToken) {
+            userName = allData.decodedToken.sub || allData.decodedToken.email || "";
+            userEmail = allData.decodedToken.sub || allData.decodedToken.email || "";
+            userRole = allData.decodedToken.role || "";
+        }
+        // Priority 2: From auth data
+        if (allData.auth) {
+            userName = userName || allData.auth.name || allData.auth.email || "";
+            userEmail = userEmail || allData.auth.email || allData.auth.sub || "";
+            userRole = userRole || allData.auth.role || allData.auth.activeRole || "";
+        }
+        // Priority 3: From userDetails/user/profile
         const storedUser = getUserDataFromStorage();
-        if (storedUser && storedUser.name && storedUser.email) {
-            return storedUser;
+        if (storedUser) {
+            userName = userName || storedUser.name || "";
+            userEmail = userEmail || storedUser.email || "";
+            userRole = userRole || storedUser.role || "";
+        }
+        // Priority 4: From other parsed data
+        if (allData.userDetails) {
+            const userDetails = allData.userDetails.user || allData.userDetails.data || allData.userDetails;
+            if (userDetails) {
+                userName = userName || userDetails.name || userDetails.fullName || "";
+                userEmail = userEmail || userDetails.email || userDetails.emailAddress || "";
+                userRole = userRole || userDetails.role || userDetails.userRole || "";
+            }
+        }
+        if (allData.user) {
+            const userData = allData.user.user || allData.user.data || allData.user.currentUser || allData.user;
+            if (userData) {
+                userName = userName || userData.name || userData.fullName || "";
+                userEmail = userEmail || userData.email || userData.emailAddress || "";
+                userRole = userRole || userData.role || userData.userRole || "";
+            }
+        }
+        if (allData.profile) {
+            const profileData = allData.profile.user || allData.profile.data || allData.profile;
+            if (profileData) {
+                userName = userName || profileData.name || profileData.fullName || "";
+                userEmail = userEmail || profileData.email || profileData.emailAddress || "";
+                userRole = userRole || profileData.role || profileData.userRole || "";
+            }
         }
         return {
-            name: "Naveen",
-            email: "naveen@varminer.com",
-            role: "Account Owner",
+            name: userName || "",
+            email: userEmail || "",
+            role: userRole || "",
+            avatar: storedUser?.avatar || allData.auth?.avatar || allData.profile?.avatar || undefined,
+            initials: storedUser?.initials || allData.auth?.initials || allData.profile?.initials || undefined,
         };
     });
     const [notificationCount, setNotificationCount] = React.useState(() => {
@@ -362,16 +548,86 @@ const AppHeader = ({ language: languageProp }) => {
         return getMessageCountFromStorage() ?? undefined;
     });
     React.useEffect(() => {
+        const allData = getAllDataFromStorage();
+        // Try to get user data from various sources
+        let userName = "";
+        let userEmail = "";
+        let userRole = "";
+        let userAvatar = undefined;
+        let userInitials = undefined;
+        // Priority 1: From decoded token
+        if (allData.decodedToken) {
+            userName = allData.decodedToken.sub || allData.decodedToken.email || "";
+            userEmail = allData.decodedToken.sub || allData.decodedToken.email || "";
+            userRole = allData.decodedToken.role || "";
+        }
+        // Priority 2: From auth data
+        if (allData.auth) {
+            userName = userName || allData.auth.name || allData.auth.email || "";
+            userEmail = userEmail || allData.auth.email || allData.auth.sub || "";
+            userRole = userRole || allData.auth.role || allData.auth.activeRole || "";
+            userAvatar = userAvatar || allData.auth.avatar || undefined;
+            userInitials = userInitials || allData.auth.initials || undefined;
+        }
+        // Priority 3: From userDetails/user/profile
         const storedUser = getUserDataFromStorage();
-        if (storedUser && storedUser.name && storedUser.email) {
-            setUser(storedUser);
+        if (storedUser) {
+            userName = userName || storedUser.name || "";
+            userEmail = userEmail || storedUser.email || "";
+            userRole = userRole || storedUser.role || "";
+            userAvatar = userAvatar || storedUser.avatar || undefined;
+            userInitials = userInitials || storedUser.initials || undefined;
+        }
+        // Priority 4: From other parsed data
+        if (allData.userDetails) {
+            const userDetails = allData.userDetails.user || allData.userDetails.data || allData.userDetails;
+            if (userDetails) {
+                userName = userName || userDetails.name || userDetails.fullName || "";
+                userEmail = userEmail || userDetails.email || userDetails.emailAddress || "";
+                userRole = userRole || userDetails.role || userDetails.userRole || "";
+                userAvatar = userAvatar || userDetails.avatar || userDetails.profilePicture || undefined;
+                userInitials = userInitials || userDetails.initials || undefined;
+            }
+        }
+        if (allData.user) {
+            const userData = allData.user.user || allData.user.data || allData.user.currentUser || allData.user;
+            if (userData) {
+                userName = userName || userData.name || userData.fullName || "";
+                userEmail = userEmail || userData.email || userData.emailAddress || "";
+                userRole = userRole || userData.role || userData.userRole || "";
+                userAvatar = userAvatar || userData.avatar || userData.profilePicture || undefined;
+                userInitials = userInitials || userData.initials || undefined;
+            }
+        }
+        if (allData.profile) {
+            const profileData = allData.profile.user || allData.profile.data || allData.profile;
+            if (profileData) {
+                userName = userName || profileData.name || profileData.fullName || "";
+                userEmail = userEmail || profileData.email || profileData.emailAddress || "";
+                userRole = userRole || profileData.role || profileData.userRole || "";
+                userAvatar = userAvatar || profileData.avatar || profileData.profilePicture || undefined;
+                userInitials = userInitials || profileData.initials || undefined;
+            }
+        }
+        setUser({
+            name: userName || "",
+            email: userEmail || "",
+            role: userRole || "",
+            avatar: userAvatar,
+            initials: userInitials,
+        });
+        // Update online status
+        if (allData.auth?.isOnline !== undefined) {
+            setIsOnlineStatus(allData.auth.isOnline);
         }
-        else {
-            setUser({
-                name: "Naveen",
-                email: "naveen@varminer.com",
-                role: "Account Owner",
-            });
+        else if (allData.userDetails?.isOnline !== undefined) {
+            setIsOnlineStatus(allData.userDetails.isOnline);
+        }
+        else if (allData.user?.isOnline !== undefined) {
+            setIsOnlineStatus(allData.user.isOnline);
+        }
+        else if (allData.profile?.isOnline !== undefined) {
+            setIsOnlineStatus(allData.profile.isOnline);
         }
         const notifCount = getNotificationCountFromStorage();
         setNotificationCount(notifCount !== null && notifCount !== undefined ? notifCount : 0);
@@ -384,6 +640,24 @@ const AppHeader = ({ language: languageProp }) => {
         }
     }, [languageProp]);
     const finalRoutes = DEFAULT_ROUTES;
+    // Get online status from localStorage dynamically
+    const [isOnlineStatus, setIsOnlineStatus] = React.useState(() => {
+        const allData = getAllDataFromStorage();
+        if (allData.auth?.isOnline !== undefined) {
+            return allData.auth.isOnline;
+        }
+        if (allData.userDetails?.isOnline !== undefined) {
+            return allData.userDetails.isOnline;
+        }
+        if (allData.user?.isOnline !== undefined) {
+            return allData.user.isOnline;
+        }
+        if (allData.profile?.isOnline !== undefined) {
+            return allData.profile.isOnline;
+        }
+        // Default to true if not specified (for backward compatibility)
+        return true;
+    });
     const notificationCountValue = notificationCount;
     const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
     const OnlineBadge = material.styled(material.Badge)(({ theme }) => ({
@@ -396,7 +670,7 @@ const AppHeader = ({ language: languageProp }) => {
             borderRadius: "50%",
         },
     }));
-    material.styled(material.Badge)(({ theme }) => ({
+    const OfflineBadge = material.styled(material.Badge)(({ theme }) => ({
         "& .MuiBadge-badge": {
             backgroundColor: "gray",
             color: "gray",
@@ -452,11 +726,50 @@ const AppHeader = ({ language: languageProp }) => {
             .toUpperCase()
             .slice(0, 2);
     };
+    // Check if user has permission to see settings (Account Owner, Account Admin, or Global Admin)
+    const canViewSettings = React.useMemo(() => {
+        const allData = getAllDataFromStorage();
+        let userRole = "";
+        // Get role from decoded token
+        if (allData.decodedToken?.role) {
+            userRole = allData.decodedToken.role;
+        }
+        // Get role from auth data
+        else if (allData.auth?.role) {
+            userRole = allData.auth.role;
+        }
+        // Get role from user data
+        else if (user.role) {
+            userRole = user.role;
+        }
+        // Get role from userDetails
+        else if (allData.userDetails) {
+            const userDetails = allData.userDetails.user || allData.userDetails.data || allData.userDetails;
+            userRole = userDetails?.role || userDetails?.userRole || "";
+        }
+        // Get role from user
+        else if (allData.user) {
+            const userData = allData.user.user || allData.user.data || allData.user.currentUser || allData.user;
+            userRole = userData?.role || userData?.userRole || "";
+        }
+        // Normalize role for comparison (case-insensitive, handle spaces/underscores/hyphens)
+        const normalizedRole = userRole.toLowerCase().trim().replace(/[_\s-]+/g, " ");
+        const allowedRoles = [
+            "account owner",
+            "account admin",
+            "global admin"
+        ];
+        // Check for exact match or if role starts with allowed role
+        // This handles variations like "Account Owner", "ACCOUNT_OWNER", "Account-Owner", "Account Owner - Manager"
+        return allowedRoles.some(allowedRole => {
+            return normalizedRole === allowedRole || normalizedRole.startsWith(allowedRole + " ");
+        });
+    }, [user.role]);
     const profileList = (jsxRuntime.jsx(material.List, { className: "profile-menu-section", sx: {
             width: "100%",
             maxWidth: 360,
             pointerEvents: "none",
-        }, component: "div", "aria-hidden": "true", tabIndex: -1, children: jsxRuntime.jsxs(material.ListItem, { alignItems: "flex-start", className: "profile-menu-item", children: [jsxRuntime.jsx(material.ListItemAvatar, { children: (jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.online, "aria-label": `${t.online} status badge`, "data-testid": "online-badge", children: jsxRuntime.jsx(material.Avatar, { sx: { bgcolor: colors.deepOrange[500] }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) }))  }), jsxRuntime.jsx(material.ListItemText, { secondary: jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(material.Typography, { className: "profile-name", component: "p", children: user.name }), jsxRuntime.jsx(material.Typography, { className: "profile-email", component: "p", children: user.email }), jsxRuntime.jsxs(material.Typography, { className: "profile-role", component: "p", children: [t.role, ": ", user.role] })] }) })] }) }));
+        }, component: "div", "aria-hidden": "true", tabIndex: -1, children: jsxRuntime.jsxs(material.ListItem, { alignItems: "flex-start", className: "profile-menu-item", children: [jsxRuntime.jsx(material.ListItemAvatar, { children: isOnlineStatus ? (jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.online, "aria-label": `${t.online} status badge`, "data-testid": "online-badge", children: jsxRuntime.jsx(material.Avatar, { sx: { bgcolor: colors.deepOrange[500] }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) : (jsxRuntime.jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.offline, "aria-label": `${t.offline} status badge`, "data-testid": "offline-badge", children: jsxRuntime.jsx(material.Avatar, { sx: { bgcolor: colors.deepOrange[500] }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) }), jsxRuntime.jsx(material.ListItemText, { secondary: jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(material.Typography, { className: "profile-name", component: "p", children: user.name }), jsxRuntime.jsx(material.Typography, { className: "profile-email", component: "p", children: user.email }), jsxRuntime.jsxs(material.Typography, { className: "profile-role", component: "p", children: [t.role, ": ", user.role] })] }) })] }) }));
     const renderMenu = (jsxRuntime.jsxs(material.Menu, { anchorEl: anchorEl, id: "account-menu", open: open, onClose: handleClose, onClick: handleClose, slotProps: {
             paper: {
                 elevation: 0,
@@ -484,7 +797,7 @@ const AppHeader = ({ language: languageProp }) => {
                     },
                 },
             },
-        }, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, children: [profileList, jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(material.MenuItem, { onClick: handleSettingsClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(SettingsOutlinedIcon, { fontSize: "small" }) }), t.accountSettings] }), jsxRuntime.jsxs(material.MenuItem, { onClick: handleProfileClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(PersonOutlineOutlinedIcon, { fontSize: "small" }) }), t.profile] }), jsxRuntime.jsxs(material.MenuItem, { onClick: handleSignOutClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(LogoutOutlinedIcon, { fontSize: "small" }) }), t.signOut] })] }));
+        }, transformOrigin: { horizontal: "right", vertical: "top" }, anchorOrigin: { horizontal: "right", vertical: "bottom" }, children: [profileList, jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsxs(material.MenuItem, { onClick: handleProfileClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(PersonOutlineOutlinedIcon, { fontSize: "small" }) }), t.profile] }), canViewSettings && (jsxRuntime.jsxs(material.MenuItem, { onClick: handleSettingsClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(SettingsOutlinedIcon, { fontSize: "small" }) }), t.accountSettings] })), jsxRuntime.jsxs(material.MenuItem, { onClick: handleSignOutClick, children: [jsxRuntime.jsx(material.ListItemIcon, { children: jsxRuntime.jsx(LogoutOutlinedIcon, { fontSize: "small" }) }), t.signOut] })] }));
     const mobileMenuId = "primary-account-menu-mobile";
     const renderMobileMenu = (jsxRuntime.jsxs(material.Menu, { anchorEl: mobileMoreAnchorEl, anchorOrigin: {
             vertical: "top",
@@ -492,7 +805,7 @@ const AppHeader = ({ language: languageProp }) => {
         }, id: mobileMenuId, keepMounted: true, transformOrigin: {
             vertical: "top",
             horizontal: "right",
-        }, open: isMobileMenuOpen, onClose: handleMobileMenuClose, children: [messageCount !== undefined && (jsxRuntime.jsxs(material.MenuItem, { children: [jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": `show ${messageCount} new mails`, sx: { color: '#1e2f97' }, children: jsxRuntime.jsx(material.Badge, { badgeContent: messageCount, color: "error", children: jsxRuntime.jsx(MailIcon, {}) }) }), jsxRuntime.jsx("p", { children: t.messages })] })), notificationCountValue > 0 && (jsxRuntime.jsxs(material.MenuItem, { children: [jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": `show ${notificationCountValue} new notifications`, sx: { color: '#1e2f97' }, children: jsxRuntime.jsx(material.Badge, { badgeContent: notificationCount, color: "error", children: jsxRuntime.jsx(NotificationsActiveOutlined, {}) }) }), jsxRuntime.jsx("p", { children: t.notifications })] })), jsxRuntime.jsxs(material.MenuItem, { onClick: handleProfileMenuOpen, children: [jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": "account of current user", "aria-controls": "primary-account-menu", "aria-haspopup": "true", sx: { color: '#1e2f97' }, children: (jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.online, "aria-label": `${t.online} status badge`, "data-testid": "online-badge", children: jsxRuntime.jsx(AccountCircle, { titleAccess: user.name, "aria-label": "User avatar" }) }))  }), jsxRuntime.jsx("p", { children: t.profile })] })] }));
+        }, open: isMobileMenuOpen, onClose: handleMobileMenuClose, children: [messageCount !== undefined && (jsxRuntime.jsxs(material.MenuItem, { children: [jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": `show ${messageCount} new mails`, sx: { color: '#1e2f97' }, children: jsxRuntime.jsx(material.Badge, { badgeContent: messageCount, color: "error", children: jsxRuntime.jsx(MailIcon, {}) }) }), jsxRuntime.jsx("p", { children: t.messages })] })), notificationCountValue > 0 && (jsxRuntime.jsxs(material.MenuItem, { children: [jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": `show ${notificationCountValue} new notifications`, sx: { color: '#1e2f97' }, children: jsxRuntime.jsx(material.Badge, { badgeContent: notificationCount, color: "error", children: jsxRuntime.jsx(NotificationsActiveOutlined, {}) }) }), jsxRuntime.jsx("p", { children: t.notifications })] })), jsxRuntime.jsxs(material.MenuItem, { onClick: handleProfileMenuOpen, children: [jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": "account of current user", "aria-controls": "primary-account-menu", "aria-haspopup": "true", sx: { color: '#1e2f97' }, children: isOnlineStatus ? (jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.online, "aria-label": `${t.online} status badge`, "data-testid": "online-badge", children: jsxRuntime.jsx(AccountCircle, { titleAccess: user.name, "aria-label": "User avatar" }) })) : (jsxRuntime.jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.offline, "aria-label": `${t.offline} status badge`, "data-testid": "offline-badge", children: jsxRuntime.jsx(AccountCircle, { titleAccess: user.name, "aria-label": "User avatar" }) })) }), jsxRuntime.jsx("p", { children: t.profile })] })] }));
     return (jsxRuntime.jsxs(material.Box, { sx: { flexGrow: 1 }, className: "app-header", children: [jsxRuntime.jsx(material.AppBar, { elevation: 0, sx: {
                     backgroundColor: "#ffffff",
                     boxShadow: 'none !important',
@@ -526,12 +839,17 @@ const AppHeader = ({ language: languageProp }) => {
                                         '&:hover': {
                                             backgroundColor: 'rgba(30, 47, 151, 0.04)',
                                         }
-                                    }, children: (jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: "Online", "aria-label": "Online status badge", "data-testid": "online-badge", children: jsxRuntime.jsx(material.Avatar, { sx: {
+                                    }, children: isOnlineStatus ? (jsxRuntime.jsx(OnlineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.online, "aria-label": `${t.online} status badge`, "data-testid": "online-badge", children: jsxRuntime.jsx(material.Avatar, { sx: {
+                                                bgcolor: colors.deepOrange[500],
+                                                width: 20,
+                                                height: 20,
+                                                p: 1,
+                                            }, alt: user.name, title: user.name, src: user.avatar, sizes: "large", children: getInitials() }) })) : (jsxRuntime.jsx(OfflineBadge, { overlap: "circular", anchorOrigin: { vertical: "bottom", horizontal: "right" }, variant: "dot", title: t.offline, "aria-label": `${t.offline} status badge`, "data-testid": "offline-badge", children: jsxRuntime.jsx(material.Avatar, { sx: {
                                                 bgcolor: colors.deepOrange[500],
                                                 width: 20,
                                                 height: 20,
                                                 p: 1,
-                                            }, alt: user.name, title: user.name, src: user.avatar, sizes: "large", children: getInitials() }) }))  })] }), jsxRuntime.jsx(material.Box, { sx: { display: { xs: "flex", md: "none" } }, children: jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": "show more", "aria-controls": mobileMenuId, "aria-haspopup": "true", onClick: handleMobileMenuOpen, sx: {
+                                            }, alt: user.name, title: user.name, src: user.avatar, children: getInitials() }) })) })] }), jsxRuntime.jsx(material.Box, { sx: { display: { xs: "flex", md: "none" } }, children: jsxRuntime.jsx(material.IconButton, { size: "large", "aria-label": "show more", "aria-controls": mobileMenuId, "aria-haspopup": "true", onClick: handleMobileMenuOpen, sx: {
                                     color: '#1e2f97',
                                     '&:hover': {
                                         backgroundColor: 'rgba(30, 47, 151, 0.04)',