- = ({ onSelect, placeholder = "Search for stocks..." }) => {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [searchResults, setSearchResults] = useState([]);
+ const [isSearching, setIsSearching] = useState(false);
+ const searchContainerRef = useRef(null);
+
+ // Close dropdown when clicking outside
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (searchContainerRef.current && !searchContainerRef.current.contains(event.target as Node)) {
+ setSearchQuery('');
+ setSearchResults([]);
+ }
+ };
+
+ if (searchQuery) {
+ document.addEventListener('mousedown', handleClickOutside);
+ }
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, [searchQuery]);
+
+ const handleSearch = async (query: string) => {
+ setSearchQuery(query);
+ if (query.trim().length > 0) {
+ setIsSearching(true);
+
+ try {
+ // Use debouncing in real app, but for now direct call
+ const searchResults = await yahooService.searchStocks(query);
+ setSearchResults(searchResults);
+ } catch (err) {
+ console.error('Error searching stocks:', err);
+ setSearchResults([]);
+ } finally {
+ setIsSearching(false);
+ }
+ } else {
+ setSearchResults([]);
+ }
+ };
+
+ const handleSelectStock = (stock: Stock) => {
+ onSelect(stock);
+ setSearchQuery('');
+ setSearchResults([]);
+ };
+
+ return (
+ (null);
const [isRealtimeConnected, setIsRealtimeConnected] = useState(false);
- const [viewMode, setViewMode] = useState<'list' | 'grid'>('list');
+ const [viewMode, setViewMode] = useState<'list' | 'columns' | 'grid'>('list');
const [isDragging, setIsDragging] = useState(false);
const [isMarketOpen, setIsMarketOpen] = useState(null);
const [marketStatus, setMarketStatus] = useState('');
@@ -574,7 +574,7 @@ const CustomDashboard: React.FC = () => {
return (
{title}
- - {/* 4. FIX: Image Block - Only render if imageUrl exists AND the variant is "featured" */} - {imageUrl && variant === 'featured' && ( -
- 
-
- )}
-
- {description && variant !== 'compact' && (
- {description}
- )} -
- = ({ symbol, onClose }) => {
const fetchData = async () => {
try {
setLoading(true);
- const data = await stockDataService.getEODData(symbol);
+ const [data, quote] = await Promise.all([
+ stockDataService.getEODData(symbol),
+ yahooFinanceService.getStockQuote(symbol)
+ ]);
if (!data || !data.data || data.data.length === 0) {
throw new Error('No data available');
@@ -55,18 +59,30 @@ export const ChartModal: React.FC = ({ symbol, onClose }) => {
})).sort((a: any, b: any) => new Date(a.time).getTime() - new Date(b.time).getTime());
// Stats calculation
- const latest = candles[candles.length - 1];
- const previous = candles[candles.length - 2];
- const change = latest.close - previous.close;
- const changePercent = (change / previous.close) * 100;
+ let currentPrice = 0;
+ let change = 0;
+ let changePercent = 0;
+
+ if (quote) {
+ currentPrice = quote.price;
+ change = quote.price - quote.previousClose;
+ changePercent = (change / quote.previousClose) * 100;
+ } else {
+ // Fallback to last candle if quote fails
+ const latest = candles[candles.length - 1];
+ const previous = candles[candles.length - 2];
+ currentPrice = latest.close;
+ change = latest.close - previous.close;
+ changePercent = (change / previous.close) * 100;
+ }
setStats({
- current: latest.close,
+ current: currentPrice,
change: change,
changePercent: changePercent,
high: Math.max(...candles.map((c: any) => c.high)),
low: Math.min(...candles.map((c: any) => c.low)),
- volume: latest.volume
+ volume: candles[candles.length - 1].volume
});
if (chartContainerRef.current) {
diff --git a/frontend/src/components/ui/LiveChart/LiveChart.css b/frontend/src/components/ui/LiveChart/LiveChart.css
index a8db6f7..4c77089 100644
--- a/frontend/src/components/ui/LiveChart/LiveChart.css
+++ b/frontend/src/components/ui/LiveChart/LiveChart.css
@@ -6,7 +6,6 @@
/* More subtle border */
padding: 20px 24px 20px;
width: 100%;
- transition: 0.25s ease;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
diff --git a/frontend/src/components/ui/LiveChart/LiveChart.tsx b/frontend/src/components/ui/LiveChart/LiveChart.tsx
index 7b4b354..7858e7d 100644
--- a/frontend/src/components/ui/LiveChart/LiveChart.tsx
+++ b/frontend/src/components/ui/LiveChart/LiveChart.tsx
@@ -47,8 +47,41 @@ const LiveChart: React.FC = ({ symbol, onRemove }) => {
const [data, setData] = useState([]);
const [stats, setStats] = useState({ high: 0, low: Infinity, vol: 0 });
- // Connect to WebSocket
+ // Connect to WebSocket & Fetch History
useEffect(() => {
+ let isMounted = true;
+
+ // 1. Fetch Historical Data first (so we have something to show immediately)
+ const fetchHistory = async () => {
+ try {
+ // Fetch last 1 day of 5-minute intervals
+ const response = await fetch(`http://localhost:3001/api/yahoo/history?symbol=${symbol}&range=1d&interval=5m`);
+ const history = await response.json();
+
+ if (isMounted && Array.isArray(history) && history.length > 0) {
+ const formattedHistory = history.map((h: any) => ({
+ x: h.timestamp * 1000,
+ y: h.close,
+ v: h.volume
+ }));
+ setData(formattedHistory);
+
+ // Initialize stats from history
+ const prices = formattedHistory.map((d: any) => d.y);
+ setStats({
+ high: Math.max(...prices),
+ low: Math.min(...prices),
+ vol: formattedHistory.reduce((acc: number, curr: any) => acc + curr.v, 0)
+ });
+ }
+ } catch (err) {
+ console.error("Failed to load history for", symbol, err);
+ }
+ };
+
+ fetchHistory();
+
+ // 2. Subscribe to Live Updates
const ws = connectLiveFinnhub(symbol, (trade) => {
if (trade.s === symbol) {
const price = trade.p;
@@ -56,14 +89,15 @@ const LiveChart: React.FC = ({ symbol, onRemove }) => {
const time = trade.t;
setData((prev) => {
- // Filter out any potential duplicates or invalid timestamps first if needed
- const newData = [...prev, { x: time, y: price, v: vol }];
+ // Avoid duplicates if WS sends old data overlapping with history
+ const filteredPrev = prev.filter(d => d.x < time);
+ const newData = [...filteredPrev, { x: time, y: price, v: vol }];
- // Sort by timestamp to ensure line draws left-to-right correctly
+ // Sort by timestamp
newData.sort((a, b) => a.x - b.x);
- // Keep last 100 points
- return newData.slice(-100);
+ // Keep reasonable history length (e.g. 500 points) to avoid memory leaks
+ return newData.slice(-500);
});
setStats((prev) => ({
@@ -74,7 +108,10 @@ const LiveChart: React.FC = ({ symbol, onRemove }) => {
}
});
- return () => ws.close();
+ return () => {
+ isMounted = false;
+ ws.close();
+ };
}, [symbol]);
// Chart Configuration
@@ -256,4 +293,4 @@ const LiveChart: React.FC = ({ symbol, onRemove }) => {
);
};
-export default LiveChart;
+export default React.memo(LiveChart);
diff --git a/frontend/src/components/ui/SearchBar/SearchBar.tsx b/frontend/src/components/ui/SearchBar/SearchBar.tsx
index 7cce3cd..9048225 100644
--- a/frontend/src/components/ui/SearchBar/SearchBar.tsx
+++ b/frontend/src/components/ui/SearchBar/SearchBar.tsx
@@ -2,16 +2,17 @@ import React, { useState } from 'react';
import { SearchBarProps } from '../../../types';
import './SearchBar.css';
-const SearchBar: React.FC = ({
- placeholder,
- onSearch,
- className = ''
+const SearchBar: React.FC = ({
+ placeholder,
+ onSearch,
+ className = ''
}) => {
const [query, setQuery] = useState('');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
onSearch(query);
+ setQuery(''); // Clear input after search
};
const handleInputChange = (e: React.ChangeEvent) => {
@@ -29,16 +30,16 @@ const SearchBar: React.FC = ({
className="search-input"
/>
diff --git a/frontend/src/components/ui/StockSearch/StockSearch.css b/frontend/src/components/ui/StockSearch/StockSearch.css
new file mode 100644
index 0000000..17d58d5
--- /dev/null
+++ b/frontend/src/components/ui/StockSearch/StockSearch.css
@@ -0,0 +1,157 @@
+.stock-search-container {
+ position: relative;
+ width: 100%;
+}
+
+.search-dropdown {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: #1a1a1a;
+ border: 1px solid #444;
+ border-top: none;
+ border-radius: 0 0 12px 12px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ max-height: 400px;
+ overflow: hidden;
+ margin-top: 4px;
+}
+
+.search-loading {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.75rem;
+ padding: 1.5rem;
+ color: #a0a0a0;
+ font-size: 0.9rem;
+}
+
+.loading-spinner {
+ width: 20px;
+ height: 20px;
+ border: 2px solid #333;
+ border-top: 2px solid #00d4aa;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+.search-results {
+ max-height: 400px;
+ overflow-y: auto;
+}
+
+.results-header {
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid #333;
+ background: #1a1a1a;
+ position: sticky;
+ top: 0;
+ z-index: 10;
+}
+
+.results-count {
+ color: #a0a0a0;
+ font-size: 0.75rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+}
+
+.results-list {
+ display: flex;
+ flex-direction: column;
+}
+
+.search-result-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.75rem 1rem;
+ background: transparent;
+ border-bottom: 1px solid #2a2a2a;
+ transition: all 0.2s ease;
+ cursor: pointer;
+}
+
+.search-result-item:last-child {
+ border-bottom: none;
+}
+
+.search-result-item:hover {
+ background: #2a2a2a;
+ border-left: 3px solid #00d4aa;
+ padding-left: calc(1rem - 3px);
+}
+
+.result-info {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+ flex: 1;
+}
+
+.result-header {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+}
+
+.result-symbol {
+ font-weight: 700;
+ color: #00d4aa;
+ font-size: 0.95rem;
+ background: rgba(0, 212, 170, 0.1);
+ padding: 2px 6px;
+ border-radius: 4px;
+}
+
+.result-name {
+ color: #e0e0e0;
+ font-size: 0.9rem;
+ font-weight: 500;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 200px;
+}
+
+.result-details {
+ display: flex;
+ gap: 0.75rem;
+ font-size: 0.75rem;
+ color: #888;
+}
+
+.add-button {
+ min-width: 60px;
+ font-size: 0.8rem;
+ padding: 0.4rem 0.8rem;
+}
+
+.no-results {
+ text-align: center;
+ color: #a0a0a0;
+ padding: 2rem 1rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.no-results-icon {
+ font-size: 1.5rem;
+ opacity: 0.6;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ui/StockSearch/StockSearch.tsx b/frontend/src/components/ui/StockSearch/StockSearch.tsx
new file mode 100644
index 0000000..6a93d21
--- /dev/null
+++ b/frontend/src/components/ui/StockSearch/StockSearch.tsx
@@ -0,0 +1,127 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { yahooService } from '../../../services/yahooService';
+import { Stock } from '../../../types';
+import SearchBar from '../SearchBar';
+import Button from '../Button';
+import './StockSearch.css';
+
+interface StockSearchProps {
+ onSelect: (stock: Stock) => void;
+ placeholder?: string;
+}
+
+const StockSearch: React.FC
- {(article as any)?.source?.name}
+ if (!article) return null; // Safety check
+
+ return (
+
+
-
- );
-};
+
+ );
+ };
export default ArticleCard;
\ No newline at end of file
diff --git a/frontend/src/components/ui/ChartModal/ChartModal.tsx b/frontend/src/components/ui/ChartModal/ChartModal.tsx
index e166747..3772162 100644
--- a/frontend/src/components/ui/ChartModal/ChartModal.tsx
+++ b/frontend/src/components/ui/ChartModal/ChartModal.tsx
@@ -1,6 +1,7 @@
import React, { useEffect, useState, useRef } from 'react';
import { createChart, ColorType, IChartApi, CandlestickSeries, HistogramSeries, LineSeries, Time } from 'lightweight-charts';
import { stockDataService } from '../../../services/stockDataService';
+import { yahooFinanceService } from '../../../services/yahooFinance';
import './ChartModal.css';
interface ChartModalProps {
@@ -37,7 +38,10 @@ export const ChartModal: React.FC
+
- {title}
+ + {/* 4. FIX: Image Block - Only render if imageUrl exists AND the variant is "featured" */} + {imageUrl && variant === 'featured' && ( +
+
+
+ )}
+
+ {description && variant !== 'compact' && (
+ {description}
+ )} +
+
- {renderStockTicker()}
+ {(article as any)?.source?.name}
+
+ {renderStockTicker()}
+
+ );
+};
+
+export default StockSearch;
diff --git a/frontend/src/pages/CustomDashboard/CustomDashboard.css b/frontend/src/pages/CustomDashboard/CustomDashboard.css
index f922eec..574ceea 100644
--- a/frontend/src/pages/CustomDashboard/CustomDashboard.css
+++ b/frontend/src/pages/CustomDashboard/CustomDashboard.css
@@ -295,6 +295,24 @@
font-style: italic;
}
+/* Section Headers */
+.section-title {
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: #fff;
+ margin: 0;
+ display: flex;
+ align-items: baseline;
+ gap: 12px;
+}
+
+.drag-hint {
+ font-size: 0.85rem;
+ font-weight: 400;
+ color: #888;
+ font-style: italic;
+}
+
/* Saved Stocks Section */
.saved-stocks-section {
background: #1a1a1a;
@@ -317,6 +335,36 @@
gap: 1rem;
}
+.saved-stocks-container.columns {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+}
+
+/* Columns specific adjustments to prevent overflow */
+.saved-stocks-container.columns .stock-item-row {
+ flex-wrap: wrap;
+ gap: 0.5rem;
+}
+
+.saved-stocks-container.columns .stock-info {
+ min-width: 180px;
+}
+
+.saved-stocks-container.columns .stock-actions {
+ flex-wrap: wrap;
+ gap: 0.25rem;
+}
+
+.saved-stocks-container.columns .saved-stock-item button {
+ padding: 4px 8px;
+ font-size: 0.75rem;
+}
+
+.saved-stocks-container.columns .saved-stock-item {
+ overflow-x: hidden;
+}
+
.saved-stocks-container.dragging-active {
background: rgba(0, 212, 170, 0.05);
border-radius: 8px;
@@ -637,7 +685,8 @@
justify-content: center;
}
- .saved-stocks-container.grid {
+ .saved-stocks-container.grid,
+ .saved-stocks-container.columns {
grid-template-columns: 1fr;
}
diff --git a/frontend/src/pages/CustomDashboard/CustomDashboard.tsx b/frontend/src/pages/CustomDashboard/CustomDashboard.tsx
index 821dbb8..65a4380 100644
--- a/frontend/src/pages/CustomDashboard/CustomDashboard.tsx
+++ b/frontend/src/pages/CustomDashboard/CustomDashboard.tsx
@@ -178,7 +178,7 @@ const CustomDashboard: React.FC = () => {
const [isLoadingIndices, setIsLoadingIndices] = useState(true);
const [error, setError] = useState
+ {isSearching ? (
+
+ )}
+
+
+ Searching...
+
+ ) : searchResults.length > 0 ? (
+
+
+ ) : (
+
+ {searchResults.length} results found
+
+
+ {searchResults.map((stock) => (
+
+ handleSelectStock(stock)}
+ >
+
+ ))}
+
+
+
+
+ {stock.symbol}
+ {stock.name}
+
+
+ {stock.exch}
+ {stock.type}
+
+
+
+ )}
+ 🔍
+ No stocks found matching "{searchQuery}"
+
-
Portfolio Analytics Dashboard
+Analytics Dashboard
{/* Search Section Moved Here */}
@@ -657,7 +657,7 @@ const CustomDashboard: React.FC = () => {
- Saved Stocks ({savedStocks.length}) + Saved Stocks Drag to rearrange
@@ -669,6 +669,14 @@ const CustomDashboard: React.FC = () => {
>
List
+