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'; 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 // Main page
function LateAttributionDialog({ attr, remaining, busy, onAccept, onDismiss }) { function LateAttributionDialog({ attr, remaining, busy, onAccept, onDismiss }) {
if (!attr) return null; if (!attr) return null;
@ -434,6 +439,12 @@ export default function TrackerPage() {
<span className="font-semibold">{bankTracking.account_name}</span> <span className="font-semibold">{bankTracking.account_name}</span>
<span className="text-muted-foreground">·</span> <span className="text-muted-foreground">·</span>
<span>{fmt(bankTracking.balance ?? 0)} balance</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 && ( {Number(bankTracking.pending_payments ?? 0) > 0 && (
<> <>
<span className="text-muted-foreground">·</span> <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="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 className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
</span> </span>
Live Live Sync
</span> </span>
</div> </div>
<p className="text-[1.75rem] font-bold tracking-tight font-mono leading-none text-foreground"> <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"> <p className="mt-2 text-[11px] text-muted-foreground">
{Number(bankTracking.remaining ?? 0) < 0 ? '' : ''}{fmt(Math.abs(Number(bankTracking.remaining ?? 0)))} projected after bills {Number(bankTracking.remaining ?? 0) < 0 ? '' : ''}{fmt(Math.abs(Number(bankTracking.remaining ?? 0)))} projected after bills
</p> </p>
{bankTracking.last_updated && (
<p className="mt-1 text-[10px] text-muted-foreground/60">
as of {fmtBalanceAge(bankTracking.last_updated)}
</p>
)}
</button> </button>
) : ( ) : (
<SummaryCard <SummaryCard