Port gas sponsorship analytics to Team usage tab (#8445)

Updated AccountAbstractionAnalytics to support both team and project variants, allowing for flexible rendering based on context. Refactored usage and summary components to accept optional projectId, and updated the team usage page to use the new analytics and summary components. Adjusted SponsoredTransactionsTable usage to match the new props structure.

Closes BLD-500

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `AccountAbstractionAnalytics` and `AccountAbstractionSummary` components to support additional parameters for date ranges and project identification, improving data handling for user operation statistics.

### Detailed summary
- Added `from` and `to` props to `AccountAbstractionSummary` and `AccountAbstractionAnalytics`.
- Made `projectId` optional in `AsyncAccountAbstractionSummary` and `AccountAbstractionSummary`.
- Updated `AccountAbstractionAnalytics` to handle different variants (`project` and `team`).
- Introduced date range handling in the main page logic to fetch user operation statistics based on selected ranges.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Account abstraction views now support team- and project-level variants and explicit date-range (from/to) filtering.
  * Analytics components expose flexible props to render project or team analytics based on resolved ranges.

* **Improvements**
  * Data loading sequence refined to fetch authentication, team lookup, and usage metrics before render.
  * UI updated to show a summary section followed by analytics with improved spacing and conditional rendering.

<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: 0xFirekeeper

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/usage/account-abstraction/page.tsx

@@ -1,27 +1,38 @@
 import { redirect } from "next/navigation";
+import type { SearchParams } from "nuqs/server";
+import { getUserOpUsage } from "@/api/analytics";
 import { getAuthToken } from "@/api/auth-token";
 import { getProjects } from "@/api/project/projects";
 import { getTeamBySlug } from "@/api/team/get-team";
 import { getTeamSubscriptions } from "@/api/team/team-subscription";
-import { SponsoredTransactionsTable } from "@/components/sponsored-transactions-table/SponsoredTransactionsTable";
+import {
+  getLastNDaysRange,
+  type Range,
+} from "@/components/analytics/date-range-selector";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { loginRedirect } from "@/utils/redirects";
+import { AccountAbstractionSummary } from "../../../../[project_slug]/(sidebar)/account-abstraction/AccountAbstractionAnalytics/AccountAbstractionSummary";
+import { AccountAbstractionAnalytics } from "../../../../[project_slug]/(sidebar)/account-abstraction/aa-analytics";
+import { searchParamLoader } from "../../../../[project_slug]/(sidebar)/account-abstraction/search-params";
 
 export default async function Page(props: {
   params: Promise<{
     team_slug: string;
   }>;
+  searchParams: Promise<SearchParams>;
 }) {
-  const params = await props.params;
-  const [team, authToken] = await Promise.all([
-    getTeamBySlug(params.team_slug),
+  const [params, parsedSearchParams, authToken] = await Promise.all([
+    props.params,
+    searchParamLoader(props.searchParams),
     getAuthToken(),
   ]);
 
   if (!authToken) {
     loginRedirect(`/team/${params.team_slug}/~/usage/account-abstraction`);
   }
 
+  const team = await getTeamBySlug(params.team_slug);
+
   if (!team) {
     redirect("/team");
   }
@@ -44,20 +55,51 @@ export default async function Page(props: {
     );
   }
 
+  const interval = parsedSearchParams.interval ?? "week";
+  const rangeType = parsedSearchParams.range || "last-120";
+
+  const range: Range = {
+    from:
+      rangeType === "custom"
+        ? parsedSearchParams.from
+        : getLastNDaysRange(rangeType).from,
+    to:
+      rangeType === "custom"
+        ? parsedSearchParams.to
+        : getLastNDaysRange(rangeType).to,
+    type: rangeType,
+  };
+
+  const userOpStats = await getUserOpUsage(
+    {
+      from: range.from,
+      period: interval,
+      teamId: team.id,
+      to: range.to,
+    },
+    authToken,
+  );
+
   const client = getClientThirdwebClient({
     jwt: authToken,
     teamId: team.id,
   });
 
   return (
-    <div className="flex flex-col gap-14">
-      <SponsoredTransactionsTable
+    <div className="flex flex-col gap-10">
+      <AccountAbstractionSummary
+        authToken={authToken}
+        teamId={team.id}
+        from={range.from}
+        to={range.to}
+      />
+
+      <AccountAbstractionAnalytics
         client={client}
-        from={usageSubscription.currentPeriodStart}
         projects={projects}
         teamId={team.id}
         teamSlug={team.slug}
-        to={usageSubscription.currentPeriodEnd}
+        userOpStats={userOpStats}
         variant="team"
       />
     </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/AccountAbstractionAnalytics/AccountAbstractionSummary.tsx

@@ -34,13 +34,17 @@ function AccountAbstractionSummaryInner(props: {
 
 async function AsyncAccountAbstractionSummary(props: {
   teamId: string;
-  projectId: string;
+  projectId?: string;
   authToken: string;
+  from?: Date;
+  to?: Date;
 }) {
   const aggregateUserOpStats = await getAggregateUserOpUsage(
     {
       projectId: props.projectId,
       teamId: props.teamId,
+      from: props.from,
+      to: props.to,
     },
     props.authToken,
   );
@@ -55,8 +59,10 @@ async function AsyncAccountAbstractionSummary(props: {
 
 export function AccountAbstractionSummary(props: {
   teamId: string;
-  projectId: string;
+  projectId?: string;
   authToken: string;
+  from?: Date;
+  to?: Date;
 }) {
   return (
     <Suspense
@@ -71,6 +77,8 @@ export function AccountAbstractionSummary(props: {
         projectId={props.projectId}
         teamId={props.teamId}
         authToken={props.authToken}
+        from={props.from}
+        to={props.to}
       />
     </Suspense>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/account-abstraction/aa-analytics.tsx

@@ -15,13 +15,30 @@ import { GasMetricsChartCard } from "./AccountAbstractionAnalytics/GasMetricsCha
 import { TotalSponsoredChartCard } from "./AccountAbstractionAnalytics/TotalSponsoredChartCard";
 import { searchParams } from "./search-params";
 
-export function AccountAbstractionAnalytics(props: {
+type AccountAbstractionAnalyticsProps = {
   userOpStats: UserOpStats[];
   teamId: string;
   teamSlug: string;
   client: ThirdwebClient;
-  projectId: string;
-}) {
+} & (
+  | {
+      variant: "project";
+      projectId: string;
+    }
+  | {
+      variant: "team";
+      projects: {
+        id: string;
+        name: string;
+        image: string | null;
+        slug: string;
+      }[];
+    }
+);
+
+export function AccountAbstractionAnalytics(
+  props: AccountAbstractionAnalyticsProps,
+) {
   const [isLoading, startTransition] = useTransition();
 
   const [rangeType, setRangeType] = useQueryState(
@@ -62,6 +79,8 @@ export function AccountAbstractionAnalytics(props: {
     to: rangeType === "custom" ? to : getLastNDaysRange(rangeType).to,
     type: rangeType,
   };
+  const resolvedFrom = range.from;
+  const resolvedTo = range.to;
 
   return (
     <div>
@@ -105,15 +124,18 @@ export function AccountAbstractionAnalytics(props: {
           userOpStats={props.userOpStats}
         />
 
-        <SponsoredTransactionsTable
-          client={props.client}
-          from={from.toISOString()}
-          projectId={props.projectId}
-          teamId={props.teamId}
-          teamSlug={props.teamSlug}
-          to={to.toISOString()}
-          variant="project"
-        />
+        {resolvedFrom && resolvedTo && (
+          <SponsoredTransactionsTable
+            client={props.client}
+            from={resolvedFrom.toISOString()}
+            teamId={props.teamId}
+            teamSlug={props.teamSlug}
+            to={resolvedTo.toISOString()}
+            {...(props.variant === "project"
+              ? { projectId: props.projectId, variant: "project" as const }
+              : { projects: props.projects, variant: "team" as const })}
+          />
+        )}
       </div>
     </div>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/sponsored-gas/page.tsx

@@ -99,10 +99,13 @@ export default async function Page(props: {
           projectId={project.id}
           teamId={project.teamId}
           authToken={authToken}
+          from={range.from}
+          to={range.to}
         />
 
         <AccountAbstractionAnalytics
           client={client}
+          variant="project"
           projectId={project.id}
           teamId={project.teamId}
           teamSlug={params.team_slug}