fix: correct earnings pagination

src/api/plugins.ts

@@ -126,9 +126,19 @@ export type EarningsFilters = {
   dateFrom?: string;
   dateTo?: string;
   type?: string;
+  page?: number;
+  limit?: number;
 };
 
-export const getEarnings = async (filters?: EarningsFilters): Promise<EarningTransaction[]> => {
+export type EarningsResponse = {
+  data: EarningTransaction[];
+  page: number;
+  limit: number;
+  total: number;
+  totalPages: number;
+};
+
+export const getEarnings = async (filters?: EarningsFilters): Promise<EarningsResponse> => {
   const params = new URLSearchParams();
 
   if (filters?.pluginId) {
@@ -141,10 +151,12 @@ export const getEarnings = async (filters?: EarningsFilters): Promise<EarningTra
     params.append("dateTo", filters.dateTo);
   }
 
-  const response = await apiClient.get<EarningTransaction[]>("/earnings", { params });
+  params.append("page", String(filters?.page ?? 1));
+  params.append("limit", String(filters?.limit ?? 10));
+
+  const response = await apiClient.get<EarningsResponse>("/earnings", { params });
 
-  // Apply client-side filtering for status and type (not supported by backend query params)
-  let results = response.data;
+  let results = response.data.data;
 
   if (filters?.status) {
     results = results.filter(e => e.status === filters.status);
@@ -154,7 +166,10 @@ export const getEarnings = async (filters?: EarningsFilters): Promise<EarningTra
     results = results.filter(e => e.type === filters.type);
   }
 
-  return results;
+  return {
+    ...response.data,
+    data: results,
+  };
 };
 
 export const getEarningsSummary = async (): Promise<{

src/pages/Earnings.tsx

@@ -1,4 +1,5 @@
 import { DatePicker, Select, Table, Tag } from "antd";
+import { TablePaginationConfig } from "antd";
 import { ColumnsType } from "antd/es/table";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
@@ -25,18 +26,24 @@ export const EarningsPage = () => {
     earningsByPlugin: Record<string, number>;
   } | null>(null);
 
+  // Pagination
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+
   // Filters
   const [filters, setFilters] = useState<EarningsFilters>({});
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const [earningsData, pluginsData, summaryData] = await Promise.all([
-          getEarnings(filters),
+        const [earningsResponse, pluginsData, summaryData] = await Promise.all([
+          getEarnings({ ...filters, page, limit: pageSize }),
           getPlugins(),
           getEarningsSummary(),
         ]);
-        setEarnings(earningsData);
+        setEarnings(earningsResponse.data);
+        setTotal(earningsResponse.total);
         setPlugins(pluginsData);
         setSummary(summaryData);
       } catch (error) {
@@ -47,7 +54,7 @@ export const EarningsPage = () => {
     };
 
     fetchData();
-  }, [filters]);
+  }, [filters, page, pageSize]);
 
   const columns: ColumnsType<EarningTransaction> = [
     {
@@ -318,9 +325,16 @@ export const EarningsPage = () => {
         dataSource={earnings}
         rowKey="id"
         pagination={{
-          pageSize: 10,
+          current: page,
+          pageSize: pageSize,
+          total: total,
           showSizeChanger: true,
-          showTotal: (total) => `Total ${total} transactions`,
+          showTotal: (t: number) => `Total ${t} transactions`,
+          pageSizeOptions: [10, 20, 50],
+        }}
+        onChange={(pagination: TablePaginationConfig) => {
+          setPage(pagination.current ?? 1);
+          setPageSize(pagination.pageSize ?? 10);
         }}
         style={{ width: "100%" }}
       />