Krikorios
48e60d015f
- Add advanced metrics dashboard with trade analytics - Add new trading components (EntryTypeAnalysis, MultiDayPositionTracker, NewsEventTracker, etc.) - Add strategy mode selector and trend confirmation - Add risk automation panel and slippage correlation analysis - Add daily trading plan enhancements with modal components - Add custom hooks (useApi, useLocalStorage, useAdvancedTradeMetrics) - Add broker service integration and trading API - Add test setup and vitest configuration - Include parquet data files for live market data - Add comprehensive documentation in docs/ folder
581 lines
21 KiB
TypeScript
581 lines
21 KiB
TypeScript
import { useState, useCallback, useMemo, useEffect } from 'react';
|
|
import { useLocalStorage } from '@/hooks';
|
|
import { AlertModal, ConfirmModal } from '@/components/shared/Modal';
|
|
import { PlanHeader } from './PlanHeader';
|
|
import { PlanBiasSelector } from './PlanBiasSelector';
|
|
import { PlanRiskParameters } from './PlanRiskParameters';
|
|
import { PlanKeyLevelsEditor } from './PlanKeyLevelsEditor';
|
|
import { usePlanGeneration } from './usePlanGeneration';
|
|
import StrategyModeSelector from '@/components/StrategyModeSelector';
|
|
import TrendConfirmation from '@/components/TrendConfirmation';
|
|
import MultiDayPositionTracker from '@/components/MultiDayPositionTracker';
|
|
import NewsEventTracker from '@/components/NewsEventTracker';
|
|
import type { TradingPlan, DailyTradingPlanProps } from './types';
|
|
import type { StrategyMode } from '@/components/StrategyModeSelector';
|
|
import { STRATEGY_PRESETS } from '@/components/StrategyModeSelector';
|
|
import AdvancedMetricsDashboard, { type Trade as AdvancedMetricsTrade, type VolatilityBucket } from '@/components/AdvancedMetricsDashboard';
|
|
|
|
const createDefaultPlan = (currentPrice: number, strategyMode: StrategyMode = 'SWING'): TradingPlan => {
|
|
const preset = STRATEGY_PRESETS[strategyMode];
|
|
const riskAmount = 10000 * (preset.riskPerTrade / 100); // Assume $10k account
|
|
const stopLossDiff = currentPrice * (preset.stopLossPercent / 100);
|
|
const takeProfitDiff = currentPrice * (preset.takeProfitPercent / 100);
|
|
|
|
return {
|
|
date: new Date().toDateString(),
|
|
strategyMode,
|
|
bias: 'NEUTRAL',
|
|
dailyTarget: Math.round(riskAmount * 2), // 2x risk as daily target
|
|
maxLoss: Math.round(riskAmount),
|
|
entryZone: {
|
|
min: currentPrice - (currentPrice * (preset.stopLossPercent / 200)),
|
|
max: currentPrice + (currentPrice * (preset.stopLossPercent / 200))
|
|
},
|
|
targetPrice: currentPrice + takeProfitDiff,
|
|
stopLoss: currentPrice - stopLossDiff,
|
|
keyLevels: {
|
|
support: [
|
|
currentPrice - (currentPrice * (preset.stopLossPercent / 50)),
|
|
currentPrice - (currentPrice * (preset.stopLossPercent / 25))
|
|
],
|
|
resistance: [
|
|
currentPrice + (currentPrice * (preset.takeProfitPercent / 50)),
|
|
currentPrice + (currentPrice * (preset.takeProfitPercent / 25))
|
|
],
|
|
},
|
|
tradingNotes: '',
|
|
maxTrades: preset.maxDailyTrades,
|
|
actualTrades: 0,
|
|
actualPnL: 0,
|
|
planFollowed: true,
|
|
contextMetrics: null,
|
|
};
|
|
};
|
|
|
|
const SIGNAL_LABELS: Record<AdvancedMetricsTrade['signalType'], string> = {
|
|
RSI_CROSSOVER: 'RSI Crossover',
|
|
MA_CROSSOVER: 'MA Crossover',
|
|
BB_BREAKOUT: 'Bollinger Breakout',
|
|
MACD: 'MACD Signal',
|
|
SUPPORT_BOUNCE: 'Support Bounce',
|
|
TREND_CONFIRMATION: 'Trend Confirmation',
|
|
NEWS_TRIGGERED: 'News Triggered',
|
|
};
|
|
|
|
export default function DailyTradingPlan({
|
|
currentPrice,
|
|
onPlanUpdate,
|
|
openRouterReady,
|
|
openRouterMessage,
|
|
advancedTrades = [],
|
|
advancedTradesSource = 'sample',
|
|
}: DailyTradingPlanProps): JSX.Element {
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [showResetConfirm, setShowResetConfirm] = useState(false);
|
|
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
|
|
const [successMessage, setSuccessMessage] = useState('');
|
|
const [showAdvancedMetrics, setShowAdvancedMetrics] = useState(false);
|
|
const [analyticsFocus, setAnalyticsFocus] = useState<{
|
|
timeframe: string | null;
|
|
signalType: AdvancedMetricsTrade['signalType'] | null;
|
|
volatility: string | null;
|
|
}>({ timeframe: null, signalType: null, volatility: null });
|
|
|
|
const safeAdvancedTrades = advancedTrades ?? [];
|
|
const advancedAnalyticsSummary = useMemo(() => {
|
|
if (!safeAdvancedTrades.length) return null;
|
|
|
|
const totalTrades = safeAdvancedTrades.length;
|
|
const wins = safeAdvancedTrades.filter((trade) => trade.profitable).length;
|
|
const winRate = (wins / totalTrades) * 100;
|
|
|
|
const timeframePnL = safeAdvancedTrades.reduce<Record<string, number>>((acc, trade) => {
|
|
acc[trade.timeframe] = (acc[trade.timeframe] ?? 0) + trade.pnl;
|
|
return acc;
|
|
}, {});
|
|
const bestTimeframeEntry = Object.entries(timeframePnL).sort((a, b) => b[1] - a[1])[0];
|
|
|
|
const signalPnL = safeAdvancedTrades.reduce<Record<string, number>>((acc, trade) => {
|
|
acc[trade.signalType] = (acc[trade.signalType] ?? 0) + trade.pnl;
|
|
return acc;
|
|
}, {});
|
|
const bestSignalEntry = Object.entries(signalPnL).sort((a, b) => b[1] - a[1])[0];
|
|
|
|
const slippageImpact = safeAdvancedTrades.reduce((sum, trade) => {
|
|
const gross = trade.grossPnL ?? trade.pnl;
|
|
if (!gross) return sum;
|
|
const impact = trade.slippage ? (trade.slippage / Math.abs(gross)) * 100 : 0;
|
|
return sum + impact;
|
|
}, 0) / totalTrades;
|
|
|
|
return {
|
|
totalTrades,
|
|
winRate,
|
|
bestTimeframe: bestTimeframeEntry?.[0] ?? null,
|
|
bestSignal: (bestSignalEntry?.[0] as AdvancedMetricsTrade['signalType']) ?? null,
|
|
slippageImpact,
|
|
};
|
|
}, [safeAdvancedTrades]);
|
|
|
|
const [plan, setPlan] = useLocalStorage<TradingPlan>(
|
|
'daily-trading-plan',
|
|
createDefaultPlan(currentPrice)
|
|
);
|
|
|
|
const { generating, error, generatePlan } = usePlanGeneration(openRouterReady);
|
|
|
|
// Ensure plan resets when the stored date is stale (runs after render to avoid blocking updates)
|
|
useEffect(() => {
|
|
const today = new Date().toDateString();
|
|
if (plan.date !== today) {
|
|
setPlan((prev) => {
|
|
const next = createDefaultPlan(currentPrice, prev.strategyMode);
|
|
return {
|
|
...next,
|
|
bias: prev.bias,
|
|
tradingNotes: prev.tradingNotes,
|
|
};
|
|
});
|
|
}
|
|
}, [plan.date, currentPrice, setPlan]);
|
|
|
|
const handleEdit = useCallback(() => {
|
|
setIsEditing(true);
|
|
}, []);
|
|
|
|
const handleSave = useCallback(() => {
|
|
setIsEditing(false);
|
|
if (onPlanUpdate) {
|
|
onPlanUpdate(plan);
|
|
}
|
|
}, [plan, onPlanUpdate]);
|
|
|
|
const handleConfirmReset = useCallback(() => {
|
|
setPlan(createDefaultPlan(currentPrice));
|
|
setIsEditing(false);
|
|
setShowResetConfirm(false);
|
|
}, [currentPrice, setPlan]);
|
|
|
|
const handleGenerateAI = useCallback(async () => {
|
|
const generatedPlan = await generatePlan(currentPrice, plan);
|
|
|
|
if (generatedPlan) {
|
|
setPlan(generatedPlan);
|
|
setSuccessMessage(
|
|
`AI Plan Generated!\n\nBias: ${generatedPlan.bias}\nTarget: $${generatedPlan.dailyTarget}\n\nReview and edit the plan as needed.`
|
|
);
|
|
setShowSuccessAlert(true);
|
|
if (onPlanUpdate) {
|
|
onPlanUpdate(generatedPlan);
|
|
}
|
|
}
|
|
}, [currentPrice, plan, generatePlan, setPlan, onPlanUpdate]);
|
|
|
|
const handleFieldChange = useCallback(
|
|
(field: string, value: number) => {
|
|
setPlan((prev) => {
|
|
if (field === 'entryZoneMin') {
|
|
return { ...prev, entryZone: { ...prev.entryZone, min: value } };
|
|
}
|
|
if (field === 'entryZoneMax') {
|
|
return { ...prev, entryZone: { ...prev.entryZone, max: value } };
|
|
}
|
|
return { ...prev, [field]: value };
|
|
});
|
|
},
|
|
[setPlan]
|
|
);
|
|
|
|
const handleBiasChange = useCallback(
|
|
(bias: 'BULLISH' | 'BEARISH' | 'NEUTRAL') => {
|
|
setPlan((prev) => ({ ...prev, bias }));
|
|
},
|
|
[setPlan]
|
|
);
|
|
|
|
const handleNotesChange = useCallback(
|
|
(notes: string) => {
|
|
setPlan((prev) => ({ ...prev, tradingNotes: notes }));
|
|
},
|
|
[setPlan]
|
|
);
|
|
|
|
const handleAdvancedTimeframeSelect = useCallback((timeframe: string) => {
|
|
setAnalyticsFocus((prev) => ({
|
|
...prev,
|
|
timeframe: prev.timeframe === timeframe ? null : timeframe,
|
|
}));
|
|
}, []);
|
|
|
|
const handleAdvancedSignalSelect = useCallback((signalType: string) => {
|
|
const typedSignal = signalType as AdvancedMetricsTrade['signalType'];
|
|
setAnalyticsFocus((prev) => ({
|
|
...prev,
|
|
signalType: prev.signalType === typedSignal ? null : typedSignal,
|
|
}));
|
|
}, []);
|
|
|
|
const handleAdvancedVolatilitySelect = useCallback((bucket: VolatilityBucket) => {
|
|
setAnalyticsFocus((prev) => ({
|
|
...prev,
|
|
volatility: prev.volatility === bucket.range ? null : bucket.range,
|
|
}));
|
|
}, []);
|
|
|
|
const handleStrategyModeChange = useCallback(
|
|
(mode: StrategyMode) => {
|
|
const newPlan = createDefaultPlan(currentPrice, mode);
|
|
setPlan((prev) => ({
|
|
...newPlan,
|
|
bias: prev.bias,
|
|
tradingNotes: prev.tradingNotes,
|
|
}));
|
|
},
|
|
[currentPrice, setPlan]
|
|
);
|
|
|
|
// Key levels handlers
|
|
const handleAddSupport = useCallback(() => {
|
|
setPlan((prev) => ({
|
|
...prev,
|
|
keyLevels: {
|
|
...prev.keyLevels,
|
|
support: [...prev.keyLevels.support, currentPrice - 10],
|
|
},
|
|
}));
|
|
}, [currentPrice, setPlan]);
|
|
|
|
const handleAddResistance = useCallback(() => {
|
|
setPlan((prev) => ({
|
|
...prev,
|
|
keyLevels: {
|
|
...prev.keyLevels,
|
|
resistance: [...prev.keyLevels.resistance, currentPrice + 10],
|
|
},
|
|
}));
|
|
}, [currentPrice, setPlan]);
|
|
|
|
const handleRemoveSupport = useCallback(
|
|
(index: number) => {
|
|
setPlan((prev) => ({
|
|
...prev,
|
|
keyLevels: {
|
|
...prev.keyLevels,
|
|
support: prev.keyLevels.support.filter((_, i) => i !== index),
|
|
},
|
|
}));
|
|
},
|
|
[setPlan]
|
|
);
|
|
|
|
const handleRemoveResistance = useCallback(
|
|
(index: number) => {
|
|
setPlan((prev) => ({
|
|
...prev,
|
|
keyLevels: {
|
|
...prev.keyLevels,
|
|
resistance: prev.keyLevels.resistance.filter((_, i) => i !== index),
|
|
},
|
|
}));
|
|
},
|
|
[setPlan]
|
|
);
|
|
|
|
const handleUpdateSupport = useCallback(
|
|
(index: number, value: number) => {
|
|
setPlan((prev) => ({
|
|
...prev,
|
|
keyLevels: {
|
|
...prev.keyLevels,
|
|
support: prev.keyLevels.support.map((level, i) => (i === index ? value : level)),
|
|
},
|
|
}));
|
|
},
|
|
[setPlan]
|
|
);
|
|
|
|
const handleUpdateResistance = useCallback(
|
|
(index: number, value: number) => {
|
|
setPlan((prev) => ({
|
|
...prev,
|
|
keyLevels: {
|
|
...prev.keyLevels,
|
|
resistance: prev.keyLevels.resistance.map((level, i) => (i === index ? value : level)),
|
|
},
|
|
}));
|
|
},
|
|
[setPlan]
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-6 rounded-2xl border border-slate-700 bg-slate-900 p-6">
|
|
<PlanHeader
|
|
planDate={plan.date}
|
|
isEditing={isEditing}
|
|
generating={generating}
|
|
onEdit={handleEdit}
|
|
onSave={handleSave}
|
|
onGenerateAI={handleGenerateAI}
|
|
onReset={() => setShowResetConfirm(true)}
|
|
/>
|
|
|
|
{/* Strategy Mode Info Banner */}
|
|
<div className="rounded-lg border border-blue-500/30 bg-blue-500/10 px-4 py-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-2xl">{STRATEGY_PRESETS[plan.strategyMode].emoji}</span>
|
|
<div>
|
|
<p className="font-semibold text-blue-300">
|
|
{plan.strategyMode} Mode Active
|
|
</p>
|
|
<p className="text-xs text-blue-200">
|
|
Max {STRATEGY_PRESETS[plan.strategyMode].maxDailyTrades} trades •
|
|
R:R 1:{STRATEGY_PRESETS[plan.strategyMode].r2rRatio.toFixed(1)} •
|
|
Stop: {STRATEGY_PRESETS[plan.strategyMode].stopLossPercent}%
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{(error || (openRouterReady === false && openRouterMessage)) && (
|
|
<div
|
|
className={`rounded-lg border px-4 py-3 ${
|
|
openRouterReady === false
|
|
? 'border-amber-500/60 bg-amber-500/10 text-amber-100'
|
|
: 'border-red-500/60 bg-red-500/10 text-red-100'
|
|
}`}
|
|
role="alert"
|
|
>
|
|
<p className="text-sm">{error || openRouterMessage}</p>
|
|
</div>
|
|
)}
|
|
|
|
<PlanBiasSelector bias={plan.bias} isEditing={isEditing} onChange={handleBiasChange} />
|
|
|
|
<div className="hidden sm:block">
|
|
<StrategyModeSelector
|
|
defaultMode={plan.strategyMode}
|
|
onModeChange={handleStrategyModeChange}
|
|
variant="compact"
|
|
/>
|
|
</div>
|
|
|
|
<div className="sm:hidden">
|
|
<StrategyModeSelector
|
|
defaultMode={plan.strategyMode}
|
|
onModeChange={handleStrategyModeChange}
|
|
variant="full"
|
|
/>
|
|
</div>
|
|
|
|
<PlanRiskParameters
|
|
dailyTarget={plan.dailyTarget}
|
|
maxLoss={plan.maxLoss}
|
|
maxTrades={plan.maxTrades}
|
|
entryZoneMin={plan.entryZone.min}
|
|
entryZoneMax={plan.entryZone.max}
|
|
targetPrice={plan.targetPrice}
|
|
stopLoss={plan.stopLoss}
|
|
isEditing={isEditing}
|
|
onChange={handleFieldChange}
|
|
/>
|
|
|
|
<PlanKeyLevelsEditor
|
|
support={plan.keyLevels.support}
|
|
resistance={plan.keyLevels.resistance}
|
|
isEditing={isEditing}
|
|
onAddSupport={handleAddSupport}
|
|
onAddResistance={handleAddResistance}
|
|
onRemoveSupport={handleRemoveSupport}
|
|
onRemoveResistance={handleRemoveResistance}
|
|
onUpdateSupport={handleUpdateSupport}
|
|
onUpdateResistance={handleUpdateResistance}
|
|
/>
|
|
|
|
{/* Phase 3: Swing Trading Features - Show for SWING and HYBRID modes */}
|
|
{(plan.strategyMode === 'SWING' || plan.strategyMode === 'HYBRID') && (
|
|
<div className="space-y-6">
|
|
{/* Trend Confirmation for Swing Entry */}
|
|
<TrendConfirmation
|
|
ema8={2035.50}
|
|
ema21={2033.20}
|
|
ema55={2031.80}
|
|
ema200={2030.00}
|
|
macdLine={0.45}
|
|
macdSignal={0.32}
|
|
rsi={58.5}
|
|
timeframe={plan.strategyMode === 'SWING' ? '4h' : '1h'}
|
|
onTrendUpdate={(trend) => {
|
|
setPlan(prev => ({ ...prev, trendConfirmed: trend.strength !== 'WEAK' }));
|
|
}}
|
|
/>
|
|
|
|
{/* Multi-Day Position Tracker */}
|
|
{plan.swingPositions && plan.swingPositions.length > 0 && (
|
|
<MultiDayPositionTracker
|
|
positions={plan.swingPositions}
|
|
onMetricsUpdate={(metrics) => {
|
|
console.log('Position metrics updated:', metrics);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* News Event Monitor */}
|
|
{plan.newsEvents && plan.newsEvents.length > 0 && (
|
|
<NewsEventTracker
|
|
events={plan.newsEvents}
|
|
onEventAlert={(event) => {
|
|
console.log('News event alert:', event.title);
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Phase 4 Advanced Metrics Snapshot */}
|
|
<div className="space-y-4 rounded-2xl border border-emerald-500/30 bg-emerald-500/5 p-4">
|
|
<div className="flex flex-wrap items-baseline justify-between gap-3">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.3em] text-emerald-300">Phase 4 · Execution intel</p>
|
|
<p className="text-lg font-semibold text-white">Advanced Metrics Summary</p>
|
|
<p className="text-xs text-emerald-200">
|
|
{advancedTradesSource === 'live'
|
|
? 'Powered by your closed trades.'
|
|
: 'Showing curated sample data until you close a trade.'}
|
|
</p>
|
|
</div>
|
|
<div className="text-right text-sm text-emerald-200">
|
|
<p>{advancedAnalyticsSummary ? `${advancedAnalyticsSummary.totalTrades} trades` : 'No trades yet'}</p>
|
|
<p className="font-semibold text-emerald-300">
|
|
{advancedAnalyticsSummary ? `${advancedAnalyticsSummary.winRate.toFixed(1)}% win rate` : 'Run a session to unlock insights'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{advancedAnalyticsSummary ? (
|
|
<>
|
|
<div className="grid gap-3 md:grid-cols-3">
|
|
<div className="rounded-xl border border-emerald-400/30 bg-emerald-400/5 p-3">
|
|
<p className="text-xs text-emerald-200/80">Best timeframe</p>
|
|
<p className="text-lg font-semibold text-white">
|
|
{advancedAnalyticsSummary.bestTimeframe ?? '—'}
|
|
</p>
|
|
<p className="text-xs text-emerald-200/70">Highest net P&L</p>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-emerald-400/30 bg-emerald-400/5 p-3">
|
|
<p className="text-xs text-emerald-200/80">Best signal</p>
|
|
<p className="text-lg font-semibold text-white">
|
|
{advancedAnalyticsSummary.bestSignal
|
|
? SIGNAL_LABELS[advancedAnalyticsSummary.bestSignal]
|
|
: '—'}
|
|
</p>
|
|
<p className="text-xs text-emerald-200/70">Highest risk / reward</p>
|
|
</div>
|
|
|
|
<div className="rounded-xl border border-emerald-400/30 bg-emerald-400/5 p-3">
|
|
<p className="text-xs text-emerald-200/80">Avg slippage impact</p>
|
|
<p className="text-lg font-semibold text-white">
|
|
{Number.isFinite(advancedAnalyticsSummary.slippageImpact)
|
|
? `${advancedAnalyticsSummary.slippageImpact.toFixed(1)}%`
|
|
: '—'}
|
|
</p>
|
|
<p className="text-xs text-emerald-200/70">Cost of fills vs. gross</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex flex-wrap gap-2 text-xs text-emerald-200">
|
|
{analyticsFocus.timeframe && (
|
|
<span className="rounded-full border border-emerald-400/60 bg-emerald-400/10 px-3 py-1">
|
|
Timeframe: {analyticsFocus.timeframe}
|
|
</span>
|
|
)}
|
|
{analyticsFocus.signalType && (
|
|
<span className="rounded-full border border-emerald-400/60 bg-emerald-400/10 px-3 py-1">
|
|
Signal: {SIGNAL_LABELS[analyticsFocus.signalType]}
|
|
</span>
|
|
)}
|
|
{analyticsFocus.volatility && (
|
|
<span className="rounded-full border border-emerald-400/60 bg-emerald-400/10 px-3 py-1">
|
|
Volatility: {analyticsFocus.volatility}
|
|
</span>
|
|
)}
|
|
{!analyticsFocus.timeframe && !analyticsFocus.signalType && !analyticsFocus.volatility && (
|
|
<span className="text-emerald-200/70">No filter focus selected</span>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowAdvancedMetrics((prev) => !prev)}
|
|
className="inline-flex items-center gap-2 rounded-full border border-emerald-400/60 px-4 py-1 text-sm font-semibold text-emerald-100 transition hover:bg-emerald-400/10"
|
|
>
|
|
{showAdvancedMetrics ? 'Hide dashboard' : 'Open dashboard'}
|
|
</button>
|
|
</div>
|
|
|
|
{showAdvancedMetrics && (
|
|
<div className="rounded-2xl border border-slate-700 bg-slate-950/40 p-2">
|
|
<AdvancedMetricsDashboard
|
|
trades={safeAdvancedTrades}
|
|
onTimeframeSelect={handleAdvancedTimeframeSelect}
|
|
onSignalTypeSelect={handleAdvancedSignalSelect}
|
|
onVolatilityRangeSelect={handleAdvancedVolatilitySelect}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="rounded-xl border border-dashed border-emerald-400/40 bg-slate-900/40 p-4 text-sm text-emerald-200">
|
|
Close at least one trade to unlock the Advanced Metrics Dashboard summary.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Trading Notes */}
|
|
<div className="space-y-2">
|
|
<label htmlFor="trading-notes" className="text-sm font-medium text-slate-400">
|
|
Trading Notes
|
|
</label>
|
|
{isEditing ? (
|
|
<textarea
|
|
id="trading-notes"
|
|
value={plan.tradingNotes}
|
|
onChange={(e) => handleNotesChange(e.target.value)}
|
|
rows={4}
|
|
className="w-full rounded-lg border border-slate-600 bg-slate-800 px-3 py-2 text-white focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
|
|
placeholder="Enter your trading notes, observations, and strategies..."
|
|
/>
|
|
) : (
|
|
<div className="rounded-lg border border-slate-700 bg-slate-800/50 px-4 py-3 text-slate-300">
|
|
{plan.tradingNotes || <span className="italic text-slate-500">No notes</span>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Modals */}
|
|
<ConfirmModal
|
|
isOpen={showResetConfirm}
|
|
onClose={() => setShowResetConfirm(false)}
|
|
onConfirm={handleConfirmReset}
|
|
title="Reset Plan"
|
|
message="Create a new plan for today? This will clear the current plan."
|
|
variant="warning"
|
|
/>
|
|
|
|
<AlertModal
|
|
isOpen={showSuccessAlert}
|
|
onClose={() => setShowSuccessAlert(false)}
|
|
title="Success"
|
|
message={successMessage}
|
|
variant="success"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Re-export types
|
|
export type { TradingPlan, DailyTradingPlanProps };
|