Update index.html

index.html

@@ -7,6 +7,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
     <script>
         tailwind.config = {
             darkMode: 'class',
@@ -54,7 +55,6 @@
                 </div>
                 <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Nakhoda4X <span class="text-primary">Pro</span></h1>
             </div>
-            
             <div class="flex items-center space-x-6">
                 <button id="theme-toggle" class="text-gray-600 dark:text-gray-300">
                     <i class="fas fa-moon dark:hidden"></i>
@@ -86,7 +86,7 @@
                 <p class="text-gray-500 mt-1 dark:text-gray-400">Connected to BingX via API</p>
             </div>
             <div class="flex space-x-4">
-                <button class="px-4 py-2 bg-white dark:bg-darkCard rounded-lg border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 flex items-center">
+                <button id="refresh-btn" class="px-4 py-2 bg-white dark:bg-darkCard rounded-lg border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 flex items-center">
                     <i class="fas fa-sync mr-2"></i> Refresh
                 </button>
                 <button class="px-4 py-2 bg-primary text-white rounded-lg flex items-center">
@@ -101,65 +101,62 @@
                 <div class="flex justify-between">
                     <div>
                         <p class="text-gray-500 dark:text-gray-400">Total Balance</p>
-                        <h3 class="text-2xl font-bold mt-2 dark:text-white">$25,842.75</h3>
+                        <h3 id="total-balance" class="text-2xl font-bold mt-2 dark:text-white">$0.00</h3>
                     </div>
                     <div class="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                         <i class="fas fa-wallet text-blue-500 text-xl"></i>
                     </div>
                 </div>
-                <div class="mt-4 flex items-center text-green-500">
+                <div id="balance-change" class="mt-4 flex items-center text-green-500">
                     <i class="fas fa-caret-up mr-1"></i>
-                    <span class="font-medium">3.2%</span>
+                    <span class="font-medium">0.0%</span>
                     <span class="text-gray-500 ml-2 dark:text-gray-400">last 24h</span>
                 </div>
             </div>
-
             <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300">
                 <div class="flex justify-between">
                     <div>
                         <p class="text-gray-500 dark:text-gray-400">Open Trades</p>
-                        <h3 class="text-2xl font-bold mt-2 dark:text-white">14</h3>
+                        <h3 id="open-trades" class="text-2xl font-bold mt-2 dark:text-white">0</h3>
                     </div>
                     <div class="w-12 h-12 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                         <i class="fas fa-exchange-alt text-purple-500 text-xl"></i>
                     </div>
                 </div>
-                <div class="mt-4 flex items-center text-blue-500">
-                    <span class="font-medium">6 Long</span>
+                <div id="trade-types" class="mt-4 flex items-center text-blue-500">
+                    <span class="font-medium">0 Long</span>
                     <span class="text-gray-500 mx-2 dark:text-gray-400">•</span>
-                    <span class="font-medium">8 Short</span>
+                    <span class="font-medium">0 Short</span>
                 </div>
             </div>
-
             <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300">
                 <div class="flex justify-between">
                     <div>
                         <p class="text-gray-500 dark:text-gray-400">Today's Profit</p>
-                        <h3 class="text-2xl font-bold mt-2 dark:text-white">$1,254.30</h3>
+                        <h3 id="today-profit" class="text-2xl font-bold mt-2 dark:text-white">$0.00</h3>
                     </div>
                     <div class="w-12 h-12 rounded-xl bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                         <i class="fas fa-chart-bar text-green-500 text-xl"></i>
                     </div>
                 </div>
-                <div class="mt-4 flex items-center text-green-500">
+                <div id="profit-change" class="mt-4 flex items-center text-green-500">
                     <i class="fas fa-caret-up mr-1"></i>
-                    <span class="font-medium">5.7%</span>
+                    <span class="font-medium">0.0%</span>
                     <span class="text-gray-500 ml-2 dark:text-gray-400">vs yesterday</span>
                 </div>
             </div>
-
             <div class="trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6 transition-all duration-300">
                 <div class="flex justify-between">
                     <div>
                         <p class="text-gray-500 dark:text-gray-400">Risk Exposure</p>
-                        <h3 class="text-2xl font-bold mt-2 dark:text-white">Medium</h3>
+                        <h3 id="risk-exposure" class="text-2xl font-bold mt-2 dark:text-white">Low</h3>
                     </div>
                     <div class="w-12 h-12 rounded-xl bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
                         <i class="fas fa-exclamation-triangle text-yellow-500 text-xl"></i>
                     </div>
                 </div>
-                <div class="mt-4 flex items-center text-gray-500 dark:text-gray-400">
-                    <span class="font-medium">42%</span>
+                <div id="exposure-percent" class="mt-4 flex items-center text-gray-500 dark:text-gray-400">
+                    <span class="font-medium">0%</span>
                     <span class="ml-2">of balance</span>
                 </div>
             </div>
@@ -167,7 +164,6 @@
 
         <!-- Charts and Statistics Section -->
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
-            <!-- Monthly Performance -->
             <div class="lg:col-span-2 bg-white dark:bg-darkCard rounded-2xl shadow-md p-6">
                 <div class="flex justify-between items-center mb-6">
                     <h3 class="text-lg font-bold text-gray-800 dark:text-white">Monthly Performance</h3>
@@ -180,56 +176,10 @@
                 </div>
                 <canvas id="performanceChart"></canvas>
             </div>
-            
-            <!-- Advanced Stats -->
             <div class="bg-white dark:bg-darkCard rounded-2xl shadow-md p-6">
                 <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-6">Advanced Statistics</h3>
-                <div class="space-y-5">
-                    <div>
-                        <div class="flex justify-between mb-1">
-                            <span class="text-gray-500 dark:text-gray-400">Profit Factor</span>
-                            <span class="font-bold text-green-500">2.75</span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                            <div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div>
-                        </div>
-                    </div>
-                    <div>
-                        <div class="flex justify-between mb-1">
-                            <span class="text-gray-500 dark:text-gray-400">Sharpe Ratio</span>
-                            <span class="font-bold text-blue-500">1.92</span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                            <div class="bg-blue-600 h-2 rounded-full" style="width: 64%"></div>
-                        </div>
-                    </div>
-                    <div>
-                        <div class="flex justify-between mb-1">
-                            <span class="text-gray-500 dark:text-gray-400">Win Rate</span>
-                            <span class="font-bold text-purple-500">63.4%</span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                            <div class="bg-purple-600 h-2 rounded-full" style="width: 63%"></div>
-                        </div>
-                    </div>
-                    <div>
-                        <div class="flex justify-between mb-1">
-                            <span class="text-gray-500 dark:text-gray-400">Max Drawdown</span>
-                            <span class="font-bold text-yellow-500">-12.3%</span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                            <div class="bg-yellow-600 h-2 rounded-full" style="width: 34%"></div>
-                        </div>
-                    </div>
-                    <div>
-                        <div class="flex justify-between mb-1">
-                            <span class="text-gray-500 dark:text-gray-400">Risk/Reward Ratio</span>
-                            <span class="font-bold text-primary">1:2.8</span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                            <div class="bg-primary h-2 rounded-full" style="width: 82%"></div>
-                        </div>
-                    </div>
+                <div id="advanced-stats" class="space-y-5">
+                    <!-- Dynamically populated -->
                 </div>
             </div>
         </div>
@@ -244,7 +194,6 @@
                     <button class="px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white">Closed</button>
                 </div>
             </div>
-            
             <div class="overflow-x-auto">
                 <table class="w-full">
                     <thead>
@@ -259,99 +208,8 @@
                             <th class="pb-4"></th>
                         </tr>
                     </thead>
-                    <tbody class="text-sm">
-                        <tr class="border-b border-gray-200 dark:border-gray-700">
-                            <td class="py-4">
-                                <div class="flex items-center">
-                                    <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png?v=029" class="h-6 w-6 mr-2" alt="Bitcoin">
-                                    BTC/USDT
-                                </div>
-                            </td>
-                            <td class="py-4">
-                                <span class="px-2 py-1 rounded bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">Long</span>
-                            </td>
-                            <td class="py-4">0.85</td>
-                            <td class="py-4">$42,156.30</td>
-                            <td class="py-4 font-medium">$43,287.15</td>
-                            <td class="py-4 font-bold text-green-500">+$961.22</td>
-                            <td class="py-4">
-                                <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">Open</span>
-                            </td>
-                            <td class="py-4 text-right">
-                                <button class="text-gray-400 hover:text-primary">
-                                    <i class="fas fa-ellipsis-v"></i>
-                                </button>
-                            </td>
-                        </tr>
-                        <tr class="border-b border-gray-200 dark:border-gray-700">
-                            <td class="py-4">
-                                <div class="flex items-center">
-                                    <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png?v=029" class="h-6 w-6 mr-2" alt="Ethereum">
-                                    ETH/USDT
-                                </div>
-                            </td>
-                            <td class="py-4">
-                                <span class="px-2 py-1 rounded bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">Short</span>
-                            </td>
-                            <td class="py-4">2.75</td>
-                            <td class="py-4">$2,312.40</td>
-                            <td class="py-4 font-medium">$2,281.75</td>
-                            <td class="py-4 font-bold text-green-500">+$842.63</td>
-                            <td class="py-4">
-                                <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">Open</span>
-                            </td>
-                            <td class="py-4 text-right">
-                                <button class="text-gray-400 hover:text-primary">
-                                    <i class="fas fa-ellipsis-v"></i>
-                                </button>
-                            </td>
-                        </tr>
-                        <tr class="border-b border-gray-200 dark:border-gray-700">
-                            <td class="py-4">
-                                <div class="flex items-center">
-                                    <img src="https://cryptologos.cc/logos/binance-coin-bnb-logo.png?v=029" class="h-6 w-6 mr-2" alt="BNB">
-                                    BNB/USDT
-                                </div>
-                            </td>
-                            <td class="py-4">
-                                <span class="px-2 py-1 rounded bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300">Short</span>
-                            </td>
-                            <td class="py-4">3.20</td>
-                            <td class="py-4">$305.75</td>
-                            <td class="py-4 font-medium">$312.85</td>
-                            <td class="py-4 font-bold text-red-500">-$227.20</td>
-                            <td class="py-4">
-                                <span class="px-2 py-1 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">Open</span>
-                            </td>
-                            <td class="py-4 text-right">
-                                <button class="text-gray-400 hover:text-primary">
-                                    <i class="fas fa-ellipsis-v"></i>
-                                </button>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class="py-4">
-                                <div class="flex items-center">
-                                    <img src="https://cryptologos.cc/logos/solana-sol-logo.png?v=029" class="h-6 w-6 mr-2" alt="Solana">
-                                    SOL/USDT
-                                </div>
-                            </td>
-                            <td class="py-4">
-                                <span class="px-2 py-1 rounded bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300">Long</span>
-                            </td>
-                            <td class="py-4">15.50</td>
-                            <td class="py-4">$96.35</td>
-                            <td class="py-4 font-medium">$101.20</td>
-                            <td class="py-4 font-bold text-green-500">+$751.75</td>
-                            <td class="py-4">
-                                <span class="px-2 py-1 rounded bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300">Closed</span>
-                            </td>
-                            <td class="py-4 text-right">
-                                <button class="text-gray-400 hover:text-primary">
-                                    <i class="fas fa-ellipsis-v"></i>
-                                </button>
-                            </td>
-                        </tr>
+                    <tbody id="trading-table-body" class="text-sm">
+                        <!-- Dynamically populated -->
                     </tbody>
                 </table>
             </div>
@@ -368,74 +226,26 @@
                     </div>
                     <div>
                         <h3 class="text-lg font-bold text-white">BingX API Connected</h3>
-                        <p class="text-blue-100">Last synced 5 minutes ago</p>
+                        <p id="last-sync" class="text-blue-100">Last synced: Just now</p>
                     </div>
                 </div>
-                <button class="mt-6 w-full py-3 bg-white rounded-xl text-primary font-bold flex items-center justify-center">
+                <button id="sync-now" class="mt-6 w-full py-3 bg-white rounded-xl text-primary font-bold flex items-center justify-center">
                     <i class="fas fa-sync mr-2"></i> Sync Now
                 </button>
             </div>
-            
             <div class="lg:col-span-2 bg-white dark:bg-darkCard rounded-2xl shadow-md p-6">
                 <div class="flex justify-between items-center mb-6">
                     <h3 class="text-lg font-bold text-gray-800 dark:text-white">Portfolio Allocation</h3>
                     <div>
-                        <span class="text-gray-500 dark:text-gray-400 text-sm">Last updated: 5 min ago</span>
+                        <span id="allocation-update" class="text-gray-500 dark:text-gray-400 text-sm">Last updated: Just now</span>
                     </div>
                 </div>
                 <div class="flex items-center">
                     <div class="w-40 h-40 mr-8">
                         <canvas id="allocationChart"></canvas>
                     </div>
-                    <div class="flex-grow">
-                        <div class="mb-3">
-                            <div class="flex justify-between mb-1">
-                                <span class="text-gray-500 dark:text-gray-400 flex items-center">
-                                    <span class="h-3 w-3 bg-primary rounded-full mr-2"></span>
-                                    Cryptocurrencies
-                                </span>
-                                <span class="font-medium dark:text-white">68%</span>
-                            </div>
-                            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                                <div class="bg-primary h-2 rounded-full" style="width: 68%"></div>
-                            </div>
-                        </div>
-                        <div class="mb-3">
-                            <div class="flex justify-between mb-1">
-                                <span class="text-gray-500 dark:text-gray-400 flex items-center">
-                                    <span class="h-3 w-3 bg-green-500 rounded-full mr-2"></span>
-                                    Stocks
-                                </span>
-                                <span class="font-medium dark:text-white">14%</span>
-                            </div>
-                            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                                <div class="bg-green-500 h-2 rounded-full" style="width: 14%"></div>
-                            </div>
-                        </div>
-                        <div class="mb-3">
-                            <div class="flex justify-between mb-1">
-                                <span class="text-gray-500 dark:text-gray-400 flex items-center">
-                                    <span class="h-3 w-3 bg-purple-500 rounded-full mr-2"></span>
-                                    Forex
-                                </span>
-                                <span class="font-medium dark:text-white">12%</span>
-                            </div>
-                            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                                <div class="bg-purple-500 h-2 rounded-full" style="width: 12%"></div>
-                            </div>
-                        </div>
-                        <div>
-                            <div class="flex justify-between mb-1">
-                                <span class="text-gray-500 dark:text-gray-400 flex items-center">
-                                    <span class="h-3 w-3 bg-yellow-500 rounded-full mr-2"></span>
-                                    Commodities
-                                </span>
-                                <span class="font-medium dark:text-white">6%</span>
-                            </div>
-                            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                                <div class="bg-yellow-500 h-2 rounded-full" style="width: 6%"></div>
-                            </div>
-                        </div>
+                    <div id="allocation-legend" class="flex-grow">
+                        <!-- Dynamically populated -->
                     </div>
                 </div>
             </div>
@@ -449,15 +259,15 @@
             document.documentElement.classList.toggle('dark');
         });
 
-        // Charts
+        // Chart Initialization
         const performanceCtx = document.getElementById('performanceChart').getContext('2d');
         const performanceChart = new Chart(performanceCtx, {
             type: 'line',
             data: {
-                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+                labels: [],
                 datasets: [{
                     label: 'Profit/Loss',
-                    data: [1200, 1900, 1500, 2800, 2200, 3000],
+                    data: [],
                     borderColor: '#3b82f6',
                     backgroundColor: 'rgba(59, 130, 246, 0.1)',
                     tension: 0.4,
@@ -466,93 +276,236 @@
             },
             options: {
                 responsive: true,
-                plugins: {
-                    legend: {
-                        display: false
-                    }
-                },
+                plugins: { legend: { display: false } },
                 scales: {
-                    y: {
-                        grid: {
-                            color: 'rgba(0, 0, 0, 0.05)',
-                            borderDash: [5]
-                        },
-                        ticks: {
-                            callback: function(value) {
-                                return '$' + value;
-                            }
-                        }
-                    },
-                    x: {
-                        grid: {
-                            display: false
-                        }
-                    }
+                    y: { grid: { color: 'rgba(0, 0, 0, 0 ⎛05)', borderDash: [5] }, ticks: { callback: value => '$' + value } },
+                    x: { grid: { display: false } }
                 }
             }
         });
 
-        // Portfolio Allocation Chart
         const allocationCtx = document.getElementById('allocationChart').getContext('2d');
         const allocationChart = new Chart(allocationCtx, {
             type: 'doughnut',
             data: {
-                labels: ['Cryptocurrencies', 'Stocks', 'Forex', 'Commodities'],
+                labels: [],
                 datasets: [{
-                    data: [68, 14, 12, 6],
-                    backgroundColor: [
-                        '#3b82f6',
-                        '#10b981',
-                        '#8b5cf6',
-                        '#f59e0b'
-                    ],
-                    borderWidth: 0,
+                    data: [],
+                    backgroundColor: ['#3b82f6', '#10b981', '#8b5cf6', '#f59e0b'],
+                    borderWidth: 0
                 }]
             },
             options: {
                 responsive: true,
                 cutout: '65%',
-                plugins: {
-                    legend: {
-                        display: false
-                    },
-                    tooltip: {
-                        callbacks: {
-                            label: function(context) {
-                                return `${context.label}: ${context.parsed}%`;
-                            }
-                        }
-                    }
-                }
+                plugins: { legend: { display: false }, tooltip: { callbacks: { label: context => `${context.label}: ${context.parsed}%` } } }
             }
         });
 
-        // Simulate live data updates
-        function simulateLiveData() {
-            // Update balance with small random fluctuation
-            const balanceElement = document.querySelector('.trading-card:first-child h3');
-            const balanceValue = parseFloat(balanceElement.textContent.replace('$', '').replace(',', ''));
-            const newBalance = balanceValue * (1 + (Math.random() * 0.02 - 0.01));
-            balanceElement.textContent = '$' + newBalance.toFixed(2);
-            
-            // Update open position prices
-            const positionPrices = document.querySelectorAll('tbody tr td:nth-child(5)');
-            positionPrices.forEach(price => {
-                const currentValue = parseFloat(price.textContent.replace('$', '').replace(',', ''));
-                const changePercent = (Math.random() * 4 - 2) / 100;
-                const newValue = currentValue * (1 + changePercent);
-                price.textContent = '$' + newValue.toFixed(2);
-                price.classList.remove('text-green-500', 'text-red-500');
-                
-                if (changePercent > 0) {
-                    price.classList.add('text-green-500');
-                } else if (changePercent < 0) {
-                    price.classList.add('text-red-500');
-                }
+        // API Configuration (Replace with your actual keys in a secure manner)
+        const API_KEY = 'EXW9448ytbIhsoaEIqomKqVziRmWCAZ88OhLKmyMoPb7jFTtDnWjO1DFATt3sizsKi2hgn7SxQ06ALTDmU9w';
+        const API_SECRET = 'PCEzaYObtvi1DB3fmQy3XfFGl9ybRlFI6eVjpjSWykE1mJQ5mEDYlPsuJJ9mXfr2wjaxprMKzBCeitcY7xGdKQ';
+        const API_BASE_URL = 'https://api.bingx.com';
+
+        // Generate Signature for Authentication
+        function generateSignature(params) {
+            const queryString = new URLSearchParams(params).toString();
+            return CryptoJS.HmacSHA256(queryString, API_SECRET).toString(CryptoJS.enc.Hex);
+        }
+
+        // Generic API Fetch Function
+        async function fetchFromAPI(endpoint, params = {}) {
+            params.timestamp = Date.now();
+            params.signature = generateSignature(params);
+            const url = `${API_BASE_URL}${endpoint}?${new URLSearchParams(params)}`;
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: { 'X-BX-APIKEY': API_KEY }
             });
+            if (!response.ok) throw new Error(`API Error: ${response.statusText}`);
+            return response.json();
         }
-        
-        setInterval(simulateLiveData, 8000);
+
+        // Fetch Specific Data
+        async function fetchBalance() {
+            const data = await fetchFromAPI('/api/v1/account/balance');
+            return data.data.balance; // Adjust based on actual API response structure
+        }
+
+        async function fetchOpenPositions() {
+            const data = await fetchFromAPI('/api/v1/positions');
+            return data.data.positions; // Adjust based on actual API response structure
+        }
+
+        async function fetchTradeHistory() {
+            const data = await fetchFromAPI('/api/v1/trades', { limit: 100 });
+            return data.data.trades; // Adjust based on actual API response structure
+        }
+
+        // Helper Functions
+        function calculateTodayProfit(trades) {
+            const today = new Date().toDateString();
+            return trades
+                .filter(trade => new Date(trade.closeTime).toDateString() === today)
+                .reduce((sum, trade) => sum + (trade.realizedProfit || 0), 0);
+        }
+
+        function calculateAdvancedStats(trades) {
+            let totalProfit = 0, totalLoss = 0, wins = 0;
+            trades.forEach(trade => {
+                const pl = trade.realizedProfit || 0;
+                if (pl > 0) { totalProfit += pl; wins++; }
+                else { totalLoss += Math.abs(pl); }
+            });
+            const profitFactor = totalLoss ? (totalProfit / totalLoss) : 0;
+            const winRate = trades.length ? (wins / trades.length * 100) : 0;
+            return { profitFactor: profitFactor.toFixed(2), winRate: winRate.toFixed(1) };
+        }
+
+        function calculatePortfolioAllocation(positions) {
+            const totalValue = positions.reduce((sum, pos) => sum + (pos.value || 0), 0);
+            const bySymbol = positions.reduce((acc, pos) => {
+                acc[pos.symbol] = (acc[pos.symbol] || 0) + (pos.value || 0);
+                return acc;
+            }, {});
+            return {
+                labels: Object.keys(bySymbol),
+                data: Object.values(bySymbol).map(val => totalValue ? (val / totalValue * 100) : 0)
+            };
+        }
+
+        // Update UI Functions
+        function updateTradingTable(positions, trades) {
+            const tbody = document.getElementById('trading-table-body');
+            tbody.innerHTML = '';
+            positions.forEach(pos => {
+                tbody.innerHTML += `
+                    <tr class="border-b border-gray-200 dark:border-gray-700">
+                        <td class="py-4">${pos.symbol}</td>
+                        <td class="py-4"><span class="${pos.side === 'Long' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${pos.side}</span></td>
+                        <td class="py-4">${pos.size}</td>
+                        <td class="py-4">$${pos.entryPrice.toFixed(2)}</td>
+                        <td class="py-4 font-medium">$${pos.currentPrice.toFixed(2)}</td>
+                        <td class="py-4 font-bold ${pos.unrealizedPL > 0 ? 'text-green-500' : 'text-red-500'}">$${pos.unrealizedPL.toFixed(2)}</td>
+                        <td class="py-4"><span class="px-2 py-1 rounded bg-blue-100 text-blue-800">Open</span></td>
+                        <td class="py-4 text-right"><button class="text-gray-400 hover:text-primary"><i class="fas fa-ellipsis-v"></i></button></td>
+                    </tr>`;
+            });
+            trades.slice(0, 5).forEach(trade => {
+                tbody.innerHTML += `
+                    <tr class="border-b border-gray-200 dark:border-gray-700">
+                        <td class="py-4">${trade.symbol}</td>
+                        <td class="py-4"><span class="${trade.side === 'Long' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${trade.side}</span></td>
+                        <td class="py-4">${trade.size}</td>
+                        <td class="py-4">$${trade.entryPrice.toFixed(2)}</td>
+                        <td class="py-4 font-medium">$${trade.exitPrice.toFixed(2)}</td>
+                        <td class="py-4 font-bold ${trade.realizedProfit > 0 ? 'text-green-500' : 'text-red-500'}">$${trade.realizedProfit.toFixed(2)}</td>
+                        <td class="py-4"><span class="px-2 py-1 rounded bg-gray-100 text-gray-800">Closed</span></td>
+                        <td class="py-4 text-right"><button class="text-gray-400 hover:text-primary"><i class="fas fa-ellipsis-v"></i></button></td>
+                    </tr>`;
+            });
+        }
+
+        function updateAdvancedStats(stats) {
+            document.getElementById('advanced-stats').innerHTML = `
+                <div>
+                    <div class="flex justify-between mb-1">
+                        <span class="text-gray-500 dark:text-gray-400">Profit Factor</span>
+                        <span class="font-bold text-green-500">${stats.profitFactor}</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
+                        <div class="bg-green-600 h-2 rounded-full" style="width: ${Math.min(stats.profitFactor * 25, 100)}%"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex justify-between mb-1">
+                        <span class="text-gray-500 dark:text-gray-400">Win Rate</span>
+                        <span class="font-bold text-purple-500">${stats.winRate}%</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
+                        <div class="bg-purple-600 h-2 rounded-full" style="width: ${stats.winRate}%"></div>
+                    </div>
+                </div>`;
+        }
+
+        function updatePerformanceChart(trades) {
+            const monthlyPL = trades.reduce((acc, trade) => {
+                const month = new Date(trade.closeTime).toLocaleString('default', { month: 'short' });
+                acc[month] = (acc[month] || 0) + (trade.realizedProfit || 0);
+                return acc;
+            }, {});
+            performanceChart.data.labels = Object.keys(monthlyPL);
+            performanceChart.data.datasets[0].data = Object.values(monthlyPL);
+            performanceChart.update();
+        }
+
+        function updateAllocationChart(allocation) {
+            allocationChart.data.labels = allocation.labels;
+            allocationChart.data.datasets[0].data = allocation.data;
+            allocationChart.update();
+            const legend = document.getElementById('allocation-legend');
+            legend.innerHTML = allocation.labels.map((label, i) => `
+                <div class="mb-3">
+                    <div class="flex justify-between mb-1">
+                        <span class="text-gray-500 dark:text-gray-400 flex items-center">
+                            <span class="h-3 w-3 bg-[${allocationChart.data.datasets[0].backgroundColor[i]}] rounded-full mr-2"></span>
+                            ${label}
+                        </span>
+                        <span class="font-medium dark:text-white">${allocation.data[i].toFixed(1)}%</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
+                        <div class="bg-[${allocationChart.data.datasets[0].backgroundColor[i]}] h-2 rounded-full" style="width: ${allocation.data[i]}%"></div>
+                    </div>
+                </div>`).join('');
+        }
+
+        // Main Data Fetch Function
+        async function fetchData() {
+            try {
+                // Show loading state
+                document.querySelectorAll('.trading-card h3').forEach(el => el.textContent = 'Loading...');
+                document.getElementById('trading-table-body').innerHTML = '<tr><td colspan="8" class="py-4 text-center">Loading...</td></tr>';
+
+                const [balance, positions, trades] = await Promise.all([
+                    fetchBalance(),
+                    fetchOpenPositions(),
+                    fetchTradeHistory()
+                ]);
+
+                // Update Stats Cards
+                document.getElementById('total-balance').textContent = `$${balance.toFixed(2)}`;
+                document.getElementById('open-trades').textContent = positions.length;
+                const longCount = positions.filter(p => p.side === 'Long').length;
+                document.getElementById('trade-types').innerHTML = `<span class="font-medium">${longCount} Long</span><span class="text-gray-500 mx-2 dark:text-gray-400">•</span><span class="font-medium">${positions.length - longCount} Short</span>`;
+                const todayProfit = calculateTodayProfit(trades);
+                document.getElementById('today-profit').textContent = `$${todayProfit.toFixed(2)}`;
+                const riskPercent = balance ? (positions.reduce((sum, p) => sum + (p.value || 0), 0) / balance * 100) : 0;
+                document.getElementById('risk-exposure').textContent = riskPercent < 20 ? 'Low' : riskPercent < 50 ? 'Medium' : 'High';
+                document.getElementById('exposure-percent').innerHTML = `<span class="font-medium">${riskPercent.toFixed(1)}%</span><span class="ml-2">of balance</span>`;
+
+                // Update Other Sections
+                updateTradingTable(positions, trades);
+                const stats = calculateAdvancedStats(trades);
+                updateAdvancedStats(stats);
+                updatePerformanceChart(trades);
+                const allocation = calculatePortfolioAllocation(positions);
+                updateAllocationChart(allocation);
+
+                // Update sync time
+                document.getElementById('last-sync').textContent = 'Last synced: Just now';
+                document.getElementById('allocation-update').textContent = 'Last updated: Just now';
+            } catch (error) {
+                console.error('Error fetching data:', error);
+                alert('Failed to sync with BingX API. Please check your API credentials.');
+            }
+        }
+
+        // Event Listeners
+        document.getElementById('refresh-btn').addEventListener('click', fetchData);
+        document.getElementById('sync-now').addEventListener('click', fetchData);
+        window.addEventListener('load', fetchData);
+        setInterval(fetchData, 60000); // Refresh every 60 seconds
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=EricSam/bingx-monitoring" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+    <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px; position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle; display:inline-block; margin-right:3px; filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff; text-decoration: underline;" target="_blank">DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=EricSam/bingx-monitoring" style="color: #fff; text-decoration: underline;" target="_blank">Remix</a></p>
+</body>
 </html>