style: 統一所有表格標題樣式為一般粗細並修正排序功能

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

@@ -1,7 +1,7 @@
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import { Head, Link, router } from '@inertiajs/react';
 import { cn } from "@/lib/utils";
-import { Shield, Plus, Pencil, Trash2, Users } from 'lucide-react';
+import { Shield, Plus, Pencil, Trash2, Users, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
 import { Button } from '@/Components/ui/button';
 import { Badge } from '@/Components/ui/badge';
 import {
@@ -42,9 +42,13 @@ interface Role {
 
 interface Props {
     roles: Role[];
+    filters: {
+        sort_by?: string;
+        sort_order?: 'asc' | 'desc';
+    };
 }
 
-export default function RoleIndex({ roles }: Props) {
+export default function RoleIndex({ roles, filters = {} }: Props) {
     const [selectedRole, setSelectedRole] = useState<Role | null>(null);
 
     const handleDelete = (id: number, name: string) => {
@@ -55,6 +59,36 @@ export default function RoleIndex({ roles }: Props) {
         }
     };
 
+    const handleSort = (field: string) => {
+        let newSortBy: string | undefined = field;
+        let newSortOrder: 'asc' | 'desc' | undefined = 'asc';
+
+        if (filters.sort_by === field) {
+            if (filters.sort_order === 'asc') {
+                newSortOrder = 'desc';
+            } else {
+                newSortBy = undefined;
+                newSortOrder = undefined;
+            }
+        }
+
+        router.get(
+            route('roles.index'),
+            { ...filters, sort_by: newSortBy, sort_order: newSortOrder },
+            { preserveState: true, replace: true }
+        );
+    };
+
+    const SortIcon = ({ field }: { field: string }) => {
+        if (filters.sort_by !== field) {
+            return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
+        }
+        if (filters.sort_order === "asc") {
+            return <ArrowUp className="h-4 w-4 text-primary-main ml-1" />;
+        }
+        return <ArrowDown className="h-4 w-4 text-primary-main ml-1" />;
+    };
+
     return (
         <AuthenticatedLayout
             breadcrumbs={[
@@ -92,9 +126,30 @@ export default function RoleIndex({ roles }: Props) {
                                 <TableHead className="w-[50px] text-center">#</TableHead>
                                 <TableHead>名稱</TableHead>
                                 <TableHead>代號</TableHead>
-                                <TableHead className="text-center">權限數量</TableHead>
-                                <TableHead className="text-center">使用者人數</TableHead>
-                                <TableHead className="text-left">建立時間</TableHead>
+                                <TableHead className="text-center">
+                                    <button
+                                        onClick={() => handleSort('permissions_count')}
+                                        className="flex items-center justify-center gap-1 w-full hover:text-gray-900 transition-colors"
+                                    >
+                                        權限數量 <SortIcon field="permissions_count" />
+                                    </button>
+                                </TableHead>
+                                <TableHead className="text-center">
+                                    <button
+                                        onClick={() => handleSort('users_count')}
+                                        className="flex items-center justify-center gap-1 w-full hover:text-gray-900 transition-colors"
+                                    >
+                                        使用者人數 <SortIcon field="users_count" />
+                                    </button>
+                                </TableHead>
+                                <TableHead className="text-left">
+                                    <button
+                                        onClick={() => handleSort('created_at')}
+                                        className="flex items-center gap-1 hover:text-gray-900 transition-colors"
+                                    >
+                                        建立時間 <SortIcon field="created_at" />
+                                    </button>
+                                </TableHead>
                                 <TableHead className="text-center">操作</TableHead>
                             </TableRow>
                         </TableHeader>