feat: 統一清單頁面分頁與每頁顯示 UI

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

@@ -1,3 +1,4 @@
+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';
@@ -13,6 +14,9 @@ import {
 import { format } from 'date-fns';
 import { toast } from 'sonner';
 import { Can } from '@/Components/Permission/Can';
+import { cn } from "@/lib/utils";
+import Pagination from "@/Components/shared/Pagination";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
 
 interface Role {
     id: number;
@@ -28,27 +32,26 @@ interface User {
     roles: Role[];
 }
 
-interface Pagination {
-    current_page: number;
-    last_page: number;
-    per_page: number;
-    total: number;
-    from: number;
-    links: {
-        url: string | null;
-        label: string;
-        active: boolean;
-    }[];
+interface PaginationLinks {
+    url: string | null;
+    label: string;
+    active: boolean;
 }
 
 interface Props {
     users: {
         data: User[];
-        meta?: Pagination; // Standard Laravel Pagination resource structure, but if simple paginate() it's direct properties
-    } & Pagination; // paginate() returns object with data and meta properties mixed
+        from: number;
+        links: PaginationLinks[];
+    };
+    filters: {
+        per_page?: string;
+    };
 }
 
-export default function UserIndex({ users }: Props) {
+export default function UserIndex({ users, filters }: Props) {
+    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
+
     const handleDelete = (id: number, name: string) => {
         if (confirm(`確定要刪除使用者「${name}」嗎？此操作無法復原。`)) {
             router.delete(route('users.destroy', id), {
@@ -58,6 +61,15 @@ export default function UserIndex({ users }: Props) {
         }
     };
 
+    const handlePerPageChange = (value: string) => {
+        setPerPage(value);
+        router.get(
+            route('users.index'),
+            { per_page: value },
+            { preserveState: false, replace: true, preserveScroll: true }
+        );
+    };
+
     const translateRoleName = (name: string) => {
         const map: Record<string, string> = {
             'super-admin': '超級管理員',
@@ -183,50 +195,29 @@ export default function UserIndex({ users }: Props) {
                             ))}
                         </TableBody>
                     </Table>
+                </div>
 
-                    {/* Pagination - Simple implementation */}
-                    {users.links && users.links.length > 3 && (
-                        <div className="px-4 py-3 border-t border-gray-200 flex items-center justify-between sm:px-6">
-                            <div className="flex-1 flex justify-between sm:hidden">
-                                {/* Mobile pagination */}
-                            </div>
-                            <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-                                <div>
-                                    <p className="text-sm text-gray-700">
-                                        顯示第 <span className="font-medium">{users.current_page}</span> 頁
-                                    </p>
-                                </div>
-                                <div>
-                                    <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
-                                        {users.links.map((link, i) => {
-                                            if (link.url === null) return null; // Skip null links usually
-                                            return (
-                                                <Link
-                                                    key={i}
-                                                    href={link.url}
-                                                    className={cn(
-                                                        "relative inline-flex items-center px-4 py-2 border text-sm font-medium",
-                                                        link.active
-                                                            ? "z-10 bg-[#01ab83] border-[#01ab83] text-white"
-                                                            : "bg-white border-gray-300 text-gray-500 hover:bg-gray-50",
-                                                        i === 0 ? "rounded-l-md" : "",
-                                                        i === users.links.length - 1 ? "rounded-r-md" : ""
-                                                    )}
-                                                    dangerouslySetInnerHTML={{ __html: link.label }}
-                                                />
-                                            );
-                                        })}
-                                    </nav>
-                                </div>
-                            </div>
-                        </div>
-                    )}
+                {/* 分頁元件 - 統一樣式 */}
+                <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+                    <div className="flex items-center gap-2 text-sm text-gray-500">
+                        <span>每頁顯示</span>
+                        <SearchableSelect
+                            value={perPage}
+                            onValueChange={handlePerPageChange}
+                            options={[
+                                { label: "10", value: "10" },
+                                { label: "20", value: "20" },
+                                { label: "50", value: "50" },
+                                { label: "100", value: "100" }
+                            ]}
+                            className="w-[80px] h-8"
+                            showSearch={false}
+                        />
+                        <span>筆</span>
+                    </div>
+                    <Pagination links={users.links} />
                 </div>
             </div>
         </AuthenticatedLayout>
     );
 }
-// Helper for conditional class names if not imported
-function cn(...classes: (string | undefined | null | false)[]) {
-    return classes.filter(Boolean).join(' ');
-}