From 88d8f8e671be4b611a118f8a1a5b6f65dec7ddcd Mon Sep 17 00:00:00 2001
From: Etienne <45695613+etiennejouan@users.noreply.github.com>
Date: Sat, 11 Oct 2025 09:06:36 +0200
Subject: [PATCH] Billing - fix credit usage bar readibility (#15037)

Previous display suggested that the progress bar was completely full
(and no remaining credits) when it was actually completely empty.
Minimal value is set in this PR.

<img width="581" height="143" alt="Screenshot 2025-10-10 at 21 32 20"
src="https://github.com/user-attachments/assets/89acfe7f-b142-46cc-a3c6-090f5b2929fa"
/>
---
 .../billing/components/SettingsBillingCreditsSection.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx b/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx
index dc4b0c413af..23a8600e166 100644
--- a/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx
+++ b/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx
@@ -47,6 +47,7 @@ export const SettingsBillingCreditsSection = ({
     getWorkflowNodeExecutionUsage();
 
   const progressBarValue = (usedCredits / grantedCredits) * 100;
+  const displayedProgressBarValue = progressBarValue < 3 ? 3 : progressBarValue;
 
   const intervalLabel = getIntervalLabel(isMonthlyPlan);
 
@@ -73,7 +74,7 @@ export const SettingsBillingCreditsSection = ({
             value={`${formatNumber(usedCredits)}/${formatNumber(grantedCredits, { abbreviate: true, decimals: 2 })}`}
           />
           <ProgressBar
-            value={progressBarValue}
+            value={displayedProgressBarValue}
             barColor={progressBarValue > 100 ? COLOR.red40 : COLOR.blue}
             backgroundColor={BACKGROUND_LIGHT.tertiary}
             withBorderRadius={true}