Update app.py

app.py

@@ -331,103 +331,168 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                 cache_examples=False
             )
         
-        # ========== Tab 2: Analytics (NEW) ==========
+        # ========== Tab 2: Analytics (DYNAMIC) ==========
         with gr.Tab("📊 Analytics"):
             gr.Markdown("## 🎯 Your Rewards Optimization Dashboard")
             
-            # Top Metrics Row
+            # User selector for analytics
             with gr.Row():
-                with gr.Column(scale=1):
-                    gr.HTML("""
-                    <div class="metric-card">
+                analytics_user = gr.Dropdown(
+                    choices=SAMPLE_USERS,
+                    value=SAMPLE_USERS,[object Object],,
+                    label="👤 View Analytics For User",
+                    scale=3
+                )
+                refresh_analytics_btn = gr.Button(
+                    "🔄 Refresh Analytics",
+                    variant="secondary",
+                    scale=1
+                )
+            
+            # Top Metrics Row (Dynamic)
+            metrics_display = gr.HTML(
+                value="""
+                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                    <div class="metric-card" style="flex: 1; min-width: 200px;">
                         <h2>$342</h2>
                         <p>💰 Potential Annual Savings</p>
                     </div>
-                    """)
-                
-                with gr.Column(scale=1):
-                    gr.HTML("""
-                    <div class="metric-card metric-card-green">
+                    <div class="metric-card metric-card-green" style="flex: 1; min-width: 200px;">
                         <h2>23%</h2>
                         <p>📈 Rewards Rate Increase</p>
                     </div>
-                    """)
-                
-                with gr.Column(scale=1):
-                    gr.HTML("""
-                    <div class="metric-card metric-card-orange">
+                    <div class="metric-card metric-card-orange" style="flex: 1; min-width: 200px;">
                         <h2>156</h2>
                         <p>✅ Optimized Transactions</p>
                     </div>
-                    """)
-                
-                with gr.Column(scale=1):
-                    gr.HTML("""
-                    <div class="metric-card metric-card-blue">
+                    <div class="metric-card metric-card-blue" style="flex: 1; min-width: 200px;">
                         <h2>87/100</h2>
                         <p>⭐ Optimization Score</p>
                     </div>
-                    """)
+                </div>
+                """
+            )
             
             gr.Markdown("---")
             
-            # Detailed Analytics
+            # Detailed Analytics (Dynamic)
             with gr.Row():
                 with gr.Column(scale=1):
                     gr.Markdown("### 💰 Category Spending Breakdown")
-                    gr.Markdown("""
-| Category | Monthly Spend | Best Card | Rewards | Rate |
-|----------|---------------|-----------|---------|------|
-| 🛒 Groceries | $450.00 | Amex Gold | $27.00 | 6% |
-| 🍽️ Restaurants | $320.00 | Amex Gold | $12.80 | 4% |
-| ⛽ Gas | $180.00 | Costco Visa | $7.20 | 4% |
-| ✈️ Travel | $850.00 | Sapphire Reserve | $42.50 | 5% |
-| 🎬 Entertainment | $125.00 | Freedom Unlimited | $1.88 | 1.5% |
-| 🏪 Online Shopping | $280.00 | Amazon Prime | $16.80 | 6% |
-| **Total** | **$2,205.00** | - | **$108.18** | **4.9%** |
-                    """)
+                    spending_table = gr.Markdown(
+                        value="""
+        | Category | Monthly Spend | Best Card | Rewards | Rate |
+        |----------|---------------|-----------|---------|------|
+        | 🛒 Groceries | $450.00 | Amex Gold | $27.00 | 6% |
+        | 🍽️ Restaurants | $320.00 | Amex Gold | $12.80 | 4% |
+        | ⛽ Gas | $180.00 | Costco Visa | $7.20 | 4% |
+        | ✈️ Travel | $850.00 | Sapphire Reserve | $42.50 | 5% |
+        | 🎬 Entertainment | $125.00 | Freedom Unlimited | $1.88 | 1.5% |
+        | 🏪 Online Shopping | $280.00 | Amazon Prime | $16.80 | 6% |
+        | **Total** | **$2,205.00** | - | **$108.18** | **4.9%** |
+                        """
+                    )
                 
                 with gr.Column(scale=1):
                     gr.Markdown("### 📈 Monthly Trends & Insights")
-                    
-                    gr.Markdown("""
-**🔥 Top Spending Categories:**
-1. ✈️ Travel: $850 (↑ 45% from last month)
-2. 🛒 Groceries: $450 (↑ 12%)
-3. 🍽️ Restaurants: $320 (↓ 5%)
-
-**💡 Optimization Opportunities:**
-- ✅ You're using optimal cards 87% of the time
-- 🎯 Switch to Chase Freedom for Q4 5% grocery bonus
-- ⚠️ Amex Gold dining cap approaching ($2,000 limit)
-- 💳 Consider applying for Citi Custom Cash
-
-**🏆 Best Performing Card:**
-Chase Sapphire Reserve - $42.50 rewards earned
-
-**���� Year-to-Date:**
-- Total Rewards: $1,298.16
-- Potential if optimized: $1,640.00
-- **Money left on table: $341.84**
-                    """)
+                    insights_display = gr.Markdown(
+                        value="""
+        **🔥 Top Spending Categories:**
+        1. ✈️ Travel: $850 (↑ 45% from last month)
+        2. 🛒 Groceries: $450 (↑ 12%)
+        3. 🍽️ Restaurants: $320 (↓ 5%)
+        
+        **💡 Optimization Opportunities:**
+        - ✅ You're using optimal cards 87% of the time
+        - 🎯 Switch to Chase Freedom for Q4 5% grocery bonus
+        - ⚠️ Amex Gold dining cap approaching ($2,000 limit)
+        
+        **🏆 Best Performing Card:**
+        Chase Sapphire Reserve - $42.50 rewards earned
+        
+        **📊 Year-to-Date:**
+        - Total Rewards: $1,298.16
+        - Potential if optimized: $1,640.00
+        - **Money left on table: $341.84**
+                        """
+                    )
             
             gr.Markdown("---")
             
-            # Spending Forecast
-            with gr.Row():
-                gr.Markdown("""
-### 🔮 Next Month Forecast
-
-Based on your spending patterns:
-- **Predicted Spend:** $2,350
-- **Predicted Rewards:** $115.25
-- **Cards to Watch:** Amex Gold (dining cap), Freedom (quarterly bonus)
-
-**Recommendations:**
-1. 💳 Use Chase Freedom for groceries in Q4 (5% back)
-2. ⚠️ Monitor Amex Gold dining spend (cap at $2,000)
-3. 🎯 Book holiday travel with Sapphire Reserve for 5x points
-                """)
+            # Spending Forecast (Dynamic)
+            forecast_display = gr.Markdown(
+                value="""
+        ### 🔮 Next Month Forecast
+        
+        Based on your spending patterns:
+        - **Predicted Spend:** $2,350
+        - **Predicted Rewards:** $115.25
+        - **Cards to Watch:** Amex Gold (dining cap), Freedom (quarterly bonus)
+        
+        **Recommendations:**
+        1. 💳 Use Chase Freedom for groceries in Q4 (5% back)
+        2. ⚠️ Monitor Amex Gold dining spend (cap at $2,000)
+        3. 🎯 Book holiday travel with Sapphire Reserve for 5x points
+                """
+            )
+            
+            # Status indicator
+            analytics_status = gr.Markdown(
+                value="*Analytics loaded for u_alice*",
+                elem_classes=["status-text"]
+            )
+        
+        # ===================== Analytics Update Function =====================
+        def update_analytics(user_id: str) -> tuple:
+            """Fetch and format analytics 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
+                metrics_html, table_md, insights_md, forecast_md = format_analytics_metrics(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
+                
+            except Exception as e:
+                error_msg = f"❌ Error loading analytics: {str(e)}"
+                return (
+                    "<p>Error loading metrics</p>",
+                    "Error loading table",
+                    "Error loading insights",
+                    "Error loading forecast",
+                    error_msg
+                )
+        
+        # Connect analytics refresh to button and dropdown
+        refresh_analytics_btn.click(
+            fn=update_analytics,
+            inputs=[analytics_user],
+            outputs=[
+                metrics_display,
+                spending_table,
+                insights_display,
+                forecast_display,
+                analytics_status
+            ]
+        )
+        
+        analytics_user.change(
+            fn=update_analytics,
+            inputs=[analytics_user],
+            outputs=[
+                metrics_display,
+                spending_table,
+                insights_display,
+                forecast_display,
+                analytics_status
+            ]
+        )
         
         # ========== Tab 3: About ==========
         with gr.Tab("ℹ️ About"):