+ {/* Top Workspace Header Selector */}
+
- {/* Profile Card */}
- {user && (
-
-
- Trader Profile
-
-
-
- User: {user.username}
-
-
- Email: {user.email}
-
-
- Role: {user.role}
-
-
- Verified:{' '}
- {user.is_verified ? 'Yes' : 'No'}
-
-
+ {/* Search Input Box */}
+
- {/* Navigation Links */}
-
-
+
+
+
+
+
+ Explore Markets
+
+
-
- {/* Logout Button */}
-
+ {/* Pinned Logout Button at Bottom of Sidebar */}
+
+
+
);
};
diff --git a/src/components/StockSearchBar.tsx b/src/components/StockSearchBar.tsx
new file mode 100644
index 0000000..cf7cbdd
--- /dev/null
+++ b/src/components/StockSearchBar.tsx
@@ -0,0 +1,155 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Search, X, Check, Plus } from 'lucide-react';
+import { marketService, type StockSearchResult } from '@/services/market.service';
+import '@/styles/components/stock-search-bar.css';
+
+interface StockSearchBarProps {
+ onAddStock: (symbol: string) => Promise
;
+ existingHoldings?: string[];
+ placeholder?: string;
+}
+
+export const StockSearchBar: React.FC = ({
+ onAddStock,
+ existingHoldings = [],
+ placeholder = 'Search stocks by name or ticker...',
+}) => {
+ const [query, setQuery] = useState('');
+ const [results, setResults] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [isOpen, setIsOpen] = useState(false);
+ const [addingSymbol, setAddingSymbol] = useState(null);
+
+ const containerRef = useRef(null);
+
+ // Debounced search logic (300ms)
+ useEffect(() => {
+ if (!query.trim()) {
+ setResults([]);
+ setIsLoading(false);
+ setIsOpen(false);
+ return;
+ }
+
+ setIsLoading(true);
+ const timer = setTimeout(async () => {
+ try {
+ const searchResults = await marketService.searchStocks(query);
+ setResults(searchResults);
+ setIsOpen(true);
+ } catch (err) {
+ console.error('Failed to search stocks:', err);
+ setResults([]);
+ } finally {
+ setIsLoading(false);
+ }
+ }, 300);
+
+ return () => clearTimeout(timer);
+ }, [query]);
+
+ // Click outside listener to close dropdown
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+ setIsOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => document.removeEventListener('mousedown', handleClickOutside);
+ }, []);
+
+ const handleAdd = async (symbol: string) => {
+ setAddingSymbol(symbol);
+ try {
+ await onAddStock(symbol);
+ setIsOpen(false);
+ setQuery('');
+ } finally {
+ setAddingSymbol(null);
+ }
+ };
+
+ return (
+
+
+
+
+
+
setQuery(e.target.value)}
+ placeholder={placeholder}
+ onFocus={() => {
+ if (results.length > 0) setIsOpen(true);
+ }}
+ />
+ {isLoading ? (
+
+ ) : (
+ query && (
+
+ )
+ )}
+
+
+ {isOpen && (
+
+ {results.length === 0 ? (
+
No matching stocks found for "{query}"
+ ) : (
+ results.map((stock) => {
+ const isAdded = existingHoldings.includes(stock.symbol);
+ const isAdding = addingSymbol === stock.symbol;
+
+ return (
+
+
+
+ {stock.symbol}
+ {stock.exchange && (
+ {stock.exchange}
+ )}
+
+
+ {stock.name}
+
+
+
+
+
+ );
+ })
+ )}
+
+ )}
+
- {/* Dynamic Feedback Banner */}
- {feedback && (
-
- {feedback.type === 'success' ? 'โ
' : 'โ ๏ธ '}
- {feedback.message}
-
- )}
-
- {/* Guest Logo Header */}
- {!isAuthenticated && (
-
-
-
-
- TRADING COPILOT
-
-