feat(tracker): show last_updated age on balance cards and summary pill

This commit is contained in:
null 2026-06-06 15:17:27 -05:00
parent 80b5d56010
commit 9e38a6b252
1 changed files with 17 additions and 1 deletions

View File

@ -32,6 +32,11 @@ import { TrackerBucket as Bucket } from '@/components/tracker/TrackerBucket';
import IncomeBreakdownModal from '@/components/IncomeBreakdownModal';
function fmtBalanceAge(isoStr) {
if (!isoStr) return null;
return new Date(isoStr).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
}
// Main page
function LateAttributionDialog({ attr, remaining, busy, onAccept, onDismiss }) {
if (!attr) return null;
@ -434,6 +439,12 @@ export default function TrackerPage() {
<span className="font-semibold">{bankTracking.account_name}</span>
<span className="text-muted-foreground">·</span>
<span>{fmt(bankTracking.balance ?? 0)} balance</span>
{bankTracking.last_updated && (
<>
<span className="text-muted-foreground">·</span>
<span className="text-muted-foreground">as of {fmtBalanceAge(bankTracking.last_updated)}</span>
</>
)}
{Number(bankTracking.pending_payments ?? 0) > 0 && (
<>
<span className="text-muted-foreground">·</span>
@ -540,7 +551,7 @@ export default function TrackerPage() {
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
</span>
Live
Live Sync
</span>
</div>
<p className="text-[1.75rem] font-bold tracking-tight font-mono leading-none text-foreground">
@ -549,6 +560,11 @@ export default function TrackerPage() {
<p className="mt-2 text-[11px] text-muted-foreground">
{Number(bankTracking.remaining ?? 0) < 0 ? '' : ''}{fmt(Math.abs(Number(bankTracking.remaining ?? 0)))} projected after bills
</p>
{bankTracking.last_updated && (
<p className="mt-1 text-[10px] text-muted-foreground/60">
as of {fmtBalanceAge(bankTracking.last_updated)}
</p>
)}
</button>
) : (
<SummaryCard