From 6288f5f8d48a7850771eb26754c95d12a857372d Mon Sep 17 00:00:00 2001
From: Felipe Coutinho <felipi@live.com>
Date: Mon, 4 May 2026 15:42:39 +0000
Subject: [PATCH] feat(budgets, cards): progress bar em cor destructive quando
 limite excedido
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adiciona prop indicatorClassName ao componente Progress. Orçamentos
estourados e cartões com 100% do limite utilizado exibem a barra
com indicador e fundo na cor destructive.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/features/budgets/components/budget-card.tsx |  1 +
 src/features/cards/components/card-item.tsx     |  4 +++-
 src/shared/components/ui/progress.tsx           | 10 ++++++++--
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/features/budgets/components/budget-card.tsx b/src/features/budgets/components/budget-card.tsx
index 2e56ad4..e05dc88 100644
--- a/src/features/budgets/components/budget-card.tsx
+++ b/src/features/budgets/components/budget-card.tsx
@@ -90,6 +90,7 @@ export function BudgetCard({ budget, onEdit, onRemove }: BudgetCardProps) {
 					<Progress
 						value={usagePercent}
 						className={cn("h-2.5", exceeded && "bg-destructive/20!")}
+						indicatorClassName={cn(exceeded && "bg-destructive")}
 						aria-label={`${usagePercent.toFixed(1)}% do orçamento utilizado`}
 					/>
 					<span className="text-xs text-muted-foreground">
diff --git a/src/features/cards/components/card-item.tsx b/src/features/cards/components/card-item.tsx
index cb770ac..5fe715c 100644
--- a/src/features/cards/components/card-item.tsx
+++ b/src/features/cards/components/card-item.tsx
@@ -69,6 +69,7 @@ export function CardItem({
 
 	const usagePercent =
 		limit > 0 ? Math.min(Math.max((used / limit) * 100, 0), 100) : 0;
+	const exceeded = usagePercent >= 100;
 
 	const logoPath = resolveLogoSrc(logo);
 	const brandAsset = resolveCardBrandAsset(brand);
@@ -194,7 +195,8 @@ export function CardItem({
 				<div className="flex flex-col gap-2">
 					<Progress
 						value={usagePercent}
-						className="h-2.5"
+						className={cn("h-2.5", exceeded && "bg-destructive/20!")}
+						indicatorClassName={cn(exceeded && "bg-destructive")}
 						aria-label={`${usagePercent.toFixed(0)}% do limite utilizado`}
 					/>
 					<span className="text-xs text-muted-foreground">
diff --git a/src/shared/components/ui/progress.tsx b/src/shared/components/ui/progress.tsx
index 6fb2cf8..465eb56 100644
--- a/src/shared/components/ui/progress.tsx
+++ b/src/shared/components/ui/progress.tsx
@@ -7,9 +7,12 @@ import { cn } from "@/shared/utils/ui";
 
 function Progress({
 	className,
+	indicatorClassName,
 	value,
 	...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+}: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+	indicatorClassName?: string;
+}) {
 	return (
 		<ProgressPrimitive.Root
 			data-slot="progress"
@@ -21,7 +24,10 @@ function Progress({
 		>
 			<ProgressPrimitive.Indicator
 				data-slot="progress-indicator"
-				className="bg-primary h-full w-full flex-1 transition-all"
+				className={cn(
+					"bg-primary h-full w-full flex-1 transition-all",
+					indicatorClassName,
+				)}
 				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 			/>
 		</ProgressPrimitive.Root>