Show stage pill next to profit target on dashboards

State API now returns stage = 1 + number of withdrawals. Both the main
dashboard and the account detail page show a small Stage N pill next to
the profit target value.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Brandon Li
2026-04-26 03:02:02 -05:00
co-authored by Claude Opus 4.6
parent 009f7471c2
commit 536aad27ef
4 changed files with 21 additions and 4 deletions
+10 -3
View File
@@ -1,6 +1,6 @@
'use client';
import { useEffect, useState } from 'react';
import { useEffect, useState, type ReactNode } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import {
@@ -47,7 +47,7 @@ function PerfRow({ label, value, badge, positive }: { label: string; value: stri
);
}
function ObjRow({ passed, label, value }: { passed: boolean; label: string; value: string }) {
function ObjRow({ passed, label, value }: { passed: boolean; label: ReactNode; value: string }) {
return (
<div className="flex items-center justify-between py-3 border-b border-slate-100 last:border-0">
<div className="flex items-center gap-2.5">
@@ -378,7 +378,14 @@ export default function AccountPage() {
<h2 className="text-slate-900 font-bold text-base mb-1">Objectives</h2>
<ObjRow
passed={profitPassed}
label="Profit Target"
label={
<span className="inline-flex items-center gap-1.5">
Profit Target
<span className="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold bg-indigo-100 text-indigo-700">
Stage {account.stage}
</span>
</span>
}
value={cfg ? `$${fmt(totalProfit)} of $${fmt(account.effectiveProfitTarget ?? cfg.profitTarget)}` : '—'}
/>
<ObjRow