@argusoft/medplat-app-shell 1.0.5 → 1.0.7

package/src/layout/mainLayout/header/Navbar.jsx

@@ -0,0 +1,1677 @@
+// src/components/Navbar.js
+
+import '@/layout/mainLayout/header/Navbar.scss';
+import UpdateUserModal from '@/layout/mainLayout/Profile/UpdateProfileModal';
+import LogoutModal from '@/layout/mainLayout/header/LogoutModal';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Backdrop } from '@mui/material';
+
+import {
+  Autocomplete,
+  Avatar,
+  Box,
+  ButtonBase,
+  Divider,
+  ListItemIcon,
+  Modal,
+  Select,
+  TextField,
+  Tooltip,
+  useTheme,
+  Switch,
+  InputAdornment,
+  Popper,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+} from '@mui/material';
+import AppBar from '@mui/material/AppBar';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import { alpha } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import useTrackEvent from '@/hooks/useTrackEvent';
+
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { execute } from '@/common/services/QueryBuilder';
+import { getAllLanguages } from '@/common/services/TranslationService';
+import { showToast } from '@/common/toaster/toaster';
+import { resetStore } from '@/store/reducers/AuthenticationReducer';
+import { setlanguageMap, setTranslation, setTranslationLanguage } from '@/store/reducers/TranslationReducer';
+import { Grid } from '@mui/system';
+import PropTypes from 'prop-types';
+import { lazy, memo, Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import FontSizeSelectorWrapper from '@/common/fontPreferences/fontSizeSelector';
+import { logout } from '@/common/services/AuthenticateService';
+import {
+  updateCanSetPersonalizedTheme,
+  setPersonilizedThemes,
+  toggleTheme,
+  setTheme,
+} from '@/store/reducers/ThemeReducer';
+import { useMediaQuery, IconButton } from '@mui/material';
+import { enablePushNotifications } from '@/utils/notifications/enable-push-notifications';
+import {
+  // faBorderAll,
+  faChevronDown,
+  faChevronRight,
+  faGear,
+  faKey,
+  faMagnifyingGlass,
+  faRightFromBracket,
+  faQuestionCircle,
+  faCalendarDays,
+  faPhone,
+  faSliders,
+} from '@fortawesome/free-solid-svg-icons';
+
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+import { clearAllExceptPinned } from '@/utils/localStorageHelper';
+
+const ChangePasswordModal = lazy(() => import('@/views/feature-components/users/ChangePasswordModal'));
+
+const normalizeLanguageKey = (languageKey) => languageKey?.toString().toLowerCase();
+const getLanguageKey = (languageItem) => normalizeLanguageKey(languageItem?.languageKey || languageItem?.language_key);
+
+const getLanguageIdFromStorage = () => {
+  const savedLanguage = parseInt(localStorage.getItem('translation_language'));
+  return Number.isNaN(savedLanguage) ? null : savedLanguage;
+};
+
+const SearchModal = memo(function SearchModal({
+  open,
+  handleClose,
+  recentSearches = [],
+  allMenu = [],
+  navigate,
+  setRecentSearches,
+}) {
+  const [searchText, setSearchText] = useState('');
+  const [searched, setSearched] = useState(allMenu);
+
+  useEffect(() => {
+    if (open) {
+      setSearchText('');
+      setSearched(allMenu);
+    }
+  }, [open, allMenu]);
+
+  const handleSearchActivity = (search) => {
+    const filtered = allMenu.filter((item) => item.name?.toLowerCase().includes(search.toLowerCase()));
+    setSearched(filtered);
+  };
+
+  useEffect(() => {
+    handleSearchActivity(searchText);
+  }, [searchText]);
+
+  const inputRef = useRef(null);
+
+  const handleBoxClick = () => {
+    inputRef.current?.focus();
+  };
+
+  const handleNavigation = (selectedOption) => {
+    if (!selectedOption) return;
+
+    const data = selectedOption;
+    let path = GeneralUtil.naviagationFunc(data);
+    // is ekavach then only open in new tab
+    if (path.includes('report/view/')) {
+      if (GeneralUtil.isEkavach) {
+        window.open(`/ui/${path}`, '_blank');
+      } else {
+        navigate(path);
+      }
+    } else {
+      navigate(path);
+    }
+    setSearchText('');
+    handleClose();
+    setRecentSearches((prev) => {
+      const isDuplicate = prev.some((item) => item.selectedOption?.navigationState === selectedOption?.navigationState);
+      if (isDuplicate) {
+        return prev;
+      }
+      return [
+        {
+          selectedOption,
+          title: selectedOption?.label,
+          description: selectedOption?.navigationState?.replace(/\./g, ' / '),
+        },
+        ...prev,
+      ];
+    });
+  };
+
+  return (
+    <Modal open={open} onClose={handleClose}>
+      <Box
+        className="absolute top-[10%] left-1/2 transform -translate-x-1/2 w-[90%] max-w-2xl p-2 pt-0 h-[50vh] outline-none flex flex-col"
+        sx={(theme) => ({
+          background:
+            theme.palette.mode === 'dark' ? alpha(theme.palette.background.paper, 0.96) : 'rgba(255, 255, 255, 0.96)',
+          border: `1px solid ${theme.palette.custom?.shellBorder}`,
+          borderRadius: '24px',
+          boxShadow:
+            theme.palette.mode === 'dark' ? '0 28px 60px rgba(2, 8, 23, 0.55)' : '0 28px 60px rgba(15, 23, 42, 0.18)',
+          backdropFilter: 'blur(20px)',
+        })}
+      >
+        {/* Search input */}
+        <Box className="flex items-center border-b  cursor-pointer" onClick={handleBoxClick}>
+          <FontAwesomeIcon icon={faMagnifyingGlass} className="text-gray-400 mr-1" />
+          <Autocomplete
+            fullWidth
+            options={searched.map((data) => ({
+              ...data,
+              label: data.groupName
+                ? `${data.name} (${data.groupName}${data.subGroupName ? ' > ' + data.subGroupName : ''})`
+                : data.name,
+            }))}
+            value={searchText}
+            onInputChange={(_, newInputValue) => {
+              setSearchText(newInputValue);
+            }}
+            onChange={(_, selectedOption) => {
+              handleNavigation(selectedOption);
+            }}
+            disableClearable
+            popupIcon={null}
+            noOptionsText="No Results"
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                placeholder="Search…"
+                size="small"
+                fullWidth
+                inputRef={inputRef}
+                variant="standard" // Or use "outlined" if you still want a minimal box
+                autoFocus
+                slotProps={{
+                  input: {
+                    ...params.InputProps,
+                    disableUnderline: true, // removes underline for standard variant
+                    sx: {
+                      cursor: 'pointer',
+                      '&:hover': {
+                        cursor: 'pointer',
+                      },
+                      border: 'none',
+                      outline: 'none',
+                      boxShadow: 'none',
+                      backgroundColor: 'tranparent',
+                    },
+                  },
+                }}
+                sx={{
+                  border: 'none',
+                  '& .MuiOutlinedInput-root': {
+                    '& fieldset': { border: 'none' }, // for outlined variant
+                    '&:hover fieldset': { border: 'none' },
+                  },
+                }}
+              />
+            )}
+            renderOption={(props, data) => (
+              <MenuItem
+                {...props}
+                key={data.id}
+                value={data}
+                className="w-full whitespace-normal"
+                sx={{ padding: '8px 16px !important' }}
+                data-testid="searchbar-menuitem"
+              >
+                {data.groupName ? (
+                  <Box className="">
+                    {data.name}{' '}
+                    <small>
+                      ( {data.groupName}
+                      {data.subGroupName && ' > ' + data.subGroupName} )
+                    </small>
+                  </Box>
+                ) : (
+                  data.name
+                )}
+              </MenuItem>
+            )}
+            slotProps={{
+              paper: {
+                sx: {
+                  width: '103.5%',
+                  ml: '-3%',
+                  // zIndex: 1300,
+                },
+              },
+              listbox: {
+                sx: {
+                  padding: '0px !important',
+                },
+              },
+              popper: {
+                modifiers: [
+                  {
+                    name: 'offset',
+                    options: {
+                      offset: [0, 5],
+                    },
+                  },
+                ],
+              },
+            }}
+          />
+        </Box>
+
+        <Typography variant="subtitle1" className="mt-4 mb-2 text-gray-600 font-medium">
+          Recent Searches
+        </Typography>
+        <div className="flex-1 overflow-y-auto pr-1">
+          {recentSearches.map((item, index) => (
+            <Grid
+              container
+              alignItems="flex-start"
+              spacing={2}
+              key={index}
+              className="py-2 hover:bg-gray-100 rounded-lg cursor-pointer"
+              onClick={() => {
+                handleNavigation(item?.selectedOption);
+              }}
+            >
+              <Grid item>
+                <Avatar className="bg-gray-200 text-gray-600">
+                  <FontAwesomeIcon icon={faMagnifyingGlass} className="text-gray-400" />
+                </Avatar>
+              </Grid>
+              <Grid item xs>
+                <Typography className="font-medium text-black">{item.title}</Typography>
+                <Typography className="text-sm text-gray-500">
+                  {item.description ? item.description.split('(')[0].trim() : 'NA'}
+                </Typography>
+              </Grid>
+            </Grid>
+          ))}
+        </div>
+      </Box>
+    </Modal>
+  );
+});
+
+const CustomPopper = function CustomPopper(props) {
+  return (
+    <Popper
+      {...props}
+      placement="bottom-end"
+      sx={{
+        '& .MuiPaper-root': {
+          transformOrigin: 'top center',
+          // eslint-disable-next-line react/prop-types
+          animation: props.open ? 'searchResultsIn 220ms cubic-bezier(0.25, 0.9, 0.3, 1)' : 'none',
+        },
+        '@keyframes searchResultsIn': {
+          '0%': {
+            opacity: 0,
+            transform: 'translateY(-4px) scale(0.992)',
+          },
+          '100%': {
+            opacity: 1,
+            transform: 'translateY(0) scale(1)',
+          },
+        },
+      }}
+    />
+  );
+};
+
+const Navbar = ({ user, setOrientation, orientation }) => {
+  const searchContainerRef = useRef(null);
+  const { i18n } = useTranslation();
+  const [modalIndex, setModalIndex] = useState(false);
+  const personilizedThemes = useSelector((state) => state.theme.personilizedThemes);
+  const canUpdatePersonilzedTheme = useSelector((state) => state.theme.canSetPersonilisedTheme);
+  const trackEvent = useTrackEvent();
+  const [allMenu, setAllMenu] = useState([]);
+  const [language, setLanguage] = useState(getLanguageIdFromStorage());
+  const [availableLanguage, setAvailableLanguage] = useState([]);
+  const [searchText, setSearchText] = useState('');
+  const [searched, setSearched] = useState([]);
+  const [searchModalOpen, setSearchModalOpen] = useState(false);
+  const [profileModal, setProfileModal] = useState(false);
+  const [logoutOpen, setLogoutOpen] = useState(false);
+  const [recentSearches, setRecentSearches] = useState([]);
+  const [uiSettingsExpanded, setUiSettingsExpanded] = useState(false);
+  const dispatch = useDispatch();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const navigate = useNavigate();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const { translate } = useTranslateProvider();
+  const { pageTitle, translations, languageMap } = useSelector((state) => state.Translation);
+  const { user: userData, headerTitle } = useSelector((state) => state.Authenticate);
+  console.log(userData);
+  
+  const mode = useSelector((state) => state.theme.mode);
+  const inputRef = useRef(null);
+  const translationRequestRef = useRef(new Set());
+
+  const handleNavigation = (selectedOption) => {
+    if (!selectedOption) return;
+
+    const data = selectedOption;
+    let path = GeneralUtil.naviagationFunc(data);
+    // is ekavach then only open in new tab
+    if (path.includes('report/view/')) {
+      if (GeneralUtil.isEkavach) {
+        window.open(`/ui/${path}`, '_blank');
+      } else {
+        navigate(path);
+      }
+    } else {
+      navigate(path);
+    }
+    inputRef.current?.blur();
+    setIsExpanded(false);
+    setSearchText('');
+    handleClose();
+    setRecentSearches((prev) => {
+      const isDuplicate = prev.some((item) => item.selectedOption?.navigationState === selectedOption?.navigationState);
+      if (isDuplicate) {
+        return prev;
+      }
+      return [
+        {
+          selectedOption,
+          title: selectedOption?.label,
+          description: selectedOption?.navigationState?.replace(/\./g, ' / '),
+        },
+        ...prev,
+      ];
+    });
+  };
+
+  useEffect(() => {
+    const sendToken = async () => {
+      try {
+        const firebaseToken = await enablePushNotifications();
+        const savedToken = localStorage.getItem('firebaseToken');
+
+        // Insert only if it's a new or changed token
+        if (firebaseToken && firebaseToken !== savedToken && GeneralUtil.isBahaar) {
+          await execute({
+            code: 'TOKEN_INSERTION',
+            parameters: { token: firebaseToken },
+          });
+          localStorage.setItem('firebaseToken', firebaseToken);
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    sendToken();
+  }, []);
+
+  const handleToggle = () => {
+    dispatch(toggleTheme());
+  };
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const openUpdateProfileModal = () => {
+    trackEvent('button_click', {
+      button_name: 'update_profile',
+      button_type: 'menu',
+      button_id: 'navbar-update-profile-button',
+    });
+    setProfileModal(true);
+  };
+  const handleCloseProfileModal = () => {
+    trackEvent('button_click', {
+      button_name: 'update_profile_cancel_button',
+      button_type: 'cancel',
+      button_id: 'updateprofilemodal-button-cancel',
+    });
+    setProfileModal(false);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  // Opens the logout confirmation modal (and closes the profile menu).
+  const handleLogout = () => {
+    setAnchorEl(null);
+    setLogoutOpen(true);
+  };
+
+  // Clears the session and returns to the landing page. Kept separate so it can run after the
+  // goodbye animation has had a moment to play.
+  const finishLogout = () => {
+    clearAllExceptPinned();
+    dispatch(resetStore());
+    dispatch(setTheme('light'));
+    sessionStorage.clear();
+    navigate('/');
+  };
+
+  // Confirmed from the modal: log the event, call the logout API while the token is still present,
+  // then let the goodbye animation play briefly before clearing the session and navigating away.
+  const confirmLogout = async () => {
+    try {
+      await trackEvent('session_end', { buttonName: 'Logout' });
+      await trackEvent('button_click', {
+        button_name: 'logout',
+        button_type: 'menu',
+        button_id: 'navbar-logout-button',
+      });
+      await logout({ clientId: 'imtecho-ui' });
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setTimeout(finishLogout, 1600);
+    }
+  };
+
+  const handleSearchActivity = (search) => {
+    const searched = allMenu.filter((item) => item.name?.toLowerCase().includes(search.toLowerCase()));
+    debouncedTrackSearch(search, searched.length);
+    setSearched(searched);
+  };
+  useEffect(() => {
+    handleSearchActivity(searchText);
+  }, [searchText]);
+  const debounce = (func, delay) => {
+    let timeoutId;
+    return (...args) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => func(...args), delay);
+    };
+  };
+  const debouncedTrackSearch = useCallback(
+    debounce((search, resultCount) => {
+      trackEvent('search_tracking', { searchTerm: search, results_count: resultCount, search_type: 'Global Search' });
+    }, 300),
+    [user] // Dependencies: empty because we don't want it to change
+  );
+  useEffect(() => {
+    let allMenu = [];
+    Object.entries(user?.features || {}).forEach(([key, element]) => {
+      // const isDuplicate = (name) => allMenu.some((item) => item.name === name);
+      const processItems = (items, groupName, subGroupName = null) => {
+        items.forEach((item) => {
+          if (item.isGroup || item.isSubGroup) {
+            if (item.subGroups && item.subGroups.length > 0) {
+              processItems(item.subGroups, groupName, item.name);
+            }
+          } else {
+            if (item.navigationState) {
+              allMenu.push({
+                ...item,
+                groupName: groupName,
+                ...(subGroupName && { subGroupName: subGroupName }),
+              });
+            }
+          }
+        });
+      };
+
+      processItems(element, key);
+    });
+    setAllMenu(allMenu);
+    setSearched(allMenu);
+  }, [user?.features]);
+
+  const loadTranslation = useCallback(
+    async (languageId, languages = availableLanguage) => {
+      if (!languageId || languages.length === 0 || !pageTitle) {
+        return;
+      }
+
+      try {
+        const selectedLanguage = languages.find((item) => Number(item.id) === Number(languageId));
+        const languageKey = getLanguageKey(selectedLanguage) || languageMap[languageId];
+
+        if (!languageKey) {
+          return;
+        }
+
+        const keys = Object.keys(translations[languageKey] || {});
+        if (keys.some((key) => key.includes(pageTitle))) {
+          dispatch(setTranslationLanguage(languageKey));
+          localStorage.setItem('translation_language', languageId);
+          return;
+        }
+
+        const requestKey = `${languageId}:${pageTitle}`;
+        if (translationRequestRef.current.has(requestKey)) {
+          return;
+        }
+        translationRequestRef.current.add(requestKey);
+
+        const { data } = await execute({
+          code: 'translation_from_language_key_namespace',
+          parameters: {
+            languageId,
+            appId: 2,
+            namespace: pageTitle,
+          },
+        });
+
+        const langData = data?.result?.reduce((acc, curr) => {
+          acc[curr.key] = curr.value;
+          return acc;
+        }, {});
+
+        dispatch(setTranslation({ langKey: languageKey, namespace: pageTitle, keys: langData }));
+        dispatch(setTranslationLanguage(languageKey));
+        localStorage.setItem('translation_language', languageId);
+      } catch (error) {
+        console.error(error);
+        translationRequestRef.current.delete(`${languageId}:${pageTitle}`);
+      }
+    },
+    [availableLanguage, dispatch, i18n, languageMap, pageTitle, translations]
+  );
+
+  useEffect(() => {
+    loadTranslation(language);
+  }, [language, loadTranslation]);
+
+  useEffect(() => {
+    const setAvailabelLang = async () => {
+      try {
+        const cachedLangs = localStorage.getItem('available_languages');
+        let activeLang;
+
+        if (cachedLangs) {
+          activeLang = JSON.parse(cachedLangs);
+        } else {
+          const res = await getAllLanguages();
+          activeLang = (res?.data || [])?.filter((lang) => {
+            return lang.active === true;
+          });
+        }
+
+        activeLang = activeLang?.map((lang) => ({
+          ...lang,
+          languageKey: lang.languageKey?.toLowerCase(),
+        }));
+        localStorage.setItem('available_languages', JSON.stringify(activeLang));
+
+        const langMap = activeLang.reduce((acc, el) => {
+          acc[el.id] = getLanguageKey(el);
+          return acc;
+        }, {});
+
+        if (Object.entries(languageMap).length === 0) {
+          dispatch(setlanguageMap(langMap));
+        }
+
+        const savedLanguage = getLanguageIdFromStorage();
+        setAvailableLanguage(activeLang);
+
+        const selectedLanguage = activeLang.find((item) => Number(item.id) === Number(savedLanguage));
+        const englishLanguage = activeLang.find((item) => getLanguageKey(item) === 'en');
+        const nextLanguage = selectedLanguage || englishLanguage;
+
+        if (nextLanguage) {
+          const nextLanguageId = Number(nextLanguage.id);
+          setLanguage(nextLanguageId);
+          if (!savedLanguage || Number(savedLanguage) !== nextLanguageId) {
+            localStorage.setItem('translation_language', nextLanguage.id);
+          }
+          await loadTranslation(nextLanguageId, activeLang);
+        }
+
+        if (Object.entries(languageMap).length !== 0) {
+          const hasLanguageMapChanged = Object.entries(langMap).some(
+            ([id, languageKey]) => languageMap[id] !== languageKey
+          );
+          if (hasLanguageMapChanged) {
+            dispatch(setlanguageMap(langMap));
+          }
+        }
+      } catch (error) {
+        console.error(error);
+        showToast({ message: 'Error in getting languages', type: 'error' });
+      }
+    };
+    setAvailabelLang();
+    const handleKeyDown = (event) => {
+      if (event.ctrlKey && event.key.toLowerCase() === 'k') {
+        event.preventDefault(); // prevent browser search
+        inputRef.current.focus();
+        // handleSearchOpen();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  // const handleSearchOpen = () => {
+  //   setSearchModalOpen((curr) => !curr);
+  // };
+  const updateThemeConfigPreference = async (value) => {
+    try {
+      dispatch(setPersonilizedThemes(value));
+      await execute({
+        code: 'SET_PERSONALISED_THEME',
+        parameters: {
+          user_id: user?.id,
+          personlised: value,
+        },
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    const checkCanUpdatePersonalizedTheme = async () => {
+      try {
+        const cachedThemeExistence = localStorage.getItem('theme_existence');
+        if (cachedThemeExistence !== null) {
+          dispatch(updateCanSetPersonalizedTheme(JSON.parse(cachedThemeExistence)));
+          return;
+        }
+
+        const { data } = await execute({
+          code: 'GET_USER_THEME_EXIST',
+          parameters: {
+            user_id: user.id,
+          },
+        });
+
+        const userExists = data.result[0].user_exists;
+        dispatch(updateCanSetPersonalizedTheme(userExists));
+        localStorage.setItem('theme_existence', JSON.stringify(userExists));
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    if (user?.id) {
+      checkCanUpdatePersonalizedTheme();
+    }
+  }, [user?.id]);
+
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isOpen, setIsOpen] = useState(false); // Controls the dropdown visibility
+  const timerRef = useRef(null);
+
+  useEffect(() => {
+    if (isExpanded) {
+      timerRef.current = setTimeout(() => {
+        setIsOpen(true);
+      }, 300);
+    } else {
+      setIsOpen(false);
+    }
+    return () => clearTimeout(timerRef.current);
+  }, [isExpanded]);
+
+  const textRef = useRef(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  const checkTruncation = () => {
+    if (textRef.current) {
+      const hasTruncated = textRef.current.scrollWidth > textRef.current.clientWidth;
+      setIsTruncated(hasTruncated);
+    }
+  };
+
+  useEffect(() => {
+    checkTruncation();
+    window.addEventListener('resize', checkTruncation);
+    return () => window.removeEventListener('resize', checkTruncation);
+  }, [headerTitle]);
+
+  const profileMenuItemSx = {
+    mx: 1,
+    my: 0.35,
+    minHeight: 46,
+    borderRadius: '14px',
+    color: theme.palette.text.primary,
+    transition: 'all 180ms ease',
+    '&:hover': {
+      background: isDark ? alpha('#fff', 0.06) : alpha(theme.palette.custom?.shellAccent || '#1c6fb7', 0.08),
+    },
+  };
+
+  const profileDividerSx = {
+    my: 0.8,
+    mx: 1.4,
+    borderColor: theme.palette.custom?.shellBorder,
+    opacity: 0.9,
+  };
+
+  const profileSelectSx = {
+    minWidth: 112,
+    borderRadius: '12px',
+    backgroundColor: isDark ? alpha('#fff', 0.04) : alpha('#0f172a', 0.03),
+    '& .MuiOutlinedInput-notchedOutline': {
+      borderColor: 'transparent',
+    },
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+      borderColor: 'transparent',
+    },
+    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+      borderColor: alpha(theme.palette.custom?.shellAccent || '#1c6fb7', 0.28),
+    },
+    '& .MuiSelect-select': {
+      py: 1,
+      px: 1.25,
+      fontSize: '0.875rem',
+      color: theme.palette.text.primary,
+    },
+    '& .MuiSelect-icon': {
+      color: theme.palette.custom?.shellMuted,
+    },
+  };
+
+  const iconChipSx = {
+    minWidth: 34,
+    width: 34,
+    height: 34,
+    mr: 1.2,
+    borderRadius: '12px',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: theme.palette.text.primary,
+    background: isDark
+      ? alpha(theme.palette.custom?.shellAccent || '#4da8da', 0.18)
+      : alpha(theme.palette.custom?.shellAccent || '#1c6fb7', 0.1),
+  };
+
+  const settingCardSx = {
+    mx: 1,
+    my: 0.35,
+    p: 1.35,
+    borderRadius: '16px',
+    border: `1px solid ${theme.palette.custom?.shellBorder}`,
+    background: isDark ? alpha('#fff', 0.03) : alpha('#0f172a', 0.025),
+  };
+
+  return (
+    <>
+      <Backdrop
+        sx={{
+          color: '#fff',
+          zIndex: 1201, // High enough to cover navbar/content
+          backdropFilter: 'blur(0px)', // The blur effect
+          backgroundColor: 'rgba(0, 0, 0, 0.5)', // The semi-transparent dark tint
+        }}
+        open={isExpanded} // Only show when search is focused
+        onClick={() => {
+          // Close search if they click the dark background
+          setIsExpanded(false);
+          setIsOpen(false);
+          inputRef.current?.blur();
+        }}
+      />
+      {profileModal && (
+        <UpdateUserModal open={profileModal} onClose={handleCloseProfileModal} data-testid="navbar-updateusermodal" />
+      )}
+
+      <LogoutModal
+        open={logoutOpen}
+        userName={user?.name}
+        onCancel={() => setLogoutOpen(false)}
+        onConfirm={confirmLogout}
+      />
+
+      {modalIndex && (
+        <Suspense>
+          <ChangePasswordModal
+            open={modalIndex}
+            onClose={() => setModalIndex(false)}
+            userId={user?.id}
+            data-testid="change-password-modal"
+          />
+        </Suspense>
+      )}
+      {
+        <SearchModal
+          open={searchModalOpen}
+          handleClose={() => setSearchModalOpen(false)}
+          allMenu={allMenu}
+          navigate={navigate}
+          recentSearches={recentSearches}
+          setRecentSearches={setRecentSearches}
+          anchorRef={searchContainerRef}
+        />
+      }
+
+      <AppBar
+        position="sticky"
+        className="h-[72px]"
+        sx={{
+          zIndex: isExpanded ? 1201 : 1100,
+          transition: 'z-index 0s linear',
+          background: GeneralUtil.isBahaar
+            ? 'linear-gradient(135deg, rgba(10, 31, 74, 0.96) 0%, rgba(16, 52, 112, 0.94) 100%)'
+            : theme.palette.mode === 'dark'
+              ? alpha(theme.palette.background.default, 0.96)
+              : 'linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(246, 250, 255, 0.96) 100%)',
+          borderBottom: `1px solid ${theme.palette.custom?.shellBorder}`,
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? '0 18px 40px rgba(2, 8, 23, 0.34)'
+              : '0 16px 36px rgba(148, 163, 184, 0.16)',
+          backdropFilter: 'blur(18px)',
+        }}
+        color={'inherit'}
+      >
+        <Toolbar
+          sx={{
+            minHeight: '72px !important',
+            gap: { xs: 0.75, sm: 1, md: 1.5 },
+            paddingLeft: { xs: '8px !important', sm: '10px !important', md: '16px !important' },
+            paddingRight: { xs: '8px !important', sm: '10px !important', md: '16px !important' },
+          }}
+        >
+          <Box className="transition-opacity duration-300" sx={{ flexShrink: 0 }}>
+            <Link
+              to="/ui/medplat/dashboard/webtasks"
+              className="self-center cursor-pointer"
+              onClick={(e) => {
+                e.preventDefault();
+                trackEvent('link_click', {
+                  link_image_src: GeneralUtil.getNavbarLogo(),
+                  link_text: '',
+                  link_url: '/ui/medplat/dashboard/webtasks',
+                  link_id: 'navbar-img-banner',
+                });
+                navigate('/ui/medplat/dashboard/webtasks');
+              }}
+            >
+              <img
+                src={GeneralUtil.getNavbarLogo()}
+                className="h-8 sm:h-10"
+                alt="banner"
+                data-testid="navbar-img-banner"
+              />
+            </Link>
+          </Box>
+
+          <Divider
+            orientation="vertical"
+            className="transition-opacity duration-300"
+            flexItem
+            sx={{
+              display: { xs: 'none', sm: 'block' },
+              mx: { sm: 1, md: 1.5 },
+              height: '42px',
+              borderColor: GeneralUtil.isBahaar ? 'rgba(255,255,255,0.14)' : theme.palette.custom?.shellBorder,
+            }}
+          />
+
+          <Tooltip
+            title={headerTitle || ''}
+            arrow
+            // This is the magic line: it disables the tooltip if not truncated
+            disableHoverListener={!isTruncated}
+          >
+            <Typography
+              ref={textRef}
+              variant="h6"
+              className="transition-opacity duration-300 truncate"
+              sx={{
+                display: { xs: 'none', sm: 'block' },
+                color: GeneralUtil.isBahaar ? '#fff' : isDark ? theme.palette.text.primary : '#20324d',
+                fontWeight: 700,
+                letterSpacing: '-0.02em',
+                width: { sm: '18vw', md: '18vw' },
+                minWidth: { sm: '120px', md: '180px' },
+              }}
+            >
+              {headerTitle}
+            </Typography>
+          </Tooltip>
+          {/* <Divider
+            orientation="vertical"
+            className="bg-white transition-opacity duration-300"
+            flexItem
+            sx={{ mx: 2, height: '59px', opacity: isExpanded ? 0.1 : 1 }}
+          /> */}
+          {/* {!GeneralUtil.isBahaar && (
+            <Grid
+              ref={searchContainerRef}
+              className="ml-5 mt-1 text-gray-500 italic cursor-pointer w-[20%] flex items-center"
+              onClick={handleSearchOpen}
+            >
+              <FontAwesomeIcon icon={faMagnifyingGlass} className="pr-2" />
+              <span>Ctrl+k or Search..</span>
+            </Grid>
+          )} */}
+
+          {!isMobile && (
+            <Box
+              className="flex justify-end mr-2 ml-2"
+              sx={{
+                position: 'relative',
+                flex: 1,
+                minWidth: 0,
+                maxWidth: { xs: 'none', md: '560px' },
+                marginLeft: { xs: 0.5, sm: 0.75, md: 0.5 },
+                marginRight: { xs: 0.5, sm: 0.75, md: 0.5 },
+              }}
+            >
+              <Autocomplete
+                className="transition-all duration-300 ease-in-out w-full"
+                open={isOpen}
+                onOpen={() => {
+                  if (!isExpanded) setIsExpanded(true);
+                }}
+                onClose={(event, reason) => {
+                  if (reason === 'blur' || reason === 'escape') {
+                    setIsOpen(false);
+                    if (!searchText) setIsExpanded(false);
+                  }
+                }}
+                slots={{
+                  popper: CustomPopper,
+                }}
+                fullWidth
+                options={searched.map((data) => ({
+                  ...data,
+                  label: data.groupName
+                    ? `${data.name} (${data.groupName}${data.subGroupName ? ' > ' + data.subGroupName : ''})`
+                    : data.name,
+                }))}
+                value={searchText}
+                onInputChange={(_, newInputValue) => {
+                  setSearchText(newInputValue);
+                }}
+                onChange={(_, selectedOption) => {
+                  handleNavigation(selectedOption);
+                }}
+                disableClearable
+                popupIcon={null}
+                noOptionsText="No Results"
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    placeholder="Search…"
+                    size="small"
+                    fullWidth
+                    inputRef={inputRef}
+                    onFocus={() => setIsExpanded(true)}
+                    onBlur={() => {
+                      setSearchText('');
+                      setIsExpanded(false);
+                    }}
+                    slotProps={{
+                      input: {
+                        ...params.InputProps,
+                        disableUnderline: true,
+                        endAdornment: (
+                          <InputAdornment position="end" className="">
+                            <FontAwesomeIcon icon={faMagnifyingGlass} className="text-gray-400 " />
+                          </InputAdornment>
+                        ),
+                        sx: {
+                          zIndex: 9999,
+                          cursor: 'pointer',
+                          background: GeneralUtil.isBahaar
+                            ? 'rgba(255,255,255,0.96)'
+                            : theme.palette.mode === 'dark'
+                              ? alpha(theme.palette.common.white, 0.06)
+                              : alpha(theme.palette.common.white, 0.92),
+                          color: theme.palette.text.primary,
+                          borderRadius: '18px',
+                          minHeight: { xs: '40px', sm: '46px' },
+                          paddingRight: '14px !important',
+                          paddingLeft: '4px',
+                          boxShadow: isExpanded
+                            ? theme.palette.mode === 'dark'
+                              ? '0 10px 22px rgba(2, 8, 23, 0.22), inset 0 1px 0 rgba(255,255,255,0.05)'
+                              : '0 14px 28px rgba(148, 163, 184, 0.18)'
+                            : theme.palette.mode === 'dark'
+                              ? 'inset 0 1px 0 rgba(255,255,255,0.03)'
+                              : '0 14px 26px rgba(148, 163, 184, 0.16)',
+                          border: `1px solid ${theme.palette.custom?.shellBorder}`,
+                          transform: isExpanded ? 'translateY(-0.5px) scale(1.004)' : 'translateY(0) scale(1)',
+                          transition:
+                            'transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease',
+                          '&:hover': {
+                            cursor: 'pointer',
+                          },
+                        },
+                      },
+                    }}
+                    sx={{
+                      '& .MuiOutlinedInput-root': {
+                        borderRadius: '18px',
+                        '& fieldset': {
+                          border: 'none',
+                        },
+                      },
+                      '& .MuiInputBase-input::placeholder': {
+                        opacity: 1,
+                        color: theme.palette.custom?.shellMuted,
+                      },
+                    }}
+                  />
+                )}
+                renderOption={(props, data) => (
+                  <MenuItem
+                    {...props}
+                    key={data.id}
+                    value={data}
+                    className="w-full whitespace-normal border-b border-gray-300 last:border-none"
+                    sx={{
+                      padding: '8px 16px !important',
+                      transition: 'background-color 140ms ease',
+                    }}
+                    data-testid="searchbar-menuitem"
+                  >
+                    {data.groupName ? (
+                      <Box className="">
+                        {data.name}{' '}
+                        <small>
+                          ( {data.groupName}
+                          {data.subGroupName && ' > ' + data.subGroupName} )
+                        </small>
+                      </Box>
+                    ) : (
+                      data.name
+                    )}
+                  </MenuItem>
+                )}
+                slotProps={{
+                  paper: {
+                    sx: {
+                      marginTop: '8px !important',
+                      borderRadius: '18px !important',
+                      border: `1px solid ${theme.palette.custom?.shellBorder}`,
+                      background: theme.palette.mode === 'dark' ? theme.palette.background.paper : '#ffffff',
+                      boxShadow:
+                        theme.palette.mode === 'dark'
+                          ? '0 24px 48px rgba(2, 8, 23, 0.45)'
+                          : '0 20px 44px rgba(148, 163, 184, 0.22)',
+                      overflow: 'hidden',
+                    },
+                  },
+                  listbox: {
+                    sx: {
+                      padding: '0px !important',
+                      overflowX: 'hidden',
+                    },
+                  },
+                }}
+              />
+            </Box>
+          )}
+          <Typography variant="h3" noWrap className="grow"></Typography>
+          {isMobile && (
+            <IconButton
+              onClick={() => setSearchModalOpen(true)}
+              sx={{
+                width: 40,
+                height: 40,
+                borderRadius: '50%',
+                background: isDark ? alpha('#fff', 0.12) : alpha('#000', 0.08),
+                color: GeneralUtil.isBahaar ? '#fff' : theme.palette.text.primary,
+                '&:hover': {
+                  background: isDark ? alpha('#fff', 0.1) : alpha('#000', 0.1),
+                },
+                ml: 1,
+              }}
+            >
+              <FontAwesomeIcon icon={faMagnifyingGlass} size="sm" />
+            </IconButton>
+          )}
+
+          <Box className="flex flex-row items-center text-center" sx={{ opacity: isExpanded ? 0.1 : 1, flexShrink: 0 }}>
+            <Tooltip title="Account settings">
+              <ButtonBase
+                onClick={handleClick}
+                size="small"
+                className="ml-1 sm:ml-2 p-2"
+                aria-controls={open ? 'account-menu' : undefined}
+                aria-haspopup="true"
+                aria-expanded={open ? 'true' : undefined}
+                data-testid="navbar-buttonbase-account"
+                sx={{
+                  borderRadius: '999px',
+                  padding: { xs: '6px 8px', sm: '7px 10px' },
+                  background: GeneralUtil.isBahaar
+                    ? 'rgba(255,255,255,0.12)'
+                    : theme.palette.mode === 'dark'
+                      ? 'rgba(15, 23, 42, 0.7)'
+                      : 'rgba(255,255,255,0.94)',
+                  boxShadow:
+                    theme.palette.mode === 'dark'
+                      ? '0 10px 24px rgba(2, 8, 23, 0.18)'
+                      : '0 10px 24px rgba(148, 163, 184, 0.12)',
+                  backdropFilter: 'blur(14px)',
+                  transition: 'transform 180ms ease, box-shadow 180ms ease, background 180ms ease',
+                  '&:hover': {
+                    transform: 'translateY(-1px)',
+                    boxShadow:
+                      theme.palette.mode === 'dark'
+                        ? '0 14px 30px rgba(2, 8, 23, 0.22)'
+                        : '0 14px 30px rgba(148, 163, 184, 0.16)',
+                  },
+                }}
+              >
+                <Typography
+                  variant="body2"
+                  className="mr-2"
+                  sx={{
+                    display: { xs: 'none', sm: 'block' },
+                    color: GeneralUtil.isBahaar ? '#ffffff' : theme.palette.text.primary,
+                    fontWeight: 700,
+                    maxWidth: '120px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {user?.name}
+                </Typography>
+                <Avatar
+                  sx={{
+                    width: 34,
+                    height: 34,
+                    background: GeneralUtil.isBahaar
+                      ? 'linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.12) 100%)'
+                      : `linear-gradient(135deg, ${theme.palette.custom?.shellAccent} 0%, #3f8ec6 100%)`,
+                    color: '#fff',
+                    fontWeight: 700,
+                    boxShadow:
+                      theme.palette.mode === 'dark'
+                        ? '0 8px 18px rgba(2, 8, 23, 0.24)'
+                        : '0 8px 18px rgba(63, 142, 198, 0.22)',
+                  }}
+                  data-testid="navbar-avatar"
+                >
+                  <Typography variant="body2">{user?.name?.charAt(0)}</Typography>
+                </Avatar>
+                <Box
+                  component="span"
+                  sx={{
+                    display: { xs: 'none', sm: 'inline-flex' },
+                    alignItems: 'center',
+                  }}
+                >
+                  <FontAwesomeIcon
+                    icon={faChevronDown}
+                    className="ml-2"
+                    style={{
+                      color: GeneralUtil.isBahaar ? '#ffffff' : theme.palette.custom?.shellMuted,
+                    }}
+                    data-testid="navbar-expandmoreicon"
+                  />
+                </Box>
+              </ButtonBase>
+            </Tooltip>
+          </Box>
+          <Menu
+            anchorEl={anchorEl}
+            id="account-menu"
+            open={open}
+            onClose={handleClose}
+            onClick={handleClose}
+            slotProps={{
+              paper: {
+                className: 'bg-secondary-theme text-primary-text',
+                elevation: 0,
+                sx: {
+                  minWidth: 320,
+                  maxHeight: '90vh',
+                  mt: 1.5,
+                  overflow: 'visible',
+                  borderRadius: '24px',
+                  border: `1px solid ${theme.palette.custom?.shellBorder}`,
+                  background:
+                    theme.palette.mode === 'dark'
+                      ? alpha(theme.palette.background.paper, 0.96)
+                      : 'rgba(255, 255, 255, 0.96)',
+                  boxShadow:
+                    theme.palette.mode === 'dark'
+                      ? '0 24px 48px rgba(2, 8, 23, 0.42)'
+                      : '0 20px 44px rgba(148, 163, 184, 0.2)',
+                  backdropFilter: 'blur(18px)',
+                  '& .MuiMenuItem-root': profileMenuItemSx,
+                  '& .MuiAvatar-root': {
+                    width: 30,
+                    height: 30,
+                    ml: -0.5,
+                    mr: 1,
+                  },
+                },
+              },
+              list: {
+                sx: {
+                  padding: '12px 0',
+                },
+              },
+            }}
+            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          >
+            <div
+              style={{
+                maxHeight: '85vh',
+                overflowY: 'auto',
+              }}
+            >
+              <MenuItem data-testid="navbar-update-profile-button" onClick={openUpdateProfileModal}>
+                <Avatar
+                  sx={{
+                    background: `linear-gradient(135deg, ${theme.palette.custom?.shellAccent} 0%, ${
+                      isDark ? '#3f8ec6' : '#6ab6e8'
+                    } 100%)`,
+                    color: '#fff',
+                    fontWeight: 700,
+                  }}
+                >
+                  {user?.name?.charAt(0)}
+                </Avatar>
+                <Box>
+                  <Typography variant="body2" sx={{ fontWeight: 700 }}>
+                    {translate('Profile')}
+                  </Typography>
+                  <Typography variant="caption" sx={{ color: theme.palette.custom?.shellMuted }}>
+                    {user?.name}
+                  </Typography>
+                </Box>
+              </MenuItem>
+              <Divider sx={profileDividerSx} />
+              <MenuItem className="flex items-center gap-2">
+                <Typography variant="body2" sx={{ fontWeight: 600, paddingLeft: '8px' }}>
+                  {'Language Preference'}
+                </Typography>
+                <Select
+                  fullWidth
+                  id="language-selector"
+                  value={language}
+                  onChange={(e) => {
+                    setLanguage(e.target.value);
+                  }}
+                  className="text-primary-text"
+                  sx={profileSelectSx}
+                  MenuProps={{
+                    MenuListProps: {
+                      className: 'bg-secondary-theme text-primary-text',
+                    },
+                  }}
+                  size="small"
+                >
+                  {availableLanguage?.map((lang, key) => {
+                    return (
+                      <MenuItem key={key + 1} value={parseInt(lang?.id)}>
+                        <Typography variant="body2">{lang?.languageValue} </Typography>
+                      </MenuItem>
+                    );
+                  })}
+                </Select>
+              </MenuItem>
+
+              <Divider sx={profileDividerSx} />
+
+              <Accordion
+                expanded={uiSettingsExpanded}
+                onChange={(e, expanded) => setUiSettingsExpanded(expanded)}
+                onClick={(e) => e.stopPropagation()}
+                elevation={0}
+                disableGutters
+                sx={{
+                  background: 'transparent',
+                  '&:before': { display: 'none' },
+                }}
+              >
+                <AccordionSummary
+                  expandIcon={<FontAwesomeIcon icon={faChevronDown} className="w-4 h-4" />}
+                  sx={{
+                    mx: 1,
+                    my: 0.35,
+                    minHeight: '46px !important',
+                    borderRadius: '14px',
+                    color: theme.palette.text.primary,
+                    transition: 'all 180ms ease',
+                    px: '16px !important',
+                    '&:hover': {
+                      background: isDark
+                        ? alpha('#fff', 0.06)
+                        : alpha(theme.palette.custom?.shellAccent || '#1c6fb7', 0.08),
+                    },
+                    '&.Mui-expanded': {
+                      minHeight: '46px !important',
+                    },
+                    '& .MuiAccordionSummary-content': {
+                      margin: '0 !important',
+                      display: 'flex',
+                      alignItems: 'center',
+                    },
+                    '& .MuiAccordionSummary-content.Mui-expanded': {
+                      margin: '0 !important',
+                    },
+                    '& .MuiAccordionSummary-expandIconWrapper': {
+                      color: theme.palette.custom?.shellMuted,
+                      marginRight: '20px',
+                    },
+                  }}
+                >
+                  <ListItemIcon sx={iconChipSx}>
+                    <FontAwesomeIcon icon={faSliders} className="w-4.5 h-4.5" />
+                  </ListItemIcon>
+                  <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                    {'Visual Preferences'}
+                  </Typography>
+                </AccordionSummary>
+
+                <AccordionDetails sx={{ px: 0, py: 1 }}>
+                  <FontSizeSelectorWrapper />
+
+                  {canUpdatePersonilzedTheme && (
+                    <>
+                      <Divider sx={profileDividerSx} />
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          px: 3,
+                          py: 1.5,
+                        }}
+                      >
+                        <Typography sx={{ fontWeight: 600, color: theme.palette.text.primary, fontSize: '0.875rem' }}>
+                          {'Personalized Theme'}
+                        </Typography>
+                        <Switch
+                          checked={personilizedThemes}
+                          onChange={(e) => updateThemeConfigPreference(e.target.checked)}
+                          color="primary"
+                        />
+                      </Box>
+                    </>
+                  )}
+
+                  <Divider sx={profileDividerSx} />
+
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 1.2,
+                      px: 3,
+                      py: 1.5,
+                    }}
+                  >
+                    <Typography sx={{ fontWeight: 600, color: theme.palette.text.primary, fontSize: '0.875rem' }}>
+                      {'Sidebar Orientation'}
+                    </Typography>
+                    <Select
+                      fullWidth
+                      value={orientation}
+                      sx={profileSelectSx}
+                      size="small"
+                      onChange={(e) => {
+                        localStorage.setItem('sideBarOrientation', e.target.value);
+                        return setOrientation(e.target.value);
+                      }}
+                      className="text-primary-text"
+                      MenuProps={{
+                        MenuListProps: {
+                          className: 'bg-secondary-theme text-primary-text',
+                        },
+                      }}
+                    >
+                      <MenuItem value="horizontal">
+                        <Typography variant="body2">{'Horizontal'} </Typography>
+                      </MenuItem>
+                      <MenuItem value="vertical">
+                        <Typography variant="body2">{'Vertical'} </Typography>
+                      </MenuItem>
+                    </Select>
+                  </Box>
+
+                  <Divider sx={profileDividerSx} />
+
+                  <Box sx={{ ...settingCardSx, mt: 1.5 }}>
+                    <Box className="flex items-start justify-between gap-3">
+                      <Box sx={{ minWidth: 0 }}>
+                        <Typography
+                          variant="body2"
+                          sx={{ fontWeight: 700, color: theme.palette.text.primary, paddingLeft: '8px' }}
+                        >
+                          Theme
+                        </Typography>
+                        <Typography
+                          variant="caption"
+                          sx={{ color: theme.palette.custom?.shellMuted, paddingLeft: '8px' }}
+                        >
+                          Choose the interface appearance
+                        </Typography>
+                      </Box>
+                      {userData?.roleName === 'Argus Admin' && (
+                        <ListItemIcon
+                          data-testid="navbar-manage-theme-button"
+                          onClick={() => {
+                            handleClose();
+                            navigate('/ui/medplat/manage/theme');
+                          }}
+                          className="cursor-pointer min-w-0"
+                          sx={{ ...iconChipSx, mr: 0, flexShrink: 0 }}
+                        >
+                          <FontAwesomeIcon icon={faGear} />
+                        </ListItemIcon>
+                      )}
+                    </Box>
+
+                    <Box className="flex items-center gap-2 mt-3">
+                      <Select
+                        fullWidth
+                        value={mode}
+                        size="small"
+                        onChange={handleToggle}
+                        className="bg-secondary-theme text-primary-text"
+                        sx={{ ...profileSelectSx, minWidth: 120 }}
+                        MenuProps={{
+                          MenuListProps: {
+                            className: 'bg-secondary-theme text-primary-text',
+                          },
+                        }}
+                      >
+                        <MenuItem value="dark">
+                          <Typography variant="body2">Dark Mode</Typography>
+                        </MenuItem>
+                        <MenuItem value="light">
+                          <Typography variant="body2">Light Mode</Typography>
+                        </MenuItem>
+                      </Select>
+                      <Box
+                        sx={{
+                          px: 1,
+                          py: 0.7,
+                          borderRadius: '12px',
+                          background: isDark
+                            ? alpha(theme.palette.custom?.shellAccent || '#4da8da', 0.18)
+                            : alpha(theme.palette.custom?.shellAccent || '#1c6fb7', 0.1),
+                          color: theme.palette.text.primary,
+                          fontSize: '0.72rem',
+                          fontWeight: 700,
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {mode === 'dark' ? 'Dark' : 'Light'}
+                      </Box>
+                    </Box>
+                  </Box>
+
+                  <Divider sx={profileDividerSx} />
+                  {['argusadmin', 'medplatadmin'].includes(userData?.roleCode) && (
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        px: 3,
+                        py: 1.5,
+                        cursor: 'pointer',
+                        '&:hover': {
+                          backgroundColor: isDark ? alpha('#fff', 0.04) : alpha('#0f172a', 0.03),
+                        }
+                      }}
+                      onClick={() => {
+                        handleClose();
+                        navigate('/ui/medplat/login-configurator');
+                      }}
+                    >
+                      <Typography sx={{ fontWeight: 600, color: theme.palette.text.primary, fontSize: '0.875rem' }}>
+                        {'Login Configurator'}
+                      </Typography>
+                      <FontAwesomeIcon icon={faChevronRight} style={{ color: theme.palette.custom?.shellMuted || '#a0aec0' }} />
+                    </Box>
+                  )}
+                </AccordionDetails>
+              </Accordion>
+
+              <Divider sx={profileDividerSx} />
+              <MenuItem
+                onClick={() => {
+                  setModalIndex(true);
+                  handleClose();
+                }}
+              >
+                <ListItemIcon sx={iconChipSx}>
+                  <FontAwesomeIcon icon={faKey} className="w-4.5 h-4.5" />
+                </ListItemIcon>
+                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                  {translate('Change Password')}
+                </Typography>
+              </MenuItem>
+
+              {GeneralUtil.isTecho && (
+                <>
+                  <Divider sx={profileDividerSx} />
+                  <MenuItem
+                    onClick={() => {
+                      handleClose();
+                      navigate('/ui/medplat/manage/holidayList');
+                    }}
+                  >
+                    <ListItemIcon sx={iconChipSx}>
+                      <FontAwesomeIcon icon={faCalendarDays} className="w-4.5 h-4.5" />
+                    </ListItemIcon>
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                      {translate('Holiday List')}
+                    </Typography>
+                  </MenuItem>
+                  <MenuItem
+                    onClick={() => {
+                      handleClose();
+                      navigate('/ui/medplat/manage/faqList');
+                    }}
+                  >
+                    <ListItemIcon sx={iconChipSx}>
+                      <FontAwesomeIcon icon={faQuestionCircle} className="w-4.5 h-4.5" />
+                    </ListItemIcon>
+                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                      {translate('FAQs')}
+                    </Typography>
+                  </MenuItem>
+                  <MenuItem
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'flex-start',
+                      px: '16px !important',
+                      py: '12px !important',
+                      '&:hover': { backgroundColor: 'transparent !important' },
+                      cursor: 'default',
+                    }}
+                  >
+                    <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', mb: 0.5 }}>
+                      <ListItemIcon sx={iconChipSx}>
+                        <FontAwesomeIcon icon={faPhone} className="w-4.5 h-4.5" />
+                      </ListItemIcon>
+                      <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                        {translate('Contact Us')}
+                      </Typography>
+                    </Box>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        pl: '42px',
+                        color: theme.palette.custom?.shellMuted,
+                        whiteSpace: 'normal',
+                        maxWidth: '220px',
+                        lineHeight: 1.4,
+                      }}
+                    >
+                      Additional Director (FW) Office, Block No. 5/2, Dr. Jivraj Mehta Bhavan, Gandhinagar - 382010
+                    </Typography>
+                  </MenuItem>
+                </>
+              )}
+              {user?.userLastLogin && (
+                <>
+                  <Divider sx={profileDividerSx} />
+                  <MenuItem>
+                    <Typography variant="body2" sx={{ color: theme.palette.custom?.shellMuted }}>
+                      {translate('Last Login')} : {new Date(user.userLastLogin).toLocaleDateString('en-GB')}{' '}
+                      {new Date(user.userLastLogin).toLocaleTimeString('en-GB', { hour12: true })}
+                    </Typography>
+                  </MenuItem>
+                </>
+              )}
+              <Divider sx={profileDividerSx} />
+              <MenuItem data-testid="navbar-logout-button" onClick={handleLogout}>
+                <ListItemIcon
+                  sx={{
+                    ...iconChipSx,
+                    color: isDark ? '#fecaca' : '#b91c1c',
+                    background: isDark ? alpha('#ef4444', 0.14) : alpha('#ef4444', 0.1),
+                  }}
+                >
+                  <FontAwesomeIcon icon={faRightFromBracket} className="w-4.5 h-4.5" />
+                </ListItemIcon>
+                <Typography variant="body2" sx={{ fontWeight: 700 }}>
+                  {translate('Logout')}
+                </Typography>
+              </MenuItem>
+            </div>
+          </Menu>
+        </Toolbar>
+      </AppBar>
+    </>
+  );
+};
+SearchModal.propTypes = {
+  allMenu: PropTypes.arrayOf(PropTypes.object),
+  open: PropTypes.bool.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  recentSearches: PropTypes.arrayOf(
+    PropTypes.shape({
+      selectedOption: PropTypes.object,
+      title: PropTypes.string,
+      description: PropTypes.string,
+    })
+  ),
+  navigate: PropTypes.func.isRequired,
+  setRecentSearches: PropTypes.func.isRequired,
+};
+Navbar.propTypes = {
+  user: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    name: PropTypes.string,
+    userLastLogin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    languagePreference: PropTypes.string,
+    features: PropTypes.object,
+  }),
+  orientation: PropTypes.oneOf(['vertical', 'horizontal']).isRequired,
+  setShowSideBar: PropTypes.func,
+  showSideBar: PropTypes.bool,
+  setOrientation: PropTypes.func.isRequired,
+};
+export default Navbar;