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(' ');
-}

resources/js/Pages/PurchaseOrder/Index.tsx

@@ -3,7 +3,7 @@
  */
 
 import { useState, useCallback } from "react";
-import { Plus, Search, X, ShoppingCart } from 'lucide-react';
+import { Plus, ShoppingCart } from 'lucide-react';
 import { Button } from "@/Components/ui/button";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router } from "@inertiajs/react";
@@ -15,6 +15,7 @@ import { debounce } from "lodash";
 import Pagination from "@/Components/shared/Pagination";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
 import { Can } from "@/Components/Permission/Can";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
 
 interface Props {
     orders: {
@@ -30,6 +31,7 @@ interface Props {
         warehouse_id?: string;
         sort_field?: string;
         sort_direction?: string;
+        per_page?: string;
     };
     warehouses: { id: number; name: string }[];
 }
@@ -38,6 +40,7 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
     const [searchQuery, setSearchQuery] = useState(filters.search || "");
     const [statusFilter, setStatusFilter] = useState<string>(filters.status || "all");
     const [requesterFilter, setRequesterFilter] = useState<string>(filters.warehouse_id || "all");
+    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
     const [dateRange, setDateRange] = useState<DateRange | null>(null);
 
     const handleFilterChange = (newFilters: any) => {
@@ -87,6 +90,18 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
         router.get("/purchase-orders/create");
     };
 
+    const handlePerPageChange = (value: string) => {
+        setPerPage(value);
+        router.get("/purchase-orders", {
+            ...filters,
+            per_page: value,
+            page: 1,
+        }, {
+            preserveState: false,
+            replace: true,
+        });
+    };
+
     return (
         <AuthenticatedLayout breadcrumbs={getBreadcrumbs("purchaseOrders")}>
             <Head title="採購管理 - 管理採購單" />
@@ -134,7 +149,24 @@ export default function PurchaseOrderIndex({ orders, filters, warehouses }: Prop
                     orders={orders.data}
                 />
 
-                <div className="mt-6 flex justify-center">
+                {/* 分頁元件 - 統一樣式 */}
+                <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={orders.links} />
                 </div>
             </div>

resources/js/Pages/Vendor/Index.tsx

@@ -9,6 +9,8 @@ import { Head, router } from "@inertiajs/react";
 import { debounce } from "lodash";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
 import { Can } from "@/Components/Permission/Can";
+import Pagination from "@/Components/shared/Pagination";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
 
 export interface Vendor {
     id: number;
@@ -37,6 +39,7 @@ interface PageProps {
         search?: string;
         sort_field?: string;
         sort_direction?: string;
+        per_page?: string;
     };
 }
 
@@ -44,6 +47,7 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
     const [searchTerm, setSearchTerm] = useState(filters.search || "");
     const [sortField, setSortField] = useState<string | null>(filters.sort_field || null);
     const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(filters.sort_direction as "asc" | "desc" || null);
+    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [editingVendor, setEditingVendor] = useState<Vendor | null>(null);
 
@@ -52,6 +56,7 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
         setSearchTerm(filters.search || "");
         setSortField(filters.sort_field || null);
         setSortDirection(filters.sort_direction as "asc" | "desc" || null);
+        setPerPage(filters.per_page || "10");
     }, [filters]);
 
     // Debounced Search
@@ -125,6 +130,15 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
         router.delete(route('vendors.destroy', id));
     };
 
+    const handlePerPageChange = (value: string) => {
+        setPerPage(value);
+        router.get(
+            route("vendors.index"),
+            { search: searchTerm, sort_field: sortField, sort_direction: sortDirection, per_page: value },
+            { preserveState: false, replace: true, preserveScroll: true }
+        );
+    };
+
     return (
         <AuthenticatedLayout breadcrumbs={getBreadcrumbs("vendors")}>
             <Head title="廠商資料管理" />
@@ -186,6 +200,27 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
                     onOpenChange={setIsDialogOpen}
                     vendor={editingVendor}
                 />
+
+                {/* 分頁元件 - 統一樣式 */}
+                <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={vendors.links} />
+                </div>
             </div>
         </AuthenticatedLayout>
     );