Add TopstepX platform support, drain withdrawal stages, and perfect-path calendar projection
- TopstepXClient (ProjectX Gateway): API-key auth, SignalR user hub, Trade/search daily P&L, emulated OCO exits, books-invariant withdrawal detection for $0-start accounts - Platform-aware client pool, credentials (api_key column), and credential form; $0-size account types match by prefix alone - Drain stages: min-day ($5-$15 randomized) MNQ legs for the configured days, then wait for the 50% withdrawal; stage pills show 'Stage N – Drain' - Account calendar projects the perfect path: future days book their planned targets, simulated 50% withdrawals, payout marker Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Brandon Li
co-authored by
Claude Fable 5
Claude Fable 5
parent
1bca441247
commit
50a5eb4713
@@ -16,6 +16,7 @@ import {
|
||||
} from 'recharts';
|
||||
import type { FirmConfig, FirmState, AccountState, AccountConfig } from '@/types';
|
||||
import { stagePillClasses } from '@/lib/stage-colors';
|
||||
import { projectPerfectPath } from '@/lib/trading-logic';
|
||||
|
||||
/** Reassign this account to another of its firm's account types, or hand it
|
||||
* back to the auto-resolver. Mirrors the control on the dashboard. */
|
||||
@@ -203,7 +204,18 @@ const MONTH_NAMES = [
|
||||
];
|
||||
const DOW_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
|
||||
function CalendarMonth({ year, month, pnlMap, fundMap, stageMap }: { year: number; month: number; pnlMap: Map<string, number>; fundMap: Map<string, number>; stageMap: Map<string, number> }) {
|
||||
function CalendarMonth({ year, month, pnlMap, fundMap, stageMap, projPnlMap, projFundMap, projStageMap, payoutDate }: {
|
||||
year: number;
|
||||
month: number;
|
||||
pnlMap: Map<string, number>;
|
||||
fundMap: Map<string, number>;
|
||||
stageMap: Map<string, number>;
|
||||
/** Perfect-path projection — rendered faded and dashed on days with no real data. */
|
||||
projPnlMap?: Map<string, number>;
|
||||
projFundMap?: Map<string, number>;
|
||||
projStageMap?: Map<string, number>;
|
||||
payoutDate?: string;
|
||||
}) {
|
||||
const daysInMonth = new Date(year, month, 0).getDate();
|
||||
const firstDow = new Date(year, month - 1, 1).getDay(); // 0 = Sunday
|
||||
|
||||
@@ -250,9 +262,16 @@ function CalendarMonth({ year, month, pnlMap, fundMap, stageMap }: { year: numbe
|
||||
const key = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
const pnl = pnlMap.get(key);
|
||||
const fundAmt = fundMap.get(key);
|
||||
const stage = stageMap.get(key);
|
||||
const hasData = pnl !== undefined;
|
||||
const positive = hasData && pnl! >= 0;
|
||||
|
||||
// Projection only fills days with no real data.
|
||||
const projPnl = !hasData && fundAmt === undefined ? projPnlMap?.get(key) : undefined;
|
||||
const projFund = !hasData && fundAmt === undefined ? projFundMap?.get(key) : undefined;
|
||||
const isPayout = !hasData && key === payoutDate;
|
||||
const isProj = projPnl !== undefined || projFund !== undefined || isPayout;
|
||||
const stage = stageMap.get(key) ?? (isProj ? projStageMap?.get(key) : undefined);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
@@ -263,7 +282,13 @@ function CalendarMonth({ year, month, pnlMap, fundMap, stageMap }: { year: numbe
|
||||
: 'bg-red-50 border border-red-100'
|
||||
: fundAmt !== undefined
|
||||
? 'bg-amber-50 border border-amber-100'
|
||||
: 'bg-slate-50 border border-transparent'
|
||||
: isPayout
|
||||
? 'bg-blue-50/60 border border-dashed border-blue-200'
|
||||
: projFund !== undefined
|
||||
? 'bg-amber-50/50 border border-dashed border-amber-200'
|
||||
: projPnl !== undefined
|
||||
? 'bg-green-50/50 border border-dashed border-green-200'
|
||||
: 'bg-slate-50 border border-transparent'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
@@ -273,7 +298,7 @@ function CalendarMonth({ year, month, pnlMap, fundMap, stageMap }: { year: numbe
|
||||
{day}
|
||||
</span>
|
||||
{stage !== undefined && (
|
||||
<span className="text-[8px] font-semibold text-slate-400 leading-none">
|
||||
<span className={`text-[8px] font-semibold leading-none ${isProj ? 'text-slate-300' : 'text-slate-400'}`}>
|
||||
#{stage}
|
||||
</span>
|
||||
)}
|
||||
@@ -290,6 +315,21 @@ function CalendarMonth({ year, month, pnlMap, fundMap, stageMap }: { year: numbe
|
||||
W/D {fundAmt >= 0 ? '+' : '−'}${fmt(Math.abs(fundAmt))}
|
||||
</span>
|
||||
)}
|
||||
{projPnl !== undefined && (
|
||||
<span className="text-[11px] font-semibold tabular-nums leading-tight text-green-600/60">
|
||||
+${fmt(projPnl)}
|
||||
</span>
|
||||
)}
|
||||
{projFund !== undefined && (
|
||||
<span className="text-[10px] font-semibold tabular-nums leading-tight mt-0.5 text-amber-500/70">
|
||||
W/D −${fmt(Math.abs(projFund))}
|
||||
</span>
|
||||
)}
|
||||
{isPayout && (
|
||||
<span className="text-[10px] font-bold leading-tight mt-0.5 text-blue-600/80">
|
||||
Payout ✓
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -433,9 +473,30 @@ export default function AccountPage() {
|
||||
|
||||
const strokeGradId = 'equityStroke';
|
||||
|
||||
// Perfect-path projection: what the future looks like if every trading day
|
||||
// books exactly its plan, cycles complete, and a 50% withdrawal fires the
|
||||
// day a cycle finishes. Same planner the trade path runs, so the numbers
|
||||
// (bumps and drain amounts included) are what would actually be aimed for.
|
||||
const projection = (cfg && !isDead) ? projectPerfectPath({
|
||||
accountId: account.id,
|
||||
cfg,
|
||||
cycleDailyPnL: account.dailyPnL ?? [],
|
||||
fundTransactions,
|
||||
balance: account.amount,
|
||||
realizedPnL: account.realizedPnL,
|
||||
}) : [];
|
||||
const projPnlMap = new Map(projection.filter((p) => p.withdrawal === undefined && !p.payoutReady).map((p) => [p.date, p.pnl]));
|
||||
const projFundMap = new Map(projection.filter((p) => p.withdrawal !== undefined).map((p) => [p.date, p.withdrawal!]));
|
||||
const projStageMap = new Map(projection.map((p) => [p.date, p.stage]));
|
||||
const payoutDate = projection.find((p) => p.payoutReady)?.date;
|
||||
|
||||
// Build calendar data
|
||||
const pnlMap = new Map(displayPnL.map((d) => [d.date, d.pnl]));
|
||||
const allCalendarDates = [...displayPnL.map((d) => d.date), ...fundTransactions.map((f) => f.date)];
|
||||
const allCalendarDates = [
|
||||
...displayPnL.map((d) => d.date),
|
||||
...fundTransactions.map((f) => f.date),
|
||||
...projection.map((p) => p.date),
|
||||
];
|
||||
const calendarMonths = [...new Set(allCalendarDates.map((d) => d.slice(0, 7)))].sort();
|
||||
|
||||
// Build stage map: stage increments after each withdrawal (negative fund txn)
|
||||
@@ -511,7 +572,7 @@ export default function AccountPage() {
|
||||
<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 ${stagePillClasses(account.stage)}`}>
|
||||
Stage {account.stage}
|
||||
Stage {account.stage}{account.stageDrain ? ' – Drain' : ''}
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
@@ -704,11 +765,25 @@ export default function AccountPage() {
|
||||
{/* Daily P&L Calendar */}
|
||||
{calendarMonths.length > 0 && (
|
||||
<div className="bg-white border border-slate-200 rounded-xl shadow-sm p-6">
|
||||
<h2 className="text-slate-900 font-bold text-base mb-6">Daily P&L</h2>
|
||||
<div className="flex items-baseline justify-between mb-6">
|
||||
<h2 className="text-slate-900 font-bold text-base">Daily P&L</h2>
|
||||
{projection.length > 0 && (
|
||||
<span className="text-xs text-slate-400">
|
||||
Dashed days: the perfect path — planned targets booked daily, 50% withdrawals when a stage completes
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-8" style={{ gridTemplateColumns: `repeat(${Math.min(calendarMonths.length, 3)}, minmax(0, 1fr))` }}>
|
||||
{calendarMonths.map((ym) => {
|
||||
const [y, m] = ym.split('-').map(Number);
|
||||
return <CalendarMonth key={ym} year={y} month={m} pnlMap={pnlMap} fundMap={fundMap} stageMap={stageMap} />;
|
||||
return (
|
||||
<CalendarMonth
|
||||
key={ym} year={y} month={m}
|
||||
pnlMap={pnlMap} fundMap={fundMap} stageMap={stageMap}
|
||||
projPnlMap={projPnlMap} projFundMap={projFundMap}
|
||||
projStageMap={projStageMap} payoutDate={payoutDate}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user