Add charts on usage page

Author: MananTank

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

@@ -101,18 +101,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 +116,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 +146,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 +157,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",