null/BillTracker
null
/
BillTracker
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 1 Wiki Activity

feat: live bank status bar and card on TrackerPage with effective balance + pending

This commit is contained in:
null 2026-06-04 02:24:10 -05:00
parent 19421c06fc
commit d5a0b65532
1 changed files with 73 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
client/pages/TrackerPage.jsx
View File

@ -416,6 +416,35 @@ export default function TrackerPage() {
</div>
</div>
{/* ── B: Bank status bar ── */}
{bankTracking?.enabled && (
<div className={cn(
'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 rounded-xl border px-4 py-2.5 text-xs',
Number(bankTracking.remaining ?? 0) >= 0
? 'border-emerald-500/20 bg-emerald-500/5 text-emerald-700 dark:text-emerald-400'
: 'border-destructive/20 bg-destructive/5 text-destructive',
)}>
<div className="flex items-center gap-2">
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-50" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-current" />
</span>
<span className="font-semibold">{bankTracking.account_name}</span>
<span className="text-muted-foreground">·</span>
<span>{fmt(bankTracking.balance ?? 0)} balance</span>
{Number(bankTracking.pending_payments ?? 0) > 0 && (
<>
<span className="text-muted-foreground">·</span>
<span className="text-amber-600 dark:text-amber-400">{fmt(bankTracking.pending_payments)} pending</span>
</>
)}
</div>
<span className="font-semibold tabular-nums">
{Number(bankTracking.remaining ?? 0) < 0 ? '−' : ''}{fmt(Math.abs(Number(bankTracking.remaining ?? 0)))} projected
</span>
</div>
)}
<div className="rounded-xl border border-border/80 bg-card/95 p-4 shadow-sm shadow-black/15 space-y-3">
<div className="grid gap-3 lg:grid-cols-[minmax(220px,1fr)_220px_180px_auto] lg:items-center">
<label className="relative">
@ -485,25 +514,50 @@ export default function TrackerPage() {
</div>
) : (
<div className="grid grid-cols-2 gap-3 lg:flex">
<SummaryCard
type="starting"
value={summary.total_starting}
hint={(() => {
if (bankTracking?.enabled) {
const proj = Number(bankTracking.remaining ?? 0);
const sign = proj < 0 ? '−' : '';
return `${bankTracking.account_name} · projected ${sign}${fmt(Math.abs(proj))} after bills`;
}
if (!summary.has_starting_amounts) return 'Set monthly starting cash';
if (cashflow?.has_data && cashflow.period_projected !== undefined) {
const proj = Number(cashflow.period_projected);
const sign = proj < 0 ? '−' : '';
return `→ ${sign}${fmt(Math.abs(proj))} projected by ${cashflow.period_end_label}`;
}
return '';
})()}
onEdit={bankTracking?.enabled ? undefined : () => setEditStartingOpen(true)}
/>
{bankTracking?.enabled ? (
<div className={cn(
'flex-1 min-w-0 relative overflow-hidden rounded-xl border px-5 py-4 shadow-sm shadow-black/15 transition-all duration-300',
Number(bankTracking.remaining ?? 0) >= 0
? 'border-emerald-500/30 bg-card/95'
: 'border-destructive/30 bg-card/95',
)}>
<div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-emerald-500 to-teal-400" />
<div className="flex items-center gap-2 mb-3">
<Landmark className={cn('h-4 w-4', Number(bankTracking.remaining ?? 0) >= 0 ? 'text-emerald-500' : 'text-destructive')} />
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground truncate">
{bankTracking.account_name}
</p>
<span className="ml-auto flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
<span className="relative flex h-1.5 w-1.5">
<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
</span>
</div>
<p className="text-[1.75rem] font-bold tracking-tight font-mono leading-none text-foreground">
{fmt(bankTracking.effective_balance ?? 0)}
</p>
<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>
</div>
) : (
<SummaryCard
type="starting"
value={summary.total_starting}
hint={(() => {
if (!summary.has_starting_amounts) return 'Set monthly starting cash';
if (cashflow?.has_data && cashflow.period_projected !== undefined) {
const proj = Number(cashflow.period_projected);
const sign = proj < 0 ? '−' : '';
return `→ ${sign}${fmt(Math.abs(proj))} projected by ${cashflow.period_end_label}`;
}
return '';
})()}
onEdit={() => setEditStartingOpen(true)}
/>
)}
<SummaryCard type="paid" value={summary.total_paid} />
<SummaryCard type="overdue" value={summary.overdue} />
<SummaryCard type="paid" value={summary.previous_month_total} hint="Previous month"/>