feat(tracker): show last_updated age on balance cards and summary pill
This commit is contained in:
parent
80b5d56010
commit
9e38a6b252
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue