commit - mock buy

src/App.js

@@ -24,6 +24,8 @@ function Dashboard() {
   const [userProfile, setUserProfile] = useState(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [scannerLoaded, setScannerLoaded] = useState(false);
+  const [buyModalData, setBuyModalData] = useState(null);
+  const [buyQuantity, setBuyQuantity] = useState(1);
   const navigate = useNavigate();
 
   const fetchProfile = () => {
@@ -43,34 +45,55 @@ function Dashboard() {
     navigate("/login");
   };
 
+  const handleBuySubmit = async () => {
+    if (!buyModalData || buyQuantity < 1) return;
+    try {
+      await axios.post("/api/portfolio/buy", {
+        symbol: buyModalData.symbol,
+        quantity: buyQuantity,
+        buy_price: buyModalData.price
+      });
+      setBuyModalData(null);
+      setBuyQuantity(1);
+    } catch (err) {
+      console.error("Error buying stock:", err);
+      alert("Failed to buy stock");
+    }
+  };
+
+  const onBuyClick = (symbol, price) => {
+    setBuyModalData({ symbol, price });
+    setBuyQuantity(1);
+  };
+
   return (
     <div className="app-container">
       {/* HEADER */}
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem', position: 'relative' }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          {/* Logo only, no text */}
           <span style={{ fontSize: '2.5rem' }}>📊</span>
-          <h1 style={{ margin: 0 }}>Stock Scanner Pro</h1>
         </div>
         
         {userProfile && (
           <div style={{ position: 'relative' }}>
             <div 
-              style={{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer', background: 'var(--glass-bg)', padding: '8px 16px', borderRadius: '30px', border: '1px solid var(--border-color)', backdropFilter: 'blur(10px)' }}
+              style={{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer', background: 'var(--glass-bg)', padding: '6px 12px', borderRadius: '30px', border: '1px solid var(--border-color)', backdropFilter: 'blur(10px)' }}
               onClick={() => setDropdownOpen(!dropdownOpen)}
             >
-              <div style={{ width: '35px', height: '35px', borderRadius: '50%', background: 'linear-gradient(135deg, var(--accent-blue), var(--accent-green))', display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 'bold', fontSize: '1.2rem', color: 'white' }}>
+              <div style={{ width: '30px', height: '30px', borderRadius: '50%', background: 'linear-gradient(135deg, var(--accent-blue), var(--accent-green))', display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 'bold', fontSize: '1rem', color: 'white' }}>
                 {userProfile.display_name ? userProfile.display_name.charAt(0).toUpperCase() : '?'}
               </div>
-              <span style={{ fontWeight: 600 }}>{userProfile.display_name || userProfile.username}</span>
+              <span style={{ fontWeight: 600, fontSize: '0.9rem' }}>{userProfile.display_name || userProfile.username}</span>
               <span style={{ fontSize: '0.8rem', color: 'var(--text-secondary)' }}>▼</span>
             </div>
 
             {dropdownOpen && (
-              <div className="glass-card animate-fade-in" style={{ position: 'absolute', top: '55px', right: '0', width: '220px', zIndex: 100, padding: '10px' }}>
-                <button className="nav-btn" style={{ width: '100%', marginBottom: '8px', border: 'none', whiteSpace: 'nowrap' }} onClick={() => { setView('profile'); setDropdownOpen(false); }}>
+              <div className="glass-card animate-fade-in" style={{ position: 'absolute', top: '50px', right: '0', width: '200px', zIndex: 100, padding: '8px' }}>
+                <button className="nav-btn" style={{ width: '100%', marginBottom: '8px', border: 'none', whiteSpace: 'nowrap', padding: '8px' }} onClick={() => { setView('profile'); setDropdownOpen(false); }}>
                   ⚙️ Profile Settings
                 </button>
-                <button className="nav-btn" style={{ width: '100%', border: 'none', background: 'var(--accent-red-bg)', color: 'var(--accent-red)', whiteSpace: 'nowrap' }} onClick={handleLogout}>
+                <button className="nav-btn" style={{ width: '100%', border: 'none', background: 'var(--accent-red-bg)', color: 'var(--accent-red)', whiteSpace: 'nowrap', padding: '8px' }} onClick={handleLogout}>
                   🚪 Logout
                 </button>
               </div>
@@ -79,14 +102,14 @@ function Dashboard() {
         )}
       </div>
 
-      <div className="nav-container">
-        <button className={`nav-btn ${view === "dashboard" ? "active" : ""}`} onClick={() => setView("dashboard")} title="Dashboard" style={{ padding: '8px 12px' }}>🏠</button>
-        <button className={`nav-btn ${view === "scanner" ? "active" : ""}`} onClick={() => setView("scanner")}>📊 Scanner</button>
-        <button className={`nav-btn ${view === "ribbon" ? "active" : ""}`} onClick={() => setView("ribbon")}>📈 Ribbon Strategy</button>
-        <button className={`nav-btn ${view === "smartmoney" ? "active" : ""}`} onClick={() => setView("smartmoney")}>🏦 Smart Money</button>
-        <button className={`nav-btn ${view === "trend" ? "active" : ""}`} onClick={() => setView("trend")}>⚡ Trend Analysis</button>
-        <button className={`nav-btn ${view === "marketintel" ? "active" : ""}`} onClick={() => setView("marketintel")}>📰 Market Intel</button>
-        <button className={`nav-btn ${view === "watchlists" ? "active" : ""}`} onClick={() => setView("watchlists")}>📋 Watchlists</button>
+      <div className="nav-container" style={{ gap: '8px' }}>
+        <button className={`nav-btn ${view === "dashboard" ? "active" : ""}`} onClick={() => setView("dashboard")} title="Dashboard" style={{ padding: '6px 12px' }}>🏠</button>
+        <button className={`nav-btn ${view === "scanner" ? "active" : ""}`} onClick={() => setView("scanner")} style={{ padding: '6px 12px', fontSize: '0.9rem' }}>📊 Scanner</button>
+        <button className={`nav-btn ${view === "ribbon" ? "active" : ""}`} onClick={() => setView("ribbon")} style={{ padding: '6px 12px', fontSize: '0.9rem' }}>📈 Ribbon</button>
+        <button className={`nav-btn ${view === "smartmoney" ? "active" : ""}`} onClick={() => setView("smartmoney")} style={{ padding: '6px 12px', fontSize: '0.9rem' }}>🏦 Smart Money</button>
+        <button className={`nav-btn ${view === "trend" ? "active" : ""}`} onClick={() => setView("trend")} style={{ padding: '6px 12px', fontSize: '0.9rem' }}>⚡ Trend</button>
+        <button className={`nav-btn ${view === "marketintel" ? "active" : ""}`} onClick={() => setView("marketintel")} style={{ padding: '6px 12px', fontSize: '0.9rem' }}>📰 Intel</button>
+        <button className={`nav-btn ${view === "watchlists" ? "active" : ""}`} onClick={() => setView("watchlists")} style={{ padding: '6px 12px', fontSize: '0.9rem' }}>📋 Watchlists</button>
       </div>
 
       <div className="animate-fade-in">
@@ -95,6 +118,7 @@ function Dashboard() {
             <Scanner 
               onSelectStock={setSelectedStock} 
               onSignal={setSignal} 
+              onBuyClick={onBuyClick}
             />
             <div className="glass-card" style={{ marginTop: "20px" }}>
               <h2>TradingView Chart</h2>
@@ -103,14 +127,60 @@ function Dashboard() {
             {signal && <Popup signal={signal} />}
           </>
         )}
-        {view === "dashboard" && <MainDashboard userProfile={userProfile} />}
-        {view === "ribbon" && <Ribbon />}
-        {view === "smartmoney" && <SmartMoney />}
-        {view === "marketintel" && <MarketIntel />}
-        {view === "trend" && <TrendScanner />}
-        {view === "watchlists" && <WatchlistManager userProfile={userProfile} onProfileUpdated={fetchProfile} />}
+        {view === "dashboard" && <MainDashboard userProfile={userProfile} onBuyClick={onBuyClick} />}
+        {view === "ribbon" && <Ribbon onBuyClick={onBuyClick} />}
+        {view === "smartmoney" && <SmartMoney onBuyClick={onBuyClick} />}
+        {view === "marketintel" && <MarketIntel onBuyClick={onBuyClick} />}
+        {view === "trend" && <TrendScanner onBuyClick={onBuyClick} />}
+        {view === "watchlists" && <WatchlistManager userProfile={userProfile} onProfileUpdated={fetchProfile} onBuyClick={onBuyClick} />}
         {view === "profile" && <Profile userProfile={userProfile} onProfileUpdated={fetchProfile} />}
       </div>
+
+      {/* Buy Modal */}
+      {buyModalData && (
+        <div style={{
+          position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
+          backgroundColor: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(5px)',
+          display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 9999
+        }}>
+          <div style={{
+            background: 'var(--glass-bg)', padding: '30px', borderRadius: '15px',
+            border: '1px solid var(--border-color)', width: 'min(350px, 90vw)', textAlign: 'center',
+            boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)'
+          }}>
+            <h2 style={{ marginBottom: '10px' }}>Mock Buy</h2>
+            <h3 style={{ color: 'var(--accent-green)', margin: '10px 0', fontSize: '1.8rem' }}>{buyModalData.symbol}</h3>
+            <p style={{ color: 'var(--text-secondary)' }}>Current Price: <strong style={{ color: 'var(--text-color)' }}>₹{buyModalData.price}</strong></p>
+            
+            <div style={{ margin: '25px 0', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '15px' }}>
+              <label style={{ fontWeight: '500' }}>Quantity: </label>
+              <input 
+                type="number" 
+                value={buyQuantity} 
+                onChange={(e) => setBuyQuantity(parseInt(e.target.value) || 1)}
+                min="1"
+                style={{
+                  background: 'var(--search-bg)', border: '1px solid var(--border-color)',
+                  color: 'var(--text-color)', padding: '10px', borderRadius: '8px', width: '100px',
+                  fontSize: '1.1rem', textAlign: 'center'
+                }}
+              />
+            </div>
+            
+            <div style={{ margin: '20px 0', padding: '15px', background: 'rgba(0,0,0,0.2)', borderRadius: '10px' }}>
+              <span style={{ color: 'var(--text-secondary)', fontSize: '0.9rem' }}>Total Investment</span>
+              <p style={{ fontWeight: 'bold', fontSize: '1.4rem', margin: '5px 0 0 0', color: 'var(--accent-blue)' }}>
+                ₹{(buyModalData.price * buyQuantity).toFixed(2)}
+              </p>
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between', gap: '15px', marginTop: '25px' }}>
+              <button className="nav-btn" style={{ flex: 1, padding: '12px' }} onClick={() => setBuyModalData(null)}>Cancel</button>
+              <button className="action-btn" onClick={handleBuySubmit} style={{ flex: 1, padding: '12px', background: 'linear-gradient(135deg, var(--accent-blue), var(--accent-green))', color: '#1a1a2e', border: 'none', fontWeight: 'bold' }}>Confirm Buy</button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }