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)
This commit is contained in:
MaheshtheDev 2025-10-03 07:53:04 +00:00
parent 56590e9329
commit aa25b37d9b
2 changed files with 31 additions and 30 deletions

View file

@ -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">

View file

@ -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>
)
}
}