Add charts on usage page

Author: MananTank

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

@@ -101,11 +101,6 @@ 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 && (
@@ -124,13 +119,6 @@ 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>
   );
 }
@@ -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",