update dashboard comp

src/app/dashboard/dashboard.component.html

@@ -1,33 +1,82 @@
 <div class="wrap">
+
+  <!-- Market Overview ticker (right-to-left auto scroll) -->
+  <div class="section market-overview" id="section-market-overview">
+    <div class="mo-header" style="display:flex; justify-content:space-between; align-items:flex-start;">
+      <h2>Market Overview</h2>
+      <div class="tag" style="font-size:0.85rem; opacity:0.9;">Last updated: {{ lastUpdated }}</div>
+    </div>
+    <div class="ticker" aria-hidden="false">
+      <div class="ticker-track" #tickerTrack>
+        <div class="mcard" *ngFor="let m of marketCardsRepeat">
+          <h3>{{ m.title }}</h3>
+          <div class="mval">{{ m.value }} <span class="chg" [ngClass]="{ up: m.dir === 'up', down: m.dir === 'down', neutral: m.dir === 'neutral' }">({{ m.chg }})</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Header bar: show country pills here (removed 'Market / Dashboard' text) -->
   <div class="header">
-    <div class="brand">Market / Dashboard</div>
-    <div class="tag">Last updated: {{ lastUpdated }}</div>
+    <div class="country-row" style="padding:10px 12px; display:flex; align-items:center; gap:8px;">
+      <div class="country-list">
+        <ng-container *ngFor="let country of countries">
+          <button class="tab" *ngIf="country !== 'All'" [class.active]="selectedCountry === country" (click)="selectCountry(country)">
+            {{ country }}
+          </button>
+        </ng-container>
+      </div>
+    </div>
   </div>
 
   <!-- 1) Important Indices -->
   <div class="section" id="section-indices">
-    <h2>Important Indices (Current Price)</h2>
-    <div class="indices">
-      <div class="idx" *ngFor="let idx of indices; let i = index">
-        <div class="name">{{ idx.code }}</div>
-        <div class="row">
-          <div class="price">{{ fmt(idx.price) }}</div>
-          <div class="chg" [ngClass]="{ up: idx.chg >= 0, down: idx.chg < 0 }">
-            {{ idx.chg >= 0 ? '+' : '' }}{{ idx.chg.toFixed(2) }}%
+    <h2>Global Market Indices (Live)</h2>
+    <div>
+      <!-- Country filter moved to header; removed duplicate here -->
+    </div>
+
+    <!-- Cards grid for indices of selected country -->
+    <div class="indices-grid" style="margin-top:12px;">
+      <!-- When India selected, show nine simple index cards (name + placeholder price) -->
+      <ng-container *ngIf="(selectedCountry || '').toLowerCase() === 'india'; else otherIndices">
+        <ng-container *ngFor="let g of displayIndices">
+          <div class="index-card">
+            <div class="ic-header">
+              <div class="ic-name">{{ formatIndexName(g.name) }}</div>
+              <div class="ic-price">{{ g.price | number:'1.2-2' }}</div>
+            </div>
+            <div class="ic-row">
+              <div class="ic-change" [ngClass]="{ up: g.isUp, down: !g.isUp }">
+                {{ g.changePct !== null && g.changePct !== undefined ? (g.changePct >= 0 ? '+' : '') + (g.changePct | number:'1.2-2') + '%' : (g.change !== null && g.change !== undefined ? (g.change >= 0 ? '+' : '') + (g.change | number:'1.2-2') : '—') }}
+              </div>
+            </div>
+            <svg *ngIf="g.miniPath" preserveAspectRatio="none" viewBox="0 0 240 28" aria-hidden="true" class="ic-spark">
+              <path [attr.d]="g.miniPath" fill="none" [attr.stroke]="g.isUp ? 'var(--up)' : 'var(--down)'" stroke-width="2"></path>
+            </svg>
           </div>
-        </div>
-        <div class="mini">
-          <svg preserveAspectRatio="none" viewBox="0 0 240 28" aria-hidden="true">
-            <path [attr.d]="idx.miniPath"
-                  fill="none"
-                  [attr.stroke]="idx.isUp ? 'var(--up)' : 'var(--down)'"
-                  stroke-width="2">
-            </path>
-          </svg>
-        </div>
-      </div>
+        </ng-container>
+      </ng-container>
+
+      <ng-template #otherIndices>
+        <ng-container *ngFor="let g of displayIndices">
+          <div class="index-card">
+            <div class="ic-header">
+              <div class="ic-name">{{ formatIndexName(g.name) }}</div>
+              <div class="ic-price">{{ g.price | number:'1.2-2' }}</div>
+            </div>
+            <div class="ic-row">
+              <div class="ic-change" [ngClass]="{ up: g.isUp, down: !g.isUp }">
+                {{ g.changePct !== null && g.changePct !== undefined ? (g.changePct >= 0 ? '+' : '') + (g.changePct | number:'1.2-2') + '%' : (g.change !== null && g.change !== undefined ? (g.change >= 0 ? '+' : '') + (g.change | number:'1.2-2') : '—') }}
+              </div>
+            </div>
+            <svg *ngIf="g.miniPath" preserveAspectRatio="none" viewBox="0 0 240 28" aria-hidden="true" class="ic-spark">
+              <path [attr.d]="g.miniPath" fill="none" [attr.stroke]="g.isUp ? 'var(--up)' : 'var(--down)'" stroke-width="2"></path>
+            </svg>
+          </div>
+        </ng-container>
+      </ng-template>
     </div>
-   
   </div>
 
   <!-- 2) Companies under each Index (with Buy/Sell) + 3) Today Chart -->
@@ -44,7 +93,14 @@
 
     <div class="cols">
       <div>
-        <div class="table-wrap">
+        <div class="table-wrap" style="position:relative">
+          <div *ngIf="quotesLoading" style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); z-index:5; border-radius:8px;">
+            <svg width="48" height="48" viewBox="0 0 50 50" aria-hidden="true">
+              <circle cx="25" cy="25" r="20" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-dasharray="31.4 31.4">
+                <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
+              </circle>
+            </svg>
+          </div>
           <table aria-label="Companies">
             <thead>
               <tr>
@@ -57,7 +113,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr *ngFor="let c of companiesByIndex[activeIndex]; let i = index">
+              <tr *ngFor="let c of companiesByIndex[activeIndex]; let i = index" [class.selected]="c.sym === selectedCompany">
                 <td>
                   <a href="#" (click)="onCompanyClick($event, c)" class="co">{{ c.sym }}</a>
                 </td>
@@ -83,12 +139,7 @@
             <div class="chart-title">Today Chart: {{ chartSymbol || '—' }}</div>
             <div class="legend">1-minute simulated intraday</div>
           </div>
-          <canvas #chartCanvas
-                  id="chartCanvas"
-                  width="800"
-                  height="260"
-                  aria-label="Intraday chart">
-          </canvas>
+          <div #chartContainer class="chart-svg" aria-label="Intraday chart" role="img"></div>
         </div>
         <div class="note">Click a company to update the chart.</div>
       </div>
@@ -160,6 +211,6 @@
       </div>
 
     </div>
-    
+
   </div>
 </div>

src/app/dashboard/dashboard.component.scss

@@ -24,7 +24,7 @@ a {
   text-decoration: none;
 }
 
-.wrap {  
+.wrap {
   padding: 3vw;
   padding-top: 8vw;
 }
@@ -68,6 +68,19 @@ h2 {
   margin: 16px 0;
 }
 
+/* Ensure market overview ticker is clipped inside the rounded card */
+.section.market-overview {
+  overflow: hidden; /* clip animated content to card */
+  position: relative; /* establish containing block for absolute/animated children */
+}
+
+/* Ticker container should also hide overflow so animation doesn't escape */
+.ticker {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
 /* Index cards */
 .indices {
   display: grid;
@@ -87,53 +100,86 @@ h2 {
   }
 }
 
+/* compact .idx used for the small preview cards (top row) */
 .idx {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0));
   border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 12px;
+  border-radius: 10px;
+  padding: 8px; /* reduced */
+  min-height: 70px;
 }
 
 .idx .name {
   font-weight: 600;
+  font-size: 13px;
 }
 
 .idx .row {
   display: flex;
   align-items: baseline;
-  gap: 10px;
+  gap: 8px;
   margin-top: 6px;
 }
 
-.price {
-  font-size: 20px;
+.idx .price {
+  font-size: 16px;
   font-weight: 700;
 }
 
-.chg {
-  font-size: 13px;
+.idx .chg {
+  font-size: 12px;
   padding: 2px 8px;
   border-radius: 999px;
   background: var(--soft);
 }
 
-.chg.up {
-  color: var(--up);
+.idx .mini {
+  margin-top: 8px;
+  height: 22px; /* smaller sparkline */
+  width: 100%;
 }
 
-.chg.down {
-  color: var(--down);
+.idx .mini svg {
+  height: 100%;
+  width: 100%;
 }
 
-.mini {
-  margin-top: 8px;
-  height: 28px;
-  width: 100%;
+/* Make the detailed indices grid use compact cards as well */
+.indices-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
 }
 
-.mini svg {
-  width: 100%;
-  height: 100%;
+@media (max-width: 1100px) {
+  .indices-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 700px) {
+  .indices-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Ensure index-card component inside indices-grid stays compact */
+.indices-grid .index-card {
+  padding: 8px;
+  border-radius: 10px;
+  min-height: 80px;
+}
+
+.indices-grid .index-card .name {
+  font-size: 13px;
+}
+
+.indices-grid .index-card .price {
+  font-size: 16px;
+}
+
+.indices-grid .index-card .mini {
+  height: 22px;
 }
 
 /* Tabs (indices -> companies) */
@@ -159,6 +205,34 @@ h2 {
   border-color: transparent;
 }
 
+/* Country buttons styled like tabs/pills */
+.country-list {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.country {
+  background: var(--soft);
+  color: var(--text);
+  padding: 6px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.country.active {
+  background: var(--accent);
+  color: #0b1020;
+  border-color: transparent;
+}
+
+.tab.active, .country.active {
+  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
+}
+
 .table-wrap {
   border: 1px solid var(--border);
   border-radius: 12px;
@@ -171,6 +245,17 @@ table {
   min-width: 620px;
 }
 
+/* Highlight selected company row: pink company name */
+table tr.selected td a.co {
+  color: #ff66b2; /* pink */
+  font-weight: 700;
+}
+
+/* also highlight entire row lightly */
+table tr.selected {
+  background: rgba(255, 102, 178, 0.03);
+}
+
 th,
 td {
   padding: 10px 12px;
@@ -189,15 +274,14 @@ th {
 .btn {
   padding: 6px 10px;
   border-radius: 8px;
-  border: 1px solid var(--border); 
+  border: 1px solid var(--border);
   cursor: pointer;
   font-weight: 600;
-  color:white;
+  color: white;
 }
 
 .btn.buy {
   background: green;
-
   /* border-color: rgba(18, 196, 139, 0.35);*/
 }
 
@@ -254,6 +338,13 @@ canvas {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
 }
 
+.chart-svg {
+  width: 100%;
+  height: 260px;
+  border-radius: 10px;
+  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
+  padding: 6px;
+}
 /* Sector grid */
 .sector-grid {
   display: grid;
@@ -324,3 +415,78 @@ canvas {
   font-size: 12px;
   margin-top: 6px;
 }
+
+/* Improve the marquee so the market overview cards run smoothly right-to-left. Use a CSS variable for duration, make the track width adapt to content and translate by -50% for seamless loop. Add will-change and hardware-accelerated transform, and ensure .mcard are non-shrinking. */
+.ticker-track {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  padding: 12px 8px;
+  /* ensure items don't shrink and track width matches content (we duplicate items in template) */
+  white-space: nowrap;
+  will-change: transform;
+  --marquee-duration: 28s; /* adjust speed */
+  animation: marquee var(--marquee-duration) linear infinite;
+}
+
+.mcard {
+  flex: 0 0 auto; /* prevent shrinking/expanding */
+  min-width: 160px;
+  max-width: 260px;
+  padding: 8px 12px;
+  border-radius: 10px;
+  background: rgba(255,255,255,0.02);
+  border: 1px solid rgba(255,255,255,0.02);
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+/* Inline styles for index-card moved here */
+.index-card { 
+  background: rgba(255,255,255,0.02); 
+  padding: 12px; 
+  border-radius: 8px; 
+  min-width: 260px; 
+  margin: 6px; 
+}
+
+.ic-header { 
+  display: flex; 
+  justify-content: space-between; 
+  align-items: center; 
+}
+
+.ic-name { 
+  font-weight: 600; 
+  font-size: 0.95rem; 
+}
+
+.ic-price { 
+  font-weight: 700; 
+}
+
+.ic-row { 
+  margin-top: 6px; 
+}
+
+.ic-change.up { 
+  color: var(--up); 
+}
+
+.ic-change.down { 
+  color: var(--down); 
+}
+
+.ic-spark { 
+  width: 100%; 
+  height: 28px; 
+  margin-top: 8px; 
+}

src/app/dashboard/dashboard.component.ts

@@ -1,19 +1,26 @@
 import { Component, ElementRef, OnDestroy, OnInit, AfterViewInit, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { DashboardService } from './dashboard.service';
+import { take } from 'rxjs/operators';
+import { lastValueFrom } from 'rxjs';
 
 type IndexItem = { code: string; price: number; chg: number; miniPath?: string; isUp?: boolean };
 type Company = { sym: string; ltp: number; chg: number; high: number; low: number };
 type Sector = { name: string; picks: string[] };
+type MarketCard = { title: string; value: string; chg: string; dir: 'up' | 'down' | 'neutral' };
+
+type GlobalIndex = { id: string; name: string; country: string; region: string; price: number; change: number; changePct: number; sparkline: number[]; miniPath?: string; isUp?: boolean };
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, HttpClientModule], // IndexCardComponent],
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss'],
 })
 export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
-  // Demo data
+  // Demo data (used as fallback until live data loads)
   indices: IndexItem[] = [
     { code: 'NIFTY 50', price: 24480.55, chg: +0.35 },
     { code: 'BANK NIFTY', price: 51880.20, chg: -0.12 },
@@ -22,6 +29,31 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     { code: 'NIFTY SMALLCAP', price: 17350.60, chg: -0.18 },
   ];
 
+  // Market overview cards (populated live when API responds)
+  // initialize placeholders to em dash so UI doesn't show raw 0 or empty strings
+  marketCards: MarketCard[] = [
+    { title: 'Gold', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'Silver', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'Crude Oil (Brent)', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'Crude Oil (WTI)', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'Natural Gas', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'USD/INR', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'EUR/USD', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'GBP/USD', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'Bitcoin', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'Ethereum', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'S&P 500', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'NASDAQ', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'DAX', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'Nikkei', value: '—', chg: '—', dir: 'neutral' },
+    { title: 'Copper', value: '—', chg: '—', dir: 'neutral' }
+  ];
+
+  // expose duplicated list for seamless loop in template
+  get marketCardsRepeat(): MarketCard[] {
+    return [...this.marketCards, ...this.marketCards];
+  }
+
   companiesByIndex: Record<string, Company[]> = {
     'NIFTY 50': [
       { sym: 'RELIANCE', ltp: 2950.30, chg: +0.85, high: 2972.0, low: 2920.0 },
@@ -64,7 +96,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     { name: 'IT & Software', picks: ['TCS', 'INFY', 'HCLTECH', 'TECHM'] },
     { name: 'Banking & Finance', picks: ['HDFCBANK', 'ICICIBANK', 'SBIN', 'AXISBANK'] },
     { name: 'Energy & Materials', picks: ['RELIANCE', 'ONGC', 'TATASTEEL', 'COALINDIA'] },
-    { name: 'Auto', picks: ['TATAMOTORS', 'MARUTI', 'M&M', 'TVSMOTOR'] },
+    { name: 'Auto', picks: ['TATAMOTORS', 'MARUTI', 'M&amp;M', 'TVSMOTOR'] },
     { name: 'FMCG', picks: ['ITC', 'HINDUNILVR', 'NESTLEIND', 'DABAR'] },
     { name: 'Telecom', picks: ['BHARTIARTL', 'VODAFONEIDE', 'TATACOMM', 'INDUSTOWER'] },
   ];
@@ -74,18 +106,133 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
   }
   activeIndex: string = this.indexCodes[0];
 
+  // currently selected company symbol for chart highlighting
+  selectedCompany: string | null = null;
+
   gainers: Company[] = [];
   losers: Company[] = [];
 
+  // New global indices lists
+  globalIndices: GlobalIndex[] = [];
+  indiaIndices: GlobalIndex[] = [];
+
+  // All indices cache (includes India and others)
+  private allGlobalIndices: GlobalIndex[] = [];
+
+  // Country filter
+  // default countries shown immediately (will be replaced by live data when available)
+  countries: string[] = ['India', 'US', 'Uk', 'German', 'Sweden', 'Russia'];
+  selectedCountry = 'India';
+
+  // common alias map so UI labels like 'US' or 'Uk' match backend country names
+  private countryAliases: Record<string, string[]> = {
+    'us': ['united states', 'usa', 'us', 'u.s.a', 'u.s.'],
+    'uk': ['united kingdom', 'britain', 'uk', 'u.k.'],
+    'german': ['germany', 'german'],
+    'russia': ['russia', 'russian federation'],
+    'india': ['india'],
+    'sweden': ['sweden']
+  };
+
+  // demo list for India indices
+  private defaultIndiaIndexNames: string[] = [
+    'Nifty 50',
+    'Nifty Next 50',
+    'Nifty 100',
+    'Nifty 500',
+    'Nifty Bank',
+    'Nifty IT',
+    'Nifty Pharma',
+    'Nifty FMCG',
+    'Nifty Midcap 100',
+    'Nifty Smallcap 100'
+  ];
+
+  // avoid repeated fetches in quick succession
+  private globalFetched = false;
+
+  // last updated timestamp shown in the header
   lastUpdated = '—';
-  chartSymbol = 'RELIANCE';
 
+  // chart symbol and timer handle
+  chartSymbol = 'RELIANCE';
   private tickHandle?: number;
+  public quotesIntervalHandle?: number;
 
   @ViewChild('chartCanvas', { static: false })
   private canvasRef?: ElementRef<HTMLCanvasElement>;
 
-  constructor(private host: ElementRef<HTMLElement>) { }
+  @ViewChild('chartContainer', { static: false })
+  private chartContainerRef?: ElementRef<HTMLDivElement>;
+
+  @ViewChild('tickerTrack', { static: false })
+  private tickerTrackRef?: ElementRef<HTMLDivElement>;
+
+  private marqueeAnimationId?: number;
+  private marqueeResizeObserver?: ResizeObserver | null = null;
+  private marqueeMutationObserver?: MutationObserver | null = null;
+  private marqueeMeasureTimeout?: any;
+  private lastDurationSec?: number | null = null;
+
+  // priority lists of important indices per country (used to order and pick indices from live payload)
+  private importantIndicesMap: Record<string, string[]> = {
+    'india': [
+      'Nifty 50', 'Nifty Bank', 'SENSEX', 'Nifty Next 50', 'Nifty 100', 'Nifty 500', 'Nifty IT', 'Nifty Pharma', 'Nifty FMCG', 'Nifty Midcap 100', 'Nifty Smallcap 100'
+    ],
+    'us': ['S&P 500', 'Dow Jones', 'Nasdaq Composite', 'S&P MidCap 400', 'S&P SmallCap 600'],
+    'uk': ['FTSE 100', 'FTSE 250', 'FTSE 350'],
+    'german': ['DAX', 'MDAX', 'TecDAX'],
+    'sweden': ['OMX Stockholm 30'],
+    'russia': ['MOEX Russia', 'RTS Index']
+  };
+
+  private uniqueByName(list: GlobalIndex[]): GlobalIndex[] {
+    const seen = new Set<string>();
+    const out: GlobalIndex[] = [];
+    for (const it of list) {
+      const name = (it.name || '').toString().trim();
+      const key = name.toLowerCase();
+      if (!key) continue;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      out.push(it);
+    }
+    return out;
+  }
+
+  // Build a prioritized list of indices for a country based on importantIndicesMap and available live entries
+  private buildCountryIndices(countryKey: string): GlobalIndex[] {
+    if (!countryKey) return [];
+    const key = countryKey.toLowerCase().trim();
+    const important = this.importantIndicesMap[key] || [];
+    // gather live matches (case-insensitive name match)
+    const live = (this.allGlobalIndices || []).filter(g => this.countryMatches(key, (g.country || '').toLowerCase()));
+    const byNameMap = new Map<string, GlobalIndex>();
+    // normalize and index live by name
+    live.forEach(g => {
+      const n = (g.name || '').toString().trim();
+      if (n) byNameMap.set(n.toLowerCase(), g);
+    });
+    const result: GlobalIndex[] = [];
+    // pick in priority order
+    for (const name of important) {
+      const found = byNameMap.get(name.toLowerCase());
+      if (found) result.push(found);
+    }
+    // append any other live indices for the country that were not in the important list (unique)
+    live.forEach(g => {
+      const n = (g.name || '').toString().trim().toLowerCase();
+      if (!result.some(r => ((r.name || '').toLowerCase() === n))) result.push(g);
+    });
+    return this.uniqueByName(result).map(g => {
+      // ensure miniPath computed
+      g.miniPath = this.sparkPath(g.sparkline || []);
+      g.isUp = (g.changePct || 0) >= 0;
+      return g;
+    });
+  }
+
+  constructor(private host: ElementRef<HTMLElement>, private market: DashboardService) { }
 
   ngOnInit(): void {
     // Initialize mini sparklines and clock
@@ -93,6 +240,47 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     this.setClock();
     this.updateGainersLosers();
 
+    // Load cached market overview so values appear immediately on reload if available
+    try {
+      const raw = localStorage.getItem('marketCardsCache');
+      if (raw) {
+        const cached = JSON.parse(raw) as MarketCard[];
+        if (Array.isArray(cached) && cached.length) this.marketCards = cached;
+      }
+    } catch {
+      // ignore cache errors
+    }
+
+    // --- Load cached companies/quotes so Companies table shows immediately after reload ---
+    try {
+      const rawComp = localStorage.getItem('companiesCacheV1');
+      if (rawComp) {
+        const parsed = JSON.parse(rawComp) as any;
+        if (parsed && parsed.companiesByIndex) {
+          this.companiesByIndex = parsed.companiesByIndex;
+          if (parsed.lastUpdated) this.lastUpdated = parsed.lastUpdated;
+          this.updateGainersLosers();
+          // ensure activeIndex valid
+          if (!this.indexCodes.includes(this.activeIndex)) {
+            this.activeIndex = this.indexCodes[0];
+          }
+        }
+      }
+    } catch {
+      // ignore
+    }
+
+    // Fetch live data once on init (and keep demo simulation running as fallback)
+    this.fetchLiveMarkets();
+    // fetch market overview cards independently so they display even if /getcompanies fails
+    this.fetchMarketCards();
+    this.fetchGlobalIndices();
+
+    // Ensure demo India indices present initially if backend doesn't provide them
+    if (this.selectedCountry && this.selectedCountry.toLowerCase().trim() === 'india' && (!this.indiaIndices || this.indiaIndices.length === 0)) {
+      this.populateDefaultIndiaIndices();
+    }
+
     // Start ticks every 3s
     this.tickHandle = window.setInterval(() => {
       this.tickIndices();
@@ -100,19 +288,556 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
       this.updateGainersLosers();
       this.setClock();
     }, 3000);
+
+    // Start polling live quotes every 30s
+    this.quotesIntervalHandle = window.setInterval(() => {
+      this.fetchLiveQuotesForActiveIndex();
+    }, 30000);
+
+    // ensure selectedCompany defaults to first company in active index (from cache or demo)
+    const first = this.companiesByIndex[this.activeIndex]?.[0];
+    if (first) {
+      this.selectedCompany = first.sym;
+      // draw initial chart for selected company (try live intraday)
+      this.fetchAndDrawChart(first.sym, first.ltp).catch(() => { /* ignore */ });
+    }
   }
 
   ngAfterViewInit(): void {
     // Initial chart
     const initial = this.companiesByIndex[this.activeIndex][0];
     this.chartSymbol = initial?.sym ?? '—';
-    this.drawTodayChart(this.chartSymbol, initial?.ltp ?? 100);
+    // draw SVG style area chart in container
+    this.renderAreaChart(initial?.sym ?? '—', initial?.ltp ?? 100);
   }
 
   ngOnDestroy(): void {
     if (this.tickHandle) {
       clearInterval(this.tickHandle);
     }
+    if (this.quotesIntervalHandle) {
+      clearInterval(this.quotesIntervalHandle);
+    }
+    if (this.marqueeAnimationId) {
+      cancelAnimationFrame(this.marqueeAnimationId);
+      this.marqueeAnimationId = undefined;
+    }
+    if (this.marqueeResizeObserver) {
+      try { this.marqueeResizeObserver.disconnect(); } catch (e) { /* ignore */ }
+      this.marqueeResizeObserver = null;
+    }
+    if (this.marqueeMutationObserver) {
+      try { this.marqueeMutationObserver.disconnect(); } catch (e) { /* ignore */ }
+      this.marqueeMutationObserver = null;
+    }
+    if (this.marqueeMeasureTimeout) {
+      clearTimeout(this.marqueeMeasureTimeout);
+      this.marqueeMeasureTimeout = undefined;
+    }
+  }
+
+  // Loading state shown by template overlay while quotes request running
+  quotesLoading: boolean = false;
+  // localStorage key for persisted companies/quotes cache
+  private readonly companiesCacheKey = 'companiesCacheV1';
+
+  // Called after view init to set animation duration based on content width so the marquee flows evenly
+  private setupMarquee(): void {
+    const el = this.tickerTrackRef?.nativeElement as HTMLDivElement | undefined;
+    if (!el) return;
+
+    // measure content width and container width; duplicated items => distance is half scrollWidth
+    const measureOnce = () => {
+      try {
+        const totalWidth = el.scrollWidth || 0; // width of duplicated content
+        const distance = Math.max(1, totalWidth / 2);
+        const pxPerSecond = 120; // control speed
+        const durationSec = Math.max(6, distance / pxPerSecond);
+        // avoid changing CSS var if duration unchanged (prevents animation restart)
+        if (this.lastDurationSec == null || Math.abs((this.lastDurationSec || 0) - durationSec) > 0.5) {
+          el.style.setProperty('--marquee-duration', `${Math.round(durationSec)}s`);
+          this.lastDurationSec = durationSec;
+        }
+      } catch (e) {
+        // ignore
+      }
+    };
+
+    const scheduleMeasure = () => {
+      if (this.marqueeMeasureTimeout) clearTimeout(this.marqueeMeasureTimeout);
+      this.marqueeMeasureTimeout = setTimeout(() => {
+        measureOnce();
+        this.marqueeMeasureTimeout = undefined;
+      }, 120);
+    };
+
+    // initial measurement
+    scheduleMeasure();
+
+    // observe size changes and DOM changes, but debounce actual measurement
+    try {
+      this.marqueeResizeObserver = new ResizeObserver(() => scheduleMeasure());
+      this.marqueeResizeObserver.observe(el);
+      if (el.parentElement) this.marqueeResizeObserver.observe(el.parentElement);
+    } catch (e) {
+      this.marqueeResizeObserver = null;
+    }
+
+    try {
+      this.marqueeMutationObserver = new MutationObserver(() => scheduleMeasure());
+      this.marqueeMutationObserver.observe(el, { childList: true, subtree: true });
+    } catch (e) {
+      this.marqueeMutationObserver = null;
+    }
+  }
+
+  private fetchGlobalIndices(): void {
+    // avoid duplicate fetch
+    if (this.globalFetched) return;
+    this.globalFetched = true;
+
+    this.market.getGlobalIndices().pipe(take(1)).subscribe({
+      next: (resp) => {
+        try {
+          console.log('fetchGlobalIndices resp:', resp);
+
+          const data = resp?.data || resp;
+          if (!Array.isArray(data)) return;
+          // capture marketCards from response early so we can use it when deriving indices
+          const respMarketCards = (resp as any)?.marketCards;
+          // map all returned indices
+          const mapped = data.map(this.mapToGlobalIndex);
+
+          // If backend returned no mapped indices but provided marketCards, derive a few common indices from marketCards
+          if ((!mapped || mapped.length === 0) && Array.isArray(respMarketCards) && respMarketCards.length) {
+            const indexNames = new Set(['S&P 500', 'NASDAQ', 'DAX', 'Nikkei', 'Nifty 50', 'Nifty Bank', 'SENSEX']);
+            const derived: GlobalIndex[] = [];
+            respMarketCards.forEach((mc: any) => {
+              if (indexNames.has(mc.title)) {
+                const price = Number(mc.price) || (typeof mc.display === 'number' ? mc.display : NaN);
+                const pct = mc.chgPct ?? (mc.chg && price ? (Number(mc.chg) / (price - Number(mc.chg))) * 100 : 0);
+                const gi: GlobalIndex = {
+                  id: (mc.title || '').replace(/\s+/g, '_'),
+                  name: mc.title,
+                  country: mc.title === 'S&P 500' || mc.title === 'NASDAQ' ? 'United States' : mc.title === 'DAX' ? 'Germany' : mc.title === 'Nikkei' ? 'Japan' : 'India',
+                  region: mc.title === 'S&P 500' || mc.title === 'NASDAQ' ? 'US' : mc.title === 'DAX' ? 'German' : mc.title === 'Nikkei' ? 'Japan' : 'India',
+                  price: Number(isNaN(price) ? 0 : price),
+                  change: Number(mc.chg ?? 0),
+                  changePct: Number(pct || 0),
+                  sparkline: this.series(Number(isNaN(price) ? Math.round(Number(mc.price) || 1000) : price), 26)
+                } as GlobalIndex;
+                gi.miniPath = this.sparkPath(gi.sparkline || []);
+                gi.isUp = (gi.changePct || 0) >= 0;
+                derived.push(gi);
+              }
+            });
+            // merge derived into mapped so rest of flow continues
+            if (derived.length) {
+              mapped.push(...derived);
+            }
+          }
+
+          // compute mini sparklines paths
+          mapped.forEach((g) => {
+            g.miniPath = this.sparkPath(g.sparkline || []);
+            g.isUp = (g.change || 0) >= 0;
+          });
+
+          // merge into cache (dedupe by id)
+          const byId = new Map<string, GlobalIndex>();
+          [...this.allGlobalIndices, ...mapped].forEach(i => byId.set(i.id, i));
+          this.allGlobalIndices = Array.from(byId.values());
+
+          // populate countries list for filter — merge live values but keep defaults if none
+          const uniq = Array.from(new Set(this.allGlobalIndices.map((g) => g.country).filter(Boolean)));
+          // always include common defaults so UI shows tabs even when backend data missing
+          const defaultCountries = ['India', 'US', 'Uk', 'German', 'Sweden', 'Russia'];
+          if (uniq.length) {
+            // Filter live countries: exclude those that are aliases of our defaults to avoid duplicates
+            const aliasesMap: Record<string, string[]> = this.countryAliases;
+            const isAliasOfDefault = (countryName: string) => {
+              if (!countryName) return false;
+              const lname = countryName.toLowerCase();
+              // check against every alias set; if any alias contains the live name, consider it a match
+              for (const key of Object.keys(aliasesMap)) {
+                const aliases = aliasesMap[key] || [];
+                for (const a of aliases) {
+                  if (lname.includes(a)) return true;
+                }
+              }
+              return false;
+            };
+
+            const rest = uniq
+              .filter(c => c.toLowerCase() !== 'india')
+              .filter(c => !isAliasOfDefault(c))
+              .sort();
+            // merge defaults with any truly extra live countries
+            // filter out any unwanted country labels (e.g., Russia, Japan)
+            const hide = new Set(['russia', 'japan']);
+            const merged = [...defaultCountries, ...rest].filter(c => !hide.has((c || '').toLowerCase()));
+            this.countries = merged;
+          } else {
+            this.countries = [...defaultCountries];
+          }
+
+          // replace marketCards with live market overview if available in response root
+          if (Array.isArray(respMarketCards) && respMarketCards.length) {
+            this.marketCards = respMarketCards.map((m: any) => {
+              const display = (m.display ?? m.price);
+              const priceNum = Number(m.price ?? display ?? NaN);
+              // prefer explicit percent from backend, otherwise compute from point change and previous price
+              let pct = m.chgPct;
+              if (pct === undefined || pct === null || Number.isNaN(Number(pct))) {
+                const chgPoint = Number(m.chg || 0);
+                const prev = priceNum - chgPoint;
+                pct = (prev && !Number.isNaN(prev)) ? (chgPoint / prev) * 100 : 0;
+              }
+              const priceStr = (display === null || display === undefined) ? '—' : (typeof display === 'number' ? display.toLocaleString(undefined, { maximumFractionDigits: 2 }) : String(display));
+              const chgNum = Number(pct || 0);
+              return {
+                title: m.title,
+                value: priceStr,
+                // show percent, not raw point change
+                chg: (chgNum >= 0 ? '+' : '') + chgNum.toFixed(2) + '%',
+                dir: chgNum > 0 ? 'up' : chgNum < 0 ? 'down' : 'neutral'
+              } as MarketCard;
+            });
+            console.log('marketCards set from resp.marketCards:', this.marketCards);
+          } else {
+            // fallback: derive a simple market overview from some well-known indices/currencies returned in "data"
+            const pickTitles = new Set(['Gold', 'Silver', 'Crude Oil (Brent)', 'Crude Oil (WTI)', 'Natural Gas', 'USD/INR', 'EUR/USD', 'GBP/USD', 'Bitcoin', 'Ethereum', 'S&P 500', 'NASDAQ', 'DAX', 'Nikkei']);
+            const derived: MarketCard[] = [];
+            // if backend provided indices with matching names, map them
+            mapped.forEach((m: any) => {
+              if (pickTitles.has(m.name)) {
+                const priceStr = (m.price === null || m.price === undefined) ? '—' : (typeof m.price === 'number' ? m.price.toLocaleString(undefined, { maximumFractionDigits: 2 }) : String(m.price));
+                const chgNum = Number(m.change ?? m.changePct ?? 0);
+                derived.push({
+                  title: m.name,
+                  value: priceStr,
+                  chg: (chgNum >= 0 ? '+' : '') + chgNum.toFixed(2) + '%',
+                  dir: chgNum > 0 ? 'up' : chgNum < 0 ? 'down' : 'neutral'
+                });
+              }
+            });
+            // if still empty, try to pick first few indices
+            if (derived.length === 0) {
+              mapped.slice(0, 12).forEach((m: any) => {
+                const priceStr = (m.price === null || m.price === undefined) ? '—' : (typeof m.price === 'number' ? m.price.toLocaleString(undefined, { maximumFractionDigits: 2 }) : String(m.price));
+                const chgNum = Number(m.change ?? m.changePct ?? 0);
+                derived.push({
+                  title: m.name,
+                  value: priceStr,
+                  chg: (chgNum >= 0 ? '+' : '') + chgNum.toFixed(2) + '%',
+                  dir: chgNum > 0 ? 'up' : chgNum < 0 ? 'down' : 'neutral'
+                });
+              });
+            }
+            if (derived.length) {
+              this.marketCards = derived;
+              console.log('marketCards derived from indices:', this.marketCards);
+            }
+          }
+
+          // apply current selection so UI updates immediately with live data
+          this.applySelection(this.selectedCountry || 'India');
+        } catch (e) {
+          console.error('Error processing global indices', e);
+        }
+      },
+      error: (err) => {
+        console.warn('Failed to fetch global indices', err);
+      }
+    });
+  }
+
+  private mapToGlobalIndex(d: any): GlobalIndex {
+    return {
+      id: d.id || `${(d.name || '').replace(/\s+/g, '_')}_${Math.random().toString(36).slice(2, 8)}`,
+      name: d.name,
+      country: d.country,
+      region: d.region,
+      price: d.price,
+      change: d.change,
+      changePct: d.changePct,
+      sparkline: d.sparkline || [],
+    } as GlobalIndex;
+  }
+
+  // Create demo US indices list with required names so UI shows S&P 500, Dow Jones, Nasdaq, S&P MidCap 400 and S&P SmallCap 600 when 'US' selected
+  private createUSIndices(): GlobalIndex[] {
+    const names = [
+      'S&P 500',
+      'Dow Jones',
+      'Nasdaq Composite',
+      'S&P MidCap 400',
+      'S&P SmallCap 600'
+    ];
+    return names.map((name, i) => {
+      const base = Math.round(3000 + i * 200 + (Math.random() - 0.5) * 5000);
+      const change = Number(((Math.random() - 0.5) * 1.5).toFixed(2));
+      const changePct = Number(((change / Math.max(1, base)) * 100).toFixed(2));
+      const spark = this.series(base, 26);
+      const gi: GlobalIndex = {
+        id: `${name.replace(/\s+/g, '_')}_${i}`,
+        name,
+        country: 'United States',
+        region: 'US',
+        price: base,
+        change,
+        changePct,
+        sparkline: spark,
+      } as GlobalIndex;
+      gi.miniPath = this.sparkPath(gi.sparkline || []);
+      gi.isUp = (gi.change || 0) >= 0;
+      return gi;
+    });
+  }
+
+  // Create demo UK indices (FTSE family) so UI shows FTSE 100, FTSE 250, FTSE 350, FTSE Small Cap when 'Uk' selected
+  private createUKIndices(): GlobalIndex[] {
+    const names = [
+      'FTSE 100',
+      'FTSE 250',
+      'FTSE 350',
+      'FTSE Small Cap'
+    ];
+    return names.map((name, i) => {
+      const base = Math.round(6000 + i * 100 + (Math.random() - 0.5) * 400);
+      const change = Number(((Math.random() - 0.5) * 1.2).toFixed(2));
+      const changePct = Number(((change / Math.max(1, base)) * 100).toFixed(2));
+      const spark = this.series(base, 26);
+      const gi: GlobalIndex = {
+        id: `${name.replace(/\s+/g, '_')}_${i}`,
+        name,
+        country: 'United Kingdom',
+        region: 'UK',
+        price: base,
+        change,
+        changePct,
+        sparkline: spark,
+      } as GlobalIndex;
+      gi.miniPath = this.sparkPath(gi.sparkline || []);
+      gi.isUp = (gi.change || 0) >= 0;
+      return gi;
+    });
+  }
+
+  // Create demo German indices (DAX family) so UI shows DAX, MDAX, TecDAX, SDAX when 'German' selected
+  private createGermanIndices(): GlobalIndex[] {
+    const names = [
+      'DAX',
+      'MDAX',
+      'TecDAX',
+      'SDAX'
+    ];
+    return names.map((name, i) => {
+      const base = Math.round(10000 + i * 200 + (Math.random() - 0.5) * 800);
+      const change = Number(((Math.random() - 0.5) * 1.2).toFixed(2));
+      const changePct = Number(((change / Math.max(1, base)) * 100).toFixed(2));
+      const spark = this.series(base, 26);
+      const gi: GlobalIndex = {
+        id: `${name.replace(/\s+/g, '_')}_${i}`,
+        name,
+        country: 'Germany',
+        region: 'German',
+        price: base,
+        change,
+        changePct,
+        sparkline: spark,
+      } as GlobalIndex;
+      gi.miniPath = this.sparkPath(gi.sparkline || []);
+      gi.isUp = (gi.change || 0) >= 0;
+      return gi;
+    });
+  }
+
+  // Create demo Sweden indices so UI shows OMXS30 and STOXX Sweden when 'Sweden' selected
+  private createSwedenIndices(): GlobalIndex[] {
+    const names = [
+      'OMX Stockholm 30',
+      'STOXX Sweden'
+    ];
+    return names.map((name, i) => {
+      const base = Math.round(1500 + i * 50 + (Math.random() - 0.5) * 200);
+      const change = Number(((Math.random() - 0.5) * 1.0).toFixed(2));
+      const changePct = Number(((change / Math.max(1, base)) * 100).toFixed(2));
+      const spark = this.series(base, 26);
+      const gi: GlobalIndex = {
+        id: `${name.replace(/\s+/g, '_')}_${i}`,
+        name,
+        country: 'Sweden',
+        region: 'Sweden',
+        price: base,
+        change,
+        changePct,
+        sparkline: spark,
+      } as GlobalIndex;
+      gi.miniPath = this.sparkPath(gi.sparkline || []);
+      gi.isUp = (gi.change || 0) >= 0;
+      return gi;
+    });
+  }
+
+  // Create demo Russia indices so UI shows MOEX Russia and RTS Index when 'Russia' selected
+  private createRussiaIndices(): GlobalIndex[] {
+    const names = ['MOEX Russia', 'RTS Index'];
+    return names.map((name, i) => {
+      const base = Math.round(2000 + i * 300 + (Math.random() - 0.5) * 800) * (name === 'MOEX Russia' ? 5 : 1);
+      const change = Number(((Math.random() - 0.5) * 1.2).toFixed(2));
+      const changePct = Number(((change / Math.max(1, base)) * 100).toFixed(2));
+      const spark = this.series(base, 26);
+      const gi: GlobalIndex = {
+        id: `${name.replace(/\s+/g, '_')}_${i}`,
+        name,
+        country: 'Russia',
+        region: 'Russia',
+        price: base,
+        change,
+        changePct,
+        sparkline: spark,
+      } as GlobalIndex;
+      gi.miniPath = this.sparkPath(gi.sparkline || []);
+      gi.isUp = (gi.change || 0) >= 0;
+      return gi;
+    });
+  }
+
+  // Indices to display in template: indiaIndices when India selected, otherwise globalIndices set by applySelection
+  get displayIndices(): GlobalIndex[] {
+    const sel = (this.selectedCountry || '').toLowerCase().trim();
+    let list: GlobalIndex[] = [];
+    if (sel === 'india') list = this.indiaIndices || [];
+    else list = this.globalIndices || [];
+
+    // Deduplicate by name (case-insensitive) and limit visible cards to a sensible number (9)
+    const unique = this.uniqueByName(list);
+    // apply small display fixes: normalize long Dow Jones name and boost MOEX Russia demo value
+    const adjusted = unique.slice(0, 14).map(g => {
+      const copy = { ...g } as GlobalIndex;
+      if (typeof copy.name === 'string') {
+        // replace long backend label if present
+        copy.name = copy.name.replace(/Dow Jones Industrial Average/ig, 'Dow Jones');
+      }
+      // if MOEX Russia appears and looks small (likely demo), scale it up for visibility
+      if (typeof copy.name === 'string' && /moex\s*russia/i.test(copy.name)) {
+        // scale price but avoid absurdly large values: if price < 10000, multiply
+        if (typeof copy.price === 'number' && copy.price > 0 && copy.price < 10000) {
+          copy.price = Math.round(copy.price * 5);
+        }
+      }
+      return copy;
+    });
+    return adjusted.slice(0, 9);
+  }
+
+  // Fetch live markets from backend
+  private fetchLiveMarkets(): void {
+    this.market.getCompanies().pipe(take(1)).subscribe({
+      next: (data) => {
+        console.log('fetchLiveMarkets - getCompanies response:', data);
+        try {
+          if (data.indices && Array.isArray(data.indices) && data.indices.length) {
+            // map backend indices to IndexItem
+            this.indices = data.indices.map((it: any) => ({ code: it.code, price: it.price, chg: it.chg }));
+            this.indices.forEach((idx) => this.refreshIndexSpark(idx));
+          }
+
+          if (data.companiesByIndex) {
+            this.companiesByIndex = data.companiesByIndex;
+            // Immediately fetch live quotes for active index now that companies are loaded
+            try {
+              console.log('Companies loaded for indices, fetching live quotes for', this.activeIndex);
+              this.fetchLiveQuotesForActiveIndex();
+            } catch (e) {
+              console.warn('fetchLiveQuotesForActiveIndex failed shortly after companies load', e);
+            }
+          }
+
+          if (data.sectors) {
+            this.sectors = data.sectors;
+          }
+
+          if (data.lastUpdated) {
+            this.lastUpdated = data.lastUpdated;
+          }
+
+          // update derived lists and chart
+          this.updateGainersLosers();
+          const initial = this.companiesByIndex[this.activeIndex]?.[0];
+          if (initial) this.renderAreaChart(initial.sym, initial.ltp || 100);
+
+          // if backend provided marketCards in /getcompanies payload use them
+          const respMarketCards = data.marketCards ?? data.data?.marketCards ?? data.results?.marketCards ?? data.market_cards ?? data.cards ?? null;
+          if (Array.isArray(respMarketCards) && respMarketCards.length) {
+            console.log('fetchLiveMarkets: found marketCards in /getcompanies payload', respMarketCards);
+            // apply live marketCards immediately and cache them
+            const mapped = respMarketCards.map((m: any) => {
+              const display = m.display ?? m.price ?? m.value ?? m.last ?? m.close ?? null;
+              const value = this.formatPrice(display);
+              const pctRaw = m.chgPct ?? m.chg_pct ?? m.pct ?? m.changePct ?? m.change_percent ?? m.change ?? null;
+              const pct = (pctRaw !== undefined && pctRaw !== null) ? Number(pctRaw) : (Number(m.chg || 0) && typeof display === 'number' ? ((Number(m.chg) / (display - Number(m.chg))) * 100) : 0);
+              const n = Number(pct || 0);
+              return {
+                title: m.title ?? m.name ?? (m.symbol ?? '—'),
+                value,
+                chg: isNaN(n) ? '—' : ((n >= 0 ? '+' : '') + n.toFixed(2) + '%'),
+                dir: isNaN(n) ? 'neutral' : (n > 0 ? 'up' : n < 0 ? 'down' : 'neutral')
+              } as MarketCard;
+            });
+            this.marketCards = mapped;
+            try { localStorage.setItem('marketCardsCache', JSON.stringify(mapped)); } catch { /* ignore */ }
+          } else {
+            console.log('fetchLiveMarkets: no marketCards found in /getcompanies payload');
+          }
+
+          // persist companies snapshot so table shows immediately on reload
+          try {
+            const snapshot = { companiesByIndex: this.companiesByIndex, lastUpdated: this.lastUpdated };
+            localStorage.setItem(this.companiesCacheKey, JSON.stringify(snapshot));
+          } catch { /* ignore */ }
+        } catch (e) {
+          console.error('Error processing market data', e);
+        }
+      },
+      error: (err) => {
+        console.warn('Failed to fetch live markets', err);
+      }
+    });
+  }
+
+  // Fetch market overview cards from backend (uses /getmarketcards)
+  private fetchMarketCards(): void {
+    this.market.getMarketCards().pipe(take(1)).subscribe({
+      next: (cards: any[]) => {
+        console.log('fetchLiveMarkets - /getmarketcards response:', cards);
+        try {
+          if (cards && Array.isArray(cards) && cards.length) {
+            const mapped = cards.map((c: any) => {
+              const display = c.display ?? c.price ?? c.value ?? c.last ?? c.close ?? null;
+              const value = this.formatPrice(display);
+              const pctRaw = c.chgPct ?? c.chg_pct ?? c.pct ?? c.changePct ?? c.change_percent ?? c.change ?? null;
+              const pct = (pctRaw !== undefined && pctRaw !== null) ? Number(pctRaw) : (Number(c.chg || 0) && typeof display === 'number' ? ((Number(c.chg) / (display - Number(c.chg))) * 100) : 0);
+              const n = Number(pct || 0);
+              return {
+                title: c.title ?? c.name ?? (c.symbol ?? '—'),
+                value,
+                chg: isNaN(n) ? '—' : ((n >= 0 ? '+' : '') + n.toFixed(2) + '%'),
+                dir: isNaN(n) ? 'neutral' : (n > 0 ? 'up' : n < 0 ? 'down' : 'neutral')
+              } as MarketCard;
+            });
+            this.marketCards = mapped;
+            try { localStorage.setItem('marketCardsCache', JSON.stringify(mapped)); } catch { /* ignore */ }
+          }
+        } catch (e) {
+          console.error('Error processing market cards', e);
+        }
+      },
+      error: (err) => {
+        console.warn('Failed to fetch market cards', err);
+      }
+    });
   }
 
   // UI helpers
@@ -124,13 +849,189 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     return Math.random();
   }
 
-  setActiveIndex(code: string): void {
+  // Format a price for display. Treat null/undefined/empty as missing and return '—'.
+  private formatPrice(val: any): string {
+    if (val === null || val === undefined) return '—';
+    if (typeof val === 'number') return val.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    if (typeof val === 'string') return val.trim() === '' ? '—' : val;
+    return String(val);
+  }
+
+  // Format index name for UI: remove bracketed suffixes like "(OMXS30)"
+  public formatIndexName(name: string | undefined | null): string {
+    if (!name) return '';
+    return String(name).replace(/\s*\([^)]*\)\s*/g, '').trim();
+  }
+
+  public setActiveIndex(code: string): void {
     this.activeIndex = code;
+    // fetch live quotes for newly active index immediately
+    this.fetchLiveQuotesForActiveIndex();
+    // update selected company to first of the newly active index
+    const first = this.companiesByIndex[this.activeIndex]?.[0];
+    if (first) {
+      this.selectedCompany = first.sym;
+      // draw initial chart for selected company (try live intraday)
+      this.fetchAndDrawChart(first.sym, first.ltp).catch(() => { /* ignore */ });
+    }
   }
 
-  onCompanyClick(e: Event, c: Company): void {
-    e.preventDefault();
-    this.drawTodayChart(c.sym, c.ltp);
+  // Build yfinance-compatible tickers for a company symbol depending on country
+  private buildTickersForIndex(indexCode: string): string[] {
+    const list = this.companiesByIndex[indexCode] || [];
+    const isIndia = (indexCode || '').toLowerCase().includes('nifty') || (indexCode || '').toLowerCase().includes('sensex') || this.selectedCountry.toLowerCase() === 'india';
+    return list.map(c => {
+      const sym = (c.sym || '').trim();
+      if (!sym) return '';
+      // For India, use NSE suffix if not already present
+      if (isIndia && !sym.includes('.') && !sym.includes(':')) return `${sym}.NS`;
+      return sym;
+    }).filter(Boolean);
+  }
+
+  // Fetch live quotes for companies in the active index and update table
+  private async fetchLiveQuotesForActiveIndex(): Promise<void> {
+    // show spinner in table
+    this.quotesLoading = true;
+    try {
+      const tickers = this.buildTickersForIndex(this.activeIndex || '');
+      if (!tickers || tickers.length === 0) {
+        this.quotesLoading = false;
+        return;
+      }
+
+      // helper: sleep
+      const sleep = (ms: number) => new Promise(res => setTimeout(res, ms));
+
+      // helper: fetch with retries + exponential backoff
+      const fetchWithRetries = async (batch: string[], maxRetries = 3, baseDelay = 500): Promise<any[] | null> => {
+        for (let attempt = 0; attempt < maxRetries; attempt++) {
+          try {
+            const obs = this.market.getQuotes(batch);
+            const res = await lastValueFrom(obs);
+            // treat empty result as failure (backend may return [] on error)
+            if (Array.isArray(res) && res.length > 0) return res;
+            // if got empty but this was final attempt, consider failure
+          } catch (err) {
+            // fall through to retry
+            console.warn('fetchWithRetry attempts Gi failed', err);
+          }
+          const delay = baseDelay * Math.pow(2, attempt);
+          await sleep(delay);
+        }
+        return null;
+      };
+
+      // batch tickers to avoid very long query strings; adjust size as needed
+      const batchSize = 10;
+      const batches: string[][] = [];
+      for (let i = 0; i < tickers.length; i += batchSize) {
+        batches.push(tickers.slice(i, i + batchSize));
+      }
+
+      const allQuotes: any[] = [];
+      for (const b of batches) {
+        const batchRes = await fetchWithRetries(b, 3, 400);
+        if (batchRes === null) {
+          // At least one batch failed after retries – fallback to demo ticks
+          console.warn('Quotes batch failed after retries, falling back to demo ticks');
+          this.quotesLoading = false;
+          // Apply one demo tick step immediately so UI updates
+          this.tickCompanies();
+          this.updateGainersLosers();
+          return;
+        }
+        allQuotes.push(...batchRes);
+      }
+
+      // If we reach here, we have fetched quotes for all batches
+      const list = this.companiesByIndex[this.activeIndex] || [];
+      const byReq = new Map<string, any>();
+      allQuotes.forEach((q: any) => {
+        if (!q) return;
+        const s = (q.symbol || '').toString();
+        byReq.set(s.toUpperCase(), q);
+      });
+
+      list.forEach((c) => {
+        const reqSym = (this.selectedCountry.toLowerCase() === 'india' && !c.sym.includes('.') && !c.sym.includes(':')) ? `${c.sym}.NS`.toUpperCase() : c.sym.toUpperCase();
+        const q = byReq.get(reqSym) || byReq.get(c.sym.toUpperCase());
+        if (!q) return;
+        if (q.price !== undefined && q.price !== null) c.ltp = Number(q.price);
+        // backend provides chgPct as percentage; use it if present
+        if (q.chgPct !== undefined && q.chgPct !== null) c.chg = Number(q.chgPct);
+        else if (q.chg !== undefined && q.chg !== null && c.ltp) {
+          // approximate percent from absolute change
+          const prev = c.ltp - Number(q.chg);
+          if (prev && !Number.isNaN(prev)) c.chg = (Number(q.chg) / prev) * 100;
+        }
+        if (q.high !== undefined && q.high !== null) c.high = Number(q.high);
+        if (q.low !== undefined && q.low !== null) c.low = Number(q.low);
+      });
+
+      this.updateGainersLosers();
+      this.lastUpdated = new Date().toLocaleString();
+      // persist updated quotes so reload shows latest values immediately
+      try {
+        const snapshot = { companiesByIndex: this.companiesByIndex, lastUpdated: this.lastUpdated };
+        localStorage.setItem(this.companiesCacheKey, JSON.stringify(snapshot));
+      } catch { /* ignore */ }
+
+    } catch (e) {
+      console.warn('fetchLiveQuotesForActiveIndex unexpected error', e);
+      // fallback to demo ticks
+      this.tickCompanies();
+      this.updateGainersLosers();
+    } finally {
+      this.quotesLoading = false;
+    }
+  }
+
+  // Create demo India indices with sparklines and miniPath for UI when live data not available
+  private populateDefaultIndiaIndices(): void {
+    const now = Date.now();
+    const items: GlobalIndex[] = this.defaultIndiaIndexNames.map((name: string, i: number) => {
+      const base = Math.round(20000 + i * 1000 + (Math.random() - 0.5) * 2000);
+      const change = Number(((Math.random() - 0.5) * 1.5).toFixed(2));
+      const changePct = Number((change / base * 100).toFixed(2));
+      const spark = this.series(base, 26);
+      const gi: GlobalIndex = {
+        id: `${name.replace(/\s+/g, '_')}_${i}`,
+        name,
+        country: 'India',
+        region: 'India',
+        price: base,
+        change,
+        changePct,
+        sparkline: spark,
+      } as GlobalIndex;
+      gi.miniPath = this.sparkPath(gi.sparkline || []);
+      gi.isUp = (gi.change || 0) >= 0;
+      return gi;
+    });
+    this.indiaIndices = items;
+
+    // also ensure cache contains these so other logic can find India entries
+    const byId = new Map<string, GlobalIndex>();
+    [...this.allGlobalIndices, ...items].forEach(i => byId.set(i.id, i));
+    this.allGlobalIndices = Array.from(byId.values());
+  }
+
+  private countryMatches(selected: string, actual: string): boolean {
+    if (!selected || !actual) return false;
+    if (selected === actual) return true;
+    // check aliases for selected label
+    const aliases = this.countryAliases[selected];
+    if (aliases) {
+      for (const a of aliases) {
+        if (actual.includes(a)) return true;
+      }
+    }
+    // check if actual has a known alias that matches selected
+    const key = Object.keys(this.countryAliases).find(k => this.countryAliases[k].some((a: string) => actual.includes(a)));
+    if (key && key === selected) return true;
+    // fallback: partial match
+    return actual.includes(selected) || selected.includes(actual);
   }
 
   // Clock
@@ -149,10 +1050,11 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   private sparkPath(values: number[], w = 240, h = 28, pad = 2): string {
+    if (!values || values.length === 0) return '';
     const max = Math.max(...values);
     const min = Math.min(...values);
     const norm = (v: number) => h - pad - ((v - min) / Math.max(1e-6, max - min)) * (h - 2 * pad);
-    const step = (w - 2 * pad) / (values.length - 1);
+    const step = (w - 2 * pad) / (values.length - 1 || 1);
     let d = '';
     values.forEach((v, i) => {
       const x = pad + i * step;
@@ -213,7 +1115,179 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     return arr;
   }
 
-  drawTodayChart(symbol = '—', base = 100): void {
+  // Compatibility wrapper for template calls — delegate to SVG renderer
+  public drawTodayChart(symbol = '—', base = 100): void {
+    this.renderAreaChart(symbol, base);
+  }
+
+  // Render an SVG area chart into the chart container. If `series` is provided it is used
+  // as the plotted points (array of numbers). Otherwise a simulated series is generated.
+  private renderAreaChart(symbol: string, base = 100, series?: number[]): void {
+    const container = this.chartContainerRef?.nativeElement;
+    if (!container) return;
+
+    // clear
+    container.innerHTML = '';
+
+    // use device pixel width for responsiveness
+    const rect = container.getBoundingClientRect();
+    const width = Math.max(600, Math.round(rect.width || 700));
+    const height = 260;
+
+    const pts = series && series.length ? series : this.makeIntraday(base, 90);
+    const padLeft = 40;
+    const padRight = 40;
+    const padTop = 16;
+    const padBottom = 36;
+
+    const min = Math.min(...pts);
+    const max = Math.max(...pts);
+
+    const toX = (i: number) => padLeft + (i * (width - padLeft - padRight)) / (pts.length - 1 || 1);
+    const toY = (v: number) => padTop + ((max - v) / Math.max(1e-6, max - min)) * (height - padTop - padBottom);
+
+    // SVG root
+    const ns = 'http://www.w3.org/2000/svg';
+    const svg = document.createElementNS(ns, 'svg');
+    svg.setAttribute('width', String(width));
+    svg.setAttribute('height', String(height));
+    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    svg.style.width = '100%';
+    svg.style.height = '260px';
+    svg.style.display = 'block';
+
+    // grid lines
+    for (let g = 0; g < 4; g++) {
+      const y = padTop + (g * (height - padTop - padBottom)) / 3;
+      const line = document.createElementNS(ns, 'line');
+      line.setAttribute('x1', String(padLeft));
+      line.setAttribute('y1', String(y));
+      line.setAttribute('x2', String(width - padRight));
+      line.setAttribute('y2', String(y));
+      line.setAttribute('stroke', '#e6ecff');
+      line.setAttribute('stroke-opacity', '0.06');
+      line.setAttribute('stroke-width', '1');
+      svg.appendChild(line);
+    }
+
+    // build path string
+    let d = '';
+    let area = '';
+    pts.forEach((v, i) => {
+      const x = toX(i);
+      const y = toY(v);
+      if (i === 0) {
+        d += `M ${x} ${y}`;
+        area += `M ${x} ${y}`;
+      } else {
+        d += ` L ${x} ${y}`;
+        area += ` L ${x} ${y}`;
+      }
+    });
+    // close area to baseline
+    const lastX = toX(pts.length - 1);
+    area += ` L ${lastX} ${height - padBottom} L ${padLeft} ${height - padBottom} Z`;
+
+    // area fill
+    const areaPath = document.createElementNS(ns, 'path');
+    areaPath.setAttribute('d', area);
+    areaPath.setAttribute('fill', '#0f9d58');
+    areaPath.setAttribute('fill-opacity', '0.08');
+    svg.appendChild(areaPath);
+
+    // line path
+    const path = document.createElementNS(ns, 'path');
+    path.setAttribute('d', d);
+    path.setAttribute('fill', 'none');
+    path.setAttribute('stroke', '#0f9d58');
+    path.setAttribute('stroke-width', '2');
+    path.setAttribute('stroke-linejoin', 'round');
+    path.setAttribute('stroke-linecap', 'round');
+    svg.appendChild(path);
+
+    // last point marker
+    const lastYVal = pts[pts.length - 1];
+    const lastCx = toX(pts.length - 1);
+    const lastCy = toY(lastYVal);
+    const circ = document.createElementNS(ns, 'circle');
+    circ.setAttribute('cx', String(lastCx));
+    circ.setAttribute('cy', String(lastCy));
+    circ.setAttribute('r', '4');
+    circ.setAttribute('fill', '#0f9d58');
+    svg.appendChild(circ);
+
+    // y-axis labels (right side)
+    const labelRight = (val: number, y: number) => {
+      const txt = document.createElementNS(ns, 'text');
+      txt.setAttribute('x', String(width - padRight + 8));
+      txt.setAttribute('y', String(y + 4));
+      txt.setAttribute('fill', '#fff');
+      txt.setAttribute('font-size', '12');
+      txt.setAttribute('opacity', '0.9');
+      txt.textContent = val.toFixed(2);
+      svg.appendChild(txt);
+    };
+    labelRight(max, toY(max));
+    labelRight(min, toY(min));
+
+    // x-axis labels (bottom)
+    const ticks = [0, Math.floor(pts.length / 4), Math.floor(pts.length / 2), Math.floor((3 * pts.length) / 4), pts.length - 1];
+    ticks.forEach((ti) => {
+      const x = toX(ti);
+      const txt = document.createElementNS(ns, 'text');
+      txt.setAttribute('x', String(x));
+      txt.setAttribute('y', String(height - 8));
+      txt.setAttribute('fill', '#999');
+      txt.setAttribute('font-size', '11');
+      txt.setAttribute('text-anchor', 'middle');
+      // fake times: show HH:MM using index
+      const minutes = (ti * 5) % 60;
+      const hour = 9 + Math.floor(ti / 12);
+      txt.textContent = `${hour}:${String(minutes).padStart(2, '0')} AM`;
+      svg.appendChild(txt);
+    });
+
+    container.appendChild(svg);
+
+    // expose small tooltip on hover (basic)
+    svg.addEventListener('mousemove', (ev) => {
+      const rect = svg.getBoundingClientRect();
+      const x = ev.clientX - rect.left;
+      // find closest index
+      let closest = 0;
+      let bestDist = Infinity;
+      for (let i = 0; i < pts.length; i++) {
+        const dx = Math.abs(toX(i) - x);
+        if (dx < bestDist) { bestDist = dx; closest = i; }
+      }
+      // simple tooltip: set title on container
+      const v = pts[closest];
+      svg.setAttribute('title', `Index: ${symbol}\nValue: ${v.toFixed(2)}`);
+    });
+  }
+
+  // Fetch intraday series for symbol and draw chart. Falls back to simulated when live data present
+  private async fetchAndDrawChart(sym: string, base = 100): Promise<void> {
+    try {
+      // try backend intraday endpoint (via MarketService.getIntraday)
+      const obs = this.market.getIntraday(sym, '1d', '1m');
+      const resp: any = await lastValueFrom(obs);
+      // expected resp: { symbol, timestamps: string[], closes: number[] }
+      if (resp && Array.isArray(resp.closes) && resp.closes.length > 0) {
+        this.chartSymbol = sym;
+        this.drawSeriesChart(resp.closes, sym);
+        return;
+      }
+    } catch (e) {
+      // ignore and fallback
+    }
+    // fallback: simulate intraday
+    this.chartSymbol = sym;
+    this.renderAreaChart(sym, base);
+  }
+
+  // Draw given numeric series on canvas (replaces simulated draw when live data present)
+  private drawSeriesChart(values: number[], symbol = '—'): void {
     this.chartSymbol = symbol;
     const canvas = this.canvasRef?.nativeElement;
     if (!canvas) return;
@@ -225,12 +1299,11 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     const h = canvas.height;
     ctx.clearRect(0, 0, w, h);
 
-    const values = this.makeIntraday(base, 90);
     const min = Math.min(...values);
     const max = Math.max(...values);
     const padX = 28;
     const padY = 16;
-    const toX = (i: number) => padX + (i * (w - padX * 2)) / (values.length - 1);
+    const toX = (i: number) => padX + (i * (w - padX * 2)) / (values.length - 1 || 1);
     const toY = (v: number) => h - padY - ((v - min) / Math.max(1e-6, max - min)) * (h - padY * 2);
 
     // grid
@@ -246,11 +1319,9 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     }
     ctx.globalAlpha = 1;
 
-    // line
     const up = values[values.length - 1] >= values[0];
     const styles = getComputedStyle(this.host.nativeElement);
-    const stroke =
-      styles.getPropertyValue(up ? '--up' : '--down').trim() || (up ? '#12c48b' : '#ff5b6b');
+    const stroke = styles.getPropertyValue(up ? '--up' : '--down').trim() || (up ? '#12c48b' : '#ff5b6b');
 
     ctx.strokeStyle = stroke;
     ctx.lineWidth = 2;
@@ -258,8 +1329,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     values.forEach((v, i) => {
       const x = toX(i);
       const y = toY(v);
-      if (i === 0) ctx.moveTo(x, y);
-      else ctx.lineTo(x, y);
+      ctx.lineTo(x, y);
     });
     ctx.stroke();
 
@@ -271,4 +1341,65 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
     ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
     ctx.fill();
   }
+
+  public selectCountry(country: string): void {
+    this.selectedCountry = country;
+    // always apply selection immediately so UI updates synchronously
+    this.applySelection(country);
+    // if we haven't fetched live data yet, fetch (fetchGlobalIndices will re-apply selection once data arrives)
+    if (!this.globalFetched) this.fetchGlobalIndices();
+  }
+
+  // Centralized selection logic
+  private applySelection(country: string): void {
+    const sel = (country || '').toLowerCase().trim();
+    if (!sel) {
+      this.globalIndices = [];
+      return;
+    }
+
+    if (sel === 'india') {
+      // Prefer prioritized live India indices; fallback to demo if none
+      const built = this.buildCountryIndices('india');
+      if (built && built.length) this.indiaIndices = built;
+      else if (!this.indiaIndices || this.indiaIndices.length === 0) this.populateDefaultIndiaIndices();
+      this.globalIndices = [];
+      return;
+    }
+
+    // try to find live entries in cache
+    const matched = (this.allGlobalIndices || []).filter((g) => this.countryMatches(sel, (g.country || '').toLowerCase()) && (g.region || '').toLowerCase() !== 'india');
+    if (matched && matched.length) {
+      this.globalIndices = matched;
+      return;
+    }
+
+    // no live data for this country — create demo indices for known countries so UI shows names immediately
+    let demo: GlobalIndex[] = [];
+    if (sel === 'us') demo = this.createUSIndices();
+    else if (sel === 'uk') demo = this.createUKIndices();
+    else if (sel === 'german') demo = this.createGermanIndices();
+    else if (sel === 'sweden') demo = this.createSwedenIndices();
+    else if (sel === 'russia') demo = this.createRussiaIndices();
+
+    this.globalIndices = demo;
+
+    // merge demo into cache to improve subsequent lookups
+    if (demo && demo.length) {
+      const byId = new Map<string, GlobalIndex>();
+      [...this.allGlobalIndices, ...demo].forEach(i => byId.set(i.id, i));
+      this.allGlobalIndices = Array.from(byId.values());
+    }
+  }
+
+  public onCompanyClick(e: Event, c: Company): void {
+    e.preventDefault();
+    this.selectedCompany = c.sym;
+    // try to fetch live intraday series and draw; fallback to simulated when not available
+    this.fetchAndDrawChart(c.sym, c.ltp).then(() => {
+      // highlight handled by selectedCompany binding
+    }).catch(() => {
+      this.renderAreaChart(c.sym, c.ltp);
+    });
+  }
 }

src/app/dashboard/dashboard.service.ts

@@ -0,0 +1,78 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+
+export type YahooQuote = {
+  symbol: string;
+  regularMarketPrice?: number;
+  regularMarketChangePercent?: number;
+  regularMarketDayHigh?: number;
+  regularMarketDayLow?: number;
+};
+
+@Injectable({ providedIn: 'root' })
+export class DashboardService {
+  // mirror MarketService base URL logic so dashboard can call backend endpoints directly
+  private readonly baseUrl =
+    location.hostname.endsWith('hf.space')
+      ? 'https://pykara-pytrade-backend.hf.space'
+      : 'http://127.0.0.1:5000';
+
+  private yahooBase = 'https://query1.finance.yahoo.com/v7/finance/quote';
+
+  constructor(private http: HttpClient) {}
+
+  // Backend endpoints used by dashboard component
+  getCompanies(): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/getcompanies`).pipe(
+      catchError((err: any) => {
+        console.warn('DashboardService.getCompanies error', err);
+        return of({});
+      })
+    );
+  }
+
+  getMarketCards(): Observable<any[]> {
+    return this.http.get<any[]>(`${this.baseUrl}/getmarketcards`).pipe(
+      catchError((err: any) => {
+        console.warn('DashboardService.getMarketCards error', err);
+        return of([]);
+      })
+    );
+  }
+
+  getGlobalIndices(): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/getglobalindices`).pipe(
+      catchError((err: any) => {
+        console.warn('DashboardService.getGlobalIndices error', err);
+        return of([]);
+      })
+    );
+  }
+
+  // Intraday series: backend expected endpoint is /getintraday (best-effort)
+  getIntraday(symbol: string, range = '1d', interval = '1m'): Observable<any> {
+    const url = `${this.baseUrl}/getintraday?symbol=${encodeURIComponent(symbol)}&range=${encodeURIComponent(range)}&interval=${encodeURIComponent(interval)}`;
+    return this.http.get<any>(url).pipe(
+      catchError((err: any) => {
+        console.warn('DashboardService.getIntraday error', err);
+        return of(null);
+      })
+    );
+  }
+
+  // Fetch quotes from Yahoo public API and return an array of quote objects
+  getQuotes(symbols: string[]): Observable<any[]> {
+    if (!symbols || symbols.length === 0) return of([]);
+    const syms = symbols.map(s => s.toUpperCase()).join(',');
+    const url = `${this.yahooBase}?symbols=${encodeURIComponent(syms)}`;
+    return this.http.get<any>(url).pipe(
+      map((res: any) => res?.quoteResponse?.result || []),
+      catchError((err: any) => {
+        console.warn('DashboardService.getQuotes error', err);
+        return of([]);
+      })
+    );
+  }
+}