Update app.py

app.py

@@ -2,7 +2,8 @@ from typing import Dict, Any, Optional, Tuple, List
 import traceback
 import json
 import os
-from datetime import date
+from datetime import date, datetime
+import calendar
 import gradio as gr
 import plotly.graph_objects as go
 import httpx
@@ -544,7 +545,6 @@ Annual estimate: ${amount_float:.2f} × {frequency} = **${annual_spend:.2f}**
     except Exception as e:
         print(f"❌ ERROR: {traceback.format_exc()}")
         yield f"❌ **Error:** {str(e)}", None
-        
 
 def create_agent_recommendation_chart_enhanced(result: Dict) -> go.Figure:
     try:
@@ -752,7 +752,6 @@ def get_recommendation_with_ai(user_id, merchant, category, amount):
         error_details = traceback.format_exc()
         print(f"Recommendation error: {error_details}")
         yield f"❌ Error: {str(e)}\n\nPlease check your API connection or try again.", None
-        
 
 def create_rewards_comparison_chart(data: Dict) -> go.Figure:
     """Create rewards comparison chart with proper error handling"""
@@ -900,7 +899,51 @@ def create_empty_chart(message: str) -> go.Figure:
     )
     fig.update_layout(height=400, template='plotly_white')
     return fig
-        
+
+# ===================== NEW: FORMAT CURRENT MONTH SUMMARY =====================
+def format_current_month_summary(analytics_data):
+    """Format current month warnings with clear styling (for Analytics tab)"""
+    
+    warnings = []
+    
+    # Check for spending cap warnings
+    for card in analytics_data.get('card_usage', []):
+        if card.get('cap_percentage', 0) > 90:
+            warnings.append(
+                f"⚠️ <strong>{card['name']}</strong>: "
+                f"${card['current_spend']:.0f} / ${card['cap']:.0f} "
+                f"({card['cap_percentage']:.0f}% used)"
+            )
+    
+    # Calculate end-of-month projection
+    days_elapsed = datetime.now().day
+    days_in_month = calendar.monthrange(datetime.now().year, datetime.now().month)[1]
+    projection_ratio = days_in_month / days_elapsed if days_elapsed > 0 else 1
+    
+    projected_spending = analytics_data.get('total_spending', 0) * projection_ratio
+    projected_rewards = analytics_data.get('total_rewards', 0) * projection_ratio
+    
+    warnings_html = "<br>".join(warnings) if warnings else "✅ No warnings - you're on track!"
+    
+    return f"""
+    <div class="current-month-warning">
+        <h4>⚠️ This Month's Status (as of {datetime.now().strftime('%B %d')})</h4>
+        
+        <p><strong>Month-End Projection:</strong></p>
+        <ul style="margin: 10px 0; padding-left: 20px;">
+            <li>Estimated Total Spending: <strong>${projected_spending:.2f}</strong></li>
+            <li>Estimated Total Rewards: <strong>${projected_rewards:.2f}</strong></li>
+        </ul>
+        
+        <p><strong>Spending Cap Alerts:</strong></p>
+        <p style="margin: 10px 0;">{warnings_html}</p>
+        
+        <p style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #ffcc80; font-size: 13px; color: #666;">
+            💡 <em>These are estimates based on your current month's activity. 
+            For detailed future predictions, visit the <strong>Forecast tab</strong>.</em>
+        </p>
+    </div>
+    """
 
 def update_analytics_with_charts(user_id: str):
     """Fetch and format analytics with charts for selected user"""
@@ -925,7 +968,7 @@ def update_analytics_with_charts(user_id: str):
                 empty_fig, empty_fig, empty_fig, empty_fig, empty_fig,
                 "Error loading data",
                 "Error loading data",
-                "Error loading data",
+                f"<p>Error: {error_msg}</p>",  # Changed from forecast_md
                 f"*Error: {error_msg}*"
             )
         
@@ -938,11 +981,14 @@ def update_analytics_with_charts(user_id: str):
                 empty_fig, empty_fig, empty_fig, empty_fig, empty_fig,
                 "No data",
                 "No data",
-                "No data",
+                "<p>No data available</p>",  # Changed
                 "*No data available*"
             )
         
-        metrics_html, table_md, insights_md, forecast_md = format_analytics_metrics(analytics_data)
+        metrics_html, table_md, insights_md, _ = format_analytics_metrics(analytics_data)
+        
+        # Generate current month summary (NEW)
+        current_month_html = format_current_month_summary(analytics_data)
         
         spending_fig = create_spending_chart(analytics_data)
         pie_fig = create_rewards_pie_chart(analytics_data)
@@ -950,7 +996,6 @@ def update_analytics_with_charts(user_id: str):
         trend_fig = create_trend_line_chart(analytics_data)
         performance_fig = create_card_performance_chart(analytics_data)
         
-        from datetime import datetime
         status = f"*Analytics updated for {user_id} at {datetime.now().strftime('%I:%M %p')}*"
         
         return (
@@ -962,7 +1007,7 @@ def update_analytics_with_charts(user_id: str):
             trend_fig,
             table_md,
             insights_md,
-            forecast_md,
+            current_month_html,  # Changed from forecast_md
             status
         )
         
@@ -979,10 +1024,10 @@ def update_analytics_with_charts(user_id: str):
             empty_fig, empty_fig, empty_fig, empty_fig, empty_fig,
             "Error loading table",
             "Error loading insights",
-            "Error loading forecast",
+            f"<p>{error_msg}</p>",  # Changed
             f"*{error_msg}*"
         )
-    
+
 def _toggle_custom_mcc(use_custom: bool):
     return gr.update(visible=use_custom, value="")
 
@@ -1051,40 +1096,75 @@ def load_user_wallet(user_id: str):
 
 # ===================== NEW FUNCTION FOR FORECAST =====================
 def load_user_forecast(user_id: str):
-    """Load and display spending forecast"""
+    """Load and display spending forecast (comprehensive version for Forecast tab)"""
     try:
         # Mock forecast data - replace with actual API call
         forecast_data = {
             'next_month_spending': 3250.50,
             'predicted_rewards': 127.50,
+            'confidence': 0.92,
             'top_categories': [
-                {'category': 'Groceries', 'predicted': 850.00, 'confidence': 0.92},
-                {'category': 'Restaurants', 'predicted': 650.00, 'confidence': 0.88},
-                {'category': 'Gas', 'predicted': 450.00, 'confidence': 0.85},
+                {'category': 'Groceries', 'predicted': 850.00, 'confidence': 0.92, 'emoji': '🛒'},
+                {'category': 'Restaurants', 'predicted': 650.00, 'confidence': 0.88, 'emoji': '🍽️'},
+                {'category': 'Gas', 'predicted': 450.00, 'confidence': 0.85, 'emoji': '⛽'},
             ],
             'recommendations': [
                 "Consider using Amex Gold for groceries to maximize 4x points",
                 "You're approaching your Citi Custom Cash $500 monthly cap",
                 "Travel spending is predicted to increase next month"
-            ]
+            ],
+            'optimization_potential': 45.50
         }
         
+        confidence = forecast_data.get('confidence', 0.85)
+        confidence_color = '#4caf50' if confidence > 0.9 else '#ff9800' if confidence > 0.75 else '#f44336'
+        
         output = f"""
-## 📈 Spending Forecast for Next Month
+<div class="forecast-prediction">
+    <h3>🔮 Next Month Forecast 
+        <span class="confidence-badge" style="background: {confidence_color};">
+            {confidence*100:.0f}% Confidence
+        </span>
+    </h3>
+    
+    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 20px 0;">
+        <div style="background: white; padding: 15px; border-radius: 8px; text-align: center;">
+            <p style="color: #666; margin: 0; font-size: 12px;">PREDICTED SPENDING</p>
+            <p style="color: #0d47a1; margin: 5px 0; font-size: 28px; font-weight: 700;">
+                ${forecast_data['next_month_spending']:.2f}
+            </p>
+        </div>
+        <div style="background: white; padding: 15px; border-radius: 8px; text-align: center;">
+            <p style="color: #666; margin: 0; font-size: 12px;">EXPECTED REWARDS</p>
+            <p style="color: #4caf50; margin: 5px 0; font-size: 28px; font-weight: 700;">
+                ${forecast_data['predicted_rewards']:.2f}
+            </p>
+        </div>
+        <div style="background: white; padding: 15px; border-radius: 8px; text-align: center;">
+            <p style="color: #666; margin: 0; font-size: 12px;">OPTIMIZATION POTENTIAL</p>
+            <p style="color: #ff9800; margin: 5px 0; font-size: 28px; font-weight: 700;">
+                +${forecast_data['optimization_potential']:.2f}
+            </p>
+        </div>
+    </div>
+</div>
 
-### Predictions
-- **Total Spending:** ${forecast_data['next_month_spending']:.2f}
-- **Expected Rewards:** ${forecast_data['predicted_rewards']:.2f}
+## 📊 Category Breakdown
 
-### Category Breakdown
 """
         
         for cat in forecast_data['top_categories']:
-            output += f"- **{cat['category']}:** ${cat['predicted']:.2f} (Confidence: {cat['confidence']*100:.0f}%)\n"
+            output += f"""
+### {cat['emoji']} {cat['category']}
+- **Predicted Amount:** ${cat['predicted']:.2f} (Confidence: {cat['confidence']*100:.0f}%)
+- **Recommendation:** Use best card for this category
+- **Potential Rewards:** Based on optimal card selection
+
+"""
         
-        output += "\n### 💡 Optimization Recommendations\n\n"
-        for rec in forecast_data['recommendations']:
-            output += f"- {rec}\n"
+        output += "\n## 💡 Optimization Strategies\n\n"
+        for i, rec in enumerate(forecast_data['recommendations'], 1):
+            output += f"{i}. {rec}\n"
         
         # Create forecast chart
         fig = go.Figure()
@@ -1101,7 +1181,7 @@ def load_user_forecast(user_id: str):
         ))
         
         fig.update_layout(
-            title='Predicted Spending by Category',
+            title='Predicted Spending by Category (Next Month)',
             xaxis_title='Category',
             yaxis_title='Predicted Amount ($)',
             template='plotly_white',
@@ -1160,6 +1240,81 @@ with gr.Blocks(
     .metric-card-blue {
         background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
     }
+    
+    /* ===== ANALYTICS TAB - WARNING BOX ===== */
+    .current-month-warning {
+        background: linear-gradient(135deg, #fff4e6 0%, #ffe8cc 100%);
+        border-left: 4px solid #ff9800;
+        padding: 15px 20px;
+        border-radius: 8px;
+        margin: 20px 0;
+        box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
+    }
+    
+    .current-month-warning h4 {
+        color: #e65100;
+        margin: 0 0 10px 0;
+        font-size: 18px;
+        font-weight: 600;
+    }
+    
+    .current-month-warning p {
+        color: #5d4037;
+        margin: 5px 0;
+        font-size: 14px;
+    }
+    
+    /* ===== FORECAST TAB - PREDICTION BOX ===== */
+    .forecast-prediction {
+        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+        border-left: 4px solid #2196f3;
+        padding: 20px;
+        border-radius: 8px;
+        margin: 20px 0;
+        box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
+    }
+    
+    .forecast-prediction h3 {
+        color: #0d47a1;
+        margin: 0 0 15px 0;
+        font-size: 22px;
+        font-weight: 700;
+    }
+    
+    .forecast-prediction .confidence-badge {
+        display: inline-block;
+        padding: 4px 12px;
+        background: #4caf50;
+        color: white;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        margin-left: 10px;
+    }
+    
+    /* ===== SECTION DIVIDERS ===== */
+    .section-divider {
+        border: 0;
+        height: 2px;
+        background: linear-gradient(to right, transparent, #ddd, transparent);
+        margin: 30px 0;
+    }
+    
+    /* ===== INFO BOXES ===== */
+    .info-box {
+        background: #f5f5f5;
+        border-radius: 8px;
+        padding: 15px;
+        margin: 15px 0;
+        border-left: 3px solid #667eea;
+    }
+    
+    .info-box-icon {
+        font-size: 24px;
+        margin-right: 10px;
+        vertical-align: middle;
+    }
+    
     table {
         width: 100%;
         border-collapse: collapse;
@@ -1339,7 +1494,6 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
         # ==================== TAB 2: SMART WALLET ====================
         with gr.Tab("💳 Smart Wallet"):
             gr.Markdown("## Your Credit Card Portfolio")
-            
             wallet_user = gr.Dropdown(
                 choices=SAMPLE_USERS,
                 value=SAMPLE_USERS[0],
@@ -1446,12 +1600,40 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                         value="*Loading insights...*"
                     )
             
-            gr.Markdown("---")
+            # ===== CHANGED SECTION: Current Month Summary =====
+            gr.HTML('<hr class="section-divider">')
             
-            forecast_display = gr.Markdown(
-                value="*Loading forecast...*"
+            gr.Markdown("""
+            <div class="info-box">
+                <span class="info-box-icon">📊</span>
+                <strong>Current Month Summary</strong> - Quick insights based on your spending so far this month
+            </div>
+            """)
+            
+            current_month_summary = gr.HTML(
+                value="""
+                <div class="current-month-warning">
+                    <h4>⚠️ This Month's Insights</h4>
+                    <p><em>Loading current month data...</em></p>
+                </div>
+                """,
+                label=None
             )
             
+            # Add clear call-to-action to Forecast tab
+            gr.Markdown("""
+            <div style="text-align: center; margin: 20px 0;">
+                <p style="color: #666; font-size: 14px;">
+                    Want to see <strong>next month's predictions</strong> and optimization strategies?
+                </p>
+                <p style="margin-top: 10px;">
+                    👉 <span style="color: #667eea; font-weight: 600; font-size: 16px;">
+                       Go to the <strong>Forecast Tab</strong> above →
+                    </span>
+                </p>
+            </div>
+            """)
+            
             analytics_status = gr.Markdown(
                 value="*Select a user to view analytics*",
                 elem_classes=["status-text"]
@@ -1470,7 +1652,7 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                     trend_chart,
                     spending_table,
                     insights_display,
-                    forecast_display,
+                    current_month_summary,  # Changed from forecast_display
                     analytics_status
                 ]
             )
@@ -1487,7 +1669,7 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                     trend_chart,
                     spending_table,
                     insights_display,
-                    forecast_display,
+                    current_month_summary,  # Changed from forecast_display
                     analytics_status
                 ]
             )
@@ -1504,24 +1686,47 @@ Get AI-powered credit card recommendations that maximize your rewards based on:
                     trend_chart,
                     spending_table,
                     insights_display,
-                    forecast_display,
+                    current_month_summary,  # Changed from forecast_display
                     analytics_status
                 ]
             )
         
         # ==================== TAB 4: FORECAST ====================
         with gr.Tab("📈 Forecast"):
-            gr.Markdown("## Future Spending Predictions & Optimization")
+            # Add clear header with explanation
+            gr.Markdown("""
+            <div class="forecast-prediction">
+                <h3>🔮 AI-Powered Spending Forecast</h3>
+                <p style="color: #1565c0; font-size: 16px; margin: 0;">
+                    Machine learning predictions for your <strong>next 1-3 months</strong> 
+                    with personalized optimization strategies
+                </p>
+            </div>
+            """)
             
-            forecast_user = gr.Dropdown(
-                choices=SAMPLE_USERS,
-                value=SAMPLE_USERS[0],
-                label="👤 Select User"
-            )
+            gr.Markdown("""
+            <div class="info-box">
+                <span class="info-box-icon">🤖</span>
+                <strong>How it works:</strong> Our AI analyzes your historical spending patterns, 
+                seasonal trends, and card benefits to predict future spending and recommend 
+                the best cards to maximize your rewards.
+            </div>
+            """)
             
-            refresh_forecast_btn = gr.Button("🔄 Refresh Forecast", variant="secondary")
+            with gr.Row():
+                forecast_user = gr.Dropdown(
+                    choices=SAMPLE_USERS,
+                    value=SAMPLE_USERS[0],
+                    label="👤 Select User"
+                )
+                
+                refresh_forecast_btn = gr.Button(
+                    "🔄 Refresh Forecast", 
+                    variant="primary",
+                    size="sm"
+                )
             
-            forecast_output = gr.Markdown(value="*Loading forecast...*")
+            forecast_output = gr.HTML(value="<p><em>Loading forecast...</em></p>")
             forecast_chart = gr.Plot()
             
             def update_forecast(user_id):