[PRO-138] Dashboard: Update Project highlights card revenue tab (#8515)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the analytics components by adding new functionalities and refining existing code for better performance and readability. It introduces new data handling for `x402Settlements`, updates chart configurations, and improves conditional rendering in various components.

### Detailed summary
- Added `x402Settlements` data handling in `AsyncAppHighlightsCard`.
- Updated `CombinedBarChartConfig` to include `stackedKeys`.
- Improved conditional rendering for the `EmptyChartStateGetStartedCTA`.
- Refined the `BarChart` component for better data processing.
- Enhanced `ProjectHighlightsCard` to include `bridgeRevenue` and `x402Revenue`.
- Introduced utility functions for generating mock data in stories.
- Updated types in various components for better type safety.

> ✨ 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**
  * Added stacked data visualization support to charts.
  * Integrated x402 revenue tracking into analytics highlights.
  * Added ability to hide specific chart tabs from display.

* **Improvements**
  * Refined USD currency formatting to display 2 decimal places for cleaner presentation.
  * Made analytics CTA buttons conditionally displayed based on configuration.

* **Refactor**
  * Simplified settlement data model with inheritance to reduce redundancy.

<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: MananTank

apps/dashboard/src/@/components/analytics/empty-chart-state.tsx

@@ -36,7 +36,7 @@ export function LoadingChartState({ className }: { className?: string }) {
 }
 
 export function EmptyChartStateGetStartedCTA(props: {
-  link: {
+  link?: {
     label: string;
     href: string;
   };
@@ -59,16 +59,18 @@ export function EmptyChartStateGetStartedCTA(props: {
         )}
       </div>
 
-      <Button
-        asChild
-        className="rounded-full gap-2"
-        variant="default"
-        size="sm"
-      >
-        <Link href={props.link.href}>
-          {props.link.label} <ArrowUpRightIcon className="size-4" />
-        </Link>
-      </Button>
+      {props.link && (
+        <Button
+          asChild
+          className="rounded-full gap-2"
+          variant="default"
+          size="sm"
+        >
+          <Link href={props.link.href}>
+            {props.link.label} <ArrowUpRightIcon className="size-4" />
+          </Link>
+        </Button>
+      )}
     </div>
   );
 }

apps/dashboard/src/@/types/analytics.ts

@@ -101,36 +101,20 @@ export interface X402SettlementsOverall {
   totalValueUSD: number;
 }
 
-export interface X402SettlementsByChainId {
-  date: string;
+export interface X402SettlementsByChainId extends X402SettlementsOverall {
   chainId: string;
-  totalRequests: number;
-  totalValue: number;
-  totalValueUSD: number;
 }
 
-export interface X402SettlementsByPayer {
-  date: string;
+export interface X402SettlementsByPayer extends X402SettlementsOverall {
   payer: string;
-  totalRequests: number;
-  totalValue: number;
-  totalValueUSD: number;
 }
 
-interface X402SettlementsByReceiver {
-  date: string;
+interface X402SettlementsByReceiver extends X402SettlementsOverall {
   receiver: string;
-  totalRequests: number;
-  totalValue: number;
-  totalValueUSD: number;
 }
 
-export interface X402SettlementsByResource {
-  date: string;
+export interface X402SettlementsByResource extends X402SettlementsOverall {
   resource: string;
-  totalRequests: number;
-  totalValue: number;
-  totalValueUSD: number;
 }
 
 interface X402SettlementsByAsset {

apps/dashboard/src/@/utils/number.ts

@@ -1,10 +1,10 @@
 const usdCurrencyFormatter = new Intl.NumberFormat("en-US", {
   currency: "USD",
-  maximumFractionDigits: 6, // prefix with $
-  minimumFractionDigits: 0, // don't show decimal places if value is a whole number
-  notation: "compact", // at max 2 decimal places
-  roundingMode: "halfEven", // round to nearest even number, standard practice for financial calculations
-  style: "currency", // shows 1.2M instead of 1,200,000, 1.2B instead of 1,200,000,000
+  maximumFractionDigits: 2,
+  minimumFractionDigits: 0,
+  notation: "compact",
+  roundingMode: "halfEven",
+  style: "currency",
 });
 
 export const toUSD = (value: number) => {

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/_analytics/highlights-card-ui.stories.tsx

@@ -0,0 +1,158 @@
+import type { Meta } from "@storybook/nextjs";
+import { ResponsiveSearchParamsProvider } from "responsive-rsc";
+import type {
+  InAppWalletStats,
+  UniversalBridgeStats,
+  X402SettlementsOverall,
+} from "@/types/analytics";
+import { ProjectHighlightsCard } from "./highlights-card-ui";
+
+const meta = {
+  component: ProjectHighlightsCard,
+  decorators: [
+    (Story) => (
+      <ResponsiveSearchParamsProvider value={{}}>
+        <div className="container max-w-6xl py-10">
+          <Story />
+        </div>
+      </ResponsiveSearchParamsProvider>
+    ),
+  ],
+  title: "Analytics/ProjectHighlightsCard",
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof ProjectHighlightsCard>;
+
+export default meta;
+
+function generateDateSeries(days: number) {
+  const dates: string[] = [];
+  const today = new Date();
+  for (let i = days - 1; i >= 0; i--) {
+    const d = new Date(today);
+    d.setDate(today.getDate() - i);
+    dates.push(d.toISOString());
+  }
+  return dates;
+}
+
+function inAppWalletStub(days: number): InAppWalletStats[] {
+  const dates = generateDateSeries(days);
+  return dates.map((date) => {
+    return {
+      // main data
+      newUsers: randomValue(50, 100),
+      uniqueWalletsConnected: randomValue(500, 1200),
+      // others
+      authenticationMethod: "email",
+      date,
+    };
+  });
+}
+
+// a few aggregated entries that will be summed for the "Active Users" stat
+function aggregatedInAppWalletsStub(): InAppWalletStats[] {
+  return Array.from({ length: 3 }).map(() => {
+    return {
+      // main data
+      newUsers: randomValue(50, 100),
+      uniqueWalletsConnected: randomValue(500, 1200),
+      // others
+      date: new Date().toISOString(),
+      authenticationMethod: "email",
+    };
+  });
+}
+
+function bridgeVolumeStub(days: number): UniversalBridgeStats[] {
+  const dates = generateDateSeries(days);
+  return dates.map((date) => {
+    return {
+      // main data
+      developerFeeUsdCents: randomValue(500 * 100, 2500 * 100),
+      status: "completed",
+      // others
+      chainId: 0,
+      count: 0,
+      date,
+      amountUsdCents: 0,
+      type: "onchain",
+    };
+  });
+}
+
+function randomValue(min: number, max: number) {
+  return Math.max(0, Math.round(min + Math.random() * (max - min)));
+}
+
+function generateX402Settlements(days: number): X402SettlementsOverall[] {
+  const dates = generateDateSeries(days);
+  return dates.map((date) => {
+    return {
+      date,
+      totalRequests: randomValue(10, 100),
+      totalValue: randomValue(500, 2500),
+      totalValueUSD: randomValue(500, 2500),
+    };
+  });
+}
+
+export function ThirtyDays() {
+  const days = 30;
+  const data = {
+    aggregatedUserStats: aggregatedInAppWalletsStub(),
+    userStats: inAppWalletStub(days),
+    bridgeVolumeStats: bridgeVolumeStub(days),
+    x402Settlements: generateX402Settlements(days),
+  };
+
+  return (
+    <ProjectHighlightsCard
+      aggregatedUserStats={data.aggregatedUserStats}
+      userStats={data.userStats}
+      volumeStats={data.bridgeVolumeStats}
+      x402Settlements={data.x402Settlements}
+    />
+  );
+}
+
+export function SingleDayRevenue() {
+  const days = 1;
+  const data = {
+    aggregatedUserStats: [],
+    userStats: [],
+    bridgeVolumeStats: bridgeVolumeStub(days),
+    x402Settlements: generateX402Settlements(days),
+  };
+
+  return (
+    <ProjectHighlightsCard
+      aggregatedUserStats={data.aggregatedUserStats}
+      userStats={data.userStats}
+      volumeStats={data.bridgeVolumeStats}
+      x402Settlements={data.x402Settlements}
+    />
+  );
+}
+
+export function SingleDayRevenueNoX402() {
+  const days = 1;
+  const data = {
+    aggregatedUserStats: [],
+    userStats: [],
+    bridgeVolumeStats: bridgeVolumeStub(days),
+    x402Settlements: [],
+  };
+
+  return (
+    <ProjectHighlightsCard
+      aggregatedUserStats={data.aggregatedUserStats}
+      userStats={data.userStats}
+      volumeStats={data.bridgeVolumeStats}
+      x402Settlements={data.x402Settlements}
+    />
+  );
+}