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

components/SettingsPage.tsx

@@ -134,7 +134,7 @@ const BuhViewList: React.FC = () => {
                   className="py-3 flex flex-wrap items-center justify-between gap-3"
                 >
                   <div>
-                    <p className="text-sm font-semibold text-gray-800">{gm.user_name}</p>
+                    <p className="text-sm font-semibold text-gray-800">{gm.display_name}</p>
                     <p className="text-xs text-gray-500">{ROLE_LABELS[gm.status] ?? gm.status}</p>
                   </div>
                   <div className="flex gap-2">
@@ -179,7 +179,7 @@ const BuhViewList: React.FC = () => {
               return (
                 <li key={gm.id} className="border border-gray-200 rounded-lg p-4">
                   <div className="flex flex-wrap items-baseline justify-between gap-2 mb-2">
-                    <p className="text-sm font-semibold text-gray-800">{gm.user_name}</p>
+                    <p className="text-sm font-semibold text-gray-800">{gm.display_name}</p>
                     <p className="text-xs text-gray-500">
                       {ROLE_LABELS[gm.status] ?? gm.status} · {sites.length} site
                     </p>
@@ -361,7 +361,7 @@ const GmViewList: React.FC = () => {
                 <option value="">— pilih —</option>
                 {buhs.map((buh) => (
                   <option key={buh.id} value={buh.id}>
-                    {buh.user_name}
+                    {buh.display_name}
                   </option>
                 ))}
               </select>