Add charts on usage page

Author: MananTank

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

@@ -1,6 +1,9 @@
 import type { UserOpStats } from "@/api/analytics";
+import { cn } from "@/lib/utils";
 import { defineChain } from "thirdweb";
 import { type ChainMetadata, getChainMetadata } from "thirdweb/chains";
+import { EmptyAccountAbstractionChartContent } from "../../../../../components/smart-wallets/AccountAbstractionAnalytics/SponsoredTransactionsChartCard";
+import { BarChart } from "../../../components/Analytics/BarChart";
 import { CombinedBarChartCard } from "../../../components/Analytics/CombinedBarChartCard";
 
 export async function TotalSponsoredChartCardUI({
@@ -81,19 +84,33 @@ export async function TotalSponsoredChartCardUI({
     },
   };
 
+  if (onlyMainnet) {
+    const filteredData = timeSeriesData.filter((d) => d.mainnet > 0);
+    return (
+      <div className={cn("rounded-lg border p-4 lg:p-6", className)}>
+        <h3 className="mb-1 font-semibold text-xl tracking-tight">
+          {title || "Total Sponsored"}
+        </h3>
+        <p className="text-muted-foreground"> {description}</p>
+        <BarChart
+          isCurrency
+          chartConfig={chartConfig}
+          data={filteredData}
+          activeKey="mainnet"
+          emptyChartContent={<EmptyAccountAbstractionChartContent />}
+        />
+      </div>
+    );
+  }
+
   return (
     <CombinedBarChartCard
       isCurrency
       title={title || "Total Sponsored"}
-      description={description}
       chartConfig={chartConfig}
       data={timeSeriesData}
-      hideTabs={onlyMainnet}
       activeChart={
-        onlyMainnet
-          ? "mainnet"
-          : ((searchParams?.totalSponsored as keyof typeof chartConfig) ??
-            "mainnet")
+        (searchParams?.totalSponsored as keyof typeof chartConfig) ?? "mainnet"
       }
       queryKey="totalSponsored"
       existingQueryParams={searchParams}

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.tsx

@@ -75,9 +75,10 @@ export function PlanInfoCard(props: {
         {isActualFreePlan ? (
           <div className="flex flex-col items-center py-8 text-center max-sm:gap-4">
             <CircleAlertIcon className="mb-3 text-muted-foreground lg:size-6" />
-            <p>Your plan includes a fixed amount of free usage</p>
+            <p>Your plan includes a fixed amount of free usage.</p>
             <p>
-              To unlock additional usage, Upgrade your plan to Starer or Growth
+              To unlock additional usage, upgrade your plan to Starter or
+              Growth.
             </p>
           </div>
         ) : (
@@ -101,18 +102,10 @@ function BillingInfo({
     (subscription) => subscription.type === "USAGE",
   );
 
-  // only plan and usage subscriptions are considered for now
-  const totalUsd = getAllSubscriptionsTotal(
-    subscriptions.filter((sub) => sub.type === "PLAN" || sub.type === "USAGE"),
-  );
-
   return (
     <div>
       {planSubscription && (
-        <SubscriptionOverview
-          subscription={planSubscription}
-          title="Plan Cost"
-        />
+        <SubscriptionOverview subscription={planSubscription} />
       )}
 
       {usageSubscription && (
@@ -124,28 +117,23 @@ function BillingInfo({
           />
         </>
       )}
-
-      <Separator className="my-4" />
-
-      <div className="flex items-center justify-between gap-6">
-        <h5 className="font-medium text-lg">Total Upcoming Bill</h5>
-        <p className="text-foreground">{totalUsd}</p>
-      </div>
     </div>
   );
 }
 
 function SubscriptionOverview(props: {
   subscription: TeamSubscription;
-  title: string;
+  title?: string;
 }) {
   const { subscription } = props;
 
   return (
     <div>
       <div className="flex items-center justify-between gap-6">
         <div>
-          <h5 className="font-medium text-lg">{props.title} </h5>
+          {props.title && (
+            <h5 className="font-medium text-lg">{props.title}</h5>
+          )}
           <p className="text-muted-foreground text-sm lg:text-base">
             {format(
               new Date(props.subscription.currentPeriodStart),
@@ -159,7 +147,7 @@ function SubscriptionOverview(props: {
           </p>
         </div>
 
-        <p className="text-muted-foreground">
+        <p className="text-foreground">
           {formatCurrencyAmount(
             subscription.upcomingInvoice.amount || 0,
             subscription.upcomingInvoice.currency,
@@ -170,21 +158,6 @@ function SubscriptionOverview(props: {
   );
 }
 
-function getAllSubscriptionsTotal(subscriptions: TeamSubscription[]) {
-  let totalCents = 0;
-  let currency = "USD";
-
-  for (const subscription of subscriptions) {
-    const amount = subscription.upcomingInvoice.amount;
-    currency = subscription.upcomingInvoice.currency;
-    if (amount) {
-      totalCents += amount;
-    }
-  }
-
-  return formatCurrencyAmount(totalCents, currency);
-}
-
 function formatCurrencyAmount(centsAmount: number, currency: string) {
   return new Intl.NumberFormat(undefined, {
     style: "currency",

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx

@@ -7,13 +7,15 @@ import type {
   UsageBillableByService,
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { InAppWalletUsersChartCardUI } from "components/embedded-wallets/Analytics/InAppWalletUsersChartCard";
+import { subMonths } from "date-fns";
 import Link from "next/link";
 import { Suspense, useMemo } from "react";
 import { toPercent, toSize } from "utils/number";
 import { TotalSponsoredChartCardUI } from "../../../../_components/TotalSponsoredCard";
 import { UsageCard } from "./UsageCard";
 
 type UsageProps = {
+  // TODO - remove when we have all the data available from team
   usage: UsageBillableByService;
   subscriptions: TeamSubscription[];
   account: Account;
@@ -26,6 +28,7 @@ export const Usage: React.FC<UsageProps> = ({
   account,
   team,
 }) => {
+  // TODO - get this from team instead of account
   const storageMetrics = useMemo(() => {
     if (!usageData) {
       return {};
@@ -36,18 +39,18 @@ export const Usage: React.FC<UsageProps> = ({
     const percent = toPercent(consumedBytes, limitBytes);
 
     return {
-      total: `${toSize(consumedBytes, "MB")} / ${toSize(
-        limitBytes,
-      )} (${percent}%)`,
+      total: `${toSize(Math.min(consumedBytes, limitBytes), "MB")} of ${toSize(limitBytes)} included storage used`,
       progress: percent,
       ...(usageData.billableUsd.storage > 0
         ? {
             overage: usageData.billableUsd.storage,
           }
         : {}),
+      totalUsage: `Total Usage: ${toSize(consumedBytes, "MB")}`,
     };
   }, [usageData]);
 
+  // TODO - get this from team instead of account
   const rpcMetrics = useMemo(() => {
     if (!usageData) {
       return {};
@@ -80,23 +83,30 @@ export const Usage: React.FC<UsageProps> = ({
 
   const usageSub = subscriptions.find((sub) => sub.type === "USAGE");
 
+  // we don't have `usageSub` for free plan - so we use "1 month ago" as the period
+  // even free plan can have usage data
+
+  const currentPeriodStart = usageSub?.currentPeriodStart
+    ? new Date(usageSub.currentPeriodStart)
+    : subMonths(new Date(), 1);
+
+  const currentPeriodEnd = usageSub?.currentPeriodEnd
+    ? new Date(usageSub.currentPeriodEnd)
+    : new Date();
+
   return (
     <div className="flex grow flex-col gap-8">
-      {usageSub && (
-        <>
-          <InAppWalletUsersChartCard
-            accountId={account.id}
-            from={new Date(usageSub.currentPeriodStart)}
-            to={new Date(usageSub.currentPeriodEnd)}
-          />
-
-          <TotalSponsoredCard
-            accountId={account.id}
-            from={new Date(usageSub.currentPeriodStart)}
-            to={new Date(usageSub.currentPeriodEnd)}
-          />
-        </>
-      )}
+      <InAppWalletUsersChartCard
+        accountId={account.id}
+        from={currentPeriodStart}
+        to={currentPeriodEnd}
+      />
+
+      <TotalSponsoredCard
+        accountId={account.id}
+        from={currentPeriodStart}
+        to={currentPeriodEnd}
+      />
 
       <UsageCard
         {...rpcMetrics}

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/UsageCard.tsx

@@ -1,4 +1,3 @@
-import { cn } from "@/lib/utils";
 import type { JSX } from "react";
 import { toUSD } from "utils/number";
 
@@ -10,6 +9,7 @@ interface UsageCardProps {
   progress?: number;
   description: string;
   children?: JSX.Element;
+  totalUsage?: string;
 }
 
 export const UsageCard: React.FC<UsageCardProps> = ({
@@ -20,10 +20,11 @@ export const UsageCard: React.FC<UsageCardProps> = ({
   progress,
   description,
   children,
+  totalUsage,
 }) => {
   return (
     <div className="relative flex min-h-[190px] flex-col rounded-lg border border-border bg-muted/50 p-4 lg:p-6">
-      <h3 className="mb-1 font-semibold text-xl">{name}</h3>
+      <h3 className="mb-1 font-semibold text-xl tracking-tight">{name}</h3>
       <p className="text-muted-foreground"> {description}</p>
 
       <div className="h-6" />
@@ -32,12 +33,13 @@ export const UsageCard: React.FC<UsageCardProps> = ({
         {title && <p className="text-foreground">{title}</p>}
 
         {total !== undefined && (
-          <p className="text-muted-foreground text-sm">
+          <p className="text-muted-foreground">
             {typeof total === "number" ? toUSD(total) : total}
           </p>
         )}
 
         {progress !== undefined && <Progress value={progress} />}
+        {totalUsage && <p className="mt-2 text-foreground">{totalUsage}</p>}
 
         {overage && (
           <p className="mt-2 text-muted-foreground text-sm">
@@ -58,14 +60,7 @@ function Progress(props: {
   return (
     <div className="rounded-full bg-muted">
       <div
-        className={cn(
-          "h-2 rounded-full",
-          props.value > 90
-            ? "bg-red-600"
-            : props.value > 50
-              ? "bg-yellow-600"
-              : "bg-blue-600",
-        )}
+        className={"h-2 rounded-full bg-blue-600"}
         style={{
           width: `${Math.min(props.value, 100)}%`,
         }}

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

@@ -40,6 +40,7 @@ export default async function Page(props: {
 
   return (
     <Usage
+      // TODO - remove accountUsage when we have all the data available from team
       usage={accountUsage}
       subscriptions={subscriptions}
       account={account}