[Dashboard] Feature: Team Analytics Page (#5353)

CNCT-2291

https://github.com/user-attachments/assets/163c5eb5-c4dc-4d0f-a6aa-099a321148e8

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on refactoring components related to analytics in the dashboard. It replaces the `ProjectOverviewHeader` with an `AnalyticsHeader`, updates various components to enhance functionality, and introduces new analytics-related features.

### Detailed summary
- Deleted `Steps.tsx` and `HomeProductCard.tsx`.
- Replaced `ProjectOverviewHeader` with `AnalyticsHeader` in various files.
- Updated `projectStub` function to remove the export.
- Introduced new components for analytics: `UsersChartCard`, `WalletDistributionCard`, `AuthMethodDistributionCard`, `TotalSponsoredCard`, and `UserOpUsageCard`.
- Enhanced `EmptyState` component styling and functionality.
- Adjusted imports to reflect new component paths.
- Added new fetching functions for analytics data: `getWalletConnections`, `getInAppWalletUsage`, `getUserOpUsage`, and `getWalletUsers`.

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

<!-- end pr-codex -->

Author: gregfromstl

apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx

@@ -24,11 +24,11 @@ import {
 import { type WalletId, getWalletInfo } from "thirdweb/wallets";
 
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
-import { CombinedBarChartCard } from "./components/CombinedBarChartCard";
-import { EmptyState } from "./components/EmptyState";
-import { PieChartCard } from "./components/PieChartCard";
-import { ProjectOverviewHeader } from "./components/ProjectOverviewHeader";
-import { StatBreakdownCard } from "./components/StatBreakdownCard";
+import { AnalyticsHeader } from "../../components/Analytics/AnalyticsHeader";
+import { CombinedBarChartCard } from "../../components/Analytics/CombinedBarChartCard";
+import { EmptyState } from "../../components/Analytics/EmptyState";
+import { PieChartCard } from "../../components/Analytics/PieChartCard";
+import { StatBreakdownCard } from "../../components/Analytics/StatBreakdownCard";
 
 type PageParams = {
   team_slug: string;
@@ -111,10 +111,10 @@ export default async function ProjectOverviewPage(props: PageProps) {
     userOpUsage.length === 0;
 
   return (
-    <div className="">
+    <div className="pb-16">
       <div className="w-full border-border-800 border-b px-6 dark:bg-muted/50">
-        <ProjectOverviewHeader
-          project={project}
+        <AnalyticsHeader
+          title={project.name}
           interval={interval}
           range={range}
         />

apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { getLastNDaysRange } from "components/analytics/date-range-selector";
-import { projectStub } from "stories/stubs";
 import { BadgeContainer, mobileViewport } from "stories/utils";
-import { ProjectOverviewHeader } from "./ProjectOverviewHeader";
+import { AnalyticsHeader } from "./AnalyticsHeader";
 
 const meta = {
-  title: "project/Overview/Header",
+  title: "Analytics/AnalyticsHeader",
   component: Component,
   parameters: {
     layout: "centered",
@@ -36,8 +35,8 @@ function Component() {
   return (
     <div className="container py-8">
       <BadgeContainer label="Base">
-        <ProjectOverviewHeader
-          project={projectStub("123", "456")}
+        <AnalyticsHeader
+          title="Project Overview"
           interval="day"
           range={getLastNDaysRange("last-120")}
         />

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.stories.tsx renamed to apps/dashboard/src/app/team/components/Analytics/AnalyticsHeader.stories.tsx

@@ -1,20 +1,17 @@
-import type { Project } from "@/api/projects";
 import type { Range } from "components/analytics/date-range-selector";
 import { RangeSelector } from "components/analytics/range-selector";
 
-export function ProjectOverviewHeader(props: {
-  project: Project;
+export function AnalyticsHeader(props: {
+  title: string;
   interval: "day" | "week";
   range: Range;
 }) {
-  const { project, interval, range } = props;
+  const { title, interval, range } = props;
 
   return (
     <div className="container flex flex-col items-start gap-6 px-2 py-6 md:h-[120px] md:flex-row md:items-center md:p-6 md:py-0">
       <div className="flex-1">
-        <h1 className="font-semibold text-3xl text-foreground">
-          {project.name}
-        </h1>
+        <h1 className="font-semibold text-3xl text-foreground">{title}</h1>
       </div>
       <RangeSelector interval={interval} range={range} />
     </div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectOverviewHeader.tsx renamed to apps/dashboard/src/app/team/components/Analytics/AnalyticsHeader.tsx

@@ -6,17 +6,18 @@ import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
 import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
 import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
 import { DocLink } from "components/shared/DocLink";
+import { ArrowRightIcon } from "lucide-react";
 import Image, { type StaticImageData } from "next/image";
 import Link from "next/link";
-import accountAbstractionIcon from "../../../../../../public/assets/tw-icons/account-abstraction.svg";
-import authIcon from "../../../../../../public/assets/tw-icons/auth.svg";
-import payIcon from "../../../../../../public/assets/tw-icons/pay.svg";
-import socialAuthIcon from "../../../../../../public/assets/tw-icons/social-auth.svg";
-import walletsIcon from "../../../../../../public/assets/tw-icons/wallets.svg";
+import accountAbstractionIcon from "../../../../../public/assets/tw-icons/account-abstraction.svg";
+import authIcon from "../../../../../public/assets/tw-icons/auth.svg";
+import payIcon from "../../../../../public/assets/tw-icons/pay.svg";
+import socialAuthIcon from "../../../../../public/assets/tw-icons/social-auth.svg";
+import walletsIcon from "../../../../../public/assets/tw-icons/wallets.svg";
 
 export function EmptyState() {
   return (
-    <div className="flex items-center justify-center md:min-h-[500px]">
+    <div className="flex items-start justify-center md:min-h-[500px]">
       <div className="group container flex flex-col items-center justify-center gap-8 rounded-lg border bg-card p-6 py-24">
         <div className="flex max-w-[500px] flex-col items-center justify-center gap-6">
           <AnimatedIcons />
@@ -62,9 +63,9 @@ export function EmptyState() {
           </div>
         </div>
         <div className="flex gap-2">
-          <Button variant="outline" asChild className="min-w-36">
+          <Button variant="primary" asChild className="min-w-36">
             <Link href="https://portal.thirdweb.com/connect" target="_blank">
-              View Docs
+              View Docs <ArrowRightIcon className="ml-2 h-4 w-auto" />
             </Link>
           </Button>
         </div>