React Logo

{title}

+ + +

+ + {showHistory && ( +

Version History (Last 5)

+ {history.length === 0 ? ( +

No saved versions yet

+ ) : ( + history.map((version) => ( +

+ + {new Date(version.timestamp).toLocaleString()} + + +

+ )) + )} +

+ )} + +

setCode(e.target.value)}
+        className="code-textarea"
+        spellCheck={false}
+      />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/components/ErrorBoundary.jsx b/BACKUPS/SECOND_PHASE/src/components/ErrorBoundary.jsx
new file mode 100644
index 000000000..9028075a8
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/components/ErrorBoundary.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="error-boundary">
+          <h3>Something went wrong</h3>
+          <p>{this.props.fallbackMessage || 'This section is temporarily unavailable'}</p>
+          <button onClick={() => this.setState({ hasError: false, error: null })}>
+            Retry
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/components/TradingDashboard.jsx b/BACKUPS/SECOND_PHASE/src/components/TradingDashboard.jsx
new file mode 100644
index 000000000..8b6db8b21
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/components/TradingDashboard.jsx
@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react';
+import ErrorBoundary from './ErrorBoundary';
+import VendorManager from '../core/VendorManager';
+import { YFinanceMarketData, YFinanceAnalytics, YFinanceBulkDownloader } from './YFinanceComponents';
+import { CodeViewer, VendorStatus } from './AdminComponents';
+
+const TradingDashboard = () => {
+  const [activeTab, setActiveTab] = useState('market');
+  const [vendors, setVendors] = useState([]);
+  const [selectedVendor, setSelectedVendor] = useState('');
+
+  useEffect(() => {
+    setVendors(VendorManager.getAllVendors());
+    if (VendorManager.getAllVendors().length > 0) {
+      setSelectedVendor(VendorManager.getAllVendors()[0]);
+    }
+  }, []);
+
+  const tabs = [
+    { id: 'market', label: 'Market Data', capability: 'marketData' },
+    { id: 'orders', label: 'Orders', capability: 'orderManagement' },
+    { id: 'portfolio', label: 'Portfolio', capability: 'portfolio' },
+    { id: 'analytics', label: 'Analytics', capability: 'analytics' },
+    { id: 'admin', label: 'Admin', capability: 'admin' }
+  ];
+
+  const getAvailableTabs = () => {
+    if (!selectedVendor) return [];
+    const capabilities = VendorManager.getVendorCapabilities(selectedVendor);
+    return tabs.filter(tab => tab.capability === 'admin' || capabilities[tab.capability]);
+  };
+
+  const renderTabContent = () => {
+    const availableTabs = getAvailableTabs();
+    const currentTab = availableTabs.find(tab => tab.id === activeTab);
+    
+    if (!currentTab) {
+      return <div className="tab-content">Feature not available for selected vendor</div>;
+    }
+
+    switch (activeTab) {
+      case 'market':
+        return <MarketDataTab vendor={selectedVendor} />;
+      case 'orders':
+        return <OrdersTab vendor={selectedVendor} />;
+      case 'portfolio':
+        return <PortfolioTab vendor={selectedVendor} />;
+      case 'analytics':
+        return <AnalyticsTab vendor={selectedVendor} />;
+      case 'admin':
+        return <AdminTab vendor={selectedVendor} />;
+      default:
+        return <div className="tab-content">Select a tab</div>;
+    }
+  };
+
+  return (
+    <div className="trading-dashboard">
+      <header className="dashboard-header">
+        <h1>Trading Dashboard</h1>
+        <select 
+          value={selectedVendor} 
+          onChange={(e) => setSelectedVendor(e.target.value)}
+          className="vendor-selector"
+        >
+          <option value="">Select Vendor</option>
+          {vendors.map(vendor => (
+            <option key={vendor} value={vendor}>{vendor}</option>
+          ))}
+        </select>
+      </header>
+
+      <nav className="tab-navigation">
+        {getAvailableTabs().map(tab => (
+          <button
+            key={tab.id}
+            className={`tab ${activeTab === tab.id ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+
+      <main className="dashboard-content">
+        <ErrorBoundary fallbackMessage="This tab is temporarily unavailable">
+          {renderTabContent()}
+        </ErrorBoundary>
+      </main>
+    </div>
+  );
+};
+
+const MarketDataTab = ({ vendor }) => {
+  if (vendor === 'yfinance') {
+    return (
+      <div className="tab-content">
+        <h2>Market Data - Yahoo Finance</h2>
+        <YFinanceMarketData vendor={vendor} />
+      </div>
+    );
+  }
+  return (
+    <div className="tab-content">
+      <h2>Market Data - {vendor}</h2>
+      <p>Market data functionality for {vendor}</p>
+    </div>
+  );
+};
+
+const OrdersTab = ({ vendor }) => (
+  <div className="tab-content">
+    <h2>Order Management - {vendor}</h2>
+    <p>Order management functionality for {vendor}</p>
+  </div>
+);
+
+const PortfolioTab = ({ vendor }) => (
+  <div className="tab-content">
+    <h2>Portfolio - {vendor}</h2>
+    <p>Portfolio functionality for {vendor}</p>
+  </div>
+);
+
+const AnalyticsTab = ({ vendor }) => {
+  if (vendor === 'yfinance') {
+    return (
+      <div className="tab-content">
+        <h2>Analytics - Yahoo Finance</h2>
+        <YFinanceAnalytics vendor={vendor} />
+        <YFinanceBulkDownloader vendor={vendor} />
+      </div>
+    );
+  }
+  return (
+    <div className="tab-content">
+      <h2>Analytics - {vendor}</h2>
+      <p>Analytics functionality for {vendor}</p>
+    </div>
+  );
+};
+
+const AdminTab = ({ vendor }) => {
+  const [activeAdmin, setActiveAdmin] = useState('code');
+  
+  return (
+    <div className="tab-content">
+      <h2>Admin - {vendor}</h2>
+      <div className="admin-nav">
+        <button 
+          className={`admin-btn ${activeAdmin === 'code' ? 'active' : ''}`}
+          onClick={() => setActiveAdmin('code')}
+        >
+          Code
+        </button>
+        <button 
+          className={`admin-btn ${activeAdmin === 'status' ? 'active' : ''}`}
+          onClick={() => setActiveAdmin('status')}
+        >
+          Status
+        </button>
+      </div>
+      
+      {activeAdmin === 'code' && <CodeViewer vendor={vendor} />}
+      {activeAdmin === 'status' && <VendorStatus vendor={vendor} />}
+    </div>
+  );
+};
+
+export default TradingDashboard;
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/components/YFinanceComponents.jsx b/BACKUPS/SECOND_PHASE/src/components/YFinanceComponents.jsx
new file mode 100644
index 000000000..a9ece5aec
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/components/YFinanceComponents.jsx
@@ -0,0 +1,339 @@
+import React, { useState, useEffect } from 'react';
+import VendorManager from '../core/VendorManager';
+
+export const YFinanceMarketData = ({ vendor }) => {
+  const [symbol, setSymbol] = useState('AAPL');
+  const [assetType, setAssetType] = useState('stocks');
+  const [interval, setInterval] = useState('1d');
+  const [period, setPeriod] = useState('1mo');
+  const [customStart, setCustomStart] = useState('');
+  const [customEnd, setCustomEnd] = useState('');
+  const [useCustomRange, setUseCustomRange] = useState(false);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const assetTypes = {
+    stocks: { label: 'Stocks', examples: 'AAPL, GOOGL, MSFT' },
+    forex: { label: 'Forex', examples: 'EURUSD=X, GBPUSD=X, USDJPY=X' },
+    crypto: { label: 'Crypto', examples: 'BTC-USD, ETH-USD, ADA-USD' },
+    commodities: { label: 'Commodities', examples: 'GC=F, CL=F, SI=F' },
+    indices: { label: 'Indices', examples: '^GSPC, ^DJI, ^IXIC' }
+  };
+
+  const intervals = ['1m', '2m', '5m', '15m', '30m', '60m', '90m', '1h', '1d', '5d', '1wk', '1mo', '3mo'];
+  const periods = ['1d', '5d', '1mo', '3mo', '6mo', '1y', '2y', '5y', '10y', 'ytd', 'max'];
+
+  const fetchData = async () => {
+    if (!symbol.trim()) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const fetchParams = {
+        symbol: symbol.toUpperCase(),
+        interval,
+        period: useCustomRange ? null : period,
+        start: useCustomRange ? customStart : null,
+        end: useCustomRange ? customEnd : null
+      };
+
+      const result = useCustomRange || period !== '1d' 
+        ? await VendorManager.executeVendorMethod(vendor, 'getHistoricalData', fetchParams.symbol, fetchParams.interval, fetchParams.period || '1mo')
+        : await VendorManager.executeVendorMethod(vendor, 'getMarketData', fetchParams.symbol, fetchParams.interval);
+        
+      if (result.success) {
+        setData(result.data);
+      } else {
+        setError(result.error);
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="yfinance-market-data">
+      <div className="fetch-controls">
+        <div className="control-row">
+          <div className="control-group">
+            <label>Asset Type:</label>
+            <select value={assetType} onChange={(e) => setAssetType(e.target.value)}>
+              {Object.entries(assetTypes).map(([key, type]) => (
+                <option key={key} value={key}>{type.label}</option>
+              ))}
+            </select>
+          </div>
+          <div className="control-group">
+            <label>Symbol:</label>
+            <input
+              type="text"
+              value={symbol}
+              onChange={(e) => setSymbol(e.target.value)}
+              placeholder={assetTypes[assetType].examples}
+              onKeyPress={(e) => e.key === 'Enter' && fetchData()}
+            />
+          </div>
+        </div>
+        
+        <div className="control-row">
+          <div className="control-group">
+            <label>Interval:</label>
+            <select value={interval} onChange={(e) => setInterval(e.target.value)}>
+              {intervals.map(int => (
+                <option key={int} value={int}>{int}</option>
+              ))}
+            </select>
+          </div>
+          <div className="control-group">
+            <label>
+              <input
+                type="checkbox"
+                checked={useCustomRange}
+                onChange={(e) => setUseCustomRange(e.target.checked)}
+              />
+              Custom Date Range
+            </label>
+          </div>
+        </div>
+
+        {useCustomRange ? (
+          <div className="control-row">
+            <div className="control-group">
+              <label>Start Date:</label>
+              <input
+                type="date"
+                value={customStart}
+                onChange={(e) => setCustomStart(e.target.value)}
+              />
+            </div>
+            <div className="control-group">
+              <label>End Date:</label>
+              <input
+                type="date"
+                value={customEnd}
+                onChange={(e) => setCustomEnd(e.target.value)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="control-row">
+            <div className="control-group">
+              <label>Period:</label>
+              <select value={period} onChange={(e) => setPeriod(e.target.value)}>
+                {periods.map(per => (
+                  <option key={per} value={per}>{per}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+        )}
+
+        <button className="fetch-btn" onClick={fetchData} disabled={loading}>
+          {loading ? 'Fetching...' : 'Fetch Data'}
+        </button>
+      </div>
+
+      {error && <div className="error">Error: {error}</div>}
+      
+      {data && (
+        <div className="quote-display">
+          <h3>{data.symbol}</h3>
+          {data.price ? (
+            <div className="price-info">
+              <span className="price">${data.price?.toFixed(2)}</span>
+              <span className={`change ${data.change >= 0 ? 'positive' : 'negative'}`}>
+                {data.change >= 0 ? '+' : ''}{data.change?.toFixed(2)} 
+                ({data.changePercent?.toFixed(2)}%)
+              </span>
+            </div>
+          ) : null}
+          {data.data && (
+            <div className="historical-summary">
+              <p>Historical data: {data.data.length} records</p>
+              <p>Latest: ${data.data[data.data.length - 1]?.close?.toFixed(2)}</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const YFinanceAnalytics = ({ vendor }) => {
+  const [symbol, setSymbol] = useState('AAPL');
+  const [timeframe, setTimeframe] = useState('1mo');
+  const [analytics, setAnalytics] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const timeframes = ['1d', '5d', '1mo', '3mo', '6mo', '1y', '2y'];
+
+  const fetchAnalytics = async () => {
+    if (!symbol.trim()) return;
+    
+    setLoading(true);
+    try {
+      const result = await VendorManager.executeVendorMethod(vendor, 'getAnalytics', symbol.toUpperCase(), timeframe);
+      if (result.success) {
+        setAnalytics(result.data);
+      }
+    } catch (err) {
+      console.error('Analytics error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="yfinance-analytics">
+      <div className="analytics-controls">
+        <div className="control-group">
+          <label>Symbol:</label>
+          <input
+            type="text"
+            value={symbol}
+            onChange={(e) => setSymbol(e.target.value)}
+            placeholder="Enter symbol for analysis"
+            onKeyPress={(e) => e.key === 'Enter' && fetchAnalytics()}
+          />
+        </div>
+        <div className="control-group">
+          <label>Analysis Period:</label>
+          <select value={timeframe} onChange={(e) => setTimeframe(e.target.value)}>
+            {timeframes.map(tf => (
+              <option key={tf} value={tf}>{tf}</option>
+            ))}
+          </select>
+        </div>
+        <button className="fetch-btn" onClick={fetchAnalytics} disabled={loading}>
+          {loading ? 'Analyzing...' : 'Fetch Analytics'}
+        </button>
+      </div>
+
+      {analytics && (
+        <div className="analytics-display">
+          <h3>Analysis for {analytics.symbol} ({timeframe})</h3>
+          <div className="analytics-grid">
+            <div className="metric">
+              <label>Current Price</label>
+              <span>${analytics.price?.toFixed(2)}</span>
+            </div>
+            <div className="metric">
+              <label>Volatility</label>
+              <span className={`volatility ${analytics.volatility?.toLowerCase()}`}>
+                {analytics.volatility}
+              </span>
+            </div>
+            <div className="metric">
+              <label>Trend ({timeframe})</label>
+              <span className={`trend ${analytics.weeklyTrend?.toLowerCase()}`}>
+                {analytics.weeklyTrend}
+              </span>
+            </div>
+            <div className="metric">
+              <label>Recommendation</label>
+              <span className={`recommendation ${analytics.recommendation?.toLowerCase()}`}>
+                {analytics.recommendation}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const YFinanceBulkDownloader = ({ vendor }) => {
+  const [symbols, setSymbols] = useState('AAPL,GOOGL,MSFT');
+  const [intervals, setIntervals] = useState(['1d']);
+  const [period, setPeriod] = useState('1mo');
+  const [batchSize, setBatchSize] = useState(5);
+  const [downloading, setDownloading] = useState(false);
+  const [results, setResults] = useState(null);
+
+  const availableIntervals = ['1m', '5m', '15m', '1h', '1d', '1wk', '1mo'];
+  const periods = ['1d', '5d', '1mo', '3mo', '6mo', '1y', '2y', '5y', 'max'];
+
+  const handleBulkDownload = async () => {
+    const symbolList = symbols.split(',').map(s => s.trim().toUpperCase()).filter(s => s);
+    if (symbolList.length === 0) return;
+
+    setDownloading(true);
+    try {
+      const result = await VendorManager.executeVendorMethod(
+        vendor, 
+        'bulkDownload', 
+        symbolList, 
+        intervals,
+        { period, batchSize }
+      );
+      setResults(result);
+    } catch (err) {
+      console.error('Bulk download error:', err);
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  return (
+    <div className="bulk-downloader">
+      <h4>Bulk Historical Data Download</h4>
+      <div className="bulk-controls">
+        <div className="control-group">
+          <label>Symbols (comma-separated):</label>
+          <input
+            type="text"
+            value={symbols}
+            onChange={(e) => setSymbols(e.target.value)}
+            placeholder="AAPL,GOOGL,MSFT,BTC-USD,EURUSD=X"
+          />
+        </div>
+        <div className="control-row">
+          <div className="control-group">
+            <label>Intervals:</label>
+            <select 
+              multiple 
+              value={intervals} 
+              onChange={(e) => setIntervals([...e.target.selectedOptions].map(o => o.value))}
+            >
+              {availableIntervals.map(int => (
+                <option key={int} value={int}>{int}</option>
+              ))}
+            </select>
+          </div>
+          <div className="control-group">
+            <label>Period:</label>
+            <select value={period} onChange={(e) => setPeriod(e.target.value)}>
+              {periods.map(per => (
+                <option key={per} value={per}>{per}</option>
+              ))}
+            </select>
+          </div>
+          <div className="control-group">
+            <label>Batch Size:</label>
+            <input
+              type="number"
+              value={batchSize}
+              onChange={(e) => setBatchSize(parseInt(e.target.value))}
+              min="1"
+              max="50"
+            />
+          </div>
+        </div>
+      </div>
+      <button className="fetch-btn" onClick={handleBulkDownload} disabled={downloading}>
+        {downloading ? 'Downloading...' : 'Download Data'}
+      </button>
+      
+      {results && (
+        <div className="download-results">
+          <h5>Download Complete</h5>
+          <p>Downloaded data for {Object.keys(results.data || {}).length} symbols</p>
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/core/BaseVendorAdapter.js b/BACKUPS/SECOND_PHASE/src/core/BaseVendorAdapter.js
new file mode 100644
index 000000000..f5f979cd7
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/core/BaseVendorAdapter.js
@@ -0,0 +1,51 @@
+export class BaseVendorAdapter {
+  constructor(name, config = {}) {
+    this.name = name;
+    this.config = config;
+    this.isConnected = false;
+  }
+
+  getCapabilities() {
+    return {
+      marketData: false,
+      orderManagement: false,
+      portfolio: false,
+      analytics: false,
+      realtime: false
+    };
+  }
+
+  async connect() {
+    throw new Error('connect() must be implemented by vendor adapter');
+  }
+
+  async disconnect() {
+    this.isConnected = false;
+  }
+
+  async getMarketData(symbol) {
+    throw new Error('getMarketData() not implemented');
+  }
+
+  async placeOrder(orderData) {
+    throw new Error('placeOrder() not implemented');
+  }
+
+  async getPortfolio() {
+    throw new Error('getPortfolio() not implemented');
+  }
+
+  async getAnalytics(symbol) {
+    throw new Error('getAnalytics() not implemented');
+  }
+
+  handleError(error, context) {
+    console.error(`${this.name} Error in ${context}:`, error);
+    return {
+      success: false,
+      error: error.message,
+      vendor: this.name,
+      context
+    };
+  }
+}
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/core/VendorManager.js b/BACKUPS/SECOND_PHASE/src/core/VendorManager.js
new file mode 100644
index 000000000..b4bafabc8
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/core/VendorManager.js
@@ -0,0 +1,54 @@
+class VendorManager {
+  constructor() {
+    this.vendors = new Map();
+    this.capabilities = new Map();
+  }
+
+  registerVendor(vendorId, vendorAdapter) {
+    try {
+      if (!vendorAdapter.name || !vendorAdapter.getCapabilities) {
+        throw new Error(`Invalid vendor adapter for ${vendorId}`);
+      }
+
+      this.vendors.set(vendorId, vendorAdapter);
+      this.capabilities.set(vendorId, vendorAdapter.getCapabilities());
+      return true;
+    } catch (error) {
+      console.error(`Failed to register vendor ${vendorId}:`, error);
+      return false;
+    }
+  }
+
+  getVendor(vendorId) {
+    return this.vendors.get(vendorId);
+  }
+
+  getVendorCapabilities(vendorId) {
+    return this.capabilities.get(vendorId) || {};
+  }
+
+  getAllVendors() {
+    return Array.from(this.vendors.keys());
+  }
+
+  getVendorsWithCapability(capability) {
+    return Array.from(this.vendors.keys()).filter(vendorId => 
+      this.getVendorCapabilities(vendorId)[capability]
+    );
+  }
+
+  async executeVendorMethod(vendorId, method, ...args) {
+    try {
+      const vendor = this.getVendor(vendorId);
+      if (!vendor || !vendor[method]) {
+        throw new Error(`Method ${method} not available for vendor ${vendorId}`);
+      }
+      return await vendor[method](...args);
+    } catch (error) {
+      console.error(`Error executing ${method} for vendor ${vendorId}:`, error);
+      throw error;
+    }
+  }
+}
+
+export default new VendorManager();
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/index.css b/BACKUPS/SECOND_PHASE/src/index.css
new file mode 100644
index 000000000..ec2585e8c
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/BACKUPS/SECOND_PHASE/src/index.jsx b/BACKUPS/SECOND_PHASE/src/index.jsx
new file mode 100644
index 000000000..d563c0fb1
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/index.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/BACKUPS/SECOND_PHASE/src/logo.svg b/BACKUPS/SECOND_PHASE/src/logo.svg
new file mode 100644
index 000000000..9dfc1c058
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/reportWebVitals.js b/BACKUPS/SECOND_PHASE/src/reportWebVitals.js
new file mode 100644
index 000000000..5253d3ad9
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/BACKUPS/SECOND_PHASE/src/setupTests.js b/BACKUPS/SECOND_PHASE/src/setupTests.js
new file mode 100644
index 000000000..8f2609b7b
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/setupTests.js
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
diff --git a/BACKUPS/SECOND_PHASE/src/utils/VendorRegistry.js b/BACKUPS/SECOND_PHASE/src/utils/VendorRegistry.js
new file mode 100644
index 000000000..cb45320c8
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/utils/VendorRegistry.js
@@ -0,0 +1,56 @@
+import VendorManager from '../core/VendorManager';
+
+export const registerNewVendor = (vendorId, VendorClass, config = {}) => {
+  try {
+    const vendorInstance = new VendorClass(config);
+    const success = VendorManager.registerVendor(vendorId, vendorInstance);
+    
+    if (success) {
+      console.log(`✅ Vendor ${vendorId} registered successfully`);
+      return true;
+    } else {
+      console.error(`❌ Failed to register vendor ${vendorId}`);
+      return false;
+    }
+  } catch (error) {
+    console.error(`❌ Error registering vendor ${vendorId}:`, error);
+    return false;
+  }
+};
+
+export const getVendorInfo = (vendorId) => {
+  const vendor = VendorManager.getVendor(vendorId);
+  const capabilities = VendorManager.getVendorCapabilities(vendorId);
+  
+  return {
+    exists: !!vendor,
+    name: vendor?.name || 'Unknown',
+    capabilities,
+    isConnected: vendor?.isConnected || false
+  };
+};
+
+export const testVendor = async (vendorId) => {
+  try {
+    const vendor = VendorManager.getVendor(vendorId);
+    if (!vendor) {
+      return { success: false, error: 'Vendor not found' };
+    }
+
+    const connectionResult = await vendor.connect();
+    const capabilities = vendor.getCapabilities();
+    
+    return {
+      success: true,
+      connection: connectionResult,
+      capabilities,
+      vendor: vendor.name
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error.message,
+      vendor: vendorId
+    };
+  }
+};
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/vendors/ExampleVendorA.js b/BACKUPS/SECOND_PHASE/src/vendors/ExampleVendorA.js
new file mode 100644
index 000000000..46f8cdd42
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/vendors/ExampleVendorA.js
@@ -0,0 +1,76 @@
+import { BaseVendorAdapter } from '../core/BaseVendorAdapter';
+
+class ExampleVendorA extends BaseVendorAdapter {
+  constructor() {
+    super('Vendor A', {
+      apiUrl: 'https://api.vendora.com',
+      apiKey: 'your-api-key'
+    });
+  }
+
+  getCapabilities() {
+    return {
+      marketData: true,
+      orderManagement: true,
+      portfolio: true,
+      analytics: false,
+      realtime: true
+    };
+  }
+
+  async connect() {
+    try {
+      this.isConnected = true;
+      return { success: true };
+    } catch (error) {
+      return this.handleError(error, 'connect');
+    }
+  }
+
+  async getMarketData(symbol) {
+    try {
+      return {
+        success: true,
+        data: {
+          symbol,
+          price: Math.random() * 100,
+          change: Math.random() * 10 - 5,
+          volume: Math.floor(Math.random() * 1000000)
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getMarketData');
+    }
+  }
+
+  async placeOrder(orderData) {
+    try {
+      return {
+        success: true,
+        orderId: `VA_${Date.now()}`,
+        status: 'pending'
+      };
+    } catch (error) {
+      return this.handleError(error, 'placeOrder');
+    }
+  }
+
+  async getPortfolio() {
+    try {
+      return {
+        success: true,
+        data: {
+          totalValue: 50000,
+          positions: [
+            { symbol: 'AAPL', quantity: 10, value: 1500 },
+            { symbol: 'GOOGL', quantity: 5, value: 12500 }
+          ]
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getPortfolio');
+    }
+  }
+}
+
+export default ExampleVendorA;
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/vendors/ExampleVendorB.js b/BACKUPS/SECOND_PHASE/src/vendors/ExampleVendorB.js
new file mode 100644
index 000000000..66167fc33
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/vendors/ExampleVendorB.js
@@ -0,0 +1,66 @@
+import { BaseVendorAdapter } from '../core/BaseVendorAdapter';
+
+class ExampleVendorB extends BaseVendorAdapter {
+  constructor() {
+    super('Vendor B', {
+      baseUrl: 'https://vendorb-api.com/v2',
+      token: 'bearer-token'
+    });
+  }
+
+  getCapabilities() {
+    return {
+      marketData: true,
+      orderManagement: false,
+      portfolio: false,
+      analytics: true,
+      realtime: false
+    };
+  }
+
+  async connect() {
+    try {
+      this.isConnected = true;
+      return { success: true };
+    } catch (error) {
+      return this.handleError(error, 'connect');
+    }
+  }
+
+  async getMarketData(symbol) {
+    try {
+      return {
+        success: true,
+        data: {
+          symbol,
+          price: Math.random() * 200,
+          bid: Math.random() * 190,
+          ask: Math.random() * 210,
+          timestamp: Date.now()
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getMarketData');
+    }
+  }
+
+  async getAnalytics(symbol) {
+    try {
+      return {
+        success: true,
+        data: {
+          symbol,
+          rsi: Math.random() * 100,
+          macd: Math.random() * 5 - 2.5,
+          sma20: Math.random() * 150,
+          sma50: Math.random() * 140,
+          recommendation: ['BUY', 'SELL', 'HOLD'][Math.floor(Math.random() * 3)]
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getAnalytics');
+    }
+  }
+}
+
+export default ExampleVendorB;
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/vendors/VendorTemplate.js b/BACKUPS/SECOND_PHASE/src/vendors/VendorTemplate.js
new file mode 100644
index 000000000..c411953db
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/vendors/VendorTemplate.js
@@ -0,0 +1,141 @@
+import { BaseVendorAdapter } from '../core/BaseVendorAdapter';
+
+/**
+ * Template for creating new vendor adapters
+ * Copy this file and implement your vendor-specific logic
+ */
+class VendorTemplate extends BaseVendorAdapter {
+  constructor(config = {}) {
+    super('Vendor Name', {
+      apiUrl: config.apiUrl || '',
+      apiKey: config.apiKey || '',
+      ...config
+    });
+  }
+
+  /**
+   * Define what this vendor can do
+   * Set to true only for features this vendor supports
+   */
+  getCapabilities() {
+    return {
+      marketData: false,
+      orderManagement: false,
+      portfolio: false,
+      analytics: false,
+      realtime: false
+    };
+  }
+
+  /**
+   * Connect to vendor API
+   */
+  async connect() {
+    try {
+      // TODO: Implement your connection logic
+      // Example: await fetch(this.config.apiUrl + '/connect')
+      
+      this.isConnected = true;
+      return { success: true };
+    } catch (error) {
+      return this.handleError(error, 'connect');
+    }
+  }
+
+  /**
+   * Get market data for a symbol
+   * Only implement if marketData capability is true
+   */
+  async getMarketData(symbol) {
+    try {
+      // TODO: Implement your market data API call
+      // Example:
+      // const response = await fetch(`${this.config.apiUrl}/market/${symbol}`);
+      // const data = await response.json();
+      
+      return {
+        success: true,
+        data: {
+          symbol,
+          price: 0,
+          change: 0,
+          volume: 0
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getMarketData');
+    }
+  }
+
+  /**
+   * Place an order
+   * Only implement if orderManagement capability is true
+   */
+  async placeOrder(orderData) {
+    try {
+      // TODO: Implement your order placement logic
+      
+      return {
+        success: true,
+        orderId: '',
+        status: 'pending'
+      };
+    } catch (error) {
+      return this.handleError(error, 'placeOrder');
+    }
+  }
+
+  /**
+   * Get portfolio data
+   * Only implement if portfolio capability is true
+   */
+  async getPortfolio() {
+    try {
+      // TODO: Implement your portfolio API call
+      
+      return {
+        success: true,
+        data: {
+          totalValue: 0,
+          positions: []
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getPortfolio');
+    }
+  }
+
+  /**
+   * Get analytics for a symbol
+   * Only implement if analytics capability is true
+   */
+  async getAnalytics(symbol) {
+    try {
+      // TODO: Implement your analytics API call
+      
+      return {
+        success: true,
+        data: {
+          symbol,
+          indicators: {}
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getAnalytics');
+    }
+  }
+
+  /**
+   * Add any custom methods your vendor needs
+   */
+  async customMethod() {
+    try {
+      // Your custom implementation
+      return { success: true };
+    } catch (error) {
+      return this.handleError(error, 'customMethod');
+    }
+  }
+}
+
+export default VendorTemplate;
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/src/vendors/YFinanceVendor.js b/BACKUPS/SECOND_PHASE/src/vendors/YFinanceVendor.js
new file mode 100644
index 000000000..963720653
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/src/vendors/YFinanceVendor.js
@@ -0,0 +1,232 @@
+import { BaseVendorAdapter } from '../core/BaseVendorAdapter';
+
+class YFinanceVendor extends BaseVendorAdapter {
+  constructor(config = {}) {
+    super('Yahoo Finance', {
+      baseUrl: 'https://query1.finance.yahoo.com/v8/finance/chart/',
+      intervals: ['1m', '2m', '5m', '15m', '30m', '60m', '90m', '1h', '1d', '5d', '1wk', '1mo', '3mo'],
+      ...config
+    });
+    this.cache = new Map();
+    this.cacheTimeout = 30000; // 30 seconds
+  }
+
+  getCapabilities() {
+    return {
+      marketData: true,
+      orderManagement: false,
+      portfolio: false,
+      analytics: true,
+      realtime: true
+    };
+  }
+
+  async connect() {
+    try {
+      // Test connection with a simple quote
+      const testResult = await this.getMarketData('AAPL');
+      this.isConnected = testResult.success;
+      return { success: this.isConnected };
+    } catch (error) {
+      return this.handleError(error, 'connect');
+    }
+  }
+
+  async getMarketData(symbol, interval = '1d') {
+    try {
+      const cacheKey = `${symbol}_${interval}`;
+      const cached = this.cache.get(cacheKey);
+      
+      if (cached && Date.now() - cached.timestamp < this.cacheTimeout) {
+        return { success: true, data: cached.data };
+      }
+
+      // Use Yahoo Finance API directly (simplified version of the Python script logic)
+      const url = `${this.config.baseUrl}${symbol}?interval=${interval}&range=1d`;
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      const result = this.parseYahooResponse(data, symbol);
+      
+      // Cache the result
+      this.cache.set(cacheKey, {
+        data: result,
+        timestamp: Date.now()
+      });
+
+      return { success: true, data: result };
+    } catch (error) {
+      return this.handleError(error, 'getMarketData');
+    }
+  }
+
+  async getHistoricalData(symbol, interval = '1d', period = '1mo') {
+    try {
+      const url = `${this.config.baseUrl}${symbol}?interval=${interval}&range=${period}`;
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      return {
+        success: true,
+        data: this.parseHistoricalData(data, symbol)
+      };
+    } catch (error) {
+      return this.handleError(error, 'getHistoricalData');
+    }
+  }
+
+  async getAnalytics(symbol) {
+    try {
+      // Get multiple timeframes for analytics
+      const [daily, weekly] = await Promise.all([
+        this.getMarketData(symbol, '1d'),
+        this.getMarketData(symbol, '1wk')
+      ]);
+
+      if (!daily.success || !weekly.success) {
+        throw new Error('Failed to fetch data for analytics');
+      }
+
+      return {
+        success: true,
+        data: {
+          symbol,
+          price: daily.data.price,
+          change: daily.data.change,
+          changePercent: daily.data.changePercent,
+          volume: daily.data.volume,
+          marketCap: daily.data.marketCap,
+          pe: daily.data.pe,
+          weeklyTrend: weekly.data.change > 0 ? 'UP' : 'DOWN',
+          volatility: this.calculateVolatility(daily.data, weekly.data),
+          recommendation: this.generateRecommendation(daily.data)
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getAnalytics');
+    }
+  }
+
+  parseYahooResponse(data, symbol) {
+    try {
+      const chart = data.chart?.result?.[0];
+      if (!chart) {
+        throw new Error('Invalid response format');
+      }
+
+      const meta = chart.meta;
+      const quote = chart.indicators?.quote?.[0];
+      
+      return {
+        symbol,
+        price: meta.regularMarketPrice || 0,
+        change: (meta.regularMarketPrice - meta.previousClose) || 0,
+        changePercent: ((meta.regularMarketPrice - meta.previousClose) / meta.previousClose * 100) || 0,
+        volume: meta.regularMarketVolume || 0,
+        marketCap: meta.marketCap || null,
+        pe: meta.trailingPE || null,
+        high: quote?.high?.[quote.high.length - 1] || meta.regularMarketDayHigh,
+        low: quote?.low?.[quote.low.length - 1] || meta.regularMarketDayLow,
+        open: quote?.open?.[0] || meta.regularMarketDayLow,
+        previousClose: meta.previousClose || 0,
+        timestamp: Date.now()
+      };
+    } catch (error) {
+      throw new Error(`Failed to parse Yahoo response: ${error.message}`);
+    }
+  }
+
+  parseHistoricalData(data, symbol) {
+    try {
+      const chart = data.chart?.result?.[0];
+      if (!chart) {
+        throw new Error('Invalid historical data format');
+      }
+
+      const timestamps = chart.timestamp || [];
+      const quote = chart.indicators?.quote?.[0] || {};
+      
+      return {
+        symbol,
+        data: timestamps.map((ts, i) => ({
+          timestamp: new Date(ts * 1000).toISOString(),
+          open: quote.open?.[i] || null,
+          high: quote.high?.[i] || null,
+          low: quote.low?.[i] || null,
+          close: quote.close?.[i] || null,
+          volume: quote.volume?.[i] || null
+        })).filter(item => item.close !== null)
+      };
+    } catch (error) {
+      throw new Error(`Failed to parse historical data: ${error.message}`);
+    }
+  }
+
+  calculateVolatility(dailyData, weeklyData) {
+    // Simple volatility calculation
+    const dailyChange = Math.abs(dailyData.changePercent || 0);
+    const weeklyChange = Math.abs(weeklyData.changePercent || 0);
+    
+    if (dailyChange > 5 || weeklyChange > 15) return 'HIGH';
+    if (dailyChange > 2 || weeklyChange > 8) return 'MEDIUM';
+    return 'LOW';
+  }
+
+  generateRecommendation(data) {
+    const { changePercent, volume, pe } = data;
+    
+    let score = 0;
+    if (changePercent > 2) score += 1;
+    if (changePercent < -2) score -= 1;
+    if (volume > 1000000) score += 0.5;
+    if (pe && pe < 15) score += 0.5;
+    if (pe && pe > 30) score -= 0.5;
+    
+    if (score > 1) return 'BUY';
+    if (score < -1) return 'SELL';
+    return 'HOLD';
+  }
+
+  // Bulk download method (adapted from Python script)
+  async bulkDownload(symbols, intervals = ['1d'], options = {}) {
+    try {
+      const results = {};
+      const batchSize = options.batchSize || 10;
+      
+      for (let i = 0; i < symbols.length; i += batchSize) {
+        const batch = symbols.slice(i, i + batchSize);
+        
+        for (const symbol of batch) {
+          for (const interval of intervals) {
+            try {
+              const data = await this.getHistoricalData(symbol, interval, options.period || '1mo');
+              if (!results[symbol]) results[symbol] = {};
+              results[symbol][interval] = data;
+            } catch (error) {
+              console.warn(`Failed to download ${symbol} ${interval}:`, error);
+            }
+          }
+        }
+        
+        // Rate limiting (like the Python script)
+        if (i + batchSize < symbols.length) {
+          await new Promise(resolve => setTimeout(resolve, 1000));
+        }
+      }
+      
+      return { success: true, data: results };
+    } catch (error) {
+      return this.handleError(error, 'bulkDownload');
+    }
+  }
+}
+
+export default YFinanceVendor;
\ No newline at end of file
diff --git a/BACKUPS/SECOND_PHASE/vite.config.js b/BACKUPS/SECOND_PHASE/vite.config.js
new file mode 100644
index 000000000..248c2f847
--- /dev/null
+++ b/BACKUPS/SECOND_PHASE/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+})
diff --git a/BACKUPS/restore_phases.md b/BACKUPS/restore_phases.md
new file mode 100644
index 000000000..d30dfb46d
--- /dev/null
+++ b/BACKUPS/restore_phases.md
@@ -0,0 +1,25 @@
+# PHASE RESTORATION GUIDE
+
+## Available Phases:
+
+### FIRST PHASE
+- Basic Trading Dashboard
+- YFinance Integration
+- Read-only Code Viewer
+- **Restore:** `cp -r BACKUPS/FIRST_PHASE/src/ ./`
+
+### SECOND PHASE  
+- All First Phase features
+- Code Editor with Version History
+- Edit/View Toggle
+- **Restore:** `cp -r BACKUPS/SECOND_PHASE/src/ ./`
+
+## Quick Restore Commands:
+
+```bash
+# Restore First Phase (Basic)
+rm -rf src/ && cp -r BACKUPS/FIRST_PHASE/src/ ./
+
+# Restore Second Phase (With Editor)
+rm -rf src/ && cp -r BACKUPS/SECOND_PHASE/src/ ./
+```
\ No newline at end of file
diff --git a/README_VENDOR_INTEGRATION.md b/README_VENDOR_INTEGRATION.md
new file mode 100644
index 000000000..fbaf7dd59
--- /dev/null
+++ b/README_VENDOR_INTEGRATION.md
@@ -0,0 +1,81 @@
+# Vendor Integration Guide
+
+## Adding New Vendors
+
+### 1. Create Vendor Adapter
+
+Create a new file in `src/vendors/YourVendor.js`:
+
+```javascript
+import { BaseVendorAdapter } from '../core/BaseVendorAdapter';
+
+class YourVendor extends BaseVendorAdapter {
+  constructor(config = {}) {
+    super('Your Vendor Name', config);
+  }
+
+  getCapabilities() {
+    return {
+      marketData: true,      // Can fetch market data
+      orderManagement: false, // Cannot place orders
+      portfolio: true,       // Can get portfolio data
+      analytics: false,      // No analytics
+      realtime: true         // Supports real-time data
+    };
+  }
+
+  async connect() {
+    // Your connection logic
+    this.isConnected = true;
+    return { success: true };
+  }
+
+  async getMarketData(symbol) {
+    // Your market data implementation
+    return {
+      success: true,
+      data: { symbol, price: 100, change: 5 }
+    };
+  }
+
+  // Implement other methods as needed
+}
+
+export default YourVendor;
+```
+
+### 2. Register Vendor
+
+In `src/App.jsx`, add your vendor:
+
+```javascript
+import YourVendor from './vendors/YourVendor';
+
+// In useEffect
+VendorManager.registerVendor('yourVendorId', new YourVendor());
+```
+
+### 3. Vendor Capabilities
+
+The UI automatically adapts based on vendor capabilities:
+- Tabs only show if vendor supports the feature
+- Error boundaries prevent crashes
+- Graceful fallbacks for missing features
+
+### 4. API Integration
+
+Each vendor can have completely different:
+- API endpoints
+- Authentication methods
+- Data formats
+- Available features
+
+The BaseVendorAdapter provides error handling and standardized interface.
+
+## Architecture Benefits
+
+- **Fault Isolation**: Vendor failures don't crash the UI
+- **Dynamic Capabilities**: UI adapts to vendor features
+- **Easy Extension**: Add vendors without changing core UI
+- **Consistent Interface**: All vendors use same base methods
+- **Error Recovery**: Built-in retry mechanisms
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9c2f07869..5bb23f603 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
+        "jszip": "^3.10.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "web-vitals": "^3.1.0"
@@ -1892,6 +1893,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -2348,6 +2354,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "node_modules/indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
@@ -2356,6 +2367,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -2805,6 +2821,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -2960,6 +2995,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "node_modules/parse5": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
@@ -3057,6 +3097,11 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3105,6 +3150,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -3185,6 +3249,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -3222,6 +3291,11 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -3312,6 +3386,14 @@
       "integrity": "sha512-vj5lIj3Mwf9D79hBkltk5qmkFI+biIKWS2IBxEyEU3AX1tUf7AoL8nSazCOiiqQsGKIq01SClsKEzweu34uwvA==",
       "dev": true
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -3540,6 +3622,11 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "node_modules/vite": {
       "version": "6.3.6",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
@@ -5041,6 +5128,11 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
+    },
     "css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -5373,11 +5465,21 @@
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
     "indent-string": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
       "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="
     },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
     "is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -5687,6 +5789,25 @@
       "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "dev": true
     },
+    "jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "requires": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -5797,6 +5918,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
     "parse5": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
@@ -5856,6 +5982,11 @@
         }
       }
     },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
     "punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -5890,6 +6021,27 @@
       "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
       "dev": true
     },
+    "readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+        }
+      }
+    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -5951,6 +6103,11 @@
       "integrity": "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==",
       "dev": true
     },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -5980,6 +6137,11 @@
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true
     },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -6056,6 +6218,14 @@
       "integrity": "sha512-vj5lIj3Mwf9D79hBkltk5qmkFI+biIKWS2IBxEyEU3AX1tUf7AoL8nSazCOiiqQsGKIq01SClsKEzweu34uwvA==",
       "dev": true
     },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -6208,6 +6378,11 @@
         "picocolors": "^1.1.1"
       }
     },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "vite": {
       "version": "6.3.6",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz",
diff --git a/package.json b/package.json
index 5e1b6b8c4..ea235da24 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "jszip": "^3.10.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "web-vitals": "^3.1.0"
diff --git a/src/App.css b/src/App.css
index fce9cc9d8..23e932fef 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,31 +1,583 @@
-.App {
+.trading-dashboard {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+}
+
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30px;
+  padding-bottom: 20px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.dashboard-header h1 {
+  margin: 0;
+  color: #333;
+  font-size: 2rem;
+}
+
+.vendor-selector {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  min-width: 150px;
+}
+
+.tab-navigation {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.tab {
+  padding: 12px 24px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  color: #666;
+  border-bottom: 3px solid transparent;
+  transition: all 0.2s ease;
+}
+
+.tab:hover {
+  color: #333;
+  background-color: #f5f5f5;
+}
+
+.tab.active {
+  color: #007acc;
+  border-bottom-color: #007acc;
+}
+
+.dashboard-content {
+  min-height: 400px;
+}
+
+.tab-content {
+  padding: 20px;
+  background: #f9f9f9;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.tab-content h2 {
+  margin-top: 0;
+  color: #333;
+}
+
+.error-boundary {
+  padding: 20px;
+  background: #fff3cd;
+  border: 1px solid #ffeaa7;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.error-boundary h3 {
+  color: #856404;
+  margin-top: 0;
+}
+
+.error-boundary button {
+  padding: 8px 16px;
+  background: #007acc;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.error-boundary button:hover {
+  background: #005a9e;
+}
+
+.fetch-controls, .analytics-controls, .bulk-controls {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  margin-bottom: 20px;
+}
+
+.control-row {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 15px;
+  flex-wrap: wrap;
+}
+
+.control-group {
+  flex: 1;
+  min-width: 150px;
+}
+
+.control-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.control-group input, .control-group select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.control-group input[type="checkbox"] {
+  width: auto;
+  margin-right: 8px;
+}
+
+.fetch-btn {
+  background: #007acc;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.fetch-btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.fetch-btn:hover:not(:disabled) {
+  background: #005a9e;
+}
+
+.quote-display {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.price-info {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin: 10px 0;
+}
+
+.price {
+  font-size: 2rem;
+  font-weight: bold;
+  color: #333;
+}
+
+.change.positive {
+  color: #28a745;
+}
+
+.change.negative {
+  color: #dc3545;
+}
+
+.historical-summary {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 6px;
+  margin-top: 15px;
+}
+
+.historical-summary p {
+  margin: 5px 0;
+  font-size: 14px;
+}
+
+.analytics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 15px;
+  margin-top: 20px;
+}
+
+.metric {
+  background: white;
+  padding: 15px;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.metric label {
+  display: block;
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.metric span {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.volatility.high, .recommendation.sell {
+  color: #dc3545;
+}
+
+.volatility.medium, .recommendation.hold {
+  color: #ffc107;
+}
+
+.volatility.low, .recommendation.buy, .trend.up {
+  color: #28a745;
+}
+
+.trend.down {
+  color: #dc3545;
+}
+
+.bulk-downloader {
+  margin-top: 30px;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.download-results {
+  margin-top: 15px;
+  padding: 10px;
+  background: #d4edda;
+  border: 1px solid #c3e6cb;
+  border-radius: 4px;
+  color: #155724;
+}
+
+.admin-nav {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.admin-btn {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  background: white;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.admin-btn.active {
+  background: #007acc;
+  color: white;
+  border-color: #007acc;
+}
+
+.code-viewer {
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.code-tabs {
+  display: flex;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.code-tab {
+  padding: 12px 20px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-bottom: 3px solid transparent;
+}
+
+.code-tab.active {
+  background: #f8f9fa;
+  border-bottom-color: #007acc;
+}
+
+.code-display {
+  padding: 20px;
+}
+
+.code-block {
+  background: #f8f9fa;
+  padding: 15px;
+  border-radius: 6px;
+  overflow-x: auto;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 13px;
+  line-height: 1.4;
+  border: 1px solid #e9ecef;
+}
+
+.vendor-status {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.status-btn {
+  background: #28a745;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 20px;
+}
+
+.status-grid {
+  display: grid;
+  gap: 15px;
+}
+
+.status-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+
+.status-item label {
+  font-weight: 500;
+}
+
+.connected {
+  color: #28a745;
+}
+
+.disconnected {
+  color: #dc3545;
+}
+
+.capabilities {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.capability {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.capability.enabled {
+  background: #d4edda;
+  color: #155724;
+}
+
+.capability.disabled {
+  background: #f8d7da;
+  color: #721c24;
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.edit-toggle {
+  padding: 6px 12px;
+  border: 1px solid #007acc;
+  background: white;
+  color: #007acc;
+  cursor: pointer;
+  border-radius: 4px;
+  margin: 10px;
+  font-size: 12px;
+}
+
+.edit-toggle.active {
+  background: #007acc;
+  color: white;
+}
+
+.code-editor {
+  background: white;
+}
+
+.editor-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f8f9fa;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.editor-controls {
   display: flex;
-  flex-direction: column;
+  gap: 8px;
+}
+
+.history-btn, .save-btn {
+  padding: 4px 8px;
+  border: 1px solid #ddd;
+  background: white;
+  cursor: pointer;
+  border-radius: 3px;
+  font-size: 11px;
+}
+
+.save-btn {
+  background: #28a745;
+  color: white;
+  border-color: #28a745;
+}
+
+.code-textarea {
+  width: 100%;
+  min-height: 300px;
+  padding: 15px;
+  border: none;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  resize: vertical;
+  outline: none;
+  background: #f8f9fa;
+}
+
+.code-history {
+  background: #fff3cd;
+  padding: 10px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.history-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 8px;
+  margin: 3px 0;
+  background: white;
+  border-radius: 3px;
+  border: 1px solid #e0e0e0;
+}
+
+.history-time {
+  font-size: 11px;
+  color: #666;
+}
+
+.revert-btn {
+  padding: 2px 6px;
+  background: #ffc107;
+  color: #212529;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: 10px;
+}
+
+.code-actions {
+  display: flex;
+  gap: 8px;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+}
+
+.download-btn {
+  padding: 6px 12px;
+  border: 1px solid #28a745;
+  background: white;
+  color: #28a745;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.download-btn:hover {
+  background: #28a745;
+  color: white;
+}
+
+.tree-viewer {
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.tree-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f8f9fa;
+}
+
+.tree-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.tree-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.tree-btn {
+  padding: 6px 12px;
+  border: 1px solid #007acc;
+  background: white;
+  color: #007acc;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.tree-btn:hover {
+  background: #007acc;
+  color: white;
+}
+
+.tree-btn.download {
+  border-color: #28a745;
+  color: #28a745;
+}
+
+.tree-btn.download:hover {
+  background: #28a745;
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.tree-btn:disabled {
+  background: #f8f9fa;
+  color: #ccc;
+  border-color: #ccc;
+  cursor: not-allowed;
 }
 
-.heart {
-  color: #ff0000;
+.tree-display {
+  padding: 20px;
+  max-height: 500px;
+  overflow-y: auto;
 }
 
-.small {
-  font-size: 0.75rem;
+.tree-content {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  margin: 0;
+  white-space: pre;
+  color: #333;
 }
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 8b32d0718..f3a1bf21a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,29 +1,24 @@
+import React, { useEffect } from 'react';
 import './App.css';
+import TradingDashboard from './components/TradingDashboard';
+import VendorManager from './core/VendorManager';
+import ExampleVendorA from './vendors/ExampleVendorA';
+import ExampleVendorB from './vendors/ExampleVendorB';
+import YFinanceVendor from './vendors/YFinanceVendor';
 
 function App() {
+  useEffect(() => {
+    // Register vendors on app startup
+    VendorManager.registerVendor('vendorA', new ExampleVendorA());
+    VendorManager.registerVendor('vendorB', new ExampleVendorB());
+    VendorManager.registerVendor('yfinance', new YFinanceVendor());
+  }, []);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src="Octocat.png" className="App-logo" alt="logo" />
-        <p>
-          GitHub Codespaces <span className="heart">♥️</span> React
-        </p>
-        <p className="small">
-          Edit <code>src/App.jsx</code> and save to reload.
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </p>
-      </header>
+      <TradingDashboard />
     </div>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/AdminComponents.jsx b/src/components/AdminComponents.jsx
new file mode 100644
index 000000000..515e6ab6e
--- /dev/null
+++ b/src/components/AdminComponents.jsx
@@ -0,0 +1,365 @@
+import React, { useState } from 'react';
+import VendorManager from '../core/VendorManager';
+import { CodeEditor } from './CodeEditor';
+
+export const CodeViewer = ({ vendor }) => {
+  const [activeCode, setActiveCode] = useState('fetch');
+  const [editMode, setEditMode] = useState(false);
+  const [customCode, setCustomCode] = useState({});
+  
+  const codeExamples = {
+    fetch: {
+      title: 'Data Fetching Code',
+      code: `// Market Data Fetch
+const fetchMarketData = async (symbol, interval = '1d') => {
+  const url = \`https://query1.finance.yahoo.com/v8/finance/chart/\${symbol}?interval=\${interval}&range=1d\`;
+  const response = await fetch(url);
+  const data = await response.json();
+  return parseYahooResponse(data, symbol);
+};
+
+// Historical Data Fetch
+const fetchHistoricalData = async (symbol, interval, period) => {
+  const url = \`https://query1.finance.yahoo.com/v8/finance/chart/\${symbol}?interval=\${interval}&range=\${period}\`;
+  const response = await fetch(url);
+  const data = await response.json();
+  return parseHistoricalData(data, symbol);
+};
+
+// Bulk Download
+const bulkDownload = async (symbols, intervals, options) => {
+  const results = {};
+  const batchSize = options.batchSize || 10;
+  
+  for (let i = 0; i < symbols.length; i += batchSize) {
+    const batch = symbols.slice(i, i + batchSize);
+    
+    for (const symbol of batch) {
+      for (const interval of intervals) {
+        const data = await fetchHistoricalData(symbol, interval, options.period);
+        if (!results[symbol]) results[symbol] = {};
+        results[symbol][interval] = data;
+      }
+    }
+    
+    // Rate limiting
+    if (i + batchSize < symbols.length) {
+      await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+  }
+  
+  return results;
+};`
+    },
+    parser: {
+      title: 'Data Parser Code',
+      code: `// Yahoo Response Parser
+const parseYahooResponse = (data, symbol) => {
+  const chart = data.chart?.result?.[0];
+  const meta = chart.meta;
+  const quote = chart.indicators?.quote?.[0];
+  
+  return {
+    symbol,
+    price: meta.regularMarketPrice || 0,
+    change: (meta.regularMarketPrice - meta.previousClose) || 0,
+    changePercent: ((meta.regularMarketPrice - meta.previousClose) / meta.previousClose * 100) || 0,
+    volume: meta.regularMarketVolume || 0,
+    high: quote?.high?.[quote.high.length - 1] || meta.regularMarketDayHigh,
+    low: quote?.low?.[quote.low.length - 1] || meta.regularMarketDayLow,
+    open: quote?.open?.[0] || meta.regularMarketDayLow,
+    previousClose: meta.previousClose || 0,
+    timestamp: Date.now()
+  };
+};
+
+// Historical Data Parser
+const parseHistoricalData = (data, symbol) => {
+  const chart = data.chart?.result?.[0];
+  const timestamps = chart.timestamp || [];
+  const quote = chart.indicators?.quote?.[0] || {};
+  
+  return {
+    symbol,
+    data: timestamps.map((ts, i) => ({
+      timestamp: new Date(ts * 1000).toISOString(),
+      open: quote.open?.[i] || null,
+      high: quote.high?.[i] || null,
+      low: quote.low?.[i] || null,
+      close: quote.close?.[i] || null,
+      volume: quote.volume?.[i] || null
+    })).filter(item => item.close !== null)
+  };
+};`
+    },
+    analytics: {
+      title: 'Analytics Code',
+      code: `// Volatility Calculator
+const calculateVolatility = (dailyData, weeklyData) => {
+  const dailyChange = Math.abs(dailyData.changePercent || 0);
+  const weeklyChange = Math.abs(weeklyData.changePercent || 0);
+  
+  if (dailyChange > 5 || weeklyChange > 15) return 'HIGH';
+  if (dailyChange > 2 || weeklyChange > 8) return 'MEDIUM';
+  return 'LOW';
+};
+
+// Recommendation Generator
+const generateRecommendation = (data) => {
+  const { changePercent, volume, pe } = data;
+  
+  let score = 0;
+  if (changePercent > 2) score += 1;
+  if (changePercent < -2) score -= 1;
+  if (volume > 1000000) score += 0.5;
+  if (pe && pe < 15) score += 0.5;
+  if (pe && pe > 30) score -= 0.5;
+  
+  if (score > 1) return 'BUY';
+  if (score < -1) return 'SELL';
+  return 'HOLD';
+};
+
+// Analytics Fetch
+const getAnalytics = async (symbol, timeframe = '1mo') => {
+  const [daily, weekly] = await Promise.all([
+    getMarketData(symbol, '1d'),
+    getMarketData(symbol, '1wk')
+  ]);
+
+  return {
+    symbol,
+    price: daily.data.price,
+    change: daily.data.change,
+    changePercent: daily.data.changePercent,
+    volume: daily.data.volume,
+    volatility: calculateVolatility(daily.data, weekly.data),
+    weeklyTrend: weekly.data.change > 0 ? 'UP' : 'DOWN',
+    recommendation: generateRecommendation(daily.data)
+  };
+};`
+    },
+    vendor: {
+      title: 'Vendor Adapter Code',
+      code: `// YFinance Vendor Class
+class YFinanceVendor extends BaseVendorAdapter {
+  constructor(config = {}) {
+    super('Yahoo Finance', {
+      baseUrl: 'https://query1.finance.yahoo.com/v8/finance/chart/',
+      intervals: ['1m', '2m', '5m', '15m', '30m', '60m', '90m', '1h', '1d', '5d', '1wk', '1mo', '3mo'],
+      ...config
+    });
+    this.cache = new Map();
+    this.cacheTimeout = 30000; // 30 seconds
+  }
+
+  getCapabilities() {
+    return {
+      marketData: true,
+      orderManagement: false,
+      portfolio: false,
+      analytics: true,
+      realtime: true
+    };
+  }
+
+  async connect() {
+    try {
+      const testResult = await this.getMarketData('AAPL');
+      this.isConnected = testResult.success;
+      return { success: this.isConnected };
+    } catch (error) {
+      return this.handleError(error, 'connect');
+    }
+  }
+
+  async getMarketData(symbol, interval = '1d') {
+    try {
+      const cacheKey = \`\${symbol}_\${interval}\`;
+      const cached = this.cache.get(cacheKey);
+      
+      if (cached && Date.now() - cached.timestamp < this.cacheTimeout) {
+        return { success: true, data: cached.data };
+      }
+
+      const url = \`\${this.config.baseUrl}\${symbol}?interval=\${interval}&range=1d\`;
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        throw new Error(\`HTTP \${response.status}: \${response.statusText}\`);
+      }
+
+      const data = await response.json();
+      const result = this.parseYahooResponse(data, symbol);
+      
+      this.cache.set(cacheKey, {
+        data: result,
+        timestamp: Date.now()
+      });
+
+      return { success: true, data: result };
+    } catch (error) {
+      return this.handleError(error, 'getMarketData');
+    }
+  }
+}`
+    }
+  };
+
+  const handleCodeSave = (code) => {
+    setCustomCode(prev => ({
+      ...prev,
+      [activeCode]: code
+    }));
+  };
+
+  const getCurrentCode = () => {
+    return customCode[activeCode] || codeExamples[activeCode].code;
+  };
+
+  const downloadCode = (codeType) => {
+    const code = getCurrentCode();
+    const filename = `${codeType}_code.js`;
+    const blob = new Blob([code], { type: 'text/javascript' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadBundle = () => {
+    const bundle = Object.entries(codeExamples).map(([key, example]) => {
+      const code = customCode[key] || example.code;
+      return `// ========== ${example.title} ==========\n${code}\n\n`;
+    }).join('');
+    
+    const filename = `trading_dashboard_bundle.js`;
+    const blob = new Blob([bundle], { type: 'text/javascript' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="code-viewer">
+      <div className="code-header">
+        <div className="code-tabs">
+          {Object.entries(codeExamples).map(([key, example]) => (
+            <button
+              key={key}
+              className={`code-tab ${activeCode === key ? 'active' : ''}`}
+              onClick={() => setActiveCode(key)}
+            >
+              {example.title}
+            </button>
+          ))}
+        </div>
+        <div className="code-actions">
+          <button 
+            onClick={() => setEditMode(!editMode)}
+            className={`edit-toggle ${editMode ? 'active' : ''}`}
+          >
+            {editMode ? 'View' : 'Edit'}
+          </button>
+          <button 
+            onClick={() => downloadCode(activeCode)}
+            className="download-btn"
+          >
+            Download
+          </button>
+          <button 
+            onClick={downloadBundle}
+            className="download-btn"
+          >
+            Bundle
+          </button>
+        </div>
+      </div>
+      
+      <div className="code-display">
+        {editMode ? (
+          <CodeEditor
+            initialCode={getCurrentCode()}
+            title={codeExamples[activeCode].title}
+            onSave={handleCodeSave}
+          />
+        ) : (
+          <div>
+            <h4>{codeExamples[activeCode].title}</h4>
+            <pre className="code-block">
+              <code>{getCurrentCode()}</code>
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const VendorStatus = ({ vendor }) => {
+  const [status, setStatus] = useState(null);
+  
+  const checkStatus = async () => {
+    try {
+      const vendorInstance = VendorManager.getVendor(vendor);
+      const capabilities = VendorManager.getVendorCapabilities(vendor);
+      
+      setStatus({
+        name: vendorInstance?.name || 'Unknown',
+        connected: vendorInstance?.isConnected || false,
+        capabilities,
+        cacheSize: vendorInstance?.cache?.size || 0
+      });
+    } catch (error) {
+      setStatus({ error: error.message });
+    }
+  };
+
+  return (
+    <div className="vendor-status">
+      <button onClick={checkStatus} className="status-btn">
+        Check Vendor Status
+      </button>
+      
+      {status && (
+        <div className="status-display">
+          {status.error ? (
+            <div className="error">Error: {status.error}</div>
+          ) : (
+            <div className="status-grid">
+              <div className="status-item">
+                <label>Vendor Name:</label>
+                <span>{status.name}</span>
+              </div>
+              <div className="status-item">
+                <label>Connection:</label>
+                <span className={status.connected ? 'connected' : 'disconnected'}>
+                  {status.connected ? 'Connected' : 'Disconnected'}
+                </span>
+              </div>
+              <div className="status-item">
+                <label>Cache Size:</label>
+                <span>{status.cacheSize} items</span>
+              </div>
+              <div className="status-item">
+                <label>Capabilities:</label>
+                <div className="capabilities">
+                  {Object.entries(status.capabilities).map(([cap, enabled]) => (
+                    <span key={cap} className={`capability ${enabled ? 'enabled' : 'disabled'}`}>
+                      {cap}: {enabled ? '✓' : '✗'}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/CodeEditor.jsx b/src/components/CodeEditor.jsx
new file mode 100644
index 000000000..c499444bf
--- /dev/null
+++ b/src/components/CodeEditor.jsx
@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+
+export const CodeEditor = ({ initialCode, title, onSave }) => {
+  const [code, setCode] = useState(initialCode);
+  const [history, setHistory] = useState([]);
+  const [showHistory, setShowHistory] = useState(false);
+
+  useEffect(() => {
+    setCode(initialCode);
+  }, [initialCode]);
+
+  const saveCode = () => {
+    const newVersion = {
+      code,
+      timestamp: new Date().toISOString(),
+      id: Date.now()
+    };
+    
+    const newHistory = [newVersion, ...history].slice(0, 5);
+    setHistory(newHistory);
+    
+    if (onSave) onSave(code);
+  };
+
+  const revertToVersion = (version) => {
+    setCode(version.code);
+    setShowHistory(false);
+  };
+
+  return (
+    <div className="code-editor">
+      <div className="editor-header">
+        <h4>{title}</h4>
+        <div className="editor-controls">
+          <button onClick={() => setShowHistory(!showHistory)} className="history-btn">
+            History ({history.length})
+          </button>
+          <button onClick={saveCode} className="save-btn">
+            Save
+          </button>
+        </div>
+      </div>
+
+      {showHistory && (
+        <div className="code-history">
+          <h5>Version History (Last 5)</h5>
+          {history.length === 0 ? (
+            <p>No saved versions yet</p>
+          ) : (
+            history.map((version) => (
+              <div key={version.id} className="history-item">
+                <span className="history-time">
+                  {new Date(version.timestamp).toLocaleString()}
+                </span>
+                <button 
+                  onClick={() => revertToVersion(version)}
+                  className="revert-btn"
+                >
+                  Revert
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      )}
+
+      <textarea
+        value={code}
+        onChange={(e) => setCode(e.target.value)}
+        className="code-textarea"
+        spellCheck={false}
+      />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx
new file mode 100644
index 000000000..9028075a8
--- /dev/null
+++ b/src/components/ErrorBoundary.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="error-boundary">
+          <h3>Something went wrong</h3>
+          <p>{this.props.fallbackMessage || 'This section is temporarily unavailable'}</p>
+          <button onClick={() => this.setState({ hasError: false, error: null })}>
+            Retry
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/src/components/TradingDashboard.jsx b/src/components/TradingDashboard.jsx
new file mode 100644
index 000000000..3b2e7b934
--- /dev/null
+++ b/src/components/TradingDashboard.jsx
@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import ErrorBoundary from './ErrorBoundary';
+import VendorManager from '../core/VendorManager';
+import { YFinanceMarketData, YFinanceAnalytics, YFinanceBulkDownloader } from './YFinanceComponents';
+import { CodeViewer, VendorStatus } from './AdminComponents';
+import { TreeViewer } from './TreeViewer';
+
+const TradingDashboard = () => {
+  const [activeTab, setActiveTab] = useState('market');
+  const [vendors, setVendors] = useState([]);
+  const [selectedVendor, setSelectedVendor] = useState('');
+
+  useEffect(() => {
+    setVendors(VendorManager.getAllVendors());
+    if (VendorManager.getAllVendors().length > 0) {
+      setSelectedVendor(VendorManager.getAllVendors()[0]);
+    }
+  }, []);
+
+  const tabs = [
+    { id: 'market', label: 'Market Data', capability: 'marketData' },
+    { id: 'orders', label: 'Orders', capability: 'orderManagement' },
+    { id: 'portfolio', label: 'Portfolio', capability: 'portfolio' },
+    { id: 'analytics', label: 'Analytics', capability: 'analytics' },
+    { id: 'admin', label: 'Admin', capability: 'admin' }
+  ];
+
+  const getAvailableTabs = () => {
+    if (!selectedVendor) return [];
+    const capabilities = VendorManager.getVendorCapabilities(selectedVendor);
+    return tabs.filter(tab => tab.capability === 'admin' || capabilities[tab.capability]);
+  };
+
+  const renderTabContent = () => {
+    const availableTabs = getAvailableTabs();
+    const currentTab = availableTabs.find(tab => tab.id === activeTab);
+    
+    if (!currentTab) {
+      return <div className="tab-content">Feature not available for selected vendor</div>;
+    }
+
+    switch (activeTab) {
+      case 'market':
+        return <MarketDataTab vendor={selectedVendor} />;
+      case 'orders':
+        return <OrdersTab vendor={selectedVendor} />;
+      case 'portfolio':
+        return <PortfolioTab vendor={selectedVendor} />;
+      case 'analytics':
+        return <AnalyticsTab vendor={selectedVendor} />;
+      case 'admin':
+        return <AdminTab vendor={selectedVendor} />;
+      default:
+        return <div className="tab-content">Select a tab</div>;
+    }
+  };
+
+  return (
+    <div className="trading-dashboard">
+      <header className="dashboard-header">
+        <h1>Trading Dashboard</h1>
+        <select 
+          value={selectedVendor} 
+          onChange={(e) => setSelectedVendor(e.target.value)}
+          className="vendor-selector"
+        >
+          <option value="">Select Vendor</option>
+          {vendors.map(vendor => (
+            <option key={vendor} value={vendor}>{vendor}</option>
+          ))}
+        </select>
+      </header>
+
+      <nav className="tab-navigation">
+        {getAvailableTabs().map(tab => (
+          <button
+            key={tab.id}
+            className={`tab ${activeTab === tab.id ? 'active' : ''}`}
+            onClick={() => setActiveTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </nav>
+
+      <main className="dashboard-content">
+        <ErrorBoundary fallbackMessage="This tab is temporarily unavailable">
+          {renderTabContent()}
+        </ErrorBoundary>
+      </main>
+    </div>
+  );
+};
+
+const MarketDataTab = ({ vendor }) => {
+  if (vendor === 'yfinance') {
+    return (
+      <div className="tab-content">
+        <h2>Market Data - Yahoo Finance</h2>
+        <YFinanceMarketData vendor={vendor} />
+      </div>
+    );
+  }
+  return (
+    <div className="tab-content">
+      <h2>Market Data - {vendor}</h2>
+      <p>Market data functionality for {vendor}</p>
+    </div>
+  );
+};
+
+const OrdersTab = ({ vendor }) => (
+  <div className="tab-content">
+    <h2>Order Management - {vendor}</h2>
+    <p>Order management functionality for {vendor}</p>
+  </div>
+);
+
+const PortfolioTab = ({ vendor }) => (
+  <div className="tab-content">
+    <h2>Portfolio - {vendor}</h2>
+    <p>Portfolio functionality for {vendor}</p>
+  </div>
+);
+
+const AnalyticsTab = ({ vendor }) => {
+  if (vendor === 'yfinance') {
+    return (
+      <div className="tab-content">
+        <h2>Analytics - Yahoo Finance</h2>
+        <YFinanceAnalytics vendor={vendor} />
+        <YFinanceBulkDownloader vendor={vendor} />
+      </div>
+    );
+  }
+  return (
+    <div className="tab-content">
+      <h2>Analytics - {vendor}</h2>
+      <p>Analytics functionality for {vendor}</p>
+    </div>
+  );
+};
+
+const AdminTab = ({ vendor }) => {
+  const [activeAdmin, setActiveAdmin] = useState('code');
+  
+  return (
+    <div className="tab-content">
+      <h2>Admin - {vendor}</h2>
+      <div className="admin-nav">
+        <button 
+          className={`admin-btn ${activeAdmin === 'code' ? 'active' : ''}`}
+          onClick={() => setActiveAdmin('code')}
+        >
+          Code
+        </button>
+        <button 
+          className={`admin-btn ${activeAdmin === 'status' ? 'active' : ''}`}
+          onClick={() => setActiveAdmin('status')}
+        >
+          Status
+        </button>
+        <button 
+          className={`admin-btn ${activeAdmin === 'tree' ? 'active' : ''}`}
+          onClick={() => setActiveAdmin('tree')}
+        >
+          Tree
+        </button>
+      </div>
+      
+      {activeAdmin === 'code' && <CodeViewer vendor={vendor} />}
+      {activeAdmin === 'status' && <VendorStatus vendor={vendor} />}
+      {activeAdmin === 'tree' && <TreeViewer />}
+    </div>
+  );
+};
+
+export default TradingDashboard;
\ No newline at end of file
diff --git a/src/components/TreeViewer.jsx b/src/components/TreeViewer.jsx
new file mode 100644
index 000000000..bbf9932b7
--- /dev/null
+++ b/src/components/TreeViewer.jsx
@@ -0,0 +1,198 @@
+import React, { useState, useEffect } from 'react';
+import JSZip from 'jszip';
+
+export const TreeViewer = () => {
+  const [treeData, setTreeData] = useState('');
+  const [includeFiles, setIncludeFiles] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const generateTree = async () => {
+    setLoading(true);
+    try {
+      const tree = await buildProjectTree(includeFiles);
+      setTreeData(tree);
+    } catch (error) {
+      setTreeData(`Error generating tree: ${error.message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const buildProjectTree = async (withFiles) => {
+    const structure = {
+      'src/': {
+        'core/': {
+          'VendorManager.js': withFiles ? await fetchFileContent('/src/core/VendorManager.js') : null,
+          'BaseVendorAdapter.js': withFiles ? await fetchFileContent('/src/core/BaseVendorAdapter.js') : null
+        },
+        'vendors/': {
+          'YFinanceVendor.js': withFiles ? await fetchFileContent('/src/vendors/YFinanceVendor.js') : null,
+          'ExampleVendorA.js': withFiles ? await fetchFileContent('/src/vendors/ExampleVendorA.js') : null,
+          'ExampleVendorB.js': withFiles ? await fetchFileContent('/src/vendors/ExampleVendorB.js') : null,
+          'VendorTemplate.js': withFiles ? await fetchFileContent('/src/vendors/VendorTemplate.js') : null
+        },
+        'components/': {
+          'TradingDashboard.jsx': withFiles ? await fetchFileContent('/src/components/TradingDashboard.jsx') : null,
+          'YFinanceComponents.jsx': withFiles ? await fetchFileContent('/src/components/YFinanceComponents.jsx') : null,
+          'AdminComponents.jsx': withFiles ? await fetchFileContent('/src/components/AdminComponents.jsx') : null,
+          'CodeEditor.jsx': withFiles ? await fetchFileContent('/src/components/CodeEditor.jsx') : null,
+          'ErrorBoundary.jsx': withFiles ? await fetchFileContent('/src/components/ErrorBoundary.jsx') : null
+        },
+        'utils/': {
+          'VendorRegistry.js': withFiles ? await fetchFileContent('/src/utils/VendorRegistry.js') : null
+        },
+        'App.jsx': withFiles ? await fetchFileContent('/src/App.jsx') : null,
+        'App.css': withFiles ? await fetchFileContent('/src/App.css') : null,
+        'index.jsx': withFiles ? await fetchFileContent('/src/index.jsx') : null
+      },
+      'public/': {
+        'index.html': null,
+        'favicon.ico': null
+      },
+      'package.json': withFiles ? await fetchFileContent('/package.json') : null,
+      'vite.config.js': withFiles ? await fetchFileContent('/vite.config.js') : null,
+      'README.md': null
+    };
+
+    return formatTree(structure, '', withFiles);
+  };
+
+  const fetchFileContent = async (path) => {
+    try {
+      const response = await fetch(path);
+      if (response.ok) {
+        return await response.text();
+      }
+    } catch (error) {
+      return `// Error loading file: ${error.message}`;
+    }
+    return null;
+  };
+
+  const formatTree = (obj, prefix = '', withFiles = false, isLast = true) => {
+    let result = '';
+    const entries = Object.entries(obj);
+    
+    entries.forEach(([key, value], index) => {
+      const isLastItem = index === entries.length - 1;
+      const connector = isLastItem ? '└── ' : '├── ';
+      const nextPrefix = prefix + (isLastItem ? '    ' : '│   ');
+      
+      result += `${prefix}${connector}${key}\n`;
+      
+      if (value && typeof value === 'object' && !Array.isArray(value)) {
+        result += formatTree(value, nextPrefix, withFiles, isLastItem);
+      } else if (withFiles && value && typeof value === 'string') {
+        const fileLines = value.split('\n');
+        const preview = fileLines.slice(0, 3).join('\n');
+        result += `${nextPrefix}┌─ Content (${fileLines.length} lines):\n`;
+        result += `${nextPrefix}│  ${preview.replace(/\n/g, `\n${nextPrefix}│  `)}\n`;
+        if (fileLines.length > 3) {
+          result += `${nextPrefix}│  ...\n`;
+        }
+        result += `${nextPrefix}└─\n`;
+      }
+    });
+    
+    return result;
+  };
+
+  const downloadTree = () => {
+    const filename = includeFiles ? 'project_tree_with_files.txt' : 'project_tree.txt';
+    const blob = new Blob([treeData], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const downloadZip = async () => {
+    setLoading(true);
+    try {
+      const zip = new JSZip();
+      
+      // Add project structure files
+      const files = {
+        'src/core/VendorManager.js': await fetchFileContent('/src/core/VendorManager.js'),
+        'src/core/BaseVendorAdapter.js': await fetchFileContent('/src/core/BaseVendorAdapter.js'),
+        'src/vendors/YFinanceVendor.js': await fetchFileContent('/src/vendors/YFinanceVendor.js'),
+        'src/vendors/ExampleVendorA.js': await fetchFileContent('/src/vendors/ExampleVendorA.js'),
+        'src/vendors/ExampleVendorB.js': await fetchFileContent('/src/vendors/ExampleVendorB.js'),
+        'src/vendors/VendorTemplate.js': await fetchFileContent('/src/vendors/VendorTemplate.js'),
+        'src/components/TradingDashboard.jsx': await fetchFileContent('/src/components/TradingDashboard.jsx'),
+        'src/components/YFinanceComponents.jsx': await fetchFileContent('/src/components/YFinanceComponents.jsx'),
+        'src/components/AdminComponents.jsx': await fetchFileContent('/src/components/AdminComponents.jsx'),
+        'src/components/CodeEditor.jsx': await fetchFileContent('/src/components/CodeEditor.jsx'),
+        'src/components/ErrorBoundary.jsx': await fetchFileContent('/src/components/ErrorBoundary.jsx'),
+        'src/components/TreeViewer.jsx': await fetchFileContent('/src/components/TreeViewer.jsx'),
+        'src/utils/VendorRegistry.js': await fetchFileContent('/src/utils/VendorRegistry.js'),
+        'src/App.jsx': await fetchFileContent('/src/App.jsx'),
+        'src/App.css': await fetchFileContent('/src/App.css'),
+        'src/index.jsx': await fetchFileContent('/src/index.jsx'),
+        'package.json': await fetchFileContent('/package.json'),
+        'vite.config.js': await fetchFileContent('/vite.config.js'),
+        'README.md': await fetchFileContent('/README.md')
+      };
+
+      // Add tree structure
+      zip.file('PROJECT_STRUCTURE.txt', treeData);
+      
+      // Add all files to zip
+      Object.entries(files).forEach(([path, content]) => {
+        if (content) {
+          zip.file(path, content);
+        }
+      });
+
+      const zipBlob = await zip.generateAsync({ type: 'blob' });
+      const url = URL.createObjectURL(zipBlob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'trading_dashboard_project.zip';
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Error creating zip:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    generateTree();
+  }, []);
+
+  return (
+    <div className="tree-viewer">
+      <div className="tree-controls">
+        <label className="tree-option">
+          <input
+            type="checkbox"
+            checked={includeFiles}
+            onChange={(e) => setIncludeFiles(e.target.checked)}
+          />
+          Include file contents
+        </label>
+        <div className="tree-actions">
+          <button onClick={generateTree} disabled={loading} className="tree-btn">
+            {loading ? 'Generating...' : 'Refresh Tree'}
+          </button>
+          <button onClick={downloadTree} disabled={!treeData} className="tree-btn download">
+            Download Tree
+          </button>
+          {includeFiles && (
+            <button onClick={downloadZip} disabled={!treeData || loading} className="tree-btn zip">
+              Download ZIP
+            </button>
+          )}
+        </div>
+      </div>
+      
+      <div className="tree-display">
+        <pre className="tree-content">{treeData || 'Generating tree structure...'}</pre>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/YFinanceComponents.jsx b/src/components/YFinanceComponents.jsx
new file mode 100644
index 000000000..a9ece5aec
--- /dev/null
+++ b/src/components/YFinanceComponents.jsx
@@ -0,0 +1,339 @@
+import React, { useState, useEffect } from 'react';
+import VendorManager from '../core/VendorManager';
+
+export const YFinanceMarketData = ({ vendor }) => {
+  const [symbol, setSymbol] = useState('AAPL');
+  const [assetType, setAssetType] = useState('stocks');
+  const [interval, setInterval] = useState('1d');
+  const [period, setPeriod] = useState('1mo');
+  const [customStart, setCustomStart] = useState('');
+  const [customEnd, setCustomEnd] = useState('');
+  const [useCustomRange, setUseCustomRange] = useState(false);
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const assetTypes = {
+    stocks: { label: 'Stocks', examples: 'AAPL, GOOGL, MSFT' },
+    forex: { label: 'Forex', examples: 'EURUSD=X, GBPUSD=X, USDJPY=X' },
+    crypto: { label: 'Crypto', examples: 'BTC-USD, ETH-USD, ADA-USD' },
+    commodities: { label: 'Commodities', examples: 'GC=F, CL=F, SI=F' },
+    indices: { label: 'Indices', examples: '^GSPC, ^DJI, ^IXIC' }
+  };
+
+  const intervals = ['1m', '2m', '5m', '15m', '30m', '60m', '90m', '1h', '1d', '5d', '1wk', '1mo', '3mo'];
+  const periods = ['1d', '5d', '1mo', '3mo', '6mo', '1y', '2y', '5y', '10y', 'ytd', 'max'];
+
+  const fetchData = async () => {
+    if (!symbol.trim()) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const fetchParams = {
+        symbol: symbol.toUpperCase(),
+        interval,
+        period: useCustomRange ? null : period,
+        start: useCustomRange ? customStart : null,
+        end: useCustomRange ? customEnd : null
+      };
+
+      const result = useCustomRange || period !== '1d' 
+        ? await VendorManager.executeVendorMethod(vendor, 'getHistoricalData', fetchParams.symbol, fetchParams.interval, fetchParams.period || '1mo')
+        : await VendorManager.executeVendorMethod(vendor, 'getMarketData', fetchParams.symbol, fetchParams.interval);
+        
+      if (result.success) {
+        setData(result.data);
+      } else {
+        setError(result.error);
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="yfinance-market-data">
+      <div className="fetch-controls">
+        <div className="control-row">
+          <div className="control-group">
+            <label>Asset Type:</label>
+            <select value={assetType} onChange={(e) => setAssetType(e.target.value)}>
+              {Object.entries(assetTypes).map(([key, type]) => (
+                <option key={key} value={key}>{type.label}</option>
+              ))}
+            </select>
+          </div>
+          <div className="control-group">
+            <label>Symbol:</label>
+            <input
+              type="text"
+              value={symbol}
+              onChange={(e) => setSymbol(e.target.value)}
+              placeholder={assetTypes[assetType].examples}
+              onKeyPress={(e) => e.key === 'Enter' && fetchData()}
+            />
+          </div>
+        </div>
+        
+        <div className="control-row">
+          <div className="control-group">
+            <label>Interval:</label>
+            <select value={interval} onChange={(e) => setInterval(e.target.value)}>
+              {intervals.map(int => (
+                <option key={int} value={int}>{int}</option>
+              ))}
+            </select>
+          </div>
+          <div className="control-group">
+            <label>
+              <input
+                type="checkbox"
+                checked={useCustomRange}
+                onChange={(e) => setUseCustomRange(e.target.checked)}
+              />
+              Custom Date Range
+            </label>
+          </div>
+        </div>
+
+        {useCustomRange ? (
+          <div className="control-row">
+            <div className="control-group">
+              <label>Start Date:</label>
+              <input
+                type="date"
+                value={customStart}
+                onChange={(e) => setCustomStart(e.target.value)}
+              />
+            </div>
+            <div className="control-group">
+              <label>End Date:</label>
+              <input
+                type="date"
+                value={customEnd}
+                onChange={(e) => setCustomEnd(e.target.value)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="control-row">
+            <div className="control-group">
+              <label>Period:</label>
+              <select value={period} onChange={(e) => setPeriod(e.target.value)}>
+                {periods.map(per => (
+                  <option key={per} value={per}>{per}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+        )}
+
+        <button className="fetch-btn" onClick={fetchData} disabled={loading}>
+          {loading ? 'Fetching...' : 'Fetch Data'}
+        </button>
+      </div>
+
+      {error && <div className="error">Error: {error}</div>}
+      
+      {data && (
+        <div className="quote-display">
+          <h3>{data.symbol}</h3>
+          {data.price ? (
+            <div className="price-info">
+              <span className="price">${data.price?.toFixed(2)}</span>
+              <span className={`change ${data.change >= 0 ? 'positive' : 'negative'}`}>
+                {data.change >= 0 ? '+' : ''}{data.change?.toFixed(2)} 
+                ({data.changePercent?.toFixed(2)}%)
+              </span>
+            </div>
+          ) : null}
+          {data.data && (
+            <div className="historical-summary">
+              <p>Historical data: {data.data.length} records</p>
+              <p>Latest: ${data.data[data.data.length - 1]?.close?.toFixed(2)}</p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const YFinanceAnalytics = ({ vendor }) => {
+  const [symbol, setSymbol] = useState('AAPL');
+  const [timeframe, setTimeframe] = useState('1mo');
+  const [analytics, setAnalytics] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const timeframes = ['1d', '5d', '1mo', '3mo', '6mo', '1y', '2y'];
+
+  const fetchAnalytics = async () => {
+    if (!symbol.trim()) return;
+    
+    setLoading(true);
+    try {
+      const result = await VendorManager.executeVendorMethod(vendor, 'getAnalytics', symbol.toUpperCase(), timeframe);
+      if (result.success) {
+        setAnalytics(result.data);
+      }
+    } catch (err) {
+      console.error('Analytics error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="yfinance-analytics">
+      <div className="analytics-controls">
+        <div className="control-group">
+          <label>Symbol:</label>
+          <input
+            type="text"
+            value={symbol}
+            onChange={(e) => setSymbol(e.target.value)}
+            placeholder="Enter symbol for analysis"
+            onKeyPress={(e) => e.key === 'Enter' && fetchAnalytics()}
+          />
+        </div>
+        <div className="control-group">
+          <label>Analysis Period:</label>
+          <select value={timeframe} onChange={(e) => setTimeframe(e.target.value)}>
+            {timeframes.map(tf => (
+              <option key={tf} value={tf}>{tf}</option>
+            ))}
+          </select>
+        </div>
+        <button className="fetch-btn" onClick={fetchAnalytics} disabled={loading}>
+          {loading ? 'Analyzing...' : 'Fetch Analytics'}
+        </button>
+      </div>
+
+      {analytics && (
+        <div className="analytics-display">
+          <h3>Analysis for {analytics.symbol} ({timeframe})</h3>
+          <div className="analytics-grid">
+            <div className="metric">
+              <label>Current Price</label>
+              <span>${analytics.price?.toFixed(2)}</span>
+            </div>
+            <div className="metric">
+              <label>Volatility</label>
+              <span className={`volatility ${analytics.volatility?.toLowerCase()}`}>
+                {analytics.volatility}
+              </span>
+            </div>
+            <div className="metric">
+              <label>Trend ({timeframe})</label>
+              <span className={`trend ${analytics.weeklyTrend?.toLowerCase()}`}>
+                {analytics.weeklyTrend}
+              </span>
+            </div>
+            <div className="metric">
+              <label>Recommendation</label>
+              <span className={`recommendation ${analytics.recommendation?.toLowerCase()}`}>
+                {analytics.recommendation}
+              </span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const YFinanceBulkDownloader = ({ vendor }) => {
+  const [symbols, setSymbols] = useState('AAPL,GOOGL,MSFT');
+  const [intervals, setIntervals] = useState(['1d']);
+  const [period, setPeriod] = useState('1mo');
+  const [batchSize, setBatchSize] = useState(5);
+  const [downloading, setDownloading] = useState(false);
+  const [results, setResults] = useState(null);
+
+  const availableIntervals = ['1m', '5m', '15m', '1h', '1d', '1wk', '1mo'];
+  const periods = ['1d', '5d', '1mo', '3mo', '6mo', '1y', '2y', '5y', 'max'];
+
+  const handleBulkDownload = async () => {
+    const symbolList = symbols.split(',').map(s => s.trim().toUpperCase()).filter(s => s);
+    if (symbolList.length === 0) return;
+
+    setDownloading(true);
+    try {
+      const result = await VendorManager.executeVendorMethod(
+        vendor, 
+        'bulkDownload', 
+        symbolList, 
+        intervals,
+        { period, batchSize }
+      );
+      setResults(result);
+    } catch (err) {
+      console.error('Bulk download error:', err);
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  return (
+    <div className="bulk-downloader">
+      <h4>Bulk Historical Data Download</h4>
+      <div className="bulk-controls">
+        <div className="control-group">
+          <label>Symbols (comma-separated):</label>
+          <input
+            type="text"
+            value={symbols}
+            onChange={(e) => setSymbols(e.target.value)}
+            placeholder="AAPL,GOOGL,MSFT,BTC-USD,EURUSD=X"
+          />
+        </div>
+        <div className="control-row">
+          <div className="control-group">
+            <label>Intervals:</label>
+            <select 
+              multiple 
+              value={intervals} 
+              onChange={(e) => setIntervals([...e.target.selectedOptions].map(o => o.value))}
+            >
+              {availableIntervals.map(int => (
+                <option key={int} value={int}>{int}</option>
+              ))}
+            </select>
+          </div>
+          <div className="control-group">
+            <label>Period:</label>
+            <select value={period} onChange={(e) => setPeriod(e.target.value)}>
+              {periods.map(per => (
+                <option key={per} value={per}>{per}</option>
+              ))}
+            </select>
+          </div>
+          <div className="control-group">
+            <label>Batch Size:</label>
+            <input
+              type="number"
+              value={batchSize}
+              onChange={(e) => setBatchSize(parseInt(e.target.value))}
+              min="1"
+              max="50"
+            />
+          </div>
+        </div>
+      </div>
+      <button className="fetch-btn" onClick={handleBulkDownload} disabled={downloading}>
+        {downloading ? 'Downloading...' : 'Download Data'}
+      </button>
+      
+      {results && (
+        <div className="download-results">
+          <h5>Download Complete</h5>
+          <p>Downloaded data for {Object.keys(results.data || {}).length} symbols</p>
+        </div>
+      )}
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/core/BaseVendorAdapter.js b/src/core/BaseVendorAdapter.js
new file mode 100644
index 000000000..f5f979cd7
--- /dev/null
+++ b/src/core/BaseVendorAdapter.js
@@ -0,0 +1,51 @@
+export class BaseVendorAdapter {
+  constructor(name, config = {}) {
+    this.name = name;
+    this.config = config;
+    this.isConnected = false;
+  }
+
+  getCapabilities() {
+    return {
+      marketData: false,
+      orderManagement: false,
+      portfolio: false,
+      analytics: false,
+      realtime: false
+    };
+  }
+
+  async connect() {
+    throw new Error('connect() must be implemented by vendor adapter');
+  }
+
+  async disconnect() {
+    this.isConnected = false;
+  }
+
+  async getMarketData(symbol) {
+    throw new Error('getMarketData() not implemented');
+  }
+
+  async placeOrder(orderData) {
+    throw new Error('placeOrder() not implemented');
+  }
+
+  async getPortfolio() {
+    throw new Error('getPortfolio() not implemented');
+  }
+
+  async getAnalytics(symbol) {
+    throw new Error('getAnalytics() not implemented');
+  }
+
+  handleError(error, context) {
+    console.error(`${this.name} Error in ${context}:`, error);
+    return {
+      success: false,
+      error: error.message,
+      vendor: this.name,
+      context
+    };
+  }
+}
\ No newline at end of file
diff --git a/src/core/VendorManager.js b/src/core/VendorManager.js
new file mode 100644
index 000000000..b4bafabc8
--- /dev/null
+++ b/src/core/VendorManager.js
@@ -0,0 +1,54 @@
+class VendorManager {
+  constructor() {
+    this.vendors = new Map();
+    this.capabilities = new Map();
+  }
+
+  registerVendor(vendorId, vendorAdapter) {
+    try {
+      if (!vendorAdapter.name || !vendorAdapter.getCapabilities) {
+        throw new Error(`Invalid vendor adapter for ${vendorId}`);
+      }
+
+      this.vendors.set(vendorId, vendorAdapter);
+      this.capabilities.set(vendorId, vendorAdapter.getCapabilities());
+      return true;
+    } catch (error) {
+      console.error(`Failed to register vendor ${vendorId}:`, error);
+      return false;
+    }
+  }
+
+  getVendor(vendorId) {
+    return this.vendors.get(vendorId);
+  }
+
+  getVendorCapabilities(vendorId) {
+    return this.capabilities.get(vendorId) || {};
+  }
+
+  getAllVendors() {
+    return Array.from(this.vendors.keys());
+  }
+
+  getVendorsWithCapability(capability) {
+    return Array.from(this.vendors.keys()).filter(vendorId => 
+      this.getVendorCapabilities(vendorId)[capability]
+    );
+  }
+
+  async executeVendorMethod(vendorId, method, ...args) {
+    try {
+      const vendor = this.getVendor(vendorId);
+      if (!vendor || !vendor[method]) {
+        throw new Error(`Method ${method} not available for vendor ${vendorId}`);
+      }
+      return await vendor[method](...args);
+    } catch (error) {
+      console.error(`Error executing ${method} for vendor ${vendorId}:`, error);
+      throw error;
+    }
+  }
+}
+
+export default new VendorManager();
\ No newline at end of file
diff --git a/src/utils/VendorRegistry.js b/src/utils/VendorRegistry.js
new file mode 100644
index 000000000..cb45320c8
--- /dev/null
+++ b/src/utils/VendorRegistry.js
@@ -0,0 +1,56 @@
+import VendorManager from '../core/VendorManager';
+
+export const registerNewVendor = (vendorId, VendorClass, config = {}) => {
+  try {
+    const vendorInstance = new VendorClass(config);
+    const success = VendorManager.registerVendor(vendorId, vendorInstance);
+    
+    if (success) {
+      console.log(`✅ Vendor ${vendorId} registered successfully`);
+      return true;
+    } else {
+      console.error(`❌ Failed to register vendor ${vendorId}`);
+      return false;
+    }
+  } catch (error) {
+    console.error(`❌ Error registering vendor ${vendorId}:`, error);
+    return false;
+  }
+};
+
+export const getVendorInfo = (vendorId) => {
+  const vendor = VendorManager.getVendor(vendorId);
+  const capabilities = VendorManager.getVendorCapabilities(vendorId);
+  
+  return {
+    exists: !!vendor,
+    name: vendor?.name || 'Unknown',
+    capabilities,
+    isConnected: vendor?.isConnected || false
+  };
+};
+
+export const testVendor = async (vendorId) => {
+  try {
+    const vendor = VendorManager.getVendor(vendorId);
+    if (!vendor) {
+      return { success: false, error: 'Vendor not found' };
+    }
+
+    const connectionResult = await vendor.connect();
+    const capabilities = vendor.getCapabilities();
+    
+    return {
+      success: true,
+      connection: connectionResult,
+      capabilities,
+      vendor: vendor.name
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error.message,
+      vendor: vendorId
+    };
+  }
+};
\ No newline at end of file
diff --git a/src/vendors/ExampleVendorA.js b/src/vendors/ExampleVendorA.js
new file mode 100644
index 000000000..46f8cdd42
--- /dev/null
+++ b/src/vendors/ExampleVendorA.js
@@ -0,0 +1,76 @@
+import { BaseVendorAdapter } from '../core/BaseVendorAdapter';
+
+class ExampleVendorA extends BaseVendorAdapter {
+  constructor() {
+    super('Vendor A', {
+      apiUrl: 'https://api.vendora.com',
+      apiKey: 'your-api-key'
+    });
+  }
+
+  getCapabilities() {
+    return {
+      marketData: true,
+      orderManagement: true,
+      portfolio: true,
+      analytics: false,
+      realtime: true
+    };
+  }
+
+  async connect() {
+    try {
+      this.isConnected = true;
+      return { success: true };
+    } catch (error) {
+      return this.handleError(error, 'connect');
+    }
+  }
+
+  async getMarketData(symbol) {
+    try {
+      return {
+        success: true,
+        data: {
+          symbol,
+          price: Math.random() * 100,
+          change: Math.random() * 10 - 5,
+          volume: Math.floor(Math.random() * 1000000)
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getMarketData');
+    }
+  }
+
+  async placeOrder(orderData) {
+    try {
+      return {
+        success: true,
+        orderId: `VA_${Date.now()}`,
+        status: 'pending'
+      };
+    } catch (error) {
+      return this.handleError(error, 'placeOrder');
+    }
+  }
+
+  async getPortfolio() {
+    try {
+      return {
+        success: true,
+        data: {
+          totalValue: 50000,
+          positions: [
+            { symbol: 'AAPL', quantity: 10, value: 1500 },
+            { symbol: 'GOOGL', quantity: 5, value: 12500 }
+          ]
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getPortfolio');
+    }
+  }
+}
+
+export default ExampleVendorA;
\ No newline at end of file
diff --git a/src/vendors/ExampleVendorB.js b/src/vendors/ExampleVendorB.js
new file mode 100644
index 000000000..66167fc33
--- /dev/null
+++ b/src/vendors/ExampleVendorB.js
@@ -0,0 +1,66 @@
+import { BaseVendorAdapter } from '../core/BaseVendorAdapter';
+
+class ExampleVendorB extends BaseVendorAdapter {
+  constructor() {
+    super('Vendor B', {
+      baseUrl: 'https://vendorb-api.com/v2',
+      token: 'bearer-token'
+    });
+  }
+
+  getCapabilities() {
+    return {
+      marketData: true,
+      orderManagement: false,
+      portfolio: false,
+      analytics: true,
+      realtime: false
+    };
+  }
+
+  async connect() {
+    try {
+      this.isConnected = true;
+      return { success: true };
+    } catch (error) {
+      return this.handleError(error, 'connect');
+    }
+  }
+
+  async getMarketData(symbol) {
+    try {
+      return {
+        success: true,
+        data: {
+          symbol,
+          price: Math.random() * 200,
+          bid: Math.random() * 190,
+          ask: Math.random() * 210,
+          timestamp: Date.now()
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getMarketData');
+    }
+  }
+
+  async getAnalytics(symbol) {
+    try {
+      return {
+        success: true,
+        data: {
+          symbol,
+          rsi: Math.random() * 100,
+          macd: Math.random() * 5 - 2.5,
+          sma20: Math.random() * 150,
+          sma50: Math.random() * 140,
+          recommendation: ['BUY', 'SELL', 'HOLD'][Math.floor(Math.random() * 3)]
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getAnalytics');
+    }
+  }
+}
+
+export default ExampleVendorB;
\ No newline at end of file
diff --git a/src/vendors/VendorTemplate.js b/src/vendors/VendorTemplate.js
new file mode 100644
index 000000000..c411953db
--- /dev/null
+++ b/src/vendors/VendorTemplate.js
@@ -0,0 +1,141 @@
+import { BaseVendorAdapter } from '../core/BaseVendorAdapter';
+
+/**
+ * Template for creating new vendor adapters
+ * Copy this file and implement your vendor-specific logic
+ */
+class VendorTemplate extends BaseVendorAdapter {
+  constructor(config = {}) {
+    super('Vendor Name', {
+      apiUrl: config.apiUrl || '',
+      apiKey: config.apiKey || '',
+      ...config
+    });
+  }
+
+  /**
+   * Define what this vendor can do
+   * Set to true only for features this vendor supports
+   */
+  getCapabilities() {
+    return {
+      marketData: false,
+      orderManagement: false,
+      portfolio: false,
+      analytics: false,
+      realtime: false
+    };
+  }
+
+  /**
+   * Connect to vendor API
+   */
+  async connect() {
+    try {
+      // TODO: Implement your connection logic
+      // Example: await fetch(this.config.apiUrl + '/connect')
+      
+      this.isConnected = true;
+      return { success: true };
+    } catch (error) {
+      return this.handleError(error, 'connect');
+    }
+  }
+
+  /**
+   * Get market data for a symbol
+   * Only implement if marketData capability is true
+   */
+  async getMarketData(symbol) {
+    try {
+      // TODO: Implement your market data API call
+      // Example:
+      // const response = await fetch(`${this.config.apiUrl}/market/${symbol}`);
+      // const data = await response.json();
+      
+      return {
+        success: true,
+        data: {
+          symbol,
+          price: 0,
+          change: 0,
+          volume: 0
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getMarketData');
+    }
+  }
+
+  /**
+   * Place an order
+   * Only implement if orderManagement capability is true
+   */
+  async placeOrder(orderData) {
+    try {
+      // TODO: Implement your order placement logic
+      
+      return {
+        success: true,
+        orderId: '',
+        status: 'pending'
+      };
+    } catch (error) {
+      return this.handleError(error, 'placeOrder');
+    }
+  }
+
+  /**
+   * Get portfolio data
+   * Only implement if portfolio capability is true
+   */
+  async getPortfolio() {
+    try {
+      // TODO: Implement your portfolio API call
+      
+      return {
+        success: true,
+        data: {
+          totalValue: 0,
+          positions: []
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getPortfolio');
+    }
+  }
+
+  /**
+   * Get analytics for a symbol
+   * Only implement if analytics capability is true
+   */
+  async getAnalytics(symbol) {
+    try {
+      // TODO: Implement your analytics API call
+      
+      return {
+        success: true,
+        data: {
+          symbol,
+          indicators: {}
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getAnalytics');
+    }
+  }
+
+  /**
+   * Add any custom methods your vendor needs
+   */
+  async customMethod() {
+    try {
+      // Your custom implementation
+      return { success: true };
+    } catch (error) {
+      return this.handleError(error, 'customMethod');
+    }
+  }
+}
+
+export default VendorTemplate;
\ No newline at end of file
diff --git a/src/vendors/YFinanceVendor.js b/src/vendors/YFinanceVendor.js
new file mode 100644
index 000000000..963720653
--- /dev/null
+++ b/src/vendors/YFinanceVendor.js
@@ -0,0 +1,232 @@
+import { BaseVendorAdapter } from '../core/BaseVendorAdapter';
+
+class YFinanceVendor extends BaseVendorAdapter {
+  constructor(config = {}) {
+    super('Yahoo Finance', {
+      baseUrl: 'https://query1.finance.yahoo.com/v8/finance/chart/',
+      intervals: ['1m', '2m', '5m', '15m', '30m', '60m', '90m', '1h', '1d', '5d', '1wk', '1mo', '3mo'],
+      ...config
+    });
+    this.cache = new Map();
+    this.cacheTimeout = 30000; // 30 seconds
+  }
+
+  getCapabilities() {
+    return {
+      marketData: true,
+      orderManagement: false,
+      portfolio: false,
+      analytics: true,
+      realtime: true
+    };
+  }
+
+  async connect() {
+    try {
+      // Test connection with a simple quote
+      const testResult = await this.getMarketData('AAPL');
+      this.isConnected = testResult.success;
+      return { success: this.isConnected };
+    } catch (error) {
+      return this.handleError(error, 'connect');
+    }
+  }
+
+  async getMarketData(symbol, interval = '1d') {
+    try {
+      const cacheKey = `${symbol}_${interval}`;
+      const cached = this.cache.get(cacheKey);
+      
+      if (cached && Date.now() - cached.timestamp < this.cacheTimeout) {
+        return { success: true, data: cached.data };
+      }
+
+      // Use Yahoo Finance API directly (simplified version of the Python script logic)
+      const url = `${this.config.baseUrl}${symbol}?interval=${interval}&range=1d`;
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      const result = this.parseYahooResponse(data, symbol);
+      
+      // Cache the result
+      this.cache.set(cacheKey, {
+        data: result,
+        timestamp: Date.now()
+      });
+
+      return { success: true, data: result };
+    } catch (error) {
+      return this.handleError(error, 'getMarketData');
+    }
+  }
+
+  async getHistoricalData(symbol, interval = '1d', period = '1mo') {
+    try {
+      const url = `${this.config.baseUrl}${symbol}?interval=${interval}&range=${period}`;
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      return {
+        success: true,
+        data: this.parseHistoricalData(data, symbol)
+      };
+    } catch (error) {
+      return this.handleError(error, 'getHistoricalData');
+    }
+  }
+
+  async getAnalytics(symbol) {
+    try {
+      // Get multiple timeframes for analytics
+      const [daily, weekly] = await Promise.all([
+        this.getMarketData(symbol, '1d'),
+        this.getMarketData(symbol, '1wk')
+      ]);
+
+      if (!daily.success || !weekly.success) {
+        throw new Error('Failed to fetch data for analytics');
+      }
+
+      return {
+        success: true,
+        data: {
+          symbol,
+          price: daily.data.price,
+          change: daily.data.change,
+          changePercent: daily.data.changePercent,
+          volume: daily.data.volume,
+          marketCap: daily.data.marketCap,
+          pe: daily.data.pe,
+          weeklyTrend: weekly.data.change > 0 ? 'UP' : 'DOWN',
+          volatility: this.calculateVolatility(daily.data, weekly.data),
+          recommendation: this.generateRecommendation(daily.data)
+        }
+      };
+    } catch (error) {
+      return this.handleError(error, 'getAnalytics');
+    }
+  }
+
+  parseYahooResponse(data, symbol) {
+    try {
+      const chart = data.chart?.result?.[0];
+      if (!chart) {
+        throw new Error('Invalid response format');
+      }
+
+      const meta = chart.meta;
+      const quote = chart.indicators?.quote?.[0];
+      
+      return {
+        symbol,
+        price: meta.regularMarketPrice || 0,
+        change: (meta.regularMarketPrice - meta.previousClose) || 0,
+        changePercent: ((meta.regularMarketPrice - meta.previousClose) / meta.previousClose * 100) || 0,
+        volume: meta.regularMarketVolume || 0,
+        marketCap: meta.marketCap || null,
+        pe: meta.trailingPE || null,
+        high: quote?.high?.[quote.high.length - 1] || meta.regularMarketDayHigh,
+        low: quote?.low?.[quote.low.length - 1] || meta.regularMarketDayLow,
+        open: quote?.open?.[0] || meta.regularMarketDayLow,
+        previousClose: meta.previousClose || 0,
+        timestamp: Date.now()
+      };
+    } catch (error) {
+      throw new Error(`Failed to parse Yahoo response: ${error.message}`);
+    }
+  }
+
+  parseHistoricalData(data, symbol) {
+    try {
+      const chart = data.chart?.result?.[0];
+      if (!chart) {
+        throw new Error('Invalid historical data format');
+      }
+
+      const timestamps = chart.timestamp || [];
+      const quote = chart.indicators?.quote?.[0] || {};
+      
+      return {
+        symbol,
+        data: timestamps.map((ts, i) => ({
+          timestamp: new Date(ts * 1000).toISOString(),
+          open: quote.open?.[i] || null,
+          high: quote.high?.[i] || null,
+          low: quote.low?.[i] || null,
+          close: quote.close?.[i] || null,
+          volume: quote.volume?.[i] || null
+        })).filter(item => item.close !== null)
+      };
+    } catch (error) {
+      throw new Error(`Failed to parse historical data: ${error.message}`);
+    }
+  }
+
+  calculateVolatility(dailyData, weeklyData) {
+    // Simple volatility calculation
+    const dailyChange = Math.abs(dailyData.changePercent || 0);
+    const weeklyChange = Math.abs(weeklyData.changePercent || 0);
+    
+    if (dailyChange > 5 || weeklyChange > 15) return 'HIGH';
+    if (dailyChange > 2 || weeklyChange > 8) return 'MEDIUM';
+    return 'LOW';
+  }
+
+  generateRecommendation(data) {
+    const { changePercent, volume, pe } = data;
+    
+    let score = 0;
+    if (changePercent > 2) score += 1;
+    if (changePercent < -2) score -= 1;
+    if (volume > 1000000) score += 0.5;
+    if (pe && pe < 15) score += 0.5;
+    if (pe && pe > 30) score -= 0.5;
+    
+    if (score > 1) return 'BUY';
+    if (score < -1) return 'SELL';
+    return 'HOLD';
+  }
+
+  // Bulk download method (adapted from Python script)
+  async bulkDownload(symbols, intervals = ['1d'], options = {}) {
+    try {
+      const results = {};
+      const batchSize = options.batchSize || 10;
+      
+      for (let i = 0; i < symbols.length; i += batchSize) {
+        const batch = symbols.slice(i, i + batchSize);
+        
+        for (const symbol of batch) {
+          for (const interval of intervals) {
+            try {
+              const data = await this.getHistoricalData(symbol, interval, options.period || '1mo');
+              if (!results[symbol]) results[symbol] = {};
+              results[symbol][interval] = data;
+            } catch (error) {
+              console.warn(`Failed to download ${symbol} ${interval}:`, error);
+            }
+          }
+        }
+        
+        // Rate limiting (like the Python script)
+        if (i + batchSize < symbols.length) {
+          await new Promise(resolve => setTimeout(resolve, 1000));
+        }
+      }
+      
+      return { success: true, data: results };
+    } catch (error) {
+      return this.handleError(error, 'bulkDownload');
+    }
+  }
+}
+
+export default YFinanceVendor;
\ No newline at end of file