refactor(dashboard): cleanup project overview page

Author: gregfromstl

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

@@ -10,7 +10,7 @@ export function ProjectOverviewHeader(props: {
   const { project, interval, range } = props;
 
   return (
-    <div className="container flex flex-col items-start gap-6 p-6 md:h-[120px] md:flex-row md:items-center md:py-0">
+    <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}

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

@@ -128,7 +128,7 @@ export function StatBreakdownCard({
                     `[data-index^="${cardId}"]`,
                   );
                   for (const bar of bars) {
-                    bar.classList.add("opacity-40");
+                    bar.classList.remove("opacity-40");
                   }
                 }}
               >

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

@@ -1,8 +1,8 @@
 import { notFound } from "next/navigation";
 
 import { getProjects } from "@/api/projects";
-import { fetchAnalytics } from "data/analytics/fetch-analytics";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { fetchAnalytics } from "data/analytics/fetch-analytics";
 
 import type {
   InAppWalletStats,
@@ -69,41 +69,25 @@ export default async function ProjectOverviewPage(props: PageProps) {
 
   // Fetch all analytics data in parallel
   const [
-    walletConnectionTimeSeries,
     walletConnections,
     walletUserStatsTimeSeries,
-    walletUserStats,
     inAppWalletUsage,
     userOpUsage,
   ] = await Promise.all([
-    // Time series data for wallet connections
-    getWalletConnections({
-      clientId: "663baecef520df96d08766f37f4b40c0",
-      from: range.from,
-      to: range.to,
-      period: interval,
-    }),
     // Aggregated wallet connections
     getWalletConnections({
-      clientId: "663baecef520df96d08766f37f4b40c0",
+      clientId: params.project_slug,
       from: range.from,
       to: range.to,
       period: "all",
     }),
     // Time series data for wallet users
     getWalletUsers({
-      clientId: "663baecef520df96d08766f37f4b40c0",
+      clientId: params.project_slug,
       from: range.from,
       to: range.to,
       period: interval,
     }),
-    // Aggregated wallet users
-    getWalletUsers({
-      clientId: "663baecef520df96d08766f37f4b40c0",
-      from: range.from,
-      to: range.to,
-      period: "all",
-    }),
     // In-app wallet usage
     getInAppWalletUsage({
       clientId: params.project_slug,
@@ -113,15 +97,15 @@ export default async function ProjectOverviewPage(props: PageProps) {
     }),
     // User operations usage
     getUserOpUsage({
-      clientId: "f2512e0fb572e1bed2c3d1b64b2ea360",
+      clientId: params.project_slug,
       from: range.from,
       to: range.to,
       period: "all",
     }),
   ]);
 
   const isEmpty =
-    walletConnectionTimeSeries.length === 0 &&
+    walletUserStatsTimeSeries.length === 0 &&
     walletConnections.length === 0 &&
     inAppWalletUsage.length === 0 &&
     userOpUsage.length === 0;
@@ -141,27 +125,35 @@ export default async function ProjectOverviewPage(props: PageProps) {
         </div>
       ) : (
         <div className="space-y-6 md:container md:p-6">
-          <div className="md:px-6">
-            <UsersChartCard
-              chartKey={
-                (searchParams.usersChart as "totalUsers" | "uniqueUsers") ??
-                "totalUsers"
-              }
-              walletStats={walletConnectionTimeSeries}
-              userStats={walletUserStatsTimeSeries}
-              aggregatedWalletStats={walletConnections}
-              aggregatedUserStats={walletUserStats}
-              searchParams={searchParams}
-            />
-          </div>
-          <div className="grid gap-6 px-6 md:grid-cols-2">
-            <WalletDistributionCard data={walletConnections} />
-            <AuthMethodDistributionCard data={inAppWalletUsage} />
-          </div>
-          <div className="grid gap-6 px-6 max-md:pb-6 md:grid-cols-2">
-            <TotalSponsoredCard data={userOpUsage} />
-            <UserOpUsageCard data={userOpUsage} />
+          {walletUserStatsTimeSeries.length > 0 && (
+            <div className="">
+              <UsersChartCard
+                chartKey={
+                  (searchParams.usersChart as
+                    | "totalUsers"
+                    | "activeUsers"
+                    | "newUsers"
+                    | "returningUsers") ?? "activeUsers"
+                }
+                userStats={walletUserStatsTimeSeries}
+                searchParams={searchParams}
+              />
+            </div>
+          )}
+          <div className="grid gap-6 max-md:px-6 md:grid-cols-2">
+            {walletConnections.length > 0 && (
+              <WalletDistributionCard data={walletConnections} />
+            )}
+            {inAppWalletUsage.length > 0 && (
+              <AuthMethodDistributionCard data={inAppWalletUsage} />
+            )}
           </div>
+          {userOpUsage.length > 0 && (
+            <div className="grid gap-6 max-md:px-6 max-md:pb-6 md:grid-cols-2">
+              <TotalSponsoredCard data={userOpUsage} />
+              <UserOpUsageCard data={userOpUsage} />
+            </div>
+          )}
         </div>
       )}
     </div>
@@ -170,7 +162,7 @@ export default async function ProjectOverviewPage(props: PageProps) {
 
 type UserMetrics = {
   totalUsers: number;
-  uniqueUsers: number;
+  activeUsers: number;
   newUsers: number;
   returningUsers: number;
 };
@@ -184,100 +176,38 @@ type TimeSeriesMetrics = UserMetrics & {
  */
 function processTimeSeriesData(
   userStats: WalletUserStats[],
-  walletStats: WalletStats[],
 ): TimeSeriesMetrics[] {
   const metrics: TimeSeriesMetrics[] = [];
 
+  let cumulativeUsers = 0;
   for (const stat of userStats) {
-    // Get all wallet stats for this date
-    const walletStatsForDate = walletStats.filter((s) => s.date === stat.date);
-    
-    // Calculate total connections across all wallet types
-    const totalConnections = walletStatsForDate.reduce(
-      (sum, curr) => sum + curr.totalConnections,
-      0,
-    );
-
-    const existingMetric = metrics.find((m) => m.date === stat.date);
-    
-    if (!existingMetric) {
-      // Add new metrics entry
-      metrics.push({
-        date: stat.date,
-        totalUsers: totalConnections,
-        returningUsers: stat.returningUsers ?? 0,
-        newUsers: stat.newUsers ?? 0,
-        uniqueUsers: stat.totalUsers ?? 0,
-      });
-    } else {
-      // Update existing metrics
-      existingMetric.totalUsers += totalConnections;
-      existingMetric.uniqueUsers += stat.totalUsers ?? 0;
-      existingMetric.newUsers += stat.newUsers ?? 0;
-      existingMetric.returningUsers += stat.returningUsers ?? 0;
-    }
-  }
-
-  return metrics;
-}
-
-/**
- * Aggregates total metrics across all time periods
- */
-function calculateAggregatedMetrics(
-  aggregatedUserStats: WalletUserStats[],
-  aggregatedWalletStats: WalletStats[],
-): UserMetrics {
-  const metrics: UserMetrics = {
-    totalUsers: 0,
-    uniqueUsers: 0,
-    newUsers: 0,
-    returningUsers: 0,
-  };
-
-  for (const stat of aggregatedUserStats) {
-    // Get all wallet stats for this date
-    const walletStatsForDate = aggregatedWalletStats.filter(
-      (s) => s.date === stat.date,
-    );
-    
-    // Add up metrics
-    metrics.totalUsers += walletStatsForDate.reduce(
-      (sum, curr) => sum + curr.totalConnections,
-      0,
-    );
-    metrics.uniqueUsers += stat.totalUsers ?? 0;
-    metrics.newUsers += stat.newUsers ?? 0;
-    metrics.returningUsers += stat.returningUsers ?? 0;
+    cumulativeUsers += stat.totalUsers ?? 0;
+    metrics.push({
+      date: stat.date,
+      activeUsers: stat.totalUsers ?? 0,
+      returningUsers: stat.returningUsers ?? 0,
+      newUsers: stat.newUsers ?? 0,
+      totalUsers: cumulativeUsers,
+    });
   }
 
   return metrics;
 }
 
 function UsersChartCard({
   chartKey,
-  walletStats,
   userStats,
-  aggregatedWalletStats,
-  aggregatedUserStats,
   searchParams,
 }: {
   chartKey: keyof UserMetrics;
-  walletStats: WalletStats[];
   userStats: WalletUserStats[];
-  aggregatedWalletStats: WalletStats[];
-  aggregatedUserStats: WalletUserStats[];
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
-  const timeSeriesData = processTimeSeriesData(userStats, walletStats);
-  const aggregatedData = calculateAggregatedMetrics(
-    aggregatedUserStats,
-    aggregatedWalletStats,
-  );
+  const timeSeriesData = processTimeSeriesData(userStats);
 
   const chartConfig = {
-    totalUsers: { label: "Total Users", color: "hsl(var(--chart-1))" },
-    uniqueUsers: { label: "Unique Users", color: "hsl(var(--chart-2))" },
+    activeUsers: { label: "Active Users", color: "hsl(var(--chart-1))" },
+    totalUsers: { label: "Total Users", color: "hsl(var(--chart-2))" },
     newUsers: { label: "New Users", color: "hsl(var(--chart-3))" },
     returningUsers: {
       label: "Returning Users",
@@ -291,7 +221,9 @@ function UsersChartCard({
       chartConfig={chartConfig}
       activeChart={chartKey}
       data={timeSeriesData}
-      aggregateFn={(_data, key) => aggregatedData[key]}
+      aggregateFn={(_data, key) =>
+        timeSeriesData[timeSeriesData.length - 1]?.[key]
+      }
       existingQueryParams={searchParams}
     />
   );