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

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
 import { Head, Link, router } from '@inertiajs/react';
-import { Users, Plus, Pencil, Trash2, Mail, Shield } from 'lucide-react';
+import { Users, Plus, Pencil, Trash2, Mail, Shield, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
 import { Button } from '@/Components/ui/button';
 import {
     Table,
@@ -47,6 +47,8 @@ interface Props {
     };
     filters: {
         per_page?: string;
+        sort_by?: string;
+        sort_order?: 'asc' | 'desc';
     };
 }
 
@@ -66,11 +68,41 @@ export default function UserIndex({ users, filters }: Props) {
         setPerPage(value);
         router.get(
             route('users.index'),
-            { per_page: value },
+            { ...filters, per_page: value },
             { preserveState: false, replace: true, preserveScroll: true }
         );
     };
 
+    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('users.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 (
@@ -108,9 +140,23 @@ export default function UserIndex({ users, filters }: Props) {
                         <TableHeader className="bg-gray-50">
                             <TableRow>
                                 <TableHead className="w-[50px] text-center">#</TableHead>
-                                <TableHead className="w-[250px]">使用者</TableHead>
+                                <TableHead>
+                                    <button
+                                        onClick={() => handleSort('name')}
+                                        className="flex items-center gap-1 hover:text-gray-900 transition-colors"
+                                    >
+                                        使用者 <SortIcon field="name" />
+                                    </button>
+                                </TableHead>
                                 <TableHead>角色</TableHead>
-                                <TableHead className="w-[200px]">加入時間</TableHead>
+                                <TableHead>
+                                    <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>