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

components/UserManagementPage.tsx

@@ -81,8 +81,8 @@ const UserManagementPage: React.FC = () => {
       setSaving(true);
       try {
         await api.users.create({
-          user_login: userLogin.trim(),
-          user_name: userName.trim(),
+          user_name: userLogin.trim(),
+          display_name: userName.trim(),
           status,
           password,
         });
@@ -115,12 +115,12 @@ const UserManagementPage: React.FC = () => {
   };
 
   const onDeactivate = (user: User) => {
-    if (!window.confirm(`Nonaktifkan akun "${user.user_name}"?`)) return;
+    if (!window.confirm(`Nonaktifkan akun "${user.display_name}"?`)) return;
     void wrap(async () => {
       setBusyId(user.id);
       try {
         await api.users.update(user.id, { status: 'inactive' });
-        setNotice(`Akun "${user.user_name}" dinonaktifkan.`);
+        setNotice(`Akun "${user.display_name}" dinonaktifkan.`);
         await reload();
       } finally {
         setBusyId(null);
@@ -241,12 +241,12 @@ const UserManagementPage: React.FC = () => {
                   <tr key={user.id} className="border-b border-gray-100 align-top">
                     <td className="py-3 pr-4">
                       <div className="font-medium text-gray-900">
-                        {user.user_name}
+                        {user.display_name}
                         {isSelf ? (
                           <span className="ml-2 text-xs font-normal text-gray-500">(Anda)</span>
                         ) : null}
                       </div>
-                      <div className="text-xs text-gray-500">{user.user_login}</div>
+                      <div className="text-xs text-gray-500">{user.user_name}</div>
                     </td>
                     <td className="py-3 pr-4">
                       {!isSelf && editId === user.id ? (