the left pain should be a list of tradable stocks that can be selected. it's a manual backtested so the trades should be entered by interacting with the stock chart. not buy selecting an automated strategy. multiple stocks can be held in the portfolio.

index.html

@@ -37,18 +37,11 @@
         <!-- Main Content -->
         <main class="flex-grow container mx-auto px-4 py-8">
             <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-                <!-- Strategy Configuration -->
+                <!-- Stock Selection Panel -->
                 <div class="lg:col-span-1 bg-white rounded-lg shadow p-6">
-                    <h2 class="text-xl font-semibold mb-4 text-gray-800">Strategy Configuration</h2>
+                    <h2 class="text-xl font-semibold mb-4 text-gray-800">Portfolio Stocks</h2>
                     
                     <div class="space-y-4">
-                        <!-- Stock Selection -->
-                        <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Stock Symbol</label>
-                            <input type="text" placeholder="e.g. AAPL" 
-                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
-                        </div>
-                        
                         <!-- Date Range -->
                         <div class="grid grid-cols-2 gap-4">
                             <div>
@@ -62,53 +55,97 @@
                                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                             </div>
                         </div>
-                        
-                        <!-- Strategy Selection -->
+
+                        <!-- Stock Search -->
                         <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Strategy</label>
-                            <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
-                                <option>Moving Average Crossover</option>
-                                <option>Mean Reversion</option>
-                                <option>Breakout</option>
-                                <option>Custom...</option>
-                            </select>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Add Stock</label>
+                            <div class="flex">
+                                <input type="text" placeholder="Search symbol..." 
+                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
+                                <button class="bg-primary hover:bg-blue-600 text-white px-4 rounded-r-md">
+                                    Add
+                                </button>
+                            </div>
                         </div>
-                        
-                        <!-- Parameters -->
+
+                        <!-- Stock List -->
+                        <div class="border rounded-md divide-y">
+                            <div class="p-3 flex justify-between items-center hover:bg-gray-50 cursor-pointer">
+                                <div class="flex items-center space-x-3">
+                                    <span class="font-medium">AAPL</span>
+                                    <span class="text-sm text-gray-500">Apple Inc.</span>
+                                </div>
+                                <button class="text-red-500 hover:text-red-700">
+                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                            <div class="p-3 flex justify-between items-center hover:bg-gray-50 cursor-pointer">
+                                <div class="flex items-center space-x-3">
+                                    <span class="font-medium">MSFT</span>
+                                    <span class="text-sm text-gray-500">Microsoft</span>
+                                </div>
+                                <button class="text-red-500 hover:text-red-700">
+                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                            <div class="p-3 flex justify-between items-center hover:bg-gray-50 cursor-pointer">
+                                <div class="flex items-center space-x-3">
+                                    <span class="font-medium">TSLA</span>
+                                    <span class="text-sm text-gray-500">Tesla</span>
+                                </div>
+                                <button class="text-red-500 hover:text-red-700">
+                                    <i data-feather="trash-2" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Active Positions -->
                         <div>
-                            <label class="block text-sm font-medium text-gray-700 mb-1">Parameters</label>
+                            <h3 class="text-sm font-medium text-gray-700 mb-2">Active Positions</h3>
                             <div class="space-y-2">
-                                <div class="flex items-center">
-                                    <label class="w-24 text-sm text-gray-600">Short MA</label>
-                                    <input type="number" value="50" 
-                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
+                                <div class="p-2 bg-gray-50 rounded text-sm">
+                                    <div class="flex justify-between">
+                                        <span>AAPL</span>
+                                        <span class="font-medium">100 shares</span>
+                                    </div>
+                                    <div class="flex justify-between text-xs text-gray-500">
+                                        <span>Avg: $145.32</span>
+                                        <span>Current: $158.42</span>
+                                    </div>
                                 </div>
-                                <div class="flex items-center">
-                                    <label class="w-24 text-sm text-gray-600">Long MA</label>
-                                    <input type="number" value="200" 
-                                           class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
+                                <div class="p-2 bg-gray-50 rounded text-sm">
+                                    <div class="flex justify-between">
+                                        <span>MSFT</span>
+                                        <span class="font-medium">75 shares</span>
+                                    </div>
+                                    <div class="flex justify-between text-xs text-gray-500">
+                                        <span>Avg: $256.78</span>
+                                        <span>Current: $268.15</span>
+                                    </div>
                                 </div>
                             </div>
                         </div>
-                        
-                        <!-- Run Button -->
-                        <button class="w-full bg-primary hover:bg-blue-600 text-white py-2 px-4 rounded-md transition duration-200">
-                            Run Backtest
-                        </button>
                     </div>
                 </div>
-                
-                <!-- Results Display -->
+<!-- Results Display -->
                 <div class="lg:col-span-2 space-y-6">
-                    <!-- Price Chart -->
+                    <!-- Interactive Price Chart -->
                     <div class="bg-white rounded-lg shadow p-6">
-                        <h2 class="text-xl font-semibold mb-4 text-gray-800">Price Chart with Signals</h2>
-                        <div class="h-80">
+                        <div class="flex justify-between items-center mb-4">
+                            <h2 class="text-xl font-semibold text-gray-800">Interactive Chart</h2>
+                            <div class="flex space-x-2">
+                                <button class="px-3 py-1 bg-primary text-white text-sm rounded hover:bg-blue-600">Buy</button>
+                                <button class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600">Sell</button>
+                            </div>
+                        </div>
+                        <div class="h-80 relative">
                             <canvas id="priceChart"></canvas>
+                            <div class="absolute top-2 left-2 text-sm">
+                                <span class="bg-white bg-opacity-90 px-2 py-1 rounded shadow text-gray-700">Click on chart to place trades</span>
+                            </div>
                         </div>
                     </div>
-                    
-                    <!-- Performance Metrics -->
+<!-- Performance Metrics -->
                     <div class="bg-white rounded-lg shadow p-6">
                         <h2 class="text-xl font-semibold mb-4 text-gray-800">Performance Metrics</h2>
                         <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
@@ -196,32 +233,34 @@
         const priceChart = new Chart(ctx, {
             type: 'line',
             data: {
-                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+                labels: ['Jan 1', 'Jan 8', 'Jan 15', 'Jan 22', 'Jan 29', 'Feb 5', 'Feb 12', 'Feb 19', 'Feb 26'],
                 datasets: [
                     {
-                        label: 'Stock Price',
-                        data: [140, 158, 153, 168, 175, 182],
+                        label: 'Price',
+                        data: [142, 145, 138, 147, 152, 148, 155, 158, 162],
                         borderColor: '#3b82f6',
                         backgroundColor: 'rgba(59, 130, 246, 0.1)',
                         tension: 0.1,
                         fill: true
                     },
                     {
-                        label: 'Short MA',
-                        data: [138, 148, 151, 162, 170, 178],
-                        borderColor: '#10b981',
-                        borderDash: [5, 5],
-                        tension: 0.1
+                        label: 'Buy Points',
+                        data: [null, null, 138, null, null, null, 155, null, null],
+                        pointBackgroundColor: '#10b981',
+                        pointRadius: 6,
+                        pointHoverRadius: 8,
+                        showLine: false
                     },
                     {
-                        label: 'Long MA',
-                        data: [135, 142, 148, 155, 160, 165],
-                        borderColor: '#ef4444',
-                        borderDash: [5, 5],
-                        tension: 0.1
+                        label: 'Sell Points',
+                        data: [null, 145, null, null, 152, null, null, 158, null],
+                        pointBackgroundColor: '#ef4444',
+                        pointRadius: 6,
+                        pointHoverRadius: 8,
+                        showLine: false
                     }
                 ]
-            },
+},
             options: {
                 responsive: true,
                 maintainAspectRatio: false,
@@ -237,9 +276,22 @@
                 }
             }
         });
+        // Chart click handler for placing trades
+        document.getElementById('priceChart').onclick = function(evt) {
+            const activePoints = priceChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
+            if (activePoints.length > 0) {
+                const clickedDatasetIndex = activePoints[0].datasetIndex;
+                const clickedIndex = activePoints[0].index;
+                const value = priceChart.data.datasets[0].data[clickedIndex];
+                const date = priceChart.data.labels[clickedIndex];
+                
+                // In a real app, this would open a trade dialog
+                console.log(`Trade opportunity at ${date}: ${value}`);
+            }
+        };
 
         // Initialize Feather Icons
         feather.replace();
-    </script>
+</script>
 </body>
 </html>