implement user information in user name

core/lib/Controllers/UserProfileController.php

@@ -27,7 +27,8 @@ class UserProfileController extends ControllerAbstract
     {
         $userId = $this->userIdentity->identifier();
 
-        $profile = $this->userService->fetchProfile($userId);
+        // Get profile with editability metadata
+        $profile = $this->userService->getEditableFields($userId);
 
         return new JsonResponse($profile, JsonResponse::HTTP_OK);
     }
@@ -57,8 +58,8 @@ class UserProfileController extends ControllerAbstract
         // storeProfile automatically filters out provider-managed fields
         $this->userService->storeProfile($userId, $data);
 
-        // Return updated profile
-        $updatedProfile = $this->userService->fetchProfile($userId);
+        // Return updated profile with metadata
+        $updatedProfile = $this->userService->getEditableFields($userId);
 
         return new JsonResponse($updatedProfile, JsonResponse::HTTP_OK);
     }

core/src/layouts/header/LayoutHeader.vue

@@ -5,10 +5,12 @@ import { useLayoutStore } from '@KTXC/stores/layoutStore';
 import LayoutUserMenu from '@KTXC/layouts/menus/LayoutUserMenu.vue';
 import NotificationDD from './NotificationDD.vue';
 import Searchbar from './SearchBarPanel.vue';
+import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';
 
 const layoutStore = useLayoutStore();
 const userStore = useUserStore();
-const identityData = computed(() => userStore.user);
+const userAuth = computed(() => userStore.auth);
+const userAvatar = computed(() => userStore.getProfileField('avatar') || defaultAvatar);
 </script>
 
 <template>
@@ -86,11 +88,11 @@ const identityData = computed(() => userStore.user);
       <template v-slot:activator="{ props }">
         <v-btn class="profileBtn" variant="text" rounded="sm" v-bind="props">
           <div class="d-flex align-center">
-            <v-avatar class="mr-sm-2 mr-0 py-2">
-              <img src="@KTXC/assets/images/users/avatar-1.png" alt="Julia" />
+            <v-avatar class="mr-sm-2 mr-0" size="32">
+              <v-img :src="userAvatar" :alt="userAuth?.label || 'User'" cover />
             </v-avatar>
             <h6 class="text-subtitle-1 mb-0 d-sm-block d-none">
-              {{ identityData?.label }}
+              {{ userAuth?.label }}
             </h6>
           </div>
         </v-btn>

core/src/layouts/menus/LayoutUserMenu.vue

@@ -5,6 +5,7 @@ import { useUserStore } from '@KTXC/stores/userStore';
 import { useIntegrationStore } from '@KTXC/stores/integrationStore';
 import { useLayoutStore } from '@KTXC/stores/layoutStore';
 import { useRouter } from 'vue-router';
+import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';
 
 const theme = useTheme();
 const router = useRouter();
@@ -12,8 +13,16 @@ const userStore = useUserStore();
 const integrationStore = useIntegrationStore();
 const layoutStore = useLayoutStore();
 
-const identityData = computed(() => userStore.auth);
+const userAuth = computed(() => userStore.auth);
 const profileMenuItems = computed(() => integrationStore.getItems('profile_menu'));
+const userAvatar = computed(() => userStore.getProfileField('avatar') || defaultAvatar);
+const userName = computed(() => {
+  const given = userStore.getProfileField('name_given');
+  const family = userStore.getProfileField('name_family');
+  if (given && family) return `${given} ${family}`;
+  return userAuth.value?.label || 'User';
+});
+const userEmail = computed(() => userStore.getProfileField('email') || '');
 
 // Theme toggle
 const isDarkMode = computed(() => theme.global.name.value === 'dark');
@@ -37,15 +46,15 @@ const goToSettings = () => {
   <!-- ---------------------------------------------- -->
   <div>
     <!-- User Info Header -->
-    <div class="d-flex align-center pa-5">
-      <v-avatar size="32" class="mr-2">
-        <img src="@KTXC/assets/images/users/avatar-1.png" width="32" />
+    <div class="d-flex align-center pa-5 pb-4">
+      <v-avatar size="40" class="mr-3">
+        <v-img :src="userAvatar" :alt="userName" cover />
       </v-avatar>
-      <div>
-        <h6 class="text-h6 mb-0">
-          {{ identityData?.label || 'User Name' }}
+      <div class="flex-grow-1">
+        <h6 class="text-h6 mb-0 font-weight-medium">
+          {{ userName }}
         </h6>
-        <p class="text-caption mb-0">{{ userStore.getProfileField('email') || '' }}</p>
+        <p class="text-caption mb-0 text-medium-emphasis">{{ userEmail }}</p>
       </div>
     </div>
     <v-divider />