fix display name

apps/backoffice/src/app/layouts/BackofficeLayout.tsx

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