refactor: 優化使用者管理介面與角色顯示

- 移除 Header 中的角色名稱顯示
- 調整使用者表單欄位順序（使用者名稱、姓名並排）
- 將角色分配區塊移至基本資料下方
- 修復 email 欄位 null 值警告
- 修復角色選擇無限迴圈錯誤
- 統一角色顯示格式（中文名稱在上，代號在下）

resources/js/Pages/Admin/User/Index.tsx

@@ -21,6 +21,7 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
 interface Role {
     id: number;
     name: string;
+    display_name: string;
 }
 
 interface User {
@@ -70,16 +71,7 @@ export default function UserIndex({ users, filters }: Props) {
         );
     };
 
-    const translateRoleName = (name: string) => {
-        const map: Record<string, string> = {
-            'super-admin': '超級管理員',
-            'admin': '管理員',
-            'warehouse-manager': '倉庫主管',
-            'purchaser': '採購人員',
-            'viewer': '檢視者',
-        };
-        return map[name] || name;
-    }
+
 
     return (
         <AuthenticatedLayout
@@ -140,21 +132,31 @@ export default function UserIndex({ users, filters }: Props) {
                                         </div>
                                     </TableCell>
                                     <TableCell>
-                                        <div className="flex flex-wrap gap-1">
+                                        <div className="flex flex-wrap gap-2">
                                             {user.roles.length > 0 ? (
                                                 user.roles.map(role => (
-                                                    <span
+                                                    <div
                                                         key={role.id}
                                                         className={cn(
-                                                            "inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border",
+                                                            "inline-flex flex-col px-3 py-1.5 rounded-md border",
                                                             role.name === 'super-admin'
-                                                                ? "bg-purple-50 text-purple-700 border-purple-200"
-                                                                : "bg-gray-100 text-gray-700 border-gray-200"
+                                                                ? "bg-purple-50 border-purple-200"
+                                                                : "bg-gray-50 border-gray-200"
                                                         )}
                                                     >
-                                                        {role.name === 'super-admin' && <Shield className="h-3 w-3 mr-1" />}
-                                                        {translateRoleName(role.name)}
-                                                    </span>
+                                                        <div className="flex items-center gap-1">
+                                                            {role.name === 'super-admin' && <Shield className="h-3 w-3 text-purple-600" />}
+                                                            <span className={cn(
+                                                                "text-sm font-medium",
+                                                                role.name === 'super-admin' ? "text-purple-700" : "text-gray-900"
+                                                            )}>
+                                                                {role.display_name}
+                                                            </span>
+                                                        </div>
+                                                        <span className="text-[10px] text-gray-500 font-mono">
+                                                            {role.name}
+                                                        </span>
+                                                    </div>
                                                 ))
                                             ) : (
                                                 <span className="text-gray-400 text-sm italic">未分配角色</span>