Collect user_login and user_name in account admin UI.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/UserManagementPage.tsx

@@ -39,6 +39,7 @@ const UserManagementPage: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
   const [notice, setNotice] = useState<string | null>(null);
 
+  const [userLogin, setUserLogin] = useState('');
   const [userName, setUserName] = useState('');
   const [status, setStatus] = useState<UserStatus>('gm');
   const [password, setPassword] = useState('');
@@ -80,6 +81,7 @@ const UserManagementPage: React.FC = () => {
       setSaving(true);
       try {
         await api.users.create({
+          user_login: userLogin.trim(),
           user_name: userName.trim(),
           status,
           password,
@@ -87,6 +89,7 @@ const UserManagementPage: React.FC = () => {
         setNotice(
           `Akun "${userName.trim()}" dibuat. Bagikan password sementara secara aman (di luar sistem).`
         );
+        setUserLogin('');
         setUserName('');
         setPassword('');
         setStatus('gm');
@@ -151,9 +154,20 @@ const UserManagementPage: React.FC = () => {
 
       <section className="bg-white rounded-xl shadow-sm p-5 space-y-4">
         <h2 className="text-base font-semibold text-gray-900">Buat pengguna baru</h2>
-        <form onSubmit={onCreate} className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <form onSubmit={onCreate} className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
           <label className="block text-sm">
-            <span className="text-gray-600">Username</span>
+            <span className="text-gray-600">Login</span>
+            <input
+              className={inputClass}
+              value={userLogin}
+              onChange={(e) => setUserLogin(e.target.value)}
+              required
+              maxLength={30}
+              autoComplete="off"
+            />
+          </label>
+          <label className="block text-sm">
+            <span className="text-gray-600">Nama</span>
             <input
               className={inputClass}
               value={userName}
@@ -214,7 +228,7 @@ const UserManagementPage: React.FC = () => {
             <table className="min-w-full text-sm">
               <thead>
                 <tr className="text-left text-gray-500 border-b">
-                  <th className="py-2 pr-4 font-medium">Username</th>
+                  <th className="py-2 pr-4 font-medium">Nama</th>
                   <th className="py-2 pr-4 font-medium">Role</th>
                   <th className="py-2 pr-4 font-medium">Managed by</th>
                   <th className="py-2 font-medium">Aksi</th>
@@ -225,11 +239,14 @@ const UserManagementPage: React.FC = () => {
                   const isSelf = currentUser?.id === user.id;
                   return (
                   <tr key={user.id} className="border-b border-gray-100 align-top">
-                    <td className="py-3 pr-4 font-medium text-gray-900">
-                      {user.user_name}
-                      {isSelf ? (
-                        <span className="ml-2 text-xs font-normal text-gray-500">(Anda)</span>
-                      ) : null}
+                    <td className="py-3 pr-4">
+                      <div className="font-medium text-gray-900">
+                        {user.user_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>
                     </td>
                     <td className="py-3 pr-4">
                       {!isSelf && editId === user.id ? (