Add display name support for user management and update related components

src/components/Navbar.jsx

@@ -27,8 +27,8 @@ export default function Navbar({ onMenuClick }) {
     navigate('/');
   };
 
-  const initials = user?.name
-    ? user.name
+  const initials = (user?.display_name || user?.name)
+    ? (user.display_name || user.name)
         .split(' ')
         .map(n => n[0])
         .join('')
@@ -72,14 +72,14 @@ export default function Navbar({ onMenuClick }) {
                 )}
               </div>
               <span className="hidden md:block text-sm font-medium text-th-text">
-                {user?.name}
+                {user?.display_name || user?.name}
               </span>
             </button>
 
             {dropdownOpen && (
               <div className="absolute right-0 mt-2 w-56 bg-th-card rounded-xl border border-th-border shadow-th-lg overflow-hidden">
                 <div className="px-4 py-3 border-b border-th-border">
-                  <p className="text-sm font-medium text-th-text">{user?.name}</p>
+                  <p className="text-sm font-medium text-th-text">{user?.display_name || user?.name}</p>
                   <p className="text-xs text-th-text-s">{user?.email}</p>
                 </div>
                 <div className="py-1">