Customize - Stock map list, watch list, home page

src/App.js

@@ -9,22 +9,25 @@ import Popup from "./components/Popup";
 import AboutScanner from "./components/AboutScanner";
 import MarketIntel from "./components/MarketIntel";
 import TrendScanner from "./components/TrendScanner";
+import WatchlistManager from "./components/WatchlistManager";
 import Login from "./components/Login";
 import Signup from "./components/Signup";
 import ProtectedRoute from "./components/ProtectedRoute";
 import Profile from "./components/Profile";
+import MainDashboard from "./components/MainDashboard";
 import "./index.css";
 
 function Dashboard() {
   const [selectedStock, setSelectedStock] = useState("NSE:RELIANCE");
   const [signal, setSignal] = useState(null);
-  const [view, setView] = useState("scanner");
+  const [view, setView] = useState("dashboard");
   const [userProfile, setUserProfile] = useState(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [scannerLoaded, setScannerLoaded] = useState(false);
   const navigate = useNavigate();
 
   const fetchProfile = () => {
-    axios.get("http://127.0.0.1:8000/api/auth/me")
+    axios.get("/api/auth/me")
       .then(res => setUserProfile(res.data))
       .catch(err => {
         if (err.response?.status === 401) handleLogout();
@@ -44,7 +47,10 @@ function Dashboard() {
     <div className="app-container">
       {/* HEADER */}
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem', position: 'relative' }}>
-        <h1 style={{ margin: 0 }}>📈 Stock Scanner Pro</h1>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <span style={{ fontSize: '2.5rem' }}>📊</span>
+          <h1 style={{ margin: 0 }}>Stock Scanner Pro</h1>
+        </div>
         
         {userProfile && (
           <div style={{ position: 'relative' }}>
@@ -74,18 +80,22 @@ 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>
 
       <div className="animate-fade-in">
         {view === "scanner" && (
           <>
-            <AboutScanner />
-            <Scanner onSelectStock={setSelectedStock} onSignal={setSignal} />
+            <Scanner 
+              onSelectStock={setSelectedStock} 
+              onSignal={setSignal} 
+            />
             <div className="glass-card" style={{ marginTop: "20px" }}>
               <h2>TradingView Chart</h2>
               <Chart symbol={selectedStock} />
@@ -93,10 +103,12 @@ 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 === "profile" && <Profile userProfile={userProfile} onProfileUpdated={fetchProfile} />}
       </div>
     </div>