Update app.py

app.py

@@ -13,8 +13,14 @@ from utils.api_client import RewardPilotClient
 from utils.formatters import (
     format_full_recommendation,
     format_comparison_table,
-    format_analytics_metrics
+    format_analytics_metrics,
+create_spending_chart,
+    create_rewards_pie_chart,
+    create_optimization_gauge,
+    create_trend_line_chart,
+    create_card_performance_chart
 )
+import plotly.graph_objects as go
 
 # ===================== Initialize API client =====================
 client = RewardPilotClient()
@@ -332,7 +338,7 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                 cache_examples=False
             )
         
-        # ========== Tab 2: Analytics (DYNAMIC) ==========
+        # ========== Tab 2: Analytics with Charts (ENHANCED) ==========
         with gr.Tab("📊 Analytics"):
             gr.Markdown("## 🎯 Your Rewards Optimization Dashboard")
             
@@ -340,7 +346,7 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
             with gr.Row():
                 analytics_user = gr.Dropdown(
                     choices=SAMPLE_USERS,
-                    value=SAMPLE_USERS[0],
+                    value=SAMPLE_USERS,[object Object],,
                     label="👤 View Analytics For User",
                     scale=3
                 )
@@ -376,6 +382,32 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
             
             gr.Markdown("---")
             
+            # ========== CHARTS SECTION (NEW) ==========
+            gr.Markdown("## 📊 Visual Analytics")
+            
+            # Row 1: Spending Chart + Optimization Gauge
+            with gr.Row():
+                with gr.Column(scale=2):
+                    spending_chart = gr.Plot(label="Spending vs Rewards")
+                with gr.Column(scale=1):
+                    optimization_gauge = gr.Plot(label="Your Score")
+            
+            # Row 2: Pie Chart + Card Performance
+            with gr.Row():
+                with gr.Column(scale=1):
+                    rewards_pie_chart = gr.Plot(label="Rewards Distribution")
+                with gr.Column(scale=1):
+                    card_performance_chart = gr.Plot(label="Top Performing Cards")
+            
+            # Row 3: Trend Line Chart (Full Width)
+            with gr.Row():
+                trend_chart = gr.Plot(label="12-Month Trends")
+            
+            gr.Markdown("---")
+            
+            # ========== DATA TABLES SECTION ==========
+            gr.Markdown("## 📋 Detailed Breakdown")
+            
             # Detailed Analytics (Dynamic)
             with gr.Row():
                 with gr.Column(scale=1):
@@ -443,27 +475,70 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                 elem_classes=["status-text"]
             )
         
-        # ===================== Analytics Update Function =====================
-        def update_analytics(user_id: str) -> tuple:
-            """Fetch and format analytics for selected user"""
+        # ===================== Analytics Update Function (ENHANCED) =====================
+        def update_analytics_with_charts(user_id: str) -> tuple:
+            """Fetch and format analytics with charts for selected user"""
             try:
                 # Fetch analytics data
                 analytics_data = client.get_user_analytics(user_id)
                 
-                # Format for display
-                from utils.formatters import format_analytics_metrics
+                # Import chart functions
+                from utils.formatters import (
+                    format_analytics_metrics,
+                    create_spending_chart,
+                    create_rewards_pie_chart,
+                    create_optimization_gauge,
+                    create_trend_line_chart,
+                    create_card_performance_chart
+                )
+                
+                # Format text data
                 metrics_html, table_md, insights_md, forecast_md = format_analytics_metrics(analytics_data)
                 
+                # Generate charts
+                spending_fig = create_spending_chart(analytics_data)
+                pie_fig = create_rewards_pie_chart(analytics_data)
+                gauge_fig = create_optimization_gauge(analytics_data)
+                trend_fig = create_trend_line_chart(analytics_data)
+                performance_fig = create_card_performance_chart(analytics_data)
+                
                 # Status message
                 from datetime import datetime
                 status = f"*Analytics updated for {user_id} at {datetime.now().strftime('%I:%M %p')}*"
                 
-                return metrics_html, table_md, insights_md, forecast_md, status
+                return (
+                    metrics_html,           # Metric cards
+                    spending_fig,           # Spending bar chart
+                    gauge_fig,              # Optimization gauge
+                    pie_fig,                # Rewards pie chart
+                    performance_fig,        # Card performance chart
+                    trend_fig,              # Trend line chart
+                    table_md,               # Spending table
+                    insights_md,            # Insights text
+                    forecast_md,            # Forecast text
+                    status                  # Status message
+                )
                 
             except Exception as e:
-                error_msg = f"❌ Error loading analytics: {str(e)}"
+                import traceback
+                error_msg = f"❌ Error loading analytics: {str(e)}\n\n{traceback.format_exc()}"
+                print(error_msg)  # Debug print
+                
+                # Return empty/error states
+                empty_fig = go.Figure()
+                empty_fig.add_annotation(
+                    text="Error loading chart",
+                    xref="paper", yref="paper",
+                    x=0.5, y=0.5, showarrow=False
+                )
+                
                 return (
                     "<p>Error loading metrics</p>",
+                    empty_fig,
+                    empty_fig,
+                    empty_fig,
+                    empty_fig,
+                    empty_fig,
                     "Error loading table",
                     "Error loading insights",
                     "Error loading forecast",
@@ -472,10 +547,15 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
         
         # Connect analytics refresh to button and dropdown
         refresh_analytics_btn.click(
-            fn=update_analytics,
+            fn=update_analytics_with_charts,
             inputs=[analytics_user],
             outputs=[
                 metrics_display,
+                spending_chart,
+                optimization_gauge,
+                rewards_pie_chart,
+                card_performance_chart,
+                trend_chart,
                 spending_table,
                 insights_display,
                 forecast_display,
@@ -484,10 +564,15 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
         )
         
         analytics_user.change(
-            fn=update_analytics,
+            fn=update_analytics_with_charts,
             inputs=[analytics_user],
             outputs=[
                 metrics_display,
+                spending_chart,
+                optimization_gauge,
+                rewards_pie_chart,
+                card_performance_chart,
+                trend_chart,
                 spending_table,
                 insights_display,
                 forecast_display,