From 346e21ad4eec3b9dd7369abd6503b66fd7262c92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Mon, 8 Jun 2026 09:23:57 +0200
Subject: [PATCH] feat(cashflow): enlarge and color-code net cashflow and saved
 cards (#505)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

Enlarge and color-code the headline numbers in the first two cash-flow
cards so users can spot a weak savings net or low allocation at a
glance.

- **Net Cashflow**: headline number bumped to `4xl`; green when net ≥ 0,
red when negative.
- **Saved & Invested**: headline number bumped to `4xl`; colored by
allocation rate — green ≥50%, yellow ≥25%, orange ≥0%, red below.

## Why

The numbers were uniformly black, making it hard to tell at a glance
when net cashflow is negative or when only a little is being set aside.

## Testing

- `vitest run` on `net-cashflow-card.test.tsx` ✅
- `bun run format` / `bun run lint` clean
---
 resources/js/components/cashflow/net-cashflow-card.tsx   | 7 ++++++-
 resources/js/components/cashflow/saved-invested-card.tsx | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/cashflow/net-cashflow-card.tsx b/resources/js/components/cashflow/net-cashflow-card.tsx
index 41561ae5..3360aa18 100644
--- a/resources/js/components/cashflow/net-cashflow-card.tsx
+++ b/resources/js/components/cashflow/net-cashflow-card.tsx
@@ -103,10 +103,15 @@ export function NetCashflowCard({
                         <AmountDisplay
                             amountInCents={current.net}
                             currencyCode={currency}
-                            size="2xl"
+                            size="4xl"
                             weight="bold"
                             minimumFractionDigits={0}
                             maximumFractionDigits={0}
+                            className={
+                                current.net >= 0
+                                    ? 'text-green-600 dark:text-green-400'
+                                    : 'text-red-600 dark:text-red-400'
+                            }
                             highlightPositive
                         />
                     </div>
diff --git a/resources/js/components/cashflow/saved-invested-card.tsx b/resources/js/components/cashflow/saved-invested-card.tsx
index 80a5de34..80e74abc 100644
--- a/resources/js/components/cashflow/saved-invested-card.tsx
+++ b/resources/js/components/cashflow/saved-invested-card.tsx
@@ -167,10 +167,11 @@ export function SavedInvestedCard({
                     <AmountDisplay
                         amountInCents={allocated}
                         currencyCode={currency}
-                        size="2xl"
+                        size="4xl"
                         weight="bold"
                         minimumFractionDigits={0}
                         maximumFractionDigits={0}
+                        className={rateColor}
                         highlightPositive
                     />
                     <span