From 27388c731dcbc3a4fe81316df4a2ab14c868c18b Mon Sep 17 00:00:00 2001 From: 0xFirekeeper <0xFirekeeper@gmail.com> Date: Wed, 12 Nov 2025 21:15:51 +0700 Subject: [PATCH] Add date range filtering to transaction analytics Introduces start and end date parameters to transaction analytics summary queries, enabling date range filtering. Refactors the summary and chart components to use these parameters, ensuring analytics data reflects the selected date range. Removes the summary card from the analytics page and integrates it within the chart view for consistency. Closes MNY-306 --- .../transactions/analytics/analytics-page.tsx | 35 ++++++++++------- .../transactions/analytics/summary.tsx | 39 +++++++++++++++++-- .../analytics/tx-chart/tx-chart.tsx | 15 ++++++- .../lib/analytics-summary.client.tsx | 15 ++++++- 4 files changed, 84 insertions(+), 20 deletions(-) diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/analytics-page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/analytics-page.tsx index d239fc61dba..f5e8f06b6cf 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/analytics-page.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/analytics-page.tsx @@ -1,14 +1,16 @@ "use client"; import { useQuery } from "@tanstack/react-query"; import { Spinner } from "@workspace/ui/components/spinner"; +import { useMemo } from "react"; import type { ThirdwebClient } from "thirdweb"; import type { Project } from "@/api/project/projects"; +import { getLastNDaysRange } from "@/components/analytics/date-range-selector"; +import { normalizeTimeISOString } from "@/lib/time"; import { UnifiedTransactionsTable } from "../components/transactions-table.client"; import { getTransactionAnalyticsSummary } from "../lib/analytics-summary.client"; import type { Wallet } from "../server-wallets/wallet-table/types"; import type { SolanaWallet } from "../solana-wallets/wallet-table/types"; import { EngineChecklist } from "./ftux.client"; -import { TransactionAnalyticsSummary } from "./summary"; import { TransactionsAnalytics } from "./tx-chart/tx-chart"; export function TransactionsAnalyticsPageContent(props: { @@ -24,18 +26,30 @@ export function TransactionsAnalyticsPageContent(props: { testSolanaTxWithWallet: string | undefined; solanaWallets: SolanaWallet[]; }) { + const defaultRange = useMemo(() => { + const range = getLastNDaysRange("last-30"); + return { + from: normalizeTimeISOString(range.from), + to: normalizeTimeISOString(range.to), + }; + }, []); + const engineTxSummaryQuery = useQuery({ queryKey: [ "engine-tx-analytics-summary", props.teamId, props.project.publishableKey, props.authToken, + defaultRange.from, + defaultRange.to, ], queryFn: async () => { const data = await getTransactionAnalyticsSummary({ clientId: props.project.publishableKey, teamId: props.teamId, authToken: props.authToken, + startDate: defaultRange.from, + endDate: defaultRange.to, }); return data; }, @@ -70,19 +84,12 @@ export function TransactionsAnalyticsPageContent(props: { /> {props.showAnalytics && hasTransactions && ( -
- - -
+ )} { + const data = await getTransactionAnalyticsSummary({ + clientId: props.clientId, + teamId: props.teamId, + authToken: props.authToken, + startDate: props.startDate, + endDate: props.endDate, + }); + return data; + }, + refetchOnWindowFocus: false, + refetchOnMount: false, + }); + return ( - + ); } diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-chart/tx-chart.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-chart/tx-chart.tsx index f16265606f9..c9f5daa3ddf 100644 --- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-chart/tx-chart.tsx +++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-chart/tx-chart.tsx @@ -9,6 +9,7 @@ import { import { IntervalSelector } from "@/components/analytics/interval-selector"; import { normalizeTimeISOString } from "@/lib/time"; import type { Wallet } from "../../server-wallets/wallet-table/types"; +import { TransactionAnalyticsSummary } from "../summary"; import { getTransactionsChartData } from "./data"; import { TransactionsChartCardUI } from "./tx-chart-ui"; @@ -21,12 +22,15 @@ export function TransactionsAnalytics(props: { const [range, setRange] = useState(() => getLastNDaysRange("last-30")); const [interval, setInterval] = useState<"day" | "week">("day"); + const normalizedFrom = normalizeTimeISOString(range.from); + const normalizedTo = normalizeTimeISOString(range.to); + const params = { clientId: props.project.publishableKey, - from: normalizeTimeISOString(range.from), + from: normalizedFrom, interval: interval, teamId: props.project.teamId, - to: normalizeTimeISOString(range.to), + to: normalizedTo, authToken: props.authToken, }; @@ -56,6 +60,13 @@ export function TransactionsAnalytics(props: { /> + { - const body = {}; + const body: { + startDate?: string; + endDate?: string; + } = {}; + + if (props.startDate) { + body.startDate = props.startDate; + } + + if (props.endDate) { + body.endDate = props.endDate; + } const defaultData: TransactionSummaryData = { totalCount: 0, totalGasCostWei: "0",