[Dashboard] Add date range filtering to transaction analytics (#8400)

Author: 0xFirekeeper

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 && (
-        <div className="flex flex-col gap-6">
-          <TransactionAnalyticsSummary
-            clientId={props.project.publishableKey}
-            teamId={props.project.teamId}
-            initialData={engineTxSummaryQuery.data}
-          />
-          <TransactionsAnalytics
-            project={props.project}
-            authToken={props.authToken}
-            teamSlug={props.teamSlug}
-            wallets={props.wallets ?? []}
-          />
-        </div>
+        <TransactionsAnalytics
+          project={props.project}
+          authToken={props.authToken}
+          teamSlug={props.teamSlug}
+          wallets={props.wallets ?? []}
+        />
       )}
 
       <UnifiedTransactionsTable

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/summary.tsx

@@ -1,7 +1,12 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
 import { ActivityIcon, CoinsIcon } from "lucide-react";
 import { toEther } from "thirdweb/utils";
 import { StatCard } from "@/components/analytics/stat"; // Assuming correct path
-import type { TransactionSummaryData } from "../lib/analytics-summary.client";
+import {
+  getTransactionAnalyticsSummary,
+  type TransactionSummaryData,
+} from "../lib/analytics-summary.client";
 
 // Renders the UI based on fetched data or pending state
 function TransactionAnalyticsSummaryUI(props: {
@@ -88,9 +93,37 @@ function TransactionAnalyticsSummaryUI(props: {
 export function TransactionAnalyticsSummary(props: {
   teamId: string;
   clientId: string;
-  initialData: TransactionSummaryData | undefined;
+  authToken: string;
+  startDate?: string;
+  endDate?: string;
 }) {
+  const engineTxSummaryQuery = useQuery({
+    queryKey: [
+      "engine-tx-analytics-summary",
+      props.teamId,
+      props.clientId,
+      props.authToken,
+      props.startDate,
+      props.endDate,
+    ],
+    queryFn: async () => {
+      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 (
-    <TransactionAnalyticsSummaryUI data={props.initialData} isPending={false} />
+    <TransactionAnalyticsSummaryUI
+      data={engineTxSummaryQuery.data}
+      isPending={engineTxSummaryQuery.isPending}
+    />
   );
 }

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: {
           />
         </div>
       </div>
+      <TransactionAnalyticsSummary
+        authToken={props.authToken}
+        clientId={props.project.publishableKey}
+        teamId={props.project.teamId}
+        startDate={normalizedFrom}
+        endDate={normalizedTo}
+      />
       <TransactionsChartCardUI
         isPending={engineTxAnalytics.isPending}
         project={props.project}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/analytics-summary.client.tsx

@@ -27,8 +27,21 @@ export async function getTransactionAnalyticsSummary(props: {
   teamId: string;
   clientId: string;
   authToken: string;
+  startDate?: string;
+  endDate?: string;
 }): Promise<TransactionSummaryData> {
-  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",