Update app.py

app.py

@@ -36,17 +36,17 @@ def get_recommendation(
             None,
             None,
         )
-
+    
     # Determine MCC code
     if use_custom_mcc and custom_mcc:
         mcc = custom_mcc
     else:
         mcc = MCC_CATEGORIES.get(category, "5999")
-
+    
     # Set default date if not provided
     if not transaction_date:
         transaction_date = str(date.today())
-
+    
     # Call API
     response: Dict[str, Any] = client.get_recommendation_sync(
         user_id=user_id,
@@ -55,10 +55,10 @@ def get_recommendation(
         amount_usd=amount,
         transaction_date=transaction_date,
     )
-
+    
     # Format response
     formatted_text = format_full_recommendation(response)
-
+    
     # Extract card details for comparison
     comparison_table: Optional[str]
     stats: Optional[str]
@@ -67,7 +67,7 @@ def get_recommendation(
         alternatives: List[Dict[str, Any]] = response.get("alternative_cards", []) or []
         all_cards = [c for c in ([recommended] + alternatives) if c]
         comparison_table = format_comparison_table(all_cards) if all_cards else None
-
+        
         # Create summary stats
         total_analyzed = response.get("total_cards_analyzed", len(all_cards))
         best_reward = (recommended.get("reward_amount") or 0.0)
@@ -80,7 +80,7 @@ def get_recommendation(
     else:
         comparison_table = None
         stats = None
-
+    
     return formatted_text, comparison_table, stats
 
 # ===================== Sample Transaction Examples =====================
@@ -107,6 +107,69 @@ with gr.Blocks(
         font-size: 16px;
         line-height: 1.6;
     }
+    /* Metric Cards Styling */
+    .metric-card {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 30px 20px;
+        border-radius: 16px;
+        text-align: center;
+        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        margin: 10px;
+    }
+    .metric-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
+    }
+    .metric-card h2 {
+        font-size: 48px;
+        font-weight: 700;
+        margin: 0 0 10px 0;
+        color: white;
+    }
+    .metric-card p {
+        font-size: 16px;
+        margin: 0;
+        opacity: 0.9;
+        color: white;
+    }
+    .metric-card-green {
+        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+    }
+    .metric-card-orange {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    }
+    .metric-card-blue {
+        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+    }
+    /* Table styling */
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 20px 0;
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    table th {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 12px;
+        text-align: left;
+        font-weight: 600;
+    }
+    table td {
+        padding: 12px;
+        border-bottom: 1px solid #f0f0f0;
+    }
+    table tr:last-child td {
+        border-bottom: none;
+    }
+    table tr:hover {
+        background: #f8f9fa;
+    }
     """,
 ) as app:
     # Header
@@ -114,30 +177,30 @@ with gr.Blocks(
         f"""
 # {APP_TITLE}
 {APP_DESCRIPTION}
+
 Get AI-powered credit card recommendations that maximize your rewards based on:
 - 💰 **Reward Rates** - Optimal card selection for each purchase
 - 📚 **Card Benefits** - Detailed information from our knowledge base
 - ⚠️ **Spending Caps** - Risk warnings to avoid missing out on bonuses
+
 ---
 """
     )
-
-    # Ensure all three tabs are siblings at the same level
+    
+    # Ensure all tabs are siblings at the same level
     with gr.Tabs():
-
         # ========== Tab 1: Get Recommendation ==========
         with gr.Tab("🎯 Get Recommendation"):
             with gr.Row():
                 with gr.Column(scale=1):
                     gr.Markdown("### Transaction Details")
-
                     user_dropdown = gr.Dropdown(
                         choices=SAMPLE_USERS,
                         value=SAMPLE_USERS[0],
                         label="User ID",
                         info="Select a user"
                     )
-
+                    
                     # CATEGORY FIRST (moved up)
                     category_dropdown = gr.Dropdown(
                         choices=list(MCC_CATEGORIES.keys()),
@@ -145,7 +208,7 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                         label="🏷️ Type of Purchase",
                         info="Select the category first"
                     )
-
+                    
                     # MERCHANT DROPDOWN (now dynamic)
                     merchant_dropdown = gr.Dropdown(
                         choices=MERCHANTS_BY_CATEGORY["Groceries"],
@@ -154,20 +217,20 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                         info="Select merchant (changes based on category)",
                         allow_custom_value=True  # Allows typing custom merchants
                     )
-
+                    
                     amount_input = gr.Number(
                         label="💵 Amount (USD)",
                         value=125.50,
                         minimum=0.01,
                         step=0.01
                     )
-
+                    
                     date_input = gr.Textbox(
                         label="📅 Transaction Date (Optional)",
                         placeholder="YYYY-MM-DD or leave blank for today",
                         value=""
                     )
-
+                    
                     # Advanced options
                     with gr.Accordion("⚙️ Advanced Options", open=False):
                         use_custom_mcc = gr.Checkbox(
@@ -179,30 +242,29 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                             placeholder="e.g., 5411",
                             visible=False
                         )
-
+                        
                         def toggle_custom_mcc(use_custom):
                             return gr.update(visible=use_custom)
-
+                        
                         use_custom_mcc.change(
                             fn=toggle_custom_mcc,
                             inputs=[use_custom_mcc],
                             outputs=[custom_mcc_input]
                         )
-
+                    
                     recommend_btn = gr.Button(
                         "🚀 Get Recommendation",
                         variant="primary",
                         size="lg"
                     )
-
+                
                 with gr.Column(scale=2):
                     gr.Markdown("### 💡 Recommendation")
-
                     recommendation_output = gr.Markdown(
                         value="✨ Select a category and merchant, then click 'Get Recommendation'",
                         elem_classes=["recommendation-output"]
                     )
-
+            
             def update_merchant_choices(category):
                 """Update merchant dropdown based on selected category"""
                 merchants = MERCHANTS_BY_CATEGORY.get(category, ["Custom Merchant"])
@@ -210,24 +272,24 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                     choices=merchants,
                     value=merchants[0] if merchants else ""
                 )
-
+            
             # Connect category change to merchant update
             category_dropdown.change(
                 fn=update_merchant_choices,
                 inputs=[category_dropdown],
                 outputs=[merchant_dropdown]
             )
-
+            
             # Stats and comparison below
             with gr.Row():
                 with gr.Column():
                     gr.Markdown("### 📊 Quick Stats")
                     stats_output = gr.Markdown()
-
+                
                 with gr.Column():
                     gr.Markdown("### 🔄 Card Comparison")
                     comparison_output = gr.Markdown()
-
+            
             # Connect button to function
             recommend_btn.click(
                 fn=get_recommendation,
@@ -246,7 +308,7 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                     stats_output
                 ]
             )
-
+            
             # Examples
             gr.Markdown("### 📝 Example Transactions")
             gr.Examples(
@@ -268,28 +330,131 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                 fn=get_recommendation,
                 cache_examples=False
             )
-
-        # ========== Tab 2: About ==========
+        
+        # ========== Tab 2: Analytics (NEW) ==========
+        with gr.Tab("📊 Analytics"):
+            gr.Markdown("## 🎯 Your Rewards Optimization Dashboard")
+            
+            # Top Metrics Row
+            with gr.Row():
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                    <div class="metric-card">
+                        <h2>$342</h2>
+                        <p>💰 Potential Annual Savings</p>
+                    </div>
+                    """)
+                
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                    <div class="metric-card metric-card-green">
+                        <h2>23%</h2>
+                        <p>📈 Rewards Rate Increase</p>
+                    </div>
+                    """)
+                
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                    <div class="metric-card metric-card-orange">
+                        <h2>156</h2>
+                        <p>✅ Optimized Transactions</p>
+                    </div>
+                    """)
+                
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                    <div class="metric-card metric-card-blue">
+                        <h2>87/100</h2>
+                        <p>⭐ Optimization Score</p>
+                    </div>
+                    """)
+            
+            gr.Markdown("---")
+            
+            # Detailed Analytics
+            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%** |
+                    """)
+                
+                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**
+                    """)
+            
+            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
+                """)
+        
+        # ========== Tab 3: About ==========
         with gr.Tab("ℹ️ About"):
             gr.Markdown(
                 """
 ## About RewardPilot
+
 RewardPilot is an AI-powered credit card recommendation system built using the **Model Context Protocol (MCP)** architecture.
 
 ### 🏗️ Architecture
+
 The system consists of multiple microservices:
+
 1. **Smart Wallet** - Analyzes transaction context and selects optimal cards
 2. **Rewards-RAG** - Retrieves detailed card benefit information using RAG
 3. **Spend-Forecast** - Predicts spending patterns and warns about cap risks
 4. **Orchestrator** - Coordinates all services for comprehensive recommendations
 
 ### 🎯 How It Works
+
 1. **Enter Transaction Details** - Merchant, amount, category
 2. **AI Analysis** - System analyzes your wallet and transaction context
 3. **Get Recommendation** - Receive the best card with detailed reasoning
 4. **Maximize Rewards** - Earn more points/cashback on every purchase
 
 ### 🔧 Technology Stack
+
 - **Backend:** FastAPI, Python
 - **Frontend:** Gradio
 - **AI/ML:** RAG (Retrieval-Augmented Generation)
@@ -297,6 +462,7 @@ The system consists of multiple microservices:
 - **Deployment:** Hugging Face Spaces
 
 ### 📚 MCC Categories Supported
+
 - Groceries (5411)
 - Restaurants (5812)
 - Gas Stations (5541)
@@ -306,27 +472,32 @@ The system consists of multiple microservices:
 - And many more...
 
 ### 🎓 Built For
+
 **MCP 1st Birthday Hackathon** - Celebrating one year of the Model Context Protocol
 
 ### 👨‍💻 Developer
+
 Built with ❤️ for the MCP community
 
 ---
+
 **Version:** 1.0.0  
 **Last Updated:** November 2025
 """
             )
-
-        # ========== Tab 3: API Documentation ==========
+        
+        # ========== Tab 4: API Documentation ==========
         with gr.Tab("📖 API Docs"):
             gr.Markdown(
                 """
 ## API Endpoints
 
 ### Orchestrator API
+
 **Base URL:** `https://mcp-1st-birthday-rewardpilot-orchestrator.hf.space`
 
 #### POST `/recommend`
+
 Get comprehensive card recommendation.
 
 **Request:**
@@ -363,18 +534,21 @@ Get comprehensive card recommendation.
 ```
 
 ### Other Services
+
 - Smart Wallet: https://mcp-1st-birthday-rewardpilot-smart-wallet.hf.space  
 - Rewards-RAG: https://mcp-1st-birthday-rewardpilot-rewards-rag.hf.space  
 - Spend-Forecast: https://mcp-1st-birthday-rewardpilot-spend-forecast.hf.space  
 
 ### Interactive Docs
+
 Visit `/docs` on any service for interactive Swagger UI documentation.
 
 ### cURL Examples
+
 ```bash
 # Get recommendation
-curl -X POST https://mcp-1st-birthday-rewardpilot-orchestrator.hf.space/recommend \
-  -H "Content-Type: application/json" \
+curl -X POST https://mcp-1st-birthday-rewardpilot-orchestrator.hf.space/recommend \\
+  -H "Content-Type: application/json" \\
   -d '{
     "user_id": "u_alice",
     "merchant": "Whole Foods",