diff --git a/src/api/plugins.ts b/src/api/plugins.ts index ec15274..372b039 100644 --- a/src/api/plugins.ts +++ b/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 => { +export type EarningsResponse = { + data: EarningTransaction[]; + page: number; + limit: number; + total: number; + totalPages: number; +}; + +export const getEarnings = async (filters?: EarningsFilters): Promise => { const params = new URLSearchParams(); if (filters?.pluginId) { @@ -141,10 +151,12 @@ export const getEarnings = async (filters?: EarningsFilters): Promise("/earnings", { params }); + params.append("page", String(filters?.page ?? 1)); + params.append("limit", String(filters?.limit ?? 10)); + + const response = await apiClient.get("/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 e.type === filters.type); } - return results; + return { + ...response.data, + data: results, + }; }; export const getEarningsSummary = async (): Promise<{ diff --git a/src/pages/Earnings.tsx b/src/pages/Earnings.tsx index 958918a..838804b 100644 --- a/src/pages/Earnings.tsx +++ b/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; } | null>(null); + // Pagination + const [page, setPage] = useState(1); + const [pageSize, setPageSize] = useState(10); + const [total, setTotal] = useState(0); + // Filters const [filters, setFilters] = useState({}); 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 = [ { @@ -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%" }} />