fix display name

This commit is contained in:
mengstabketemaw
2026-06-18 12:19:12 +03:00
parent d7ce72176e
commit 1ba3f0fa8b

View File

@@ -3,7 +3,6 @@ import { AppShell } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { Outlet, useLocation, useNavigate } from 'react-router-dom'; import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { logout } from '@ema-platform/auth'; import { logout } from '@ema-platform/auth';
import { AppHeader, AppSidebar } from '@ema-platform/ui'; import { AppHeader, AppSidebar } from '@ema-platform/ui';
import type { NavItem } from '@ema-platform/ui'; import type { NavItem } from '@ema-platform/ui';
@@ -15,6 +14,7 @@ import {
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import { notify } from '@ema-platform/ui'; import { notify } from '@ema-platform/ui';
import { SUPPORTED_LANGUAGES } from '../i18n/config'; import { SUPPORTED_LANGUAGES } from '../i18n/config';
import { useAppDispatch, useAppSelector } from '../store/hooks';
const NAV_ITEMS: NavItem[] = [ const NAV_ITEMS: NavItem[] = [
{ to: '/dashboard', label: 'Dashboard', icon: IconLayoutDashboard }, { to: '/dashboard', label: 'Dashboard', icon: IconLayoutDashboard },
@@ -27,10 +27,16 @@ export function BackofficeLayout() {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation(); const location = useLocation();
const dispatch = useDispatch(); const dispatch = useAppDispatch();
const [opened, { toggle: toggleNav }] = useDisclosure(); const [opened, { toggle: toggleNav }] = useDisclosure();
const [collapsed, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const handleToggleCollapse = () => setCollapsed((prev) => !prev); const handleToggleCollapse = () => setCollapsed((prev) => !prev);
const user = useAppSelector((state) => state.auth.user);
const displayName = user?.name?.en || user?.username || '';
const initials = displayName
? displayName.split(/\s+/).map((s) => s[0]).join('').toUpperCase().slice(0, 2)
: '?';
const handleLogout = useCallback(() => { const handleLogout = useCallback(() => {
dispatch(logout()); dispatch(logout());
@@ -81,8 +87,8 @@ export function BackofficeLayout() {
breadcrumbs={crumbs} breadcrumbs={crumbs}
onNavigate={navigate} onNavigate={navigate}
onLogout={handleLogout} onLogout={handleLogout}
userName={t('app.name')} userName={displayName || t('app.name')}
userInitials="AD" userInitials={initials}
supportedLanguages={SUPPORTED_LANGUAGES} supportedLanguages={SUPPORTED_LANGUAGES}
/> />
</AppShell.Header> </AppShell.Header>