From 4b145e230b5a19a25b585260b05f2cc2c19fe066 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Fri, 24 Apr 2026 12:45:51 +0100
Subject: [PATCH] feat(accounts): add today marker on projected balance chart
 (#321)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Adds a dashed 'Today' vertical reference line on the account balance
chart when a loan amortization projection is rendered. Makes it obvious
which months on the chart are historical (carry-forward of the last
recorded balance) and which are future projections.

## Context

Loan accounts extend their balance-evolution series with 12 months of
projected amortization values (see
`DashboardAnalyticsController::accountBalanceEvolution`). Without a
marker, past carry-forward months and future projected months looked
like a single continuous history.

## Changes

- `resources/js/components/accounts/account-balance-chart.tsx`
  - Import `ReferenceLine` from recharts.
  - Compute `todayMarker` (`yyyy-MM` monthly, `yyyy-MM-dd` daily).
- Render `<ReferenceLine>` inside the projected `ComposedChart` branch.
- Styling matches the budget spending chart (1px dashed, foreground
stroke, 'Today' label on top).

## Screenshots

_Visual change only — renders a dashed vertical line at the current date
on loan account charts with projection._
---
 .../accounts/account-balance-chart.tsx        | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/resources/js/components/accounts/account-balance-chart.tsx b/resources/js/components/accounts/account-balance-chart.tsx
index 9021cd71..9fc10cbc 100644
--- a/resources/js/components/accounts/account-balance-chart.tsx
+++ b/resources/js/components/accounts/account-balance-chart.tsx
@@ -48,6 +48,7 @@ import {
     BarChart,
     ComposedChart,
     Line,
+    ReferenceLine,
     XAxis,
 } from 'recharts';
 
@@ -680,6 +681,13 @@ export function AccountBalanceChart({
         [locale, granularity],
     );
 
+    const todayMarker = useMemo(() => {
+        const now = new Date();
+        return granularity === 'daily'
+            ? format(now, 'yyyy-MM-dd')
+            : format(now, 'yyyy-MM');
+    }, [granularity]);
+
     const valueFormatter = (value: number): string => {
         return formatChartCurrency(value, activeCurrencyCode, locale);
     };
@@ -1087,6 +1095,18 @@ export function AccountBalanceChart({
                                         activeDot={{ r: 4 }}
                                         connectNulls
                                     />
+                                    <ReferenceLine
+                                        x={todayMarker}
+                                        stroke="var(--color-foreground)"
+                                        strokeWidth={1}
+                                        strokeDasharray="4 4"
+                                        label={{
+                                            value: __('Today'),
+                                            position: 'top',
+                                            fontSize: 12,
+                                            fill: 'var(--color-muted-foreground)',
+                                        }}
+                                    />
                                 </ComposedChart>
                             ) : (
                                 <BarChart