Mirror live strategy controls in paper portfolio
This commit is contained in:
Thigazhezhilan J
parent
b0c1ea3651
commit
434be478e4
@ -10,13 +10,25 @@ import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
} from "@/components/ui/chart";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import { getStrategyStatus, startStrategy, stopStrategy } from "@/api/strategy";
|
||||
import {
|
||||
getStrategyStatus,
|
||||
resumeStrategy,
|
||||
startStrategy,
|
||||
stopStrategy,
|
||||
} from "@/api/strategy";
|
||||
import StrategyTimeline from "@/components/StrategyTimeline";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
|
||||
@ -80,8 +92,62 @@ type MarketStatusResponse = {
|
||||
checked_at?: string;
|
||||
};
|
||||
|
||||
type EngineStatus = {
|
||||
state?: string;
|
||||
run_id?: string | null;
|
||||
last_heartbeat_ts?: string | null;
|
||||
last_execution_ts?: string | null;
|
||||
next_eligible_ts?: string | null;
|
||||
};
|
||||
|
||||
type StrategyStatusResponse = {
|
||||
status?: string;
|
||||
last_updated?: string | null;
|
||||
last_execution_ts?: string | null;
|
||||
next_eligible_ts?: string | null;
|
||||
run_id?: string | null;
|
||||
can_resume?: boolean;
|
||||
can_restart?: boolean;
|
||||
config?: {
|
||||
strategy?: string | null;
|
||||
sip_amount?: number | null;
|
||||
sip_frequency?: {
|
||||
value?: number | null;
|
||||
unit?: string | null;
|
||||
} | null;
|
||||
mode?: string | null;
|
||||
broker?: string | null;
|
||||
active?: boolean | null;
|
||||
} | null;
|
||||
};
|
||||
|
||||
const MotionButton = motion(Button);
|
||||
|
||||
function formatMinuteTimestamp(date: Date) {
|
||||
return date.toLocaleString(undefined, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
});
|
||||
}
|
||||
|
||||
function formatRelativeSeconds(seconds: number) {
|
||||
if (!Number.isFinite(seconds)) return "";
|
||||
if (seconds <= 0) return "now";
|
||||
const total = Math.round(seconds);
|
||||
const days = Math.floor(total / 86400);
|
||||
const hours = Math.floor((total % 86400) / 3600);
|
||||
const minutes = Math.floor((total % 3600) / 60);
|
||||
const parts = [];
|
||||
if (days) parts.push(`${days}d`);
|
||||
if (hours) parts.push(`${hours}h`);
|
||||
if (!days && minutes) parts.push(`${minutes}m`);
|
||||
if (parts.length === 0) parts.push("less than 1m");
|
||||
return `in ${parts.join(" ")}`;
|
||||
}
|
||||
|
||||
function formatCurrency(value: number, decimals = 2) {
|
||||
return new Intl.NumberFormat("en-IN", {
|
||||
style: "currency",
|
||||
@ -115,11 +181,12 @@ function PaperTradingPortfolio() {
|
||||
const [frequencyValue, setFrequencyValue] = useState(10);
|
||||
const [frequencyUnit, setFrequencyUnit] = useState<"minutes" | "days">("minutes");
|
||||
const [strategyStatus, setStrategyStatus] = useState("STOPPED");
|
||||
const [nextSipTs, setNextSipTs] = useState<string | null>(null);
|
||||
const [nextSipCountdown, setNextSipCountdown] = useState<string | null>(null);
|
||||
const [strategyDetails, setStrategyDetails] = useState<StrategyStatusResponse | null>(null);
|
||||
const [isStarting, setIsStarting] = useState(false);
|
||||
const [isResuming, setIsResuming] = useState(false);
|
||||
const [isStopping, setIsStopping] = useState(false);
|
||||
const [isResetting, setIsResetting] = useState(false);
|
||||
const [freshStartRequested, setFreshStartRequested] = useState(false);
|
||||
const [addCashEnabled, setAddCashEnabled] = useState(false);
|
||||
const [addCashAmount, setAddCashAmount] = useState<number | "">("");
|
||||
const [isAddingCash, setIsAddingCash] = useState(false);
|
||||
@ -132,9 +199,9 @@ function PaperTradingPortfolio() {
|
||||
const [mtmPnlPoints, setMtmPnlPoints] = useState<
|
||||
{ date: string; pnl: number }[]
|
||||
>([]);
|
||||
const [engineStatus, setEngineStatus] = useState<EngineStatus | null>(null);
|
||||
const [priceStale, setPriceStale] = useState(false);
|
||||
const [marketStatus, setMarketStatus] = useState<MarketStatusResponse | null>(null);
|
||||
const [timelineKey, setTimelineKey] = useState(0);
|
||||
const skipFirstPnlPointRef = useRef(true);
|
||||
|
||||
const fundsQuery = useQuery<PaperFundsResponse>({
|
||||
@ -186,14 +253,32 @@ function PaperTradingPortfolio() {
|
||||
|
||||
const refreshStatus = useCallback(async () => {
|
||||
try {
|
||||
const status = await getStrategyStatus();
|
||||
const status = (await getStrategyStatus()) as StrategyStatusResponse;
|
||||
setStrategyDetails(status ?? null);
|
||||
setStrategyStatus(status?.status ?? "STOPPED");
|
||||
setNextSipTs(status?.next_eligible_ts ?? null);
|
||||
} catch {
|
||||
setStrategyStatus("STOPPED");
|
||||
setNextSipTs(null);
|
||||
const savedAmount = Number(status?.config?.sip_amount);
|
||||
if (!freshStartRequested && Number.isFinite(savedAmount) && savedAmount > 0) {
|
||||
setSipAmount(savedAmount);
|
||||
}
|
||||
}, []);
|
||||
const savedFrequency = status?.config?.sip_frequency;
|
||||
const savedFrequencyValue = Number(savedFrequency?.value);
|
||||
const savedFrequencyUnit =
|
||||
savedFrequency?.unit === "minutes"
|
||||
? "minutes"
|
||||
: savedFrequency?.unit === "days"
|
||||
? "days"
|
||||
: null;
|
||||
if (!freshStartRequested && Number.isFinite(savedFrequencyValue) && savedFrequencyValue >= 1) {
|
||||
setFrequencyValue(savedFrequencyValue);
|
||||
}
|
||||
if (!freshStartRequested && savedFrequencyUnit) {
|
||||
setFrequencyUnit(savedFrequencyUnit);
|
||||
}
|
||||
} catch {
|
||||
setStrategyDetails(null);
|
||||
setStrategyStatus("STOPPED");
|
||||
}
|
||||
}, [freshStartRequested]);
|
||||
|
||||
useEffect(() => {
|
||||
refreshStatus();
|
||||
@ -212,35 +297,21 @@ function PaperTradingPortfolio() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const refreshEngineStatus = useCallback(async () => {
|
||||
try {
|
||||
const res = await apiRequest("GET", "/engine/status");
|
||||
const data: EngineStatus = await res.json();
|
||||
setEngineStatus(data);
|
||||
} catch {
|
||||
setEngineStatus(null);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!nextSipTs) {
|
||||
setNextSipCountdown(null);
|
||||
return;
|
||||
}
|
||||
const updateCountdown = () => {
|
||||
const target = new Date(nextSipTs).getTime();
|
||||
if (Number.isNaN(target)) {
|
||||
setNextSipCountdown(null);
|
||||
return;
|
||||
}
|
||||
const diff = target - Date.now();
|
||||
if (diff <= 0) {
|
||||
setNextSipCountdown("now");
|
||||
return;
|
||||
}
|
||||
const totalSeconds = Math.floor(diff / 1000);
|
||||
const hours = Math.floor(totalSeconds / 3600);
|
||||
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
||||
const seconds = totalSeconds % 60;
|
||||
const hh = hours > 0 ? `${hours}h ` : "";
|
||||
const mm = `${minutes}`.padStart(2, "0");
|
||||
const ss = `${seconds}`.padStart(2, "0");
|
||||
setNextSipCountdown(`${hh}${mm}:${ss}`);
|
||||
};
|
||||
updateCountdown();
|
||||
const id = window.setInterval(updateCountdown, 1000);
|
||||
void refreshEngineStatus();
|
||||
const id = window.setInterval(refreshEngineStatus, 5000);
|
||||
return () => window.clearInterval(id);
|
||||
}, [nextSipTs]);
|
||||
}, [refreshEngineStatus]);
|
||||
|
||||
useEffect(() => {
|
||||
let timer: number;
|
||||
@ -299,8 +370,7 @@ function PaperTradingPortfolio() {
|
||||
return () => window.clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMarketStatus = async () => {
|
||||
const refreshMarketStatus = useCallback(async () => {
|
||||
try {
|
||||
const res = await apiRequest("GET", "/market/status");
|
||||
const data: MarketStatusResponse = await res.json();
|
||||
@ -308,13 +378,20 @@ function PaperTradingPortfolio() {
|
||||
} catch {
|
||||
setMarketStatus(null);
|
||||
}
|
||||
};
|
||||
|
||||
fetchMarketStatus();
|
||||
const id = window.setInterval(fetchMarketStatus, 5000);
|
||||
return () => window.clearInterval(id);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void refreshMarketStatus();
|
||||
const id = window.setInterval(refreshMarketStatus, 5000);
|
||||
return () => window.clearInterval(id);
|
||||
}, [refreshMarketStatus]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!freshStartRequested && typeof mtmInitialCash === "number" && mtmInitialCash > 0) {
|
||||
setInitialCash(mtmInitialCash);
|
||||
}
|
||||
}, [freshStartRequested, mtmInitialCash]);
|
||||
|
||||
const handleReset = async () => {
|
||||
const ok = window.confirm(
|
||||
"This will RESET the entire paper account.\n\n" +
|
||||
@ -345,8 +422,10 @@ function PaperTradingPortfolio() {
|
||||
positionsQuery.refetch(),
|
||||
ordersQuery.refetch(),
|
||||
refreshStatus(),
|
||||
refreshEngineStatus(),
|
||||
refreshMarketStatus(),
|
||||
]);
|
||||
setTimelineKey((value) => value + 1);
|
||||
setFreshStartRequested(false);
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Reset failed",
|
||||
@ -388,6 +467,7 @@ function PaperTradingPortfolio() {
|
||||
});
|
||||
}
|
||||
if (result?.status === "started" || result?.status === "restarted") {
|
||||
setFreshStartRequested(false);
|
||||
toast({
|
||||
title: "Paper strategy started",
|
||||
description: "The simulator is now running.",
|
||||
@ -401,8 +481,56 @@ function PaperTradingPortfolio() {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsStarting(false);
|
||||
await Promise.all([
|
||||
await Promise.allSettled([
|
||||
refreshStatus(),
|
||||
refreshEngineStatus(),
|
||||
refreshMarketStatus(),
|
||||
fundsQuery.refetch(),
|
||||
positionsQuery.refetch(),
|
||||
ordersQuery.refetch(),
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleResume = async () => {
|
||||
setIsResuming(true);
|
||||
try {
|
||||
const result = await resumeStrategy();
|
||||
if (result?.status === "already_running") {
|
||||
toast({
|
||||
title: "Strategy already running",
|
||||
description: "The paper strategy is already active.",
|
||||
});
|
||||
} else if (result?.status === "resumed") {
|
||||
setFreshStartRequested(false);
|
||||
toast({
|
||||
title: "Paper strategy resumed",
|
||||
description: "The previous paper run has been resumed with its saved schedule.",
|
||||
});
|
||||
} else if (result?.status === "no_resumable_run") {
|
||||
setFreshStartRequested(true);
|
||||
toast({
|
||||
title: "No resumable strategy",
|
||||
description: "Start a fresh paper cycle instead.",
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "Resume failed",
|
||||
description: result?.message || result?.status || "Unable to resume strategy.",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Resume failed",
|
||||
description: error instanceof Error ? error.message : "Please try again.",
|
||||
});
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsResuming(false);
|
||||
await Promise.allSettled([
|
||||
refreshStatus(),
|
||||
refreshEngineStatus(),
|
||||
refreshMarketStatus(),
|
||||
fundsQuery.refetch(),
|
||||
positionsQuery.refetch(),
|
||||
ordersQuery.refetch(),
|
||||
@ -414,6 +542,7 @@ function PaperTradingPortfolio() {
|
||||
setIsStopping(true);
|
||||
try {
|
||||
await stopStrategy();
|
||||
setFreshStartRequested(false);
|
||||
toast({
|
||||
title: "Paper strategy stopped",
|
||||
description: "The simulator has been stopped.",
|
||||
@ -426,8 +555,10 @@ function PaperTradingPortfolio() {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setIsStopping(false);
|
||||
await Promise.all([
|
||||
await Promise.allSettled([
|
||||
refreshStatus(),
|
||||
refreshEngineStatus(),
|
||||
refreshMarketStatus(),
|
||||
fundsQuery.refetch(),
|
||||
positionsQuery.refetch(),
|
||||
ordersQuery.refetch(),
|
||||
@ -441,29 +572,100 @@ function PaperTradingPortfolio() {
|
||||
: strategyStatus === "WAITING"
|
||||
? "WAITING"
|
||||
: "STOPPED";
|
||||
const canStart = typeof initialCash === "number" && initialCash >= 10000;
|
||||
const canStop =
|
||||
const isStrategyActive =
|
||||
normalizedStrategyStatus === "RUNNING" ||
|
||||
normalizedStrategyStatus === "WAITING";
|
||||
const strategyLocked = canStop || isStarting || isStopping || isResetting;
|
||||
const canResumeSavedStrategy = !!strategyDetails?.can_resume;
|
||||
const showResumeStrategy =
|
||||
!isStrategyActive && canResumeSavedStrategy && !freshStartRequested;
|
||||
const showRestartStrategy =
|
||||
!isStrategyActive && !!strategyDetails?.can_restart && !freshStartRequested;
|
||||
const showFreshStartStrategy =
|
||||
!isStrategyActive && (!canResumeSavedStrategy || freshStartRequested);
|
||||
const canEditStrategyConfig = showFreshStartStrategy;
|
||||
const canStartFresh = typeof initialCash === "number" && initialCash >= 10000;
|
||||
const canStop = isStrategyActive;
|
||||
const strategyLocked =
|
||||
!canEditStrategyConfig || isStarting || isResuming || isStopping || isResetting;
|
||||
const canAddCash =
|
||||
canStop && addCashEnabled && typeof addCashAmount === "number" && addCashAmount > 0;
|
||||
const heartbeatAgeSec = engineStatus?.last_heartbeat_ts
|
||||
? (Date.now() - new Date(engineStatus.last_heartbeat_ts).getTime()) / 1000
|
||||
: Infinity;
|
||||
|
||||
let liveness: "ACTIVE" | "STALLED" | "DEAD" | "STOPPED";
|
||||
if (!engineStatus) {
|
||||
liveness = "DEAD";
|
||||
} else if (engineStatus.state !== "RUNNING") {
|
||||
liveness = "STOPPED";
|
||||
} else if (heartbeatAgeSec < 10) {
|
||||
liveness = "ACTIVE";
|
||||
} else if (heartbeatAgeSec < 30) {
|
||||
liveness = "STALLED";
|
||||
} else {
|
||||
liveness = "DEAD";
|
||||
}
|
||||
|
||||
const livenessBadgeClass =
|
||||
liveness === "ACTIVE"
|
||||
? "border-emerald-500/50 bg-emerald-500/15 text-emerald-300"
|
||||
: liveness === "STALLED"
|
||||
? "border-amber-400/50 bg-amber-400/15 text-amber-200"
|
||||
: liveness === "DEAD"
|
||||
? "border-red-500/50 bg-red-500/15 text-red-300"
|
||||
: "border-slate-400/40 bg-slate-400/15 text-slate-200";
|
||||
const livenessBadgeLabel =
|
||||
liveness === "ACTIVE"
|
||||
? "Engine active"
|
||||
: liveness === "STALLED"
|
||||
? "Engine stalled"
|
||||
: liveness === "DEAD"
|
||||
? "Engine dead"
|
||||
: "Engine stopped";
|
||||
const strategyBadgeClass =
|
||||
normalizedStrategyStatus === "RUNNING"
|
||||
? "bg-green-500 text-white"
|
||||
? "border-emerald-500/50 bg-emerald-500/10 text-emerald-400"
|
||||
: normalizedStrategyStatus === "WAITING"
|
||||
? "bg-yellow-500 text-white"
|
||||
: "bg-gray-400 text-white";
|
||||
? "border-amber-400/50 bg-amber-400/10 text-amber-300"
|
||||
: "border-red-500/40 bg-red-500/10 text-red-400";
|
||||
const strategyBadgeLabel =
|
||||
normalizedStrategyStatus === "RUNNING"
|
||||
? "Strategy running"
|
||||
: normalizedStrategyStatus === "WAITING"
|
||||
? "Strategy waiting"
|
||||
: "Strategy stopped";
|
||||
const marketState = marketStatus?.status ?? "UNKNOWN";
|
||||
const marketBadgeClass =
|
||||
marketState === "OPEN"
|
||||
? "border-emerald-500/50 bg-emerald-500/15 text-emerald-300"
|
||||
: marketState === "CLOSED"
|
||||
? "border-amber-400/50 bg-amber-400/15 text-amber-200"
|
||||
: "border-slate-400/40 bg-slate-400/15 text-slate-200";
|
||||
const priceBadgeClass = priceStale
|
||||
? "border-amber-400/50 bg-amber-400/15 text-amber-200"
|
||||
: "border-emerald-500/50 bg-emerald-500/15 text-emerald-300";
|
||||
const canArmStrategy = liveness === "ACTIVE" || liveness === "STOPPED";
|
||||
const nextEligibleTs = engineStatus?.next_eligible_ts
|
||||
? new Date(engineStatus.next_eligible_ts)
|
||||
: null;
|
||||
const nextEligibleValid = nextEligibleTs && !Number.isNaN(nextEligibleTs.getTime());
|
||||
const eligibleSeconds = nextEligibleValid
|
||||
? (nextEligibleTs.getTime() - Date.now()) / 1000
|
||||
: Infinity;
|
||||
const isEligible = eligibleSeconds <= 0;
|
||||
const relativeEligible = formatRelativeSeconds(eligibleSeconds);
|
||||
|
||||
let nextEligibleLine = "-";
|
||||
let eligibilityStatus: string | null = "First execution pending";
|
||||
let eligibilityClass = "text-muted-foreground";
|
||||
|
||||
if (nextEligibleValid) {
|
||||
eligibilityStatus = null;
|
||||
if (isEligible && marketState === "OPEN") {
|
||||
nextEligibleLine = "Now";
|
||||
eligibilityStatus = "Eligible. Execution imminent.";
|
||||
eligibilityClass = "text-emerald-400";
|
||||
} else if (isEligible && marketState === "CLOSED") {
|
||||
nextEligibleLine = `${formatMinuteTimestamp(nextEligibleTs)} (eligible)`;
|
||||
eligibilityStatus = "Eligible. Waiting for market open.";
|
||||
eligibilityClass = "text-amber-300";
|
||||
} else {
|
||||
nextEligibleLine = `${formatMinuteTimestamp(nextEligibleTs)} (${relativeEligible})`;
|
||||
eligibilityStatus = "Not eligible yet";
|
||||
eligibilityClass = "text-muted-foreground";
|
||||
}
|
||||
}
|
||||
|
||||
const summary = [
|
||||
{ label: "Initial Cash", value: mtmInitialCash ?? 0 },
|
||||
@ -547,11 +749,19 @@ function PaperTradingPortfolio() {
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="secondary">Paper trading (simulated)</Badge>
|
||||
<Button variant="outline" onClick={() => {
|
||||
fundsQuery.refetch();
|
||||
positionsQuery.refetch();
|
||||
ordersQuery.refetch();
|
||||
}}>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
void Promise.allSettled([
|
||||
fundsQuery.refetch(),
|
||||
positionsQuery.refetch(),
|
||||
ordersQuery.refetch(),
|
||||
refreshStatus(),
|
||||
refreshEngineStatus(),
|
||||
refreshMarketStatus(),
|
||||
]);
|
||||
}}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
@ -560,35 +770,35 @@ function PaperTradingPortfolio() {
|
||||
<div className="rounded-2xl border border-border/60 bg-card/70 shadow-xl overflow-hidden">
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-border/50">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-semibold">Paper Strategy Control</p>
|
||||
<p className="text-sm font-semibold">Strategy control</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Strategy: Golden Nifty (Paper) · Assets: NIFTYBEES + GOLDBEES
|
||||
Start or stop the Golden Nifty SIP engine from the dashboard.
|
||||
</p>
|
||||
{nextSipTs && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Next SIP {nextSipCountdown ? `in ${nextSipCountdown}` : ""} ({new Date(nextSipTs).toLocaleTimeString()})
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`px-2 py-1 rounded text-xs ${strategyBadgeClass}`}>
|
||||
{normalizedStrategyStatus}
|
||||
</span>
|
||||
<Badge variant="outline" className={marketBadgeClass}>
|
||||
{marketState === "OPEN"
|
||||
? "Market OPEN"
|
||||
: marketState === "CLOSED"
|
||||
? "Market CLOSED"
|
||||
: "Market UNKNOWN"}
|
||||
<Badge variant="outline" className={livenessBadgeClass}>
|
||||
{livenessBadgeLabel}
|
||||
</Badge>
|
||||
{priceStale && (
|
||||
<Badge variant="outline" className={priceBadgeClass}>
|
||||
Price STALE
|
||||
<Badge variant="outline" className={strategyBadgeClass}>
|
||||
{strategyBadgeLabel}
|
||||
</Badge>
|
||||
)}
|
||||
{priceStale ? (
|
||||
<Badge variant="outline" className="border-amber-400/50 bg-amber-400/15 text-amber-200">
|
||||
Price stale
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="rounded-lg border border-border/60 bg-background/40 px-4 py-3">
|
||||
<div className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Next eligible SIP
|
||||
</div>
|
||||
<div className="text-sm font-semibold text-foreground">{nextEligibleLine}</div>
|
||||
{eligibilityStatus ? (
|
||||
<div className={`text-xs ${eligibilityClass}`}>{eligibilityStatus}</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="paper-initial-cash">Initial Cash (Paper)</Label>
|
||||
<Input
|
||||
@ -616,7 +826,7 @@ function PaperTradingPortfolio() {
|
||||
<Checkbox
|
||||
id="paper-add-cash-toggle"
|
||||
checked={addCashEnabled}
|
||||
disabled={!canStop || isAddingCash || isStarting || isStopping || isResetting}
|
||||
disabled={!canStop || isAddingCash || isStarting || isResuming || isStopping || isResetting}
|
||||
onCheckedChange={(value) => setAddCashEnabled(value === true)}
|
||||
/>
|
||||
<Label htmlFor="paper-add-cash-toggle">Add cash during run</Label>
|
||||
@ -630,7 +840,7 @@ function PaperTradingPortfolio() {
|
||||
min={1}
|
||||
step={100}
|
||||
value={addCashAmount}
|
||||
disabled={!canStop || !addCashEnabled || isAddingCash || isStarting || isStopping || isResetting}
|
||||
disabled={!canStop || !addCashEnabled || isAddingCash || isStarting || isResuming || isStopping || isResetting}
|
||||
onChange={(event) => {
|
||||
const raw = event.target.value;
|
||||
if (raw === "") {
|
||||
@ -671,7 +881,7 @@ function PaperTradingPortfolio() {
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="grid gap-3 sm:grid-cols-[minmax(0,1fr)_220px]">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="paper-frequency">Frequency</Label>
|
||||
<Input
|
||||
@ -689,18 +899,21 @@ function PaperTradingPortfolio() {
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="paper-frequency-unit">Unit</Label>
|
||||
<select
|
||||
id="paper-frequency-unit"
|
||||
<Select
|
||||
value={frequencyUnit}
|
||||
disabled={strategyLocked}
|
||||
onChange={(event) =>
|
||||
setFrequencyUnit(event.target.value as "minutes" | "days")
|
||||
onValueChange={(value) =>
|
||||
setFrequencyUnit(value as "minutes" | "days")
|
||||
}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 md:text-sm"
|
||||
>
|
||||
<option value="minutes">Minutes (testing)</option>
|
||||
<option value="days">Days (long-term)</option>
|
||||
</select>
|
||||
<SelectTrigger id="paper-frequency-unit">
|
||||
<SelectValue placeholder="Select unit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="days">Days</SelectItem>
|
||||
<SelectItem value="minutes">Minutes (testing)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
@ -708,40 +921,62 @@ function PaperTradingPortfolio() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{showResumeStrategy ? (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Resume uses the previously saved paper SIP configuration. Choose restart to begin a fresh cycle.
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{showResumeStrategy ? (
|
||||
<MotionButton
|
||||
{...ctaMotionProps}
|
||||
onClick={handleResume}
|
||||
disabled={isResuming || !canArmStrategy}
|
||||
className="shimmer"
|
||||
>
|
||||
{isResuming ? "Resuming..." : "Resume Strategy"}
|
||||
</MotionButton>
|
||||
) : null}
|
||||
{showFreshStartStrategy ? (
|
||||
<MotionButton
|
||||
{...ctaMotionProps}
|
||||
onClick={handleStart}
|
||||
disabled={!canStart || isStarting || isStopping || isResetting || canStop}
|
||||
disabled={!canStartFresh || isStarting || isResuming || isStopping || isResetting || !canArmStrategy || isStrategyActive}
|
||||
className="shimmer"
|
||||
>
|
||||
{isStarting ? "Starting..." : "Start Paper Strategy"}
|
||||
{isStarting ? "Starting..." : "Start Strategy"}
|
||||
</MotionButton>
|
||||
) : null}
|
||||
{showRestartStrategy ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setFreshStartRequested(true)}
|
||||
disabled={isStarting || isResuming || isStopping || isResetting}
|
||||
>
|
||||
Restart Strategy
|
||||
</Button>
|
||||
) : null}
|
||||
{isStrategyActive ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleStop}
|
||||
disabled={!canStop || isStarting || isStopping || isResetting}
|
||||
disabled={!canStop || isStarting || isResuming || isStopping || isResetting}
|
||||
>
|
||||
{isStopping ? "Stopping..." : "Stop Paper Strategy"}
|
||||
{isStopping ? "Stopping..." : "Stop Strategy"}
|
||||
</Button>
|
||||
) : null}
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleReset}
|
||||
disabled={isStarting || isStopping || isResetting}
|
||||
disabled={isStarting || isResuming || isStopping || isResetting}
|
||||
>
|
||||
{isResetting ? "Resetting..." : "Reset Paper Account"}
|
||||
</Button>
|
||||
</div>
|
||||
{marketState === "CLOSED" ? (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Market CLOSED - orders will execute when the next session opens.
|
||||
</p>
|
||||
) : null}
|
||||
<StrategyTimeline compact />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<StrategyTimeline key={timelineKey} />
|
||||
|
||||
<motion.div
|
||||
className="grid gap-4 md:grid-cols-3"
|
||||
variants={cardContainer}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user