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

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",