From aa25b37d9bd451c3246bb4d393248f0bbf6258fe Mon Sep 17 00:00:00 2001
From: MaheshtheDev <38828053+MaheshtheDev@users.noreply.github.com>
Date: Fri, 3 Oct 2025 07:53:04 +0000
Subject: [PATCH] fix: billing metrics display for pro users (#450)

Before we are showing 0/0

![image.png](https://app.graphite.dev/user-attachments/assets/d306f167-4151-490c-bb5c-f3774d5324b7.png)
---
 apps/web/components/views/billing.tsx | 10 +-----
 apps/web/components/views/profile.tsx | 51 ++++++++++++++++-----------
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/apps/web/components/views/billing.tsx b/apps/web/components/views/billing.tsx
index 679b648e..25e28374 100644
--- a/apps/web/components/views/billing.tsx
+++ b/apps/web/components/views/billing.tsx
@@ -118,17 +118,9 @@ export function BillingView() {
 						<div className="flex justify-between items-center">
 							<span className="text-sm text-muted-foreground">Memories</span>
 							<span className="text-sm text-foreground">
-								{memoriesUsed} / {memoriesLimit}
+								Unlimited
 							</span>
 						</div>
-						<div className="w-full bg-muted-foreground/50 rounded-full h-2">
-							<div
-								className="bg-green-500 h-2 rounded-full transition-all"
-								style={{
-									width: `${Math.min((memoriesUsed / memoriesLimit) * 100, 100)}%`,
-								}}
-							/>
-						</div>
 					</div>
 					<div className="space-y-2">
 						<div className="flex justify-between items-center">
diff --git a/apps/web/components/views/profile.tsx b/apps/web/components/views/profile.tsx
index 93330da4..5aa21231 100644
--- a/apps/web/components/views/profile.tsx
+++ b/apps/web/components/views/profile.tsx
@@ -37,7 +37,10 @@ export function ProfileView() {
 	const memoriesUsed = memoriesCheck?.usage ?? 0
 	const memoriesLimit = memoriesCheck?.included_usage ?? 0
 
-	const { data: connectionsCheck } = fetchConnectionsFeature(autumn, !isCheckingStatus && !autumn.isLoading)
+	const { data: connectionsCheck } = fetchConnectionsFeature(
+		autumn,
+		!isCheckingStatus && !autumn.isLoading,
+	)
 	const connectionsUsed = connectionsCheck?.usage ?? 0
 
 	const handleUpgrade = async () => {
@@ -190,26 +193,32 @@ export function ProfileView() {
 					<div className="space-y-2">
 						<div className="flex justify-between items-center">
 							<span className="text-sm text-muted-foreground">Memories</span>
-							<span
-								className={`text-sm ${memoriesUsed >= memoriesLimit ? "text-red-500" : "text-foreground"}`}
-							>
-								{memoriesUsed} / {memoriesLimit}
-							</span>
-						</div>
-						<div className="w-full bg-muted-foreground/50 rounded-full h-2">
-							<div
-								className={`h-2 rounded-full transition-all ${
-									memoriesUsed >= memoriesLimit
-										? "bg-red-500"
-										: isPro
-											? "bg-green-500"
-											: "bg-blue-500"
-								}`}
-								style={{
-									width: `${Math.min((memoriesUsed / memoriesLimit) * 100, 100)}%`,
-								}}
-							/>
+							{isPro ? (
+								<span className="text-sm text-foreground">Unlimited</span>
+							) : (
+								<span
+									className={`text-sm ${memoriesUsed >= memoriesLimit ? "text-red-500" : "text-foreground"}`}
+								>
+									{memoriesUsed} / {memoriesLimit}
+								</span>
+							)}
 						</div>
+						{!isPro && (
+							<div className="w-full bg-muted-foreground/50 rounded-full h-2">
+								<div
+									className={`h-2 rounded-full transition-all ${
+										memoriesUsed >= memoriesLimit
+											? "bg-red-500"
+											: isPro
+												? "bg-green-500"
+												: "bg-blue-500"
+									}`}
+									style={{
+										width: `${Math.min((memoriesUsed / memoriesLimit) * 100, 100)}%`,
+									}}
+								/>
+							</div>
+						)}
 					</div>
 
 					{isPro && (
@@ -322,4 +331,4 @@ export function ProfileView() {
 			)}
 		</div>
 	)
-}
\ No newline at end of file
+}