update erd db and add display name to user access table

components/Header.tsx

@@ -129,10 +129,12 @@ 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 || user.user_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 || user.user_name}
+                </p>
                 <p className="text-xs text-gray-500">
                   {user.status === 'superadmin' ? 'Admin' : 'Pengguna'}
                 </p>
@@ -142,7 +144,9 @@ 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 || user.user_name}
+                  </p>
                   <p className="text-xs text-gray-500">
                     {user.status === 'superadmin' ? 'Admin' : 'Pengguna'}
                   </p>