Update app.py

app.py

@@ -119,11 +119,11 @@ def update_advanced_stats(stats):
     return gr.HTML(f"""
         <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">{stats['profit_factor']}</span></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['profit_factor']:.2f}</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: {min(stats['profit_factor'] * 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['win_rate']}%</span></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['win_rate']:.1f}%</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['win_rate']}%"></div></div>
             </div>
         </div>
@@ -141,7 +141,7 @@ def update_performance_chart(trades):
     return gr.Chart(value=chart_data, type="line", options={
         'responsive': True,
         'plugins': {'legend': {'display': False}},
-        'scales': {'y': {'grid': {'color': 'rgba(0, 0, 0, 0.05)', 'borderDash': [5]}, 'ticks': {'callback': lambda value: f'${value}'}}, 'x': {'grid': {'display': false}}}
+        'scales': {'y': {'grid': {'color': 'rgba(0, 0, 0, 0.05)', 'borderDash': [5]}, 'ticks': {'callback': lambda value: f'${value}'}}, 'x': {'grid': {'display': False}}}
     })
 
 def update_allocation_chart(allocation):
@@ -193,7 +193,7 @@ def update_dashboard(api_key, api_secret):
         )
     except Exception as e:
         return (
-            "$0.00", 0, "0 Long • 0 Short", "$0.00", "Low", "0%", gr.HTML("<tr><td colspan='8' class='py-4 text-center'>Error: Failed to sync with BingX API - Check credentials</td></tr>"),
+            "$Loading...", 0, "0 Long • 0 Short", "$0.00", "Low", "0%", gr.HTML("<tr><td colspan='8' class='py-4 text-center'>Error: Failed to sync with BingX API - Check credentials</td></tr>"),
             gr.HTML("<div>Error loading stats</div>"), gr.Chart(), (gr.Chart(), gr.HTML("")), "Just now", "Just now"
         )
 
@@ -203,91 +203,116 @@ def save_credentials(new_api_key, new_api_secret, api_key, api_secret):
         return gr.Warning("Both API Key and Secret are required."), api_key, api_secret
     return gr.Info("Credentials saved successfully! Syncing data..."), gr.State(value=new_api_key), gr.State(value=new_api_secret)
 
+# Toggle API Form Visibility
+def toggle_api_form(show_form):
+    return gr.update(visible=show_form)
+
 # Gradio Interface
 with gr.Blocks(title="Nakhoda4X Pro") as demo:
-    gr.Markdown("""
-        # Nakhoda4X Pro
-        **Trading Dashboard** connected to BingX via API | **Hot Dog Classifier** for image analysis
-    """)
-    
-    with gr.Tab("Trading Dashboard"):
-        with gr.Row():
-            with gr.Column():
-                gr.Markdown("### Trading Dashboard")
-                gr.Markdown("Connected to BingX via API")
-            with gr.Column():
-                refresh_btn = gr.Button("Refresh", variant="secondary")
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                stats_cards = gr.Blocks()
-                with stats_cards:
-                    with gr.Row():
-                        gr.HTML("<div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6'>")
-                        total_balance = gr.HTML("<h3 id='total-balance' class='text-2xl font-bold mt-2 dark:text-white'>$0.00</h3>")
-                        open_trades = gr.HTML("<h3 id='open-trades' class='text-2xl font-bold mt-2 dark:text-white'>0</h3>")
-                        today_profit = gr.HTML("<h3 id='today-profit' class='text-2xl font-bold mt-2 dark:text-white'>$0.00</h3>")
-                        risk_exposure = gr.HTML("<h3 id='risk-exposure' class='text-2xl font-bold mt-2 dark:text-white'>Low</h3>")
-                    with gr.Row():
-                        gr.HTML("</div>")
-                        balance_change = gr.HTML("<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'>0.0%</span><span class='text-gray-500 ml-2 dark:text-gray-400'>last 24h</span></div>")
-                        trade_types = gr.HTML("<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'>0 Short</span></div>")
-                        profit_change = gr.HTML("<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'>0.0%</span><span class='text-gray-500 ml-2 dark:text-gray-400'>vs yesterday</span></div>")
-                        exposure_percent = gr.HTML("<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>")
-            
-            with gr.Column(scale=3):
-                with gr.Row():
-                    with gr.Column():
-                        performance_chart = gr.Chart()
-                    with gr.Column():
-                        advanced_stats = gr.HTML()
-                
-                with gr.Row():
-                    trading_activity = gr.HTML()
-                
-                with gr.Row():
-                    with gr.Column():
-                        api_connection = gr.Blocks()
-                        with api_connection:
-                            gr.HTML("<div class='bg-gradient-to-r from-primary to-secondary rounded-2xl p-6'>")
-                            gr.HTML("<div class='flex items-center mb-4'><div class='mr-4'><div class='h-12 w-12 rounded-xl bg-white/30 flex items-center justify-center'><i class='fas fa-plug text-white text-xl'></i></div></div><div><h3 class='text-lg font-bold text-white'>BingX API Connected</h3><p id='last-sync' class='text-blue-100'>Last synced: Just now</p></div></div>")
-                            with gr.Row():
-                                api_key_input = gr.Textbox(label="API Key", value=api_key.value, type="password")
-                                api_secret_input = gr.Textbox(label="API Secret", value=api_secret.value, type="password")
-                            save_btn = gr.Button("Save Credentials", variant="primary")
-                            sync_now = gr.Button("Sync Now", elem_classes="w-full py-3 bg-white rounded-xl text-primary font-bold flex items-center justify-center")
-                            gr.Markdown("**Note:** Credentials are stored in memory for this session only.")
-                    with gr.Column():
-                        portfolio_allocation = gr.Blocks()
-                        with portfolio_allocation:
-                            gr.HTML("<div class='bg-white dark:bg-darkCard rounded-2xl shadow-md p-6'>")
-                            gr.HTML("<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 id='allocation-update' class='text-gray-500 dark:text-gray-400 text-sm'>Last updated: Just now</span></div></div>")
-                            with gr.Row():
-                                allocation_chart = gr.Chart()
-                                allocation_legend = gr.HTML()
-
-        # Event Handlers
-        save_btn.click(
-            fn=save_credentials,
-            inputs=[api_key_input, api_secret_input, api_key, api_secret],
-            outputs=[gr.Markdown(), api_key, api_secret]
-        )
-        demo.load(fn=update_dashboard, inputs=[api_key, api_secret], outputs=[
-            total_balance, open_trades, trade_types, today_profit,
-            risk_exposure, exposure_percent, trading_activity, advanced_stats,
-            performance_chart, (allocation_chart, allocation_legend), gr.State(value=None), gr.State(value=None)
-        ])
-        refresh_btn.click(fn=update_dashboard, inputs=[api_key, api_secret], outputs=[
-            total_balance, open_trades, trade_types, today_profit,
-            risk_exposure, exposure_percent, trading_activity, advanced_stats,
-            performance_chart, (allocation_chart, allocation_legend), gr.State(value=None), gr.State(value=None)
-        ])
-        sync_now.click(fn=update_dashboard, inputs=[api_key, api_secret], outputs=[
-            total_balance, open_trades, trade_types, today_profit,
-            risk_exposure, exposure_percent, trading_activity, advanced_stats,
-            performance_chart, (allocation_chart, allocation_legend), gr.State(value=None), gr.State(value=None)
-        ])
+    # Custom CSS and JS for Tailwind and dark mode
+    demo.css = """
+        .trading-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
+        .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+        .coin-animation { animation: float 3s ease-in-out infinite; }
+        @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
+        .api-form { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; }
+        .api-form.open { max-height: 200px; }
+        body { background-color: #f3f4f6; }
+        body.dark { background-color: #111827; }
+        .dark .bg-white { background-color: #1f2937; }
+        .dark .text-gray-800 { color: #ffffff; }
+        .dark .text-gray-500 { color: #9ca3af; }
+    """
+    demo.js = """
+        () => [document.body.classList.toggle('dark', window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)]
+    """
+
+    # Header
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.HTML("""
+                <div class="bg-white dark:bg-darkCard shadow-sm flex items-center p-4">
+                    <div class="bg-primary w-10 h-10 rounded-xl flex items-center justify-center mr-3 coin-animation">
+                        <i class="fas fa-chart-line text-white text-xl"></i>
+                    </div>
+                    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Nakhoda4X <span class="text-primary">Pro</span></h1>
+                </div>
+            """)
+        with gr.Column(scale=1, elem_classes="flex justify-end items-center space-x-6"):
+            theme_toggle = gr.Button(value="Toggle Theme", elem_classes="text-gray-600 dark:text-gray-300")
+            gr.HTML('<div><i class="fas fa-bell text-gray-600 dark:text-gray-300 text-xl"></i><span class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span></div>')
+            gr.HTML('<div class="flex items-center"><div class="mr-3 text-right"><p class="font-semibold text-gray-800 dark:text-white">SahabatPipHijau</p><p class="text-sm text-gray-500">Premium Account</p></div><div class="h-10 w-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center text-white font-bold">J</div></div>')
+
+    # Main Content
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("### Trading Dashboard")
+            gr.Markdown("Connected to BingX via API")
+            with gr.Row():
+                refresh_btn = gr.Button("Refresh", elem_classes="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")
+                new_trade_btn = gr.Button("New Trade", elem_classes="px-4 py-2 bg-primary text-white rounded-lg flex items-center")
+
+            # Stats Cards
+            with gr.Row(elem_classes="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"):
+                total_balance = gr.HTML("<div class='trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6'><div class='flex justify-between'><div><p class='text-gray-500 dark:text-gray-400'>Total Balance</p><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 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'>0.0%</span><span class='text-gray-500 ml-2 dark:text-gray-400'>last 24h</span></div></div>")
+                open_trades = gr.HTML("<div class='trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6'><div class='flex justify-between'><div><p class='text-gray-500 dark:text-gray-400'>Open Trades</p><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 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'>0 Short</span></div></div>")
+                today_profit = gr.HTML("<div class='trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6'><div class='flex justify-between'><div><p class='text-gray-500 dark:text-gray-400'>Today's Profit</p><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 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'>0.0%</span><span class='text-gray-500 ml-2 dark:text-gray-400'>vs yesterday</span></div></div>")
+                risk_exposure = gr.HTML("<div class='trading-card bg-white dark:bg-darkCard rounded-2xl shadow-md p-6'><div class='flex justify-between'><div><p class='text-gray-500 dark:text-gray-400'>Risk Exposure</p><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 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>")
+
+            # Charts and Statistics
+            with gr.Row(elem_classes="grid grid-cols-1 lg:grid-cols-3 gap-6"):
+                with gr.Column(scale=2):
+                    performance_chart = gr.Chart()
+                    gr.HTML("<div class='flex justify-between items-center mb-6'><h3 class='text-lg font-bold text-gray-800 dark:text-white'>Monthly Performance</h3><div class='flex space-x-3'><button class='px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white'>1M</button><button class='px-3 py-1 rounded-lg text-sm bg-primary text-white'>3M</button><button class='px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white'>6M</button><button class='px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white'>1Y</button></div></div>")
+                with gr.Column(scale=1):
+                    advanced_stats = gr.HTML()
+
+            # Trading Activity
+            trading_activity = gr.HTML()
+            gr.HTML("<div class='flex justify-between items-center mb-6'><h3 class='text-lg font-bold text-gray-800 dark:text-white'>Trading Activity</h3><div class='flex space-x-3'><button class='px-3 py-1 rounded-lg text-sm bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white'>All</button><button class='px-3 py-1 rounded-lg text-sm bg-primary text-white'>Open</button><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>")
 
+            # API Connection and Portfolio Allocation
+            with gr.Row(elem_classes="grid grid-cols-1 lg:grid-cols-3 gap-6"):
+                with gr.Column():
+                    api_connection = gr.Blocks()
+                    with api_connection:
+                        gr.HTML("<div class='bg-gradient-to-r from-primary to-secondary rounded-2xl p-6'><div class='flex items-center mb-4'><div class='mr-4'><div class='h-12 w-12 rounded-xl bg-white/30 flex items-center justify-center'><i class='fas fa-plug text-white text-xl'></i></div></div><div><h3 class='text-lg font-bold text-white'>BingX API Connected</h3><p id='last-sync' class='text-blue-100'>Last synced: Just now</p></div></div>")
+                        show_form = gr.State(False)
+                        toggle_btn = gr.Button("Manage API Credentials", elem_classes="w-full py-2 bg-white rounded-xl text-primary font-bold flex items-center justify-center mb-2")
+                        with gr.Column(elem_classes="api-form", visible=False) as api_form:
+                            api_key_input = gr.Textbox(label="API Key", value=api_key.value, type="password")
+                            api_secret_input = gr.Textbox(label="API Secret", value=api_secret.value, type="password")
+                            save_btn = gr.Button("Save Credentials", elem_classes="w-full py-2 bg-primary text-white rounded-lg")
+                        sync_now = gr.Button("Sync Now", elem_classes="mt-2 w-full py-3 bg-white rounded-xl text-primary font-bold flex items-center justify-center")
+
+                with gr.Column(scale=2):
+                    portfolio_allocation = gr.Blocks()
+                    with portfolio_allocation:
+                        gr.HTML("<div class='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 id='allocation-update' class='text-gray-500 dark:text-gray-400 text-sm'>Last updated: Just now</span></div></div>")
+                        allocation_chart, allocation_legend = gr.Chart(), gr.HTML()
+
+    # Event Handlers
+    toggle_btn.click(fn=toggle_api_form, inputs=[show_form], outputs=[api_form], _js="() => !document.querySelector('.api-form').classList.contains('open')")
+    save_btn.click(fn=save_credentials, inputs=[api_key_input, api_secret_input, api_key, api_secret], outputs=[gr.Markdown(), api_key, api_secret])
+    demo.load(fn=update_dashboard, inputs=[api_key, api_secret], outputs=[
+        total_balance, open_trades, trade_types, today_profit,
+        risk_exposure, exposure_percent, trading_activity, advanced_stats,
+        performance_chart, (allocation_chart, allocation_legend), gr.State(value=None), gr.State(value=None)
+    ])
+    refresh_btn.click(fn=update_dashboard, inputs=[api_key, api_secret], outputs=[
+        total_balance, open_trades, trade_types, today_profit,
+        risk_exposure, exposure_percent, trading_activity, advanced_stats,
+        performance_chart, (allocation_chart, allocation_legend), gr.State(value=None), gr.State(value=None)
+    ])
+    sync_now.click(fn=update_dashboard, inputs=[api_key, api_secret], outputs=[
+        total_balance, open_trades, trade_types, today_profit,
+        risk_exposure, exposure_percent, trading_activity, advanced_stats,
+        performance_chart, (allocation_chart, allocation_legend), gr.State(value=None), gr.State(value=None)
+    ])
+    new_trade_btn.click(None, _js="() => alert('New Trade functionality not implemented yet.')")
+
+    # Hot Dog Classifier Tab
     with gr.Tab("Hot Dog Classifier"):
         gr.Markdown("### Hot Dog? Or Not?")
         with gr.Row():
@@ -297,9 +322,7 @@ with gr.Blocks(title="Nakhoda4X Pro") as demo:
         submit_btn = gr.Button("Classify")
         submit_btn.click(fn=lambda img: (img, {p["label"]: p["score"] for p in hotdog_pipeline(img)}), inputs=input_img, outputs=[output_img, output_label])
 
-    demo.load(None, _js="() => [document.body.classList.toggle('dark', window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)]")
-    with gr.Row():
-        theme_toggle = gr.Button("Toggle Theme", elem_classes="text-gray-600 dark:text-gray-300")
+    # Theme Toggle
     theme_toggle.click(None, _js="() => document.body.classList.toggle('dark')")
 
 if __name__ == "__main__":