feat: 實作使用者管理與公共事業費分頁標準化

resources/js/Pages/UtilityFee/Index.tsx

@@ -74,6 +74,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
     const [dateStart, setDateStart] = useState(filters.date_start || "");
     const [dateEnd, setDateEnd] = useState(filters.date_end || "");
     const [dateRangeType, setDateRangeType] = useState("custom");
+    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
 
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
@@ -108,18 +109,36 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                 date_end: dateEnd,
                 sort_field: sortField,
                 sort_direction: sortDirection,
+                per_page: perPage,
             },
             { preserveState: true }
         );
     };
 
+    const handlePerPageChange = (value: string) => {
+        setPerPage(value);
+        router.get(
+            route("utility-fees.index"),
+            {
+                search: searchTerm,
+                category: categoryFilter,
+                date_start: dateStart,
+                date_end: dateEnd,
+                sort_field: sortField,
+                sort_direction: sortDirection,
+                per_page: value,
+            },
+            { preserveState: false, preserveScroll: true }
+        );
+    };
+
     const handleClearFilters = () => {
         setSearchTerm("");
         setCategoryFilter("all");
         setDateStart("");
         setDateEnd("");
         setDateRangeType("custom");
-        router.get(route("utility-fees.index"));
+        router.get(route("utility-fees.index"), { per_page: perPage }, { preserveState: false });
     };
 
     const handleSort = (field: string) => {
@@ -147,6 +166,7 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                 date_end: dateEnd,
                 sort_field: newField,
                 sort_direction: newDirection,
+                per_page: perPage,
             },
             { preserveState: true }
         );
@@ -469,7 +489,26 @@ export default function UtilityFeeIndex({ fees, availableCategories, filters }:
                         </TableBody>
                     </Table>
 
-                    <div className="border-t p-4">
+                </div>
+
+                <div className="mt-4 flex flex-col sm:flex-row items-start sm: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-[100px] h-8"
+                            showSearch={false}
+                        />
+                        <span>筆</span>
+                    </div>
+                    <div className="w-full sm:w-auto flex justify-center sm:justify-end">
                         <Pagination links={fees.links} />
                     </div>
                 </div>