Merge pull request #59 from Draoui-Haroun/feat/lock-strategy-style

feat: add lock strategy styling

Author: Edge-Explorer

frontend/src/App.css

@@ -2834,6 +2834,113 @@ input[type=number] {
   pointer-events: none;
 }
 
+.lock-strategy-btn {
+  position: relative;
+  background: rgba(0, 255, 157, 0.06);
+  border: 1px solid rgba(0, 255, 157, 0.4);
+  border-radius: 10px;
+  color: #00ff9d;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  cursor: pointer;
+  outline: none;
+  overflow: hidden;
+  transition: all 0.25s ease;
+}
+
+.lock-strategy-btn:hover:not(:disabled) {
+  background: rgba(0, 255, 157, 0.14);
+  border-color: #00ff9d;
+  box-shadow:
+    0 0 10px rgba(0, 255, 157, 0.45),
+    0 0 24px rgba(0, 255, 157, 0.2),
+    inset 0 0 8px rgba(0, 255, 157, 0.1);
+  transform: translateY(-1px);
+}
+
+.lock-strategy-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.lock-strategy-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  border-color: var(--border-glass);
+  color: var(--text-secondary);
+  box-shadow: none;
+}
+
+/* Subtle animated neon sweep on hover */
+.lock-strategy-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -75%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(
+    120deg,
+    transparent 0%,
+    rgba(0, 255, 157, 0.35) 50%,
+    transparent 100%
+  );
+  transform: skewX(-20deg);
+  transition: left 0.6s ease;
+  pointer-events: none;
+}
+
+.lock-strategy-btn:hover:not(:disabled)::before {
+  left: 125%;
+}
+
+/* Target / Stop Loss number inputs inside the lock-strategy-panel */
+.lock-strategy-panel input[type='number'] {
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.lock-strategy-panel input[type='number']:focus {
+  border-color: var(--neon-cyan);
+  box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.15);
+}
+
+/* Hide native number spinner arrows for a cleaner look (optional) */
+.lock-strategy-panel input[type='number']::-webkit-outer-spin-button,
+.lock-strategy-panel input[type='number']::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Locked state badge (shown after a successful lockInStrategy call) */
+.lock-strategy-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 10px 14px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--bull-green);
+  background: rgba(0, 255, 157, 0.12);
+  border: 1px solid rgba(0, 255, 157, 0.5);
+  border-radius: 10px;
+  box-shadow: 0 0 12px rgba(0, 255, 157, 0.3);
+  animation: lock-badge-pop 0.35s ease;
+}
+
+@keyframes lock-badge-pop {
+  0% {
+    transform: scale(0.92);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+
 /* ─── Animations ──────────────────────────── */
 @keyframes backdropFadeIn {
   from { opacity: 0; }

frontend/src/App.tsx

@@ -78,6 +78,10 @@ export default function App() {
   const [loadingInsight, setLoadingInsight] = useState<boolean>(false);
   const [insightError, setInsightError] = useState<string | null>(null);
 
+  // Lock-In Strategy State (live MLOps tracking via strategy_logs)
+  const [lockingStrategy, setLockingStrategy] = useState<boolean>(false);
+  const [strategyLocked, setStrategyLocked] = useState<boolean>(false);
+
 
 
   const fetchWatchlistData = async () => {
@@ -290,6 +294,7 @@ export default function App() {
   useEffect(() => {
     setInsight(null);
     setInsightError(null);
+    setStrategyLocked(false);
   }, [activeTicker]);
 
   // 4. WebSocket Live Price Streaming Subscription (graphql-transport-ws protocol)
@@ -547,6 +552,7 @@ export default function App() {
     setLoadingInsight(true);
     setInsightError(null);
     setInsight(null);
+    setStrategyLocked(false);
 
     try {
       const insightData = await graphqlRequest(`
@@ -571,6 +577,52 @@ export default function App() {
     }
   };
 
+  // 8b. Lock In Strategy — populates strategy_logs for live AI-vs-User win-rate tracking.
+  // NOTE: the backend's lock_in_strategy resolver computes its own AI target/stop-loss
+  // independently (ONNX + ATR-14) and stores it as ai_entry/ai_target/ai_stop_loss.
+  // The values passed here are the trader's OWN entry/target/stop-loss, stored as
+  // user_entry/user_target/user_stop_loss and compared against the AI's numbers.
+  const handleLockInStrategy = async (target: number, stopLoss: number) => {
+    if (!insight || !activeTicker || lockingStrategy || strategyLocked) return;
+
+    // Entry = live current price for the active ticker (not part of the insight payload)
+    const currentPrice = watchlistQuotes[activeTicker]?.price ?? activeStats?.close ?? null;
+
+    if (currentPrice === null || isNaN(target) || isNaN(stopLoss)) {
+      addToast('Missing entry, target, or stop-loss data — cannot lock in strategy.', 'alert');
+      return;
+    }
+
+    setLockingStrategy(true);
+    try {
+      const data = await graphqlRequest(`
+        mutation LockInStrategy($ticker: String!, $entry: Float!, $target: Float!, $stopLoss: Float!) {
+          lockInStrategy(ticker: $ticker, entry: $entry, target: $target, stopLoss: $stopLoss) {
+            success
+            message
+          }
+        }
+      `, {
+        ticker: activeTicker,
+        entry: currentPrice,
+        target: target,
+        stopLoss: stopLoss,
+      });
+
+      if (data.lockInStrategy?.success) {
+        setStrategyLocked(true);
+        addToast(`Strategy for ${activeTicker} locked in! Tracking live outcome...`, 'success');
+      } else {
+        addToast(data.lockInStrategy?.message || 'Failed to lock in strategy.', 'alert');
+      }
+    } catch (err: any) {
+      console.error('Lock in strategy error:', err);
+      addToast(err.message || 'Failed to lock in strategy.', 'alert');
+    } finally {
+      setLockingStrategy(false);
+    }
+  };
+
   // 9. Razorpay Payment Integration
   const handlePayment = async (amountInRupees: number) => {
     if (!user) return;
@@ -684,7 +736,11 @@ export default function App() {
         onCreateAlert={handleCreateAlert}
         onDeactivateAlert={handleDeactivateAlert}
         onTriggerInsight={triggerAIInsight}
-        onResetInsight={() => { setInsight(null); setInsightError(null); }}
+        onResetInsight={() => { setInsight(null); setInsightError(null); setStrategyLocked(false); }}
+        currentPrice={watchlistQuotes[activeTicker]?.price ?? activeStats?.close ?? null}
+        lockingStrategy={lockingStrategy}
+        strategyLocked={strategyLocked}
+        onLockInStrategy={handleLockInStrategy}
         onOpenRecharge={() => setCurrentView('upgrade')}
         onLogout={handleLogout}
         onLogoClick={() => setCurrentView('landing')}

frontend/src/components/AIAnalyst.tsx

@@ -16,6 +16,17 @@ interface AIAnalystProps {
   insightError: string | null;
   onTriggerInsight: (tradingStyle: string, riskTolerance: string) => void;
   onResetInsight: () => void;
+  // Lock-In Strategy props.
+  // NOTE: the backend's lock_in_strategy resolver independently computes its
+  // own AI target/stop-loss via ONNX + ATR-14 (ai_entry/ai_target/ai_stop_loss)
+  // and logs them to strategy_logs alongside whatever the user submits here
+  // (stored as user_entry/user_target/user_stop_loss). GeminiInsightType has
+  // no target/stopLoss fields, so the trader's own target/stop must be
+  // captured in the UI rather than read off the insight object.
+  currentPrice?: number | null;
+  lockingStrategy?: boolean;
+  strategyLocked?: boolean;
+  onLockInStrategy?: (target: number, stopLoss: number) => void;
 }
 
 export default function AIAnalyst({
@@ -26,7 +37,13 @@ export default function AIAnalyst({
   insightError,
   onTriggerInsight,
   onResetInsight,
+  currentPrice = null,
+  lockingStrategy = false,
+  strategyLocked = false,
+  onLockInStrategy,
 }: AIAnalystProps) {
+  const [targetPriceInput, setTargetPriceInput] = useState<string>('');
+  const [stopLossInput, setStopLossInput] = useState<string>('');
   const [activeTab, setActiveTab] = useState<'analysis' | 'history'>('analysis');
   const [selectedHistoryItem, setSelectedHistoryItem] = useState<any | null>(null);
   const [tradingStyle, setTradingStyle] = useState('swing_trading');
@@ -42,6 +59,24 @@ export default function AIAnalyst({
     }
   }, [loadingInsight]);
 
+  // Prefill Target Price / Stop Loss with sensible defaults whenever a fresh
+  // strategy is generated, based on the bias direction and current price.
+  // The trader can edit these before locking in -- they are stored as
+  // user_target / user_stop_loss server-side and compared against the
+  // backend's own ATR-14-computed AI levels.
+  useEffect(() => {
+    if (insight && currentPrice != null) {
+      const isBullish = insight.bullishProbability >= 50;
+      const defaultTarget = isBullish ? currentPrice * 1.05 : currentPrice * 0.95;
+      const defaultStopLoss = isBullish ? currentPrice * 0.98 : currentPrice * 1.02;
+      setTargetPriceInput(defaultTarget.toFixed(2));
+      setStopLossInput(defaultStopLoss.toFixed(2));
+    } else if (!insight) {
+      setTargetPriceInput('');
+      setStopLossInput('');
+    }
+  }, [insight, currentPrice]);
+
   // Parse inline markdown: **bold**, *italic*
   const parseInline = (text: string, keyPrefix: string) => {
     // Handle **bold** and *italic* (in that order, bold first)
@@ -507,6 +542,78 @@ export default function AIAnalyst({
                   <div className="insight-reason-body">
                     {formatReason(insight.reason)}
                   </div>
+
+                  {/* Lock In Strategy — captures the trader's own entry/target/stop-loss,
+                      logged as user_entry/user_target/user_stop_loss in strategy_logs and
+                      compared server-side against the backend's own ATR-14 AI levels. */}
+                  <div className="lock-strategy-panel" style={{ marginTop: '16px', paddingTop: '12px', borderTop: '1px solid rgba(255, 255, 255, 0.05)' }}>
+                    {strategyLocked ? (
+                      <div className="lock-strategy-badge" style={{ width: '100%', textAlign: 'center' }}>
+                        ✓ Strategy Locked
+                      </div>
+                    ) : (
+                      <>
+                        <div style={{ display: 'flex', gap: '10px', marginBottom: '10px' }}>
+                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                            <label style={{ fontSize: '10px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                              Entry
+                            </label>
+                            <div style={{ padding: '8px 10px', borderRadius: '8px', border: '1px solid var(--border-glass)', background: 'rgba(255,255,255,0.02)', color: 'var(--text-primary)', fontSize: '12px' }}>
+                              {currentPrice != null ? `$${currentPrice.toFixed(2)}` : '—'}
+                            </div>
+                          </div>
+                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                            <label htmlFor="lock-target-input" style={{ fontSize: '10px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                              Target
+                            </label>
+                            <input
+                              id="lock-target-input"
+                              type="number"
+                              step="0.01"
+                              value={targetPriceInput}
+                              onChange={(e) => setTargetPriceInput(e.target.value)}
+                              style={{ width: '100%', boxSizing: 'border-box', padding: '8px 10px', borderRadius: '8px', border: '1px solid var(--border-glass)', background: 'rgba(255,255,255,0.02)', color: 'var(--text-primary)', fontSize: '12px', outline: 'none' }}
+                            />
+                          </div>
+                          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                            <label htmlFor="lock-stoploss-input" style={{ fontSize: '10px', color: 'var(--text-secondary)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em' }}>
+                              Stop Loss
+                            </label>
+                            <input
+                              id="lock-stoploss-input"
+                              type="number"
+                              step="0.01"
+                              value={stopLossInput}
+                              onChange={(e) => setStopLossInput(e.target.value)}
+                              style={{ width: '100%', boxSizing: 'border-box', padding: '8px 10px', borderRadius: '8px', border: '1px solid var(--border-glass)', background: 'rgba(255,255,255,0.02)', color: 'var(--text-primary)', fontSize: '12px', outline: 'none' }}
+                            />
+                          </div>
+                        </div>
+                        <button
+                          className="lock-strategy-btn"
+                          disabled={
+                            lockingStrategy ||
+                            !onLockInStrategy ||
+                            currentPrice == null ||
+                            targetPriceInput.trim() === '' ||
+                            stopLossInput.trim() === '' ||
+                            isNaN(parseFloat(targetPriceInput)) ||
+                            isNaN(parseFloat(stopLossInput))
+                          }
+                          onClick={() => {
+                            const target = parseFloat(targetPriceInput);
+                            const stopLoss = parseFloat(stopLossInput);
+                            if (onLockInStrategy && !isNaN(target) && !isNaN(stopLoss)) {
+                              onLockInStrategy(target, stopLoss);
+                            }
+                          }}
+                          style={{ width: '100%', padding: '10px 14px', fontSize: '12px' }}
+                        >
+                          {lockingStrategy ? 'Locking In...' : '🔒 Lock In Strategy'}
+                        </button>
+                      </>
+                    )}
+                  </div>
                   <div style={{ marginTop: '16px', paddingTop: '12px', borderTop: '1px solid rgba(255, 255, 255, 0.05)', fontSize: '11px', color: 'var(--text-muted)', display: 'flex', gap: '6px', lineHeight: '140%', textAlign: 'left' }}>
                     <span style={{ color: 'var(--neon-cyan)', fontWeight: 600 }}>Disclaimer:</span>
                     <span>QuantIQ AI is an automated strategy assistant and can make mistakes. All analysis is for informational purposes only and should not be considered financial advice. Please verify financial data independently.</span>

frontend/src/pages/Dashboard.tsx

@@ -1,4 +1,3 @@
-
 import Navbar from '../components/Navbar';
 import WatchlistSidebar from '../components/WatchlistSidebar';
 import StockChart from '../components/StockChart';
@@ -33,6 +32,15 @@ interface DashboardProps {
   onLogoClick?: () => void;
   onAvatarUpload?: (newUrl: string) => void;
   indices: any[];
+  // Lock-In Strategy — passed straight through to AIAnalyst.
+  // See AIAnalyst.tsx: entry is the live current price, target/stopLoss are
+  // the trader's own numbers (stored as user_entry/user_target/user_stop_loss
+  // in strategy_logs, compared server-side against the backend's own
+  // ATR-14-computed AI levels).
+  currentPrice: number | null;
+  lockingStrategy: boolean;
+  strategyLocked: boolean;
+  onLockInStrategy: (target: number, stopLoss: number) => void;
 }
 
 export default function Dashboard({
@@ -60,7 +68,12 @@ export default function Dashboard({
   onLogout,
   onLogoClick,
   onAvatarUpload,
-  indices,}: DashboardProps) {
+  indices,
+  currentPrice,
+  lockingStrategy,
+  strategyLocked,
+  onLockInStrategy,
+}: DashboardProps) {
   return (
     <div className="app-container animate-fade">
       {/* Header / Navigation */}
@@ -113,6 +126,10 @@ export default function Dashboard({
                 insightError={insightError}
                 onTriggerInsight={onTriggerInsight}
                 onResetInsight={onResetInsight}
+                currentPrice={currentPrice}
+                lockingStrategy={lockingStrategy}
+                strategyLocked={strategyLocked}
+                onLockInStrategy={onLockInStrategy}
               />
             </section>