From 39a47ec23ff52e609825cbd8ebdfa9576b0df22e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Sat, 28 Feb 2026 18:53:02 +0000
Subject: [PATCH] feat(cashflow): promote trend chart above money flow and
 increase height (#166)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Why

The Cashflow Trend chart was buried at the bottom of the page, making it
easy to miss despite being a high-value overview of income, expenses,
and net cashflow over time.

## What

- Moved the **Cashflow Trend** chart to appear immediately after the
summary cards, before the **Money Flow** (Sankey) chart
- Increased the chart height from `h-[250px]` to `h-[350px]` (both the
rendered chart and loading skeleton) to give it more visual weight,
closer to other prominent charts in the app

## Verification

### Tests
No logic changes — purely layout and sizing adjustments to existing
components.

### Manual
- Cashflow page now shows: Summary Cards → Cashflow Trend → Money Flow →
Breakdown Cards
- Trend chart renders taller and is more immediately visible on page
load
---
 .../js/components/charts/cashflow-trend-chart.tsx  |  4 ++--
 resources/js/pages/cashflow/index.tsx              | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/charts/cashflow-trend-chart.tsx b/resources/js/components/charts/cashflow-trend-chart.tsx
index 701421ad..4caaddea 100644
--- a/resources/js/components/charts/cashflow-trend-chart.tsx
+++ b/resources/js/components/charts/cashflow-trend-chart.tsx
@@ -163,7 +163,7 @@ export function CashflowTrendChart({
                     </CardTitle>
                 </CardHeader>
                 <CardContent>
-                    <div className="h-[250px] animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
+                    <div className="h-[350px] animate-pulse rounded bg-gray-200 dark:bg-gray-700" />
                 </CardContent>
             </Card>
         );
@@ -185,7 +185,7 @@ export function CashflowTrendChart({
                 <div ref={scrollContainerRef} className="overflow-x-auto">
                     <ChartContainer
                         config={chartConfig}
-                        className="h-[250px] w-full"
+                        className="h-[350px] w-full"
                         style={{ minWidth: `${minChartWidth}px` }}
                     >
                         <BarChart accessibilityLayer data={data}>
diff --git a/resources/js/pages/cashflow/index.tsx b/resources/js/pages/cashflow/index.tsx
index 913c90b8..414c3b36 100644
--- a/resources/js/pages/cashflow/index.tsx
+++ b/resources/js/pages/cashflow/index.tsx
@@ -112,6 +112,13 @@ export default function CashflowPage() {
                     />
                 </div>
 
+                {/* Trend Chart */}
+                <CashflowTrendChart
+                    data={trend}
+                    loading={isLoading}
+                    currency={auth.user.currency_code}
+                />
+
                 {/* Sankey Diagram */}
                 <Card>
                     <CardHeader className="pb-4">
@@ -148,13 +155,6 @@ export default function CashflowPage() {
                         currency={auth.user.currency_code}
                     />
                 </div>
-
-                {/* Trend Chart */}
-                <CashflowTrendChart
-                    data={trend}
-                    loading={isLoading}
-                    currency={auth.user.currency_code}
-                />
             </div>
         </AppSidebarLayout>
     );