change user_name still used as login and add display_name for dashboard view instead of username on login

components/Header.tsx

@@ -181,10 +181,10 @@ const Header: React.FC<HeaderProps> = ({
               className="flex items-center space-x-2 focus:outline-none"
             >
               <div className="w-10 h-10 rounded-full bg-red-100 text-red-700 flex items-center justify-center font-bold">
-                {user.user_name.slice(0, 1).toUpperCase()}
+                {user.display_name.slice(0, 1).toUpperCase()}
               </div>
               <div className="hidden lg:block text-left">
-                <p className="text-sm font-semibold text-gray-800">{user.user_name}</p>
+                <p className="text-sm font-semibold text-gray-800">{user.display_name}</p>
                 <p className="text-xs text-gray-500">{ROLE_LABELS[user.status]}</p>
               </div>
               <i className="fa-solid fa-chevron-down text-xs text-gray-500" />
@@ -192,7 +192,7 @@ const Header: React.FC<HeaderProps> = ({
             {open && (
               <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 z-50">
                 <div className="px-4 py-3 border-b">
-                  <p className="text-sm font-semibold text-gray-800">{user.user_name}</p>
+                  <p className="text-sm font-semibold text-gray-800">{user.display_name}</p>
                   <p className="text-xs text-gray-500">{ROLE_LABELS[user.status]}</p>
                 </div>
                 <button