feat: 統一各模組分頁組件佈局並新增系統設定功能相關檔案

resources/js/Pages/PurchaseReturn/Index.tsx

@@ -14,6 +14,7 @@ import { getBreadcrumbs } from "@/utils/breadcrumb";
 import { Can } from "@/Components/Permission/Can";
 import { Input } from "@/Components/ui/input";
 import { Label } from "@/Components/ui/label";
+import { SearchableSelect } from "@/Components/ui/searchable-select";
 import {
     Select,
     SelectContent,
@@ -34,17 +35,20 @@ interface Props {
     filters: {
         search?: string;
         status?: string;
+        per_page?: string;
     };
 }
 
 export default function PurchaseReturnIndex({ purchaseReturns, filters }: Props) {
     const [search, setSearch] = useState(filters.search || "");
     const [status, setStatus] = useState<string>(filters.status || "all");
+    const [perPage, setPerPage] = useState<string>(filters.per_page || "15");
 
     // 同步 URL 參數
     useEffect(() => {
         setSearch(filters.search || "");
         setStatus(filters.status || "all");
+        setPerPage(filters.per_page || "15");
     }, [filters]);
 
     const handleFilter = () => {
@@ -53,6 +57,7 @@ export default function PurchaseReturnIndex({ purchaseReturns, filters }: Props)
             {
                 search,
                 status: status === 'all' ? undefined : status,
+                per_page: perPage,
             },
             { preserveState: true, replace: true }
         );
@@ -61,9 +66,19 @@ export default function PurchaseReturnIndex({ purchaseReturns, filters }: Props)
     const handleReset = () => {
         setSearch("");
         setStatus("all");
+        setPerPage("15");
         router.get(route('purchase-returns.index'));
     };
 
+    const handlePerPageChange = (value: string) => {
+        setPerPage(value);
+        router.get(
+            route('purchase-returns.index'),
+            { ...filters, per_page: value, page: 1 },
+            { preserveState: false, replace: true, preserveScroll: true }
+        );
+    };
+
     const handleNavigateToCreate = () => {
         router.get(route('purchase-returns.create'));
     };
@@ -163,8 +178,29 @@ export default function PurchaseReturnIndex({ purchaseReturns, filters }: Props)
                 />
 
                 {/* 分頁元件 */}
-                <div className="mt-4 flex flex-col sm:flex-row items-center justify-between sm:justify-end gap-4 w-full">
-                    <Pagination links={purchaseReturns.links} />
+                <div className="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
+                    <div className="flex items-center 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-[100px] h-8"
+                                showSearch={false}
+                            />
+                            <span>筆</span>
+                        </div>
+                        <span className="text-sm text-gray-500">共 {purchaseReturns.total} 筆資料</span>
+                    </div>
+                    <div className="w-full sm:w-auto flex justify-center sm:justify-end">
+                        <Pagination links={purchaseReturns.links} />
+                    </div>
                 </div>
             </div>
         </AuthenticatedLayout>