Upload 19 files

Dockerfile

@@ -0,0 +1,57 @@
+# Use Python 3.10 slim image
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Create non-root user
+RUN useradd -m -u 1000 appuser && chown -R appuser:appuser /app
+
+# Copy application files
+COPY . .
+
+# Create necessary directories with proper permissions
+RUN mkdir -p templates property_db /tmp/hf_cache /tmp/chromadb_properties
+RUN mkdir -p /tmp/hf_cache/transformers /tmp/hf_cache/datasets /tmp/hf_cache/hub /tmp/hf_cache/chroma /tmp/hf_cache/onnx /tmp/hf_cache/sentence_transformers
+RUN chmod -R 755 /tmp/hf_cache /tmp/chromadb_properties
+RUN chown -R appuser:appuser /tmp/hf_cache /tmp/chromadb_properties
+
+# Set environment variables
+ENV PYTHONPATH=/app
+ENV FLASK_APP=app.py
+ENV PORT=7860
+ENV HF_HOME=/tmp/hf_cache
+ENV TRANSFORMERS_CACHE=/tmp/hf_cache/transformers
+ENV HF_DATASETS_CACHE=/tmp/hf_cache/datasets
+ENV HF_HUB_CACHE=/tmp/hf_cache/hub
+ENV CHROMA_CACHE_DIR=/tmp/hf_cache/chroma
+ENV ONNXRUNTIME_CACHE_DIR=/tmp/hf_cache/onnx
+ENV SENTENCE_TRANSFORMERS_HOME=/tmp/hf_cache/sentence_transformers
+ENV CHROMADB_PERSIST_DIRECTORY=/tmp/chromadb_properties
+ENV CHROMADB_IS_PERSISTENT=true
+
+# Expose port (Hugging Face Spaces uses 7860)
+EXPOSE 7860
+
+# Switch to non-root user
+USER appuser
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:7860/api/health || exit 1
+
+# Run the application
+CMD ["python", "app.py"] 

app.py

@@ -0,0 +1,358 @@
+#!/usr/bin/env python3
+"""
+Unified AI Lead Analysis System
+Single port (7860) solution with API, Frontend, and Email features
+Enhanced with 24-hour background property fetching and peak time email automation
+"""
+
+import os
+import sys
+import logging
+import threading
+import schedule
+import time
+from datetime import datetime, timedelta
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+class UnifiedAISystem:
+    def __init__(self):
+        """Initialize the unified AI system with background services"""
+        self.background_thread = None
+        self.email_thread = None
+        self.is_running = False
+        
+        # Initialize AI engine
+        try:
+            from ai_recommendation_engine import AIRecommendationEngine
+            self.ai_engine = AIRecommendationEngine()
+            logger.info("✅ AI Recommendation Engine initialized")
+        except Exception as e:
+            logger.error(f"❌ Failed to initialize AI engine: {e}")
+            self.ai_engine = None
+    
+    def start_background_services(self):
+        """Start background services for property fetching and email automation"""
+        logger.info("🚀 Starting background services...")
+        
+        # Start background property fetching thread
+        self.background_thread = threading.Thread(target=self._run_background_services, daemon=True)
+        self.background_thread.start()
+        
+        # Start email automation thread
+        self.email_thread = threading.Thread(target=self._run_email_automation, daemon=True)
+        self.email_thread.start()
+        
+        logger.info("✅ Background services started successfully")
+    
+    def _run_background_services(self):
+        """Run background services including property fetching"""
+        logger.info("🔄 Background services thread started")
+        
+        # Schedule property fetching every 24 hours
+        schedule.every(24).hours.do(self._fetch_properties_background)
+        
+        # Run initial property fetch
+        logger.info("🚀 Running initial property fetch...")
+        self._fetch_properties_background()
+        
+        # Keep the scheduler running
+        while self.is_running:
+            schedule.run_pending()
+            time.sleep(60)  # Check every minute
+    
+    def _fetch_properties_background(self):
+        """Fetch properties in background without blocking the main application"""
+        try:
+            logger.info("🔄 Starting background property fetch...")
+            
+            if self.ai_engine:
+                # Run property fetching in a separate thread to avoid blocking
+                fetch_thread = threading.Thread(target=self._execute_property_fetch, daemon=True)
+                fetch_thread.start()
+                logger.info("✅ Background property fetch initiated")
+            else:
+                logger.warning("⚠️ AI engine not available for property fetching")
+                
+        except Exception as e:
+            logger.error(f"❌ Error in background property fetch: {e}")
+    
+    def _execute_property_fetch(self):
+        """Execute the actual property fetching"""
+        try:
+            logger.info("📥 Executing parallel property fetch...")
+            success = self.ai_engine.fetch_all_properties_parallel(
+                max_workers=10,
+                page_size=100,
+                max_pages=10
+            )
+            
+            if success:
+                logger.info("✅ Background property fetch completed successfully")
+                # Update cache timestamp
+                self._update_cache_timestamp()
+            else:
+                logger.warning("⚠️ Background property fetch completed with issues")
+                
+        except Exception as e:
+            logger.error(f"❌ Error executing property fetch: {e}")
+    
+    def _update_cache_timestamp(self):
+        """Update the cache timestamp file"""
+        try:
+            import os
+            cache_dir = 'cache'
+            os.makedirs(cache_dir, exist_ok=True)
+            timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+            with open(f'{cache_dir}/property_cache_timestamp.txt', 'w') as f:
+                f.write(timestamp)
+            logger.info(f"📅 Cache timestamp updated: {timestamp}")
+        except Exception as e:
+            logger.error(f"❌ Error updating cache timestamp: {e}")
+    
+    def _run_email_automation(self):
+        """Run email automation services"""
+        logger.info("📧 Email automation thread started")
+        
+        # Schedule peak time emails at 2 PM, 6 PM, and 10 PM daily based on user analysis
+        schedule.every().day.at("14:00").do(self._send_peak_time_emails_2pm)
+        schedule.every().day.at("18:00").do(self._send_peak_time_emails_6pm)
+        schedule.every().day.at("22:00").do(self._send_peak_time_emails_10pm)
+        
+        # Also schedule a test email every hour for testing purposes
+        schedule.every().hour.do(self._send_test_emails)
+        
+        logger.info("📅 Scheduled peak time emails: 2 PM, 6 PM, and 10 PM daily")
+        logger.info("📧 Scheduled test emails: Every hour for testing")
+        
+        # Keep the scheduler running
+        while self.is_running:
+            schedule.run_pending()
+            time.sleep(60)  # Check every minute
+    
+    def _send_peak_time_emails_2pm(self):
+        """Send peak time emails at 2 PM based on user analysis"""
+        try:
+            logger.info("📧 Starting 2 PM peak time email automation based on user analysis...")
+            
+            # Import email service
+            from email_automation_service import EmailAutomationService
+            email_service = EmailAutomationService()
+            
+            # Send Multi-AI emails for all customers
+            customers = self._get_all_customers()
+            for customer_id in customers:
+                try:
+                    analysis_data = self._get_customer_analysis(customer_id)
+                    if analysis_data:
+                        email_service.send_multi_ai_emails(customer_id, analysis_data)
+                        logger.info(f"✅ Multi-AI emails sent for customer {customer_id}")
+                except Exception as e:
+                    logger.error(f"❌ Error sending Multi-AI emails for customer {customer_id}: {e}")
+            
+            logger.info("✅ 2 PM peak time email automation completed")
+            
+        except Exception as e:
+            logger.error(f"❌ Error in 2 PM peak time email automation: {e}")
+    
+    def _send_peak_time_emails_6pm(self):
+        """Send peak time emails at 6 PM based on user analysis"""
+        try:
+            logger.info("📧 Starting 6 PM peak time email automation based on user analysis...")
+            
+            # Import email service
+            from email_automation_service import EmailAutomationService
+            email_service = EmailAutomationService()
+            
+            # Send peak time emails using the enhanced method
+            email_service.send_peak_time_emails()
+            
+            logger.info("✅ 6 PM peak time email automation completed")
+            
+        except Exception as e:
+            logger.error(f"❌ Error in 6 PM peak time email automation: {e}")
+    
+    def _send_peak_time_emails_10pm(self):
+        """Send peak time emails at 10 PM based on user analysis"""
+        try:
+            logger.info("📧 Starting 10 PM peak time email automation based on user analysis...")
+            
+            # Import email service
+            from email_automation_service import EmailAutomationService
+            email_service = EmailAutomationService()
+            
+            # Send peak time emails using the enhanced method
+            email_service.send_peak_time_emails()
+            
+            logger.info("✅ 10 PM peak time email automation completed")
+            
+        except Exception as e:
+            logger.error(f"❌ Error in 10 PM peak time email automation: {e}")
+    
+    def _send_test_emails(self):
+        """Send test emails for debugging and testing"""
+        try:
+            logger.info("📧 Starting test email sending...")
+            
+            # Import email service
+            from email_automation_service import EmailAutomationService
+            email_service = EmailAutomationService()
+            
+            # Test with customer 144
+            test_customer_id = 144
+            test_recipient = "sameermujahid7777@gmail.com"
+            
+            # Get customer analysis
+            analysis_data = self._get_customer_analysis(test_customer_id)
+            if analysis_data:
+                # Generate and send test email
+                email_result = email_service.generate_automated_email(
+                    test_customer_id, 
+                    email_type="test_email"
+                )
+                
+                if email_result.get('success'):
+                    logger.info(f"✅ Test email sent successfully to {test_recipient}")
+                else:
+                    logger.warning(f"⚠️ Test email failed: {email_result.get('error')}")
+            else:
+                logger.warning("⚠️ No analysis data available for test email")
+            
+        except Exception as e:
+            logger.error(f"❌ Error in test email sending: {e}")
+    
+    def _get_all_customers(self):
+        """Get list of all customers from the system"""
+        try:
+            # This would typically come from your database
+            # For now, return a sample list of customer IDs
+            return [105, 106, 107, 108, 109]  # Sample customer IDs
+        except Exception as e:
+            logger.error(f"❌ Error getting customers: {e}")
+            return []
+    
+    def _get_customer_analysis(self, customer_id):
+        """Get customer analysis data"""
+        try:
+            # Import API service to get analysis
+            from api_service_enhanced import EnhancedLeadQualificationAPI
+            api_service = EnhancedLeadQualificationAPI()
+            
+            # Get analysis data
+            analysis_data = api_service._get_analysis_data_parallel(customer_id)
+            return analysis_data
+            
+        except Exception as e:
+            logger.error(f"❌ Error getting analysis for customer {customer_id}: {e}")
+            return None
+    
+    def stop_background_services(self):
+        """Stop background services"""
+        logger.info("🛑 Stopping background services...")
+        self.is_running = False
+        
+        if self.background_thread:
+            self.background_thread.join(timeout=5)
+        
+        if self.email_thread:
+            self.email_thread.join(timeout=5)
+        
+        logger.info("✅ Background services stopped")
+
+def main():
+    """Start the unified AI system"""
+    logger.info("=" * 80)
+    logger.info("🤖 Enhanced Unified AI Lead Analysis System Starting...")
+    logger.info("=" * 80)
+    logger.info(f"📅 Start Time: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+    logger.info("")
+    
+    logger.info("🚀 Enhanced System Features:")
+    logger.info("   ✅ Single Port Solution (Port 7860)")
+    logger.info("   ✅ AI-Enhanced Lead Analysis")
+    logger.info("   ✅ Interactive Frontend Dashboard")
+    logger.info("   ✅ Email Automation & Testing")
+    logger.info("   ✅ Mock Data Support (No External Backend Required)")
+    logger.info("   ✅ Behavioral Analytics")
+    logger.info("   ✅ AI-Powered Recommendations")
+    logger.info("   ✅ 24-Hour Background Property Fetching")
+    logger.info("   ✅ Peak Time Email Automation (2 PM & 6 PM Daily)")
+    logger.info("   ✅ Small-Batch Parallel Processing")
+    logger.info("   ✅ ChromaDB Integration for Recommendations")
+    logger.info("   ✅ Email Testing & Automation Dashboard")
+    logger.info("")
+    
+    logger.info("🌐 Access Points:")
+    logger.info("   📊 Main Dashboard: http://localhost:7860")
+    logger.info("   🔍 Customer Analysis: http://localhost:7860/customer/105")
+    logger.info("   📋 API Health: http://localhost:7860/api/health")
+    logger.info("")
+    
+    logger.info("🔄 Background Services:")
+    logger.info("   📥 Property Fetching: Every 24 hours (small-batch parallel)")
+    logger.info("   📧 Peak Time Emails: Daily at 2:00 PM & 6:00 PM")
+    logger.info("   📧 Test Emails: Every hour for testing")
+    logger.info("   🧠 AI Recommendations: Real-time processing")
+    logger.info("")
+    
+    logger.info("🧪 Test Instructions:")
+    logger.info("   1. Open: http://localhost:7860")
+    logger.info("   2. Enter Customer ID: 144")
+    logger.info("   3. Click 'Analyze Customer'")
+    logger.info("   4. Click 'AI Analysis' for enhanced insights")
+    logger.info("   5. Test email features in the Email Testing Section:")
+    logger.info("      - Send Test Email")
+    logger.info("      - Test Email Triggers")
+    logger.info("      - Test Peak Time Emails")
+    logger.info("      - View Email Schedule")
+    logger.info("      - Check Email Logs")
+    logger.info("")
+    
+    logger.info("📧 Email Features:")
+    logger.info("   - Test Email System")
+    logger.info("   - Test Automated Email")
+    logger.info("   - Peak Time Recommendations (2 PM & 6 PM Daily)")
+    logger.info("   - Email Automation Testing Dashboard")
+    logger.info("   - Email Triggers Analysis")
+    logger.info("   - Email Schedule Management")
+    logger.info("   - All emails sent to: shaiksameermujahid@gmail.com")
+    logger.info("   - Mock data ensures everything works without external services")
+    logger.info("")
+    
+    logger.info("⏹️  Press Ctrl+C to stop the system")
+    logger.info("=" * 80)
+    
+    # Initialize unified system
+    unified_system = UnifiedAISystem()
+    unified_system.is_running = True
+    
+    try:
+        # Start background services
+        unified_system.start_background_services()
+        
+        # Import and run the unified API service
+        from api_service_enhanced import EnhancedLeadQualificationAPI
+        
+        api_service = EnhancedLeadQualificationAPI()
+        # Use port 7860 for Hugging Face Spaces
+        port = int(os.environ.get('PORT', 7860))
+        api_service.run(host='0.0.0.0', port=port, debug=False)
+        
+    except KeyboardInterrupt:
+        logger.info("")
+        logger.info("🛑 Enhanced Unified AI System stopped by user")
+        unified_system.stop_background_services()
+        logger.info("✅ System shutdown complete")
+    except Exception as e:
+        logger.error(f"❌ System error: {e}")
+        unified_system.stop_background_services()
+        sys.exit(1)
+
+if __name__ == "__main__":
+    # Change to the lead directory
+    script_dir = os.path.dirname(os.path.abspath(__file__))
+    os.chdir(script_dir)
+    
+    main() 

mock_data_service.py

@@ -0,0 +1,232 @@
+#!/usr/bin/env python3
+"""
+Mock Data Service
+Provides sample customer data for testing when external backend is not available
+"""
+
+import json
+import random
+from datetime import datetime, timedelta
+from typing import List, Dict, Any
+
+class MockDataService:
+    def __init__(self):
+        self.sample_properties = [
+            {
+                "propertyId": 1,
+                "propertyName": "Luxury Villa in Palm Jumeirah",
+                "propertyTypeName": "Villa",
+                "price": 15000000,
+                "viewCount": 15,
+                "totalDuration": 4500,
+                "lastViewedAt": "2024-01-15T10:30:00Z",
+                "location": "Palm Jumeirah",
+                "bedrooms": 5,
+                "bathrooms": 6,
+                "area": 8500,
+                "features": ["Private Pool", "Garden", "Gym", "Security"]
+            },
+            {
+                "propertyId": 2,
+                "propertyName": "Modern Apartment in Downtown",
+                "propertyTypeName": "Apartment",
+                "price": 3500000,
+                "viewCount": 8,
+                "totalDuration": 2800,
+                "lastViewedAt": "2024-01-14T14:20:00Z",
+                "location": "Downtown Dubai",
+                "bedrooms": 2,
+                "bathrooms": 2,
+                "area": 1200,
+                "features": ["Balcony", "Gym", "Pool", "Parking"]
+            },
+            {
+                "propertyId": 3,
+                "propertyName": "Beachfront Penthouse",
+                "propertyTypeName": "Penthouse",
+                "price": 25000000,
+                "viewCount": 12,
+                "totalDuration": 5200,
+                "lastViewedAt": "2024-01-13T16:45:00Z",
+                "location": "JBR",
+                "bedrooms": 4,
+                "bathrooms": 5,
+                "area": 3200,
+                "features": ["Beach Access", "Private Terrace", "Concierge", "Spa"]
+            },
+            {
+                "propertyId": 4,
+                "propertyName": "Family Villa in Emirates Hills",
+                "propertyTypeName": "Villa",
+                "price": 18000000,
+                "viewCount": 6,
+                "totalDuration": 3800,
+                "lastViewedAt": "2024-01-12T11:15:00Z",
+                "location": "Emirates Hills",
+                "bedrooms": 6,
+                "bathrooms": 7,
+                "area": 9500,
+                "features": ["Garden", "Pool", "Gym", "Staff Quarters"]
+            },
+            {
+                "propertyId": 5,
+                "propertyName": "Investment Apartment",
+                "propertyTypeName": "Apartment",
+                "price": 2200000,
+                "viewCount": 4,
+                "totalDuration": 1500,
+                "lastViewedAt": "2024-01-11T09:30:00Z",
+                "location": "Dubai Marina",
+                "bedrooms": 1,
+                "bathrooms": 1,
+                "area": 800,
+                "features": ["Marina View", "Gym", "Pool", "Rental Ready"]
+            },
+            {
+                "propertyId": 6,
+                "propertyName": "Luxury Townhouse",
+                "propertyTypeName": "Townhouse",
+                "price": 8500000,
+                "viewCount": 10,
+                "totalDuration": 4200,
+                "lastViewedAt": "2024-01-10T13:20:00Z",
+                "location": "Arabian Ranches",
+                "bedrooms": 4,
+                "bathrooms": 4,
+                "area": 2800,
+                "features": ["Garden", "Pool", "Golf Course", "Community"]
+            },
+            {
+                "propertyId": 7,
+                "propertyName": "Premium Office Space",
+                "propertyTypeName": "Office",
+                "price": 12000000,
+                "viewCount": 3,
+                "totalDuration": 1800,
+                "lastViewedAt": "2024-01-09T15:45:00Z",
+                "location": "DIFC",
+                "bedrooms": 0,
+                "bathrooms": 2,
+                "area": 5000,
+                "features": ["Premium Location", "Security", "Parking", "Meeting Rooms"]
+            },
+            {
+                "propertyId": 8,
+                "propertyName": "Retail Space in Mall",
+                "propertyTypeName": "Retail",
+                "price": 8000000,
+                "viewCount": 2,
+                "totalDuration": 1200,
+                "lastViewedAt": "2024-01-08T12:00:00Z",
+                "location": "Dubai Mall",
+                "bedrooms": 0,
+                "bathrooms": 1,
+                "area": 3000,
+                "features": ["High Foot Traffic", "Premium Location", "Storage", "Security"]
+            }
+        ]
+    
+    def get_customer_data(self, customer_id: int) -> List[Dict[str, Any]]:
+        """Get mock customer data based on customer ID"""
+        
+        # Generate different data based on customer ID
+        if customer_id == 105:
+            # High-value customer with luxury preferences
+            return self.sample_properties[:4]  # First 4 properties (luxury)
+        elif customer_id == 106:
+            # Mid-range customer
+            return self.sample_properties[1:5]  # Properties 2-5
+        elif customer_id == 107:
+            # Investment-focused customer
+            return [self.sample_properties[4], self.sample_properties[6], self.sample_properties[7]]
+        elif customer_id == 108:
+            # Budget-conscious customer
+            return [self.sample_properties[1], self.sample_properties[4]]
+        else:
+            # Random selection for other customer IDs
+            num_properties = random.randint(2, 6)
+            return random.sample(self.sample_properties, num_properties)
+    
+    def get_customer_profile(self, customer_id: int) -> Dict[str, Any]:
+        """Get customer profile information"""
+        profiles = {
+            105: {
+                "customerName": "Ahmed Al Mansouri",
+                "email": "ahmed.mansouri@email.com",
+                "phone": "+971501234567",
+                "preferredLocation": "Palm Jumeirah",
+                "budgetRange": "15M-25M",
+                "propertyType": "Villa",
+                "leadSource": "Website",
+                "lastContact": "2024-01-15T10:30:00Z"
+            },
+            106: {
+                "customerName": "Sarah Johnson",
+                "email": "sarah.johnson@email.com",
+                "phone": "+971502345678",
+                "preferredLocation": "Downtown Dubai",
+                "budgetRange": "3M-8M",
+                "propertyType": "Apartment",
+                "leadSource": "Referral",
+                "lastContact": "2024-01-14T14:20:00Z"
+            },
+            107: {
+                "customerName": "Mohammed Rahman",
+                "email": "m.rahman@email.com",
+                "phone": "+971503456789",
+                "preferredLocation": "Dubai Marina",
+                "budgetRange": "2M-15M",
+                "propertyType": "Mixed",
+                "leadSource": "Investment Portal",
+                "lastContact": "2024-01-13T16:45:00Z"
+            },
+            108: {
+                "customerName": "Fatima Hassan",
+                "email": "fatima.hassan@email.com",
+                "phone": "+971504567890",
+                "preferredLocation": "Dubai Marina",
+                "budgetRange": "2M-4M",
+                "propertyType": "Apartment",
+                "leadSource": "Social Media",
+                "lastContact": "2024-01-12T11:15:00Z"
+            }
+        }
+        
+        return profiles.get(customer_id, {
+            "customerName": f"Customer {customer_id}",
+            "email": f"customer{customer_id}@email.com",
+            "phone": f"+97150{random.randint(1000000, 9999999)}",
+            "preferredLocation": random.choice(["Dubai Marina", "Downtown Dubai", "Palm Jumeirah", "JBR"]),
+            "budgetRange": random.choice(["2M-5M", "5M-10M", "10M-20M", "20M+"]),
+            "propertyType": random.choice(["Apartment", "Villa", "Townhouse", "Mixed"]),
+            "leadSource": random.choice(["Website", "Referral", "Social Media", "Advertisement"]),
+            "lastContact": datetime.now().isoformat()
+        })
+    
+    def generate_engagement_metrics(self, customer_id: int) -> Dict[str, Any]:
+        """Generate engagement metrics for the customer"""
+        base_engagement = random.randint(30, 90)
+        
+        # Adjust based on customer ID
+        if customer_id == 105:
+            base_engagement = 85  # High engagement
+        elif customer_id == 106:
+            base_engagement = 65  # Medium engagement
+        elif customer_id == 107:
+            base_engagement = 45  # Lower engagement
+        elif customer_id == 108:
+            base_engagement = 55  # Medium-low engagement
+        
+        return {
+            "totalViews": random.randint(5, 25),
+            "totalDuration": random.randint(1800, 7200),  # 30 minutes to 2 hours
+            "engagementScore": base_engagement,
+            "lastActivity": datetime.now().isoformat(),
+            "favoriteProperties": random.randint(1, 4),
+            "searchQueries": random.randint(3, 12),
+            "emailOpens": random.randint(1, 8),
+            "websiteVisits": random.randint(2, 15)
+        }
+
+# Global instance
+mock_data_service = MockDataService() 

requirements.txt

@@ -0,0 +1,19 @@
+Flask
+Flask-CORS
+Werkzeug
+requests
+urllib3
+pandas
+numpy
+scikit-learn
+torch
+torchvision
+torchaudio
+transformers
+sentence-transformers
+chromadb
+faiss-cpu
+python-dotenv
+colorama
+coloredlogs
+schedule

templates/ai_lead_analysis.html

@@ -0,0 +1,1714 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🤖 AI Lead Analysis Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --secondary-color: #7c3aed;
+            --accent-color: #059669;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --danger-color: #ef4444;
+            --light-color: #f8fafc;
+            --dark-color: #1e293b;
+            --info-color: #0ea5e9;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: #f1f5f9;
+            color: var(--dark-color);
+            line-height: 1.6;
+            min-height: 100vh;
+        }
+
+        .main-container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        /* Header Styles */
+        .hero-header {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            color: white;
+            border-radius: 20px;
+            padding: 40px;
+            margin-bottom: 30px;
+            text-align: center;
+            box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
+        }
+
+        .hero-header h1 {
+            font-size: 3rem;
+            font-weight: 700;
+            margin-bottom: 15px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+        }
+
+        .hero-header p {
+            font-size: 1.3rem;
+            margin-bottom: 25px;
+            opacity: 0.95;
+        }
+
+        .ai-badge {
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            padding: 12px 25px;
+            border-radius: 50px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            display: inline-block;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+
+        /* Card Styles */
+        .card {
+            background: white;
+            border-radius: 16px;
+            padding: 30px;
+            margin-bottom: 25px;
+            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
+            border: 1px solid #e2e8f0;
+            transition: all 0.3s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+        }
+
+        .card h3 {
+            color: var(--dark-color);
+            font-weight: 600;
+            margin-bottom: 20px;
+            font-size: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .card h4 {
+            color: var(--primary-color);
+            font-weight: 600;
+            margin-bottom: 15px;
+            font-size: 1.2rem;
+        }
+
+        /* Form Styles */
+        .form-control {
+            border: 2px solid #e2e8f0;
+            border-radius: 12px;
+            padding: 15px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: white;
+            color: var(--dark-color);
+        }
+
+        .form-control:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+            outline: none;
+        }
+
+        .form-label {
+            color: var(--dark-color);
+            font-weight: 600;
+            margin-bottom: 8px;
+            font-size: 1rem;
+        }
+
+        /* Button Styles */
+        .btn {
+            border-radius: 12px;
+            padding: 12px 25px;
+            font-weight: 600;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
+        }
+
+        .btn-success {
+            background: var(--success-color);
+            color: white;
+        }
+
+        .btn-success:hover {
+            background: #059669;
+            transform: translateY(-2px);
+        }
+
+        .btn-warning {
+            background: var(--warning-color);
+            color: white;
+        }
+
+        .btn-info {
+            background: var(--info-color);
+            color: white;
+        }
+
+        .btn-danger {
+            background: var(--danger-color);
+            color: white;
+        }
+
+        .btn-outline-purple {
+            background: transparent;
+            border: 2px solid var(--secondary-color);
+            color: var(--secondary-color);
+        }
+
+        .btn-outline-purple:hover {
+            background: var(--secondary-color);
+            border-color: var(--secondary-color);
+            color: white;
+            transform: translateY(-2px);
+        }
+
+        .btn-secondary {
+            background: #6c757d;
+            color: white;
+        }
+
+        .btn-outline-success {
+            background: transparent;
+            border: 2px solid var(--success-color);
+            color: var(--success-color);
+        }
+
+        .btn-outline-success:hover {
+            background: var(--success-color);
+            color: white;
+            transform: translateY(-2px);
+        }
+
+        .btn-outline-info {
+            background: transparent;
+            border: 2px solid var(--info-color);
+            color: var(--info-color);
+        }
+
+        .btn-outline-info:hover {
+            background: var(--info-color);
+            color: white;
+            transform: translateY(-2px);
+        }
+
+        .btn-outline-warning {
+            background: transparent;
+            border: 2px solid var(--warning-color);
+            color: var(--warning-color);
+        }
+
+        .btn-outline-warning:hover {
+            background: var(--warning-color);
+            color: white;
+            transform: translateY(-2px);
+        }
+
+        /* Metric Cards */
+        .metric-card {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            border-radius: 16px;
+            padding: 25px;
+            text-align: center;
+            transition: transform 0.3s ease;
+        }
+
+        .metric-card:hover {
+            transform: translateY(-3px);
+        }
+
+        .metric-value {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+        }
+
+        .metric-label {
+            font-size: 1rem;
+            opacity: 0.9;
+            font-weight: 500;
+        }
+
+        /* Alert Styles */
+        .alert {
+            border: none;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+            font-weight: 500;
+        }
+
+        .alert-success {
+            background: linear-gradient(135deg, #d1fae5, #a7f3d0);
+            color: #065f46;
+            border-left: 4px solid var(--success-color);
+        }
+
+        .alert-info {
+            background: linear-gradient(135deg, #dbeafe, #bfdbfe);
+            color: #1e40af;
+            border-left: 4px solid var(--info-color);
+        }
+
+        .alert-warning {
+            background: linear-gradient(135deg, #fef3c7, #fde68a);
+            color: #92400e;
+            border-left: 4px solid var(--warning-color);
+        }
+
+        .alert-danger {
+            background: linear-gradient(135deg, #fee2e2, #fca5a5);
+            color: #991b1b;
+            border-left: 4px solid var(--danger-color);
+        }
+
+        /* Email Section Specific Styles */
+        .email-section {
+            background: white;
+            border: 2px solid #e2e8f0;
+            border-radius: 16px;
+            padding: 30px;
+            margin-bottom: 30px;
+        }
+
+        .email-section h3 {
+            color: var(--dark-color);
+            margin-bottom: 25px;
+            font-weight: 600;
+        }
+
+        .email-section .form-control {
+            background: #f8fafc;
+            border: 2px solid #e2e8f0;
+            color: var(--dark-color);
+        }
+
+        .email-section .form-control::placeholder {
+            color: #64748b;
+        }
+
+        .email-section .form-control:focus {
+            background: white;
+            border-color: var(--primary-color);
+        }
+
+        /* Timeline Styles */
+        .timeline {
+            background: #f8fafc;
+            border-radius: 12px;
+            padding: 20px;
+        }
+
+        .timeline-item {
+            background: white;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 10px;
+            color: var(--dark-color);
+            font-weight: 500;
+        }
+
+        /* Property Cards */
+        .property-item {
+            background: white;
+            border: 1px solid #e2e8f0;
+            border-radius: 12px;
+            padding: 20px;
+            transition: all 0.3s ease;
+        }
+
+        .property-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+            border-color: var(--primary-color);
+        }
+
+        .property-name {
+            font-weight: 600;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+            font-size: 1.1rem;
+        }
+
+        .property-details {
+            color: var(--dark-color);
+            font-size: 0.95rem;
+        }
+
+        .property-details span {
+            font-weight: 600;
+            color: var(--secondary-color);
+        }
+
+        /* Multi-AI Feature Box */
+        .multi-ai-box {
+            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+            border: 2px solid #0ea5e9;
+            border-radius: 16px;
+            padding: 25px;
+            margin: 20px 0;
+        }
+
+        .multi-ai-box h6 {
+            color: var(--info-color);
+            font-weight: 600;
+            margin-bottom: 15px;
+        }
+
+        .multi-ai-box ul {
+            margin: 0;
+            padding-left: 20px;
+        }
+
+        .multi-ai-box li {
+            color: var(--dark-color);
+            margin-bottom: 5px;
+            font-weight: 500;
+        }
+
+        /* Loading Animation */
+        .loading {
+                text-align: center;
+            padding: 60px;
+            background: white;
+            border-radius: 16px;
+            margin: 20px 0;
+        }
+
+        .loading i {
+            font-size: 3rem;
+            color: var(--primary-color);
+            animation: spin 1s linear infinite;
+        }
+
+        .loading h3 {
+            color: var(--dark-color);
+            margin: 20px 0 10px 0;
+        }
+
+        .loading p {
+            color: #64748b;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Hidden class */
+        .hidden {
+            display: none;
+        }
+
+        /* Search Form */
+        .search-section {
+            background: white;
+            border-radius: 16px;
+            padding: 30px;
+            margin-bottom: 30px;
+            border: 2px solid #e2e8f0;
+        }
+
+        .search-form {
+            display: flex;
+            gap: 20px;
+            align-items: end;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .hero-header h1 {
+                font-size: 2rem;
+            }
+            
+            .hero-header p {
+                font-size: 1.1rem;
+            }
+            
+            .search-form {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            
+            .metric-value {
+                font-size: 2rem;
+            }
+        }
+
+        /* Status Badges */
+        .status-badge {
+            padding: 8px 16px;
+            border-radius: 50px;
+            font-weight: 600;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .status-hot {
+            background: linear-gradient(135deg, #fee2e2, #fca5a5);
+            color: #991b1b;
+        }
+
+        .status-warm {
+            background: linear-gradient(135deg, #fef3c7, #fde68a);
+            color: #92400e;
+        }
+
+        .status-cold {
+            background: linear-gradient(135deg, #f1f5f9, #cbd5e1);
+            color: #475569;
+        }
+
+        /* Progress Bars */
+        .progress {
+            height: 12px;
+            border-radius: 6px;
+            background-color: #e2e8f0;
+            overflow: hidden;
+        }
+
+        .progress-bar {
+            background: linear-gradient(90deg, var(--success-color), var(--accent-color));
+            border-radius: 6px;
+            transition: width 0.6s ease;
+        }
+    </style>
+</head>
+<body>
+    <div class="main-container">
+        <!-- Hero Header -->
+        <div class="hero-header">
+            <h1><i class="fas fa-robot"></i> AI Lead Analysis Dashboard</h1>
+            <p>Advanced Customer Behavior Analytics with Multi-AI Recommendations</p>
+            <div class="ai-badge">
+                <i class="fas fa-brain"></i> Powered by Multiple AI Models
+        </div>
+        </div>
+
+        <!-- Search Section -->
+        <div class="search-section">
+            <h3><i class="fas fa-search"></i> Customer Analysis</h3>
+                <div class="search-form">
+                        <div class="form-group">
+                    <label for="customerId" class="form-label">Customer ID:</label>
+                    <input type="number" id="customerId" class="form-control" value="144" min="1" placeholder="Enter Customer ID" style="width: 200px;">
+                        </div>
+                        <div class="form-group">
+                        <button type="button" class="btn btn-primary" onclick="analyzeCustomer()">
+                            <i class="fas fa-chart-line"></i> Analyze Customer
+                    </button>
+                        </div>
+                    </div>
+                </div>
+
+        <!-- Loading Section -->
+        <div id="loadingSection" class="loading hidden">
+            <i class="fas fa-spinner"></i>
+            <h3>Analyzing Customer Data...</h3>
+            <p>Please wait while we process the information with AI models</p>
+            </div>
+
+        <!-- Analysis Results -->
+        <div id="analysisResults" class="hidden">
+            <!-- Lead Status Card -->
+            <div class="card">
+                <h3><i class="fas fa-user-check"></i> Lead Qualification Status</h3>
+                <div class="row">
+                    <div class="col-md-8">
+                        <div id="leadStatus"></div>
+                        </div>
+                    <div class="col-md-4">
+                        <div class="metric-card">
+                            <div class="metric-value" id="leadScore">0</div>
+                            <div class="metric-label">Lead Score</div>
+                    </div>
+                        </div>
+                    </div>
+                <div id="leadFactors" class="mt-4"></div>
+                <div id="conversionDetails" class="mt-4"></div>
+                </div>
+
+            <!-- Key Metrics -->
+            <div class="row mb-4">
+                <div class="col-md-3">
+                <div class="metric-card">
+                    <div class="metric-value" id="totalViews">0</div>
+                    <div class="metric-label">Total Views</div>
+                        </div>
+                </div>
+                <div class="col-md-3">
+                <div class="metric-card">
+                    <div class="metric-value" id="totalDuration">0h 0m</div>
+                    <div class="metric-label">Total Duration</div>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                <div class="metric-card">
+                    <div class="metric-value" id="engagementScore">0</div>
+                    <div class="metric-label">Engagement Score</div>
+                        </div>
+                </div>
+                <div class="col-md-3">
+                <div class="metric-card">
+                    <div class="metric-value" id="conversionProbability">0%</div>
+                    <div class="metric-label">Conversion Probability</div>
+                    </div>
+                    </div>
+                </div>
+
+                        <!-- Property Preferences -->
+            <div class="card">
+                <h3><i class="fas fa-home"></i> Property Preferences & Analysis</h3>
+                <div class="row">
+                    <div class="col-md-4">
+                        <h4><i class="fas fa-tags"></i> Preferred Types</h4>
+                        <div id="propertyPreferences"></div>
+                    </div>
+                    <div class="col-md-4">
+                        <h4><i class="fas fa-clock"></i> Viewing Patterns</h4>
+                        <div id="viewingPatterns"></div>
+                </div>
+                    <div class="col-md-4">
+                        <h4><i class="fas fa-chart-line"></i> Activity Timeline</h4>
+                        <div id="activityTimeline"></div>
+                    </div>
+                </div>
+                </div>
+
+            <!-- Price Analysis -->
+            <div class="card">
+                <h3><i class="fas fa-money-bill-wave"></i> Price Analysis</h3>
+                <div id="priceAnalysis"></div>
+            </div>
+
+            <!-- Multi-AI Recommendations System -->
+            <div class="card">
+                <h3><i class="fas fa-brain"></i> Multi-AI Recommendations Engine</h3>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group mb-3">
+                            <label for="multiAiEmail" class="form-label">Email Address for Multi-AI Recommendations:</label>
+                            <input type="email" id="multiAiEmail" class="form-control" value="shaiksameermujahid@gmail.com">
+                            </div>
+                        <div class="form-group mb-3">
+                            <label for="emailCount" class="form-label">Number of AI Emails to Send:</label>
+                            <select id="emailCount" class="form-control">
+                                <option value="5">5 Emails</option>
+                                <option value="10" selected>10 Emails</option>
+                                <option value="15">15 Emails</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="multi-ai-box">
+                            <h6><i class="fas fa-info-circle"></i> Multi-AI Features:</h6>
+                            <ul>
+                                <li>🏡 Property-based recommendations</li>
+                                <li>💰 Price-based matching</li>
+                                <li>📍 Location-based suggestions</li>
+                                <li>🔍 Similarity-based findings</li>
+                                <li>🧠 Behavioral analysis recommendations</li>
+                                <li>⭐ Premium properties collection</li>
+                                <li>💵 Budget-friendly options</li>
+                                <li>📈 Trending properties</li>
+                                <li>👨‍👩‍👧‍👦 Family-oriented properties</li>
+                                <li>💼 Investment opportunities</li>
+                            </ul>
+                                </div>
+                                </div>
+                                </div>
+                <div class="row mt-3">
+                    <div class="col-12">
+                        <button type="button" class="btn btn-primary btn-lg me-3" onclick="sendMultiAIRecommendations()">
+                            <i class="fas fa-robot"></i> Send Multi-AI Recommendations
+                        </button>
+                        <button type="button" class="btn btn-success me-3" onclick="getChromaDBRecommendations()">
+                            <i class="fas fa-database"></i> Get ChromaDB Recommendations
+                        </button>
+                        <button type="button" class="btn btn-info" onclick="fetchAllProperties()">
+                            <i class="fas fa-download"></i> Fetch All Properties to ChromaDB
+                        </button>
+                                </div>
+                            </div>
+                
+                <!-- Multi-AI Results -->
+                <div id="multiAiResults" class="mt-4"></div>
+                
+                <!-- ChromaDB Recommendations Results -->
+                <div id="chromaDbResults" class="mt-4"></div>
+                </div>
+
+            <!-- Email Testing Section -->
+            <div class="card">
+                <h3><i class="fas fa-envelope"></i> Comprehensive Email Testing & Analysis Suite</h3>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group mb-3">
+                            <label for="testEmail" class="form-label">Test Email Address:</label>
+                            <input type="email" id="testEmail" class="form-control" value="shaiksameermujahid@gmail.com">
+                            <small class="text-muted">All emails will be sent to this address</small>
+                        </div>
+                        
+                                                <!-- Main Email Tests -->
+                        <h6><i class="fas fa-envelope"></i> Core Email Functions:</h6>
+                        <div class="d-flex gap-2 flex-wrap mb-3">
+                            <button type="button" class="btn btn-success btn-sm" onclick="testSendGridConnection()">
+                                <i class="fas fa-wifi"></i> Test SendGrid
+                            </button>
+                            <button type="button" class="btn btn-warning btn-sm" onclick="previewAllEmailContent()">
+                                <i class="fas fa-eye"></i> Preview 10 Emails
+                            </button>
+                    </div>
+                        
+                        <!-- Analysis & Status -->
+                        <h6><i class="fas fa-chart-line"></i> Analysis & Status:</h6>
+                        <div class="d-flex gap-2 flex-wrap mb-3">
+                            <button type="button" class="btn btn-info btn-sm" onclick="getEmailAnalysisBasis()">
+                                <i class="fas fa-search-plus"></i> Show Analysis Basis
+                            </button>
+                            <button type="button" class="btn btn-secondary btn-sm" onclick="getEmailStatus()">
+                                <i class="fas fa-chart-bar"></i> Email Status
+                            </button>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                                                <!-- Main Testing Actions -->
+                        <h6><i class="fas fa-rocket"></i> Main Email Actions:</h6>
+                        <div class="d-flex gap-2 flex-wrap mb-2">
+                            <button type="button" class="btn btn-primary" onclick="testAll10Emails()">
+                                <i class="fas fa-envelope-open-text"></i> Send All 10 AI Emails
+                            </button>
+                </div>
+                        <div class="alert alert-info mb-3">
+                            <small><strong>📧 Multi-AI Email System:</strong> Each email uses a different AI model to retrieve personalized properties from ChromaDB based on your analysis.</small>
+                        </div>
+                        
+                        <!-- Property Management -->
+                        <h6><i class="fas fa-database"></i> Property Management:</h6>
+                        <div class="d-flex gap-2 flex-wrap mb-2">
+                            <button type="button" class="btn btn-info btn-sm" onclick="checkChromaDBStatus()">
+                                <i class="fas fa-heartbeat"></i> Check ChromaDB Status
+                            </button>
+                            <button type="button" class="btn btn-success btn-sm" onclick="fetchAllProperties()">
+                                <i class="fas fa-download"></i> Fetch Properties
+                        </button>
+                    </div>
+                        <div class="d-flex gap-2 flex-wrap mb-4">
+                            <button type="button" class="btn btn-secondary btn-sm" onclick="getChromaDBRecommendations()">
+                                <i class="fas fa-search"></i> Test Recommendations
+                        </button>
+                    </div>
+                        
+                        <!-- Saved Emails Management -->
+                        <h6><i class="fas fa-folder-open"></i> Saved Emails:</h6>
+                        <div class="d-flex gap-2 flex-wrap mb-3">
+                            <button type="button" class="btn btn-warning btn-sm" onclick="listSavedEmails()">
+                                <i class="fas fa-folder-open"></i> View Saved Emails
+                            </button>
+                </div>
+                        
+                        <div class="alert alert-warning mb-3">
+                            <small><strong>📁 SendGrid Limit Solution:</strong> When SendGrid limits are exceeded, emails are automatically saved to your local <code>./saved_emails/</code> folder. Click "View Saved Emails" to see and open them.</small>
+            </div>
+            
+                        <h6>Email Configuration:</h6>
+                        <div class="timeline">
+                            <div class="timeline-item">
+                                <strong>From:</strong> shaiksameermujahid@gmail.com
+                </div>
+                            <div class="timeline-item">
+                                <strong>To:</strong> sameermujahid7777@gmail.com
+            </div>
+                            <div class="timeline-item">
+                                <strong>2:00 PM Daily</strong> - Peak time recommendations
+                </div>
+                            <div class="timeline-item">
+                                <strong>6:00 PM Daily</strong> - Evening opportunities
+            </div>
+                            <div class="timeline-item">
+                                <strong>Every Hour</strong> - System test emails
+                </div>
+                        </div>
+                </div>
+            </div>
+        </div>
+
+            <!-- Email Dashboard -->
+            <div class="card">
+                <h3><i class="fas fa-tachometer-alt"></i> Email Testing Dashboard</h3>
+                <div class="row mb-3">
+                    <div class="col-md-3">
+                        <div class="metric-card">
+                            <div class="metric-value" id="totalEmails">0</div>
+                            <div class="metric-label">Total Emails</div>
+            </div>
+        </div>
+                    <div class="col-md-3">
+                        <div class="metric-card">
+                            <div class="metric-value" id="successEmails">0</div>
+                            <div class="metric-label">Successful</div>
+                    </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="metric-card">
+                            <div class="metric-value" id="failedEmails">0</div>
+                            <div class="metric-label">Failed</div>
+                </div>
+            </div>
+                    <div class="col-md-3">
+                        <div class="metric-card">
+                            <div class="metric-value" id="scheduledEmails">0</div>
+                            <div class="metric-label">Scheduled</div>
+            </div>
+            </div>
+                    </div>
+                <div class="d-flex gap-2 flex-wrap">
+                        <button type="button" class="btn btn-success" onclick="testAllEmailTypes()">
+                            <i class="fas fa-play"></i> Test All Email Types
+                        </button>
+                        <button type="button" class="btn btn-warning" onclick="clearEmailLogs()">
+                            <i class="fas fa-trash"></i> Clear Logs
+                        </button>
+                        <button type="button" class="btn btn-primary" onclick="sendAllIntendedEmails()">
+                            <i class="fas fa-paper-plane"></i> Send All Intended Emails
+                        </button>
+                        <button type="button" class="btn btn-danger" onclick="sendMultiAIEmails()">
+                            <i class="fas fa-robot"></i> Send 10 AI Emails
+                        </button>
+                    </div>
+                </div>
+
+            <!-- Email Logs -->
+            <div class="card">
+                <h3><i class="fas fa-list"></i> Email Activity Logs</h3>
+                <div id="emailLogs"></div>
+                </div>
+
+            <!-- Properties Viewed -->
+            <div class="card">
+                <h3><i class="fas fa-eye"></i> Properties Viewed - Detailed Analysis</h3>
+                <div class="row" id="propertiesViewed"></div>
+            </div>
+
+            <!-- AI Recommendations -->
+            <div class="card">
+                <h3><i class="fas fa-robot"></i> AI-Powered Property Recommendations</h3>
+                <div class="alert alert-info">
+                    <h6><i class="fas fa-lightbulb"></i> Personalized Recommendations</h6>
+                    <div id="aiRecommendations"></div>
+                </div>
+                <div id="propertyRecommendations"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let currentCustomerId = 144;
+        let analysisData = null;
+
+        async function analyzeCustomer() {
+            const customerId = document.getElementById('customerId').value;
+            if (!customerId) {
+                showError('Please enter a Customer ID');
+                return;
+            }
+
+                currentCustomerId = customerId;
+            
+            // Show loading
+            document.getElementById('loadingSection').classList.remove('hidden');
+            document.getElementById('analysisResults').classList.add('hidden');
+
+            try {
+                const response = await fetch(`/api/lead-analysis/${customerId}`);
+                const data = await response.json();
+
+                if (data.success) {
+                    analysisData = data.data;
+                    displayAnalysis(data.data);
+                    loadEmailLogs();
+                } else {
+                    showError('Analysis failed: ' + (data.error || 'Unknown error'));
+                }
+            } catch (error) {
+                showError('Error analyzing customer: ' + error.message);
+            } finally {
+                document.getElementById('loadingSection').classList.add('hidden');
+                document.getElementById('analysisResults').classList.remove('hidden');
+            }
+        }
+
+        function displayAnalysis(data) {
+            // Lead Status
+            const leadQual = data.lead_qualification;
+            document.getElementById('leadStatus').innerHTML = `
+                <div class="status-badge status-${leadQual.lead_status.toLowerCase()}">
+                    ${leadQual.lead_status}
+                </div>
+                <p class="mt-3">${leadQual.status_description}</p>
+                <div class="progress mt-3">
+                    <div class="progress-bar" style="width: ${leadQual.lead_score}%"></div>
+                </div>
+                <small class="text-muted mt-2">${leadQual.lead_score}/${leadQual.max_possible_score} points</small>
+            `;
+
+            document.getElementById('leadScore').textContent = leadQual.lead_score;
+
+            // Key Metrics
+            const summary = data.summary;
+            document.getElementById('totalViews').textContent = summary.total_views;
+            document.getElementById('totalDuration').textContent = formatDuration(summary.total_duration);
+            document.getElementById('engagementScore').textContent = Math.round(summary.engagement_score);
+
+            const conversionProb = data.analytics.conversion_probability;
+            document.getElementById('conversionProbability').textContent = Math.round(conversionProb.final_probability) + '%';
+
+            // Property Preferences
+            const analytics = data.analytics;
+            document.getElementById('propertyPreferences').innerHTML = `
+                <ul class="list-unstyled">
+                    ${analytics.preferred_property_types.map(type => `<li><i class="fas fa-check-circle text-success"></i> ${type}</li>`).join('')}
+                </ul>
+            `;
+            
+            // Display other sections
+            displayViewingPatterns(analytics.viewing_patterns);
+            displayActivityTimeline(analytics.lead_timeline);
+            displayPriceAnalysis(analytics.price_preferences);
+            displayPropertiesViewed(data.properties);
+            displayAIRecommendations(analytics);
+        }
+
+        function displayViewingPatterns(patterns) {
+            const patternsHtml = `
+                <div class="d-flex flex-column gap-2">
+                    <div><strong>Peak Time:</strong> ${patterns.peak_viewing_time}</div>
+                    <div><strong>Morning Views:</strong> ${patterns.morning_views}</div>
+                    <div><strong>Afternoon Views:</strong> ${patterns.afternoon_views}</div>
+                    <div><strong>Evening Views:</strong> ${patterns.evening_views}</div>
+                </div>
+            `;
+            document.getElementById('viewingPatterns').innerHTML = patternsHtml;
+        }
+
+        function displayActivityTimeline(timeline) {
+            const timelineHtml = timeline.slice(0, 5).map(item => `
+                <div class="border rounded p-2 mb-2">
+                    <div><strong>${item.property_name}</strong></div>
+                    <small class="text-muted">${item.views} views • ${new Date(item.date).toLocaleDateString()}</small>
+                </div>
+            `).join('');
+            document.getElementById('activityTimeline').innerHTML = timelineHtml;
+        }
+
+        function displayPriceAnalysis(pricePrefs) {
+            const priceHtml = `
+                <div class="row">
+                    <div class="col-md-3">
+                        <div class="text-center">
+                            <div class="h4 text-primary">₹${formatPrice(pricePrefs.avg_price)}</div>
+                            <small>Average Price</small>
+                </div>
+                </div>
+                    <div class="col-md-3">
+                        <div class="text-center">
+                            <div class="h4 text-success">₹${formatPrice(pricePrefs.min_price)}</div>
+                            <small>Min Price</small>
+                </div>
+                </div>
+                    <div class="col-md-3">
+                        <div class="text-center">
+                            <div class="h4 text-warning">₹${formatPrice(pricePrefs.max_price)}</div>
+                            <small>Max Price</small>
+                </div>
+                </div>
+                    <div class="col-md-3">
+                        <div class="text-center">
+                            <div class="h4 text-info">₹${formatPrice(pricePrefs.price_range)}</div>
+                            <small>Price Range</small>
+                </div>
+                </div>
+                </div>
+            `;
+            document.getElementById('priceAnalysis').innerHTML = priceHtml;
+        }
+
+        function displayPropertiesViewed(properties) {
+            const propertiesHtml = properties.slice(0, 6).map(prop => `
+                <div class="col-md-4 mb-3">
+                    <div class="property-item">
+                        <div class="property-name">${prop.propertyName}</div>
+                        <div class="property-details">
+                            <div><span>Type:</span> ${prop.propertyTypeName}</div>
+                            <div><span>Price:</span> ₹${formatPrice(prop.price)}</div>
+                            <div><span>Views:</span> ${prop.viewCount}</div>
+                            <div><span>Engagement:</span> ${Math.round(prop.engagement_score)}</div>
+                        </div>
+                    </div>
+                </div>
+            `).join('');
+            document.getElementById('propertiesViewed').innerHTML = propertiesHtml;
+        }
+
+        function displayAIRecommendations(analytics) {
+            const recommendationsHtml = `
+                <div class="row">
+                    <div class="col-md-6">
+                        <h6>AI Recommendations:</h6>
+                        <ul>
+                            ${analytics.recommendations.map(rec => `<li>${rec}</li>`).join('')}
+                        </ul>
+                    </div>
+                    <div class="col-md-6">
+                        <h6>Risk Assessment:</h6>
+                        <div><strong>Risk Level:</strong> ${analytics.risk_assessment.risk_level}</div>
+                        <div><strong>Opportunity Score:</strong> ${Math.round(analytics.opportunity_score)}</div>
+                    </div>
+                </div>
+            `;
+            document.getElementById('aiRecommendations').innerHTML = recommendationsHtml;
+        }
+
+        // Multi-AI Functions
+        async function sendMultiAIRecommendations() {
+            const customerId = document.getElementById('customerId').value;
+            const email = document.getElementById('multiAiEmail').value;
+            const emailCount = document.getElementById('emailCount').value;
+            
+            if (!customerId) {
+                showError('Please enter a customer ID first');
+                return;
+            }
+
+            try {
+                showSuccess('🤖 Starting Multi-AI recommendation process...');
+                
+                const response = await fetch(`/api/multi-ai-recommendations/${customerId}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        email: email,
+                        email_count: parseInt(emailCount)
+                    })
+                });
+
+                const result = await response.json();
+                
+                if (result.success) {
+                    displayMultiAIResults(result);
+                    showSuccess(`✅ Successfully sent ${result.total_sent} AI recommendation emails!`);
+                } else {
+                    showError(`Failed to send multi-AI recommendations: ${result.error}`);
+                }
+            } catch (error) {
+                console.error('Error sending multi-AI recommendations:', error);
+                showError('Error sending multi-AI recommendations. Please try again.');
+            }
+        }
+        
+        function displayMultiAIResults(result) {
+            const resultsHtml = `
+                <div class="alert alert-success">
+                    <h5><i class="fas fa-check-circle"></i> Multi-AI Recommendations Results</h5>
+                <div class="row">
+                    <div class="col-md-6">
+                            <p><strong>Customer ID:</strong> ${result.customer_id}</p>
+                            <p><strong>Recipient:</strong> ${result.recipient_email}</p>
+                            <p><strong>Total Sent:</strong> ${result.total_sent} emails</p>
+                            <p><strong>Total Failed:</strong> ${result.total_failed} emails</p>
+                </div>
+                        <div class="col-md-6">
+                            <p><strong>AI Insights:</strong></p>
+                            <ul>
+                                <li>Personality: ${result.ai_insights?.personality_type || 'Analytical'}</li>
+                                <li>Urgency: ${result.ai_insights?.urgency_level || 'Medium'}</li>
+                                <li>Decision Style: ${result.ai_insights?.decision_making_style || 'Data-driven'}</li>
+                        </ul>
+                    </div>
+                    </div>
+                </div>
+                
+                <div class="row">
+                    <div class="col-md-6">
+                        <h6><i class="fas fa-check"></i> Successfully Sent Emails:</h6>
+                        ${result.sent_emails.map(email => `
+                            <div class="alert alert-success">
+                                <strong>${email.type}:</strong> ${email.subject}
+                                <br><small>Recommendations: ${email.recommendations_count}</small>
+                                </div>
+                            `).join('')}
+                        </div>
+                    <div class="col-md-6">
+                        <h6><i class="fas fa-exclamation-triangle"></i> Failed Emails:</h6>
+                        ${result.failed_emails.length > 0 ? result.failed_emails.map(email => `
+                            <div class="alert alert-warning">
+                                <strong>${email.type}:</strong> ${email.error}
+                            </div>
+                        `).join('') : '<div class="alert alert-success">No failed emails!</div>'}
+                    </div>
+                </div>
+            `;
+            
+            document.getElementById('multiAiResults').innerHTML = resultsHtml;
+        }
+        
+        async function getChromaDBRecommendations() {
+            const customerId = document.getElementById('customerId').value;
+            
+            if (!customerId) {
+                showError('Please enter a customer ID first');
+                return;
+            }
+
+            try {
+                showSuccess('🔍 Getting ChromaDB recommendations...');
+                
+                const response = await fetch(`/api/chromadb-recommendations/${customerId}`);
+                const result = await response.json();
+                
+                if (result.success) {
+                    displayChromaDBResults(result);
+                    showSuccess('✅ ChromaDB recommendations loaded successfully!');
+                } else {
+                    showError(`Failed to get ChromaDB recommendations: ${result.error}`);
+                }
+                } catch (error) {
+                console.error('Error getting ChromaDB recommendations:', error);
+                showError('Error getting ChromaDB recommendations. Please try again.');
+            }
+        }
+        
+        function displayChromaDBResults(result) {
+            const resultsHtml = `
+                <div class="alert alert-info">
+                    <h5><i class="fas fa-database"></i> ChromaDB Recommendations Results</h5>
+                    <p><strong>Total Recommendations:</strong> ${result.total_recommendations}</p>
+                    <p><strong>Customer ID:</strong> ${result.customer_id}</p>
+                </div>
+                
+                <div class="row">
+                    ${Object.entries(result.recommendations).map(([type, recs]) => `
+                        <div class="col-md-4">
+                            <div class="card">
+                                <div class="card-header">
+                                    <h6><i class="fas fa-star"></i> ${type.replace('_', ' ').toUpperCase()}</h6>
+                                </div>
+                                <div class="card-body">
+                                    ${recs.slice(0, 3).map(rec => `
+                                        <div class="property-item mb-2">
+                                            <div class="property-name">${rec.property_name || 'Property'}</div>
+                                            <div class="property-details">
+                                                <span>Price:</span> ₹${formatPrice(rec.price || 0)}<br>
+                                                <span>Type:</span> ${rec.property_type || 'N/A'}<br>
+                                                <span>AI Score:</span> ${(rec.ai_score || 0).toFixed(2)}
+                                            </div>
+                                            ${rec.ai_explanation ? `<small class="text-muted">${rec.ai_explanation}</small>` : ''}
+                </div>
+                    `).join('')}
+                                    ${recs.length > 3 ? `<small class="text-muted">... and ${recs.length - 3} more</small>` : ''}
+                </div>
+                </div>
+                </div>
+                    `).join('')}
+                </div>
+            `;
+            
+            document.getElementById('chromaDbResults').innerHTML = resultsHtml;
+        }
+        
+        async function fetchAllProperties() {
+            try {
+                showSuccess('📥 Starting property fetch to ChromaDB...');
+                
+                const response = await fetch('/api/fetch-all-properties?workers=10&page_size=100&max_pages=10');
+                const result = await response.json();
+                
+                if (result.success) {
+                    showSuccess(`✅ Successfully fetched ${result.total_properties} properties to ChromaDB!`);
+                } else {
+                    showError(`Failed to fetch properties: ${result.error}`);
+                }
+            } catch (error) {
+                console.error('Error fetching properties:', error);
+                showError('Error fetching properties. Please try again.');
+            }
+        }
+
+        // Email Functions
+        async function sendTestEmail() {
+            const email = document.getElementById('testEmail').value;
+            if (!email) {
+                showError('Please enter an email address');
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/test-email', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        customer_id: currentCustomerId,
+                        email_type: 'test_email',
+                        recipient_email: email
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    showSuccess('Test email sent successfully!');
+                    loadEmailLogs();
+                } else {
+                    showError('Email send failed: ' + (data.error || 'Unknown error'));
+                }
+            } catch (error) {
+                showError('Error sending email: ' + error.message);
+            }
+        }
+
+        async function testEmailTriggers() {
+            try {
+                const response = await fetch(`/api/test-automated-emails/${currentCustomerId}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    showSuccess('Email triggers test successful!');
+                    loadEmailLogs();
+                } else {
+                    showError('Email triggers test failed: ' + (data.error || 'Unknown error'));
+                }
+            } catch (error) {
+                showError('Error testing email triggers: ' + error.message);
+            }
+        }
+
+        async function sendDirectTestEmail() {
+            const recipient = document.getElementById('testEmail').value;
+            if (!recipient) {
+                showError('Please enter a test email address');
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/test-email-simple', {
+                    method: 'GET'
+                });
+
+                const data = await response.json();
+                    
+                if (data.success) {
+                    showSuccess('Direct test email sent successfully!');
+                    loadEmailLogs();
+                } else {
+                    showError('Direct test email failed: ' + (data.error || 'Unknown error'));
+                }
+            } catch (error) {
+                showError('Error sending direct test email: ' + error.message);
+            }
+        }
+
+        async function loadEmailLogs() {
+            try {
+                const response = await fetch('/api/list-emails');
+                const data = await response.json();
+
+                if (data.success) {
+                    const emails = data.emails || [];
+                    
+                    // Update email dashboard metrics
+                    document.getElementById('totalEmails').textContent = emails.length;
+                    document.getElementById('successEmails').textContent = emails.filter(e => e.success !== false).length;
+                    document.getElementById('failedEmails').textContent = emails.filter(e => e.success === false).length;
+                    document.getElementById('scheduledEmails').textContent = emails.filter(e => e.email_type === 'scheduled').length;
+                    
+                    document.getElementById('emailLogs').innerHTML = `
+                            ${emails.slice(0, 5).map(email => `
+                            <div class="alert ${email.success !== false ? 'alert-success' : 'alert-danger'}">
+                                        <div class="d-flex justify-content-between">
+                                    <strong>${email.filename || 'Email Log'}</strong>
+                                    <small>${new Date(email.created || Date.now()).toLocaleString()}</small>
+                </div>
+                                <div>Size: ${email.size ? (email.size/1024).toFixed(1) + ' KB' : 'N/A'}</div>
+                                </div>
+                            `).join('')}
+                        ${emails.length === 0 ? '<div class="alert alert-info">No email logs found</div>' : ''}
+                    `;
+                } else {
+                    document.getElementById('emailLogs').innerHTML = '<div class="alert alert-danger">Failed to load email logs</div>';
+                }
+            } catch (error) {
+                document.getElementById('emailLogs').innerHTML = '<div class="alert alert-danger">Error loading email logs</div>';
+            }
+        }
+
+        async function testAllEmailTypes() {
+            showSuccess('Testing all email types... This may take a moment.');
+            // Implementation for testing all email types
+        }
+
+        async function clearEmailLogs() {
+            if (confirm('Are you sure you want to clear all email logs?')) {
+                    showSuccess('Email logs cleared successfully!');
+                    loadEmailLogs();
+            }
+        }
+
+        async function sendAllIntendedEmails() {
+            showSuccess('Sending all intended emails...');
+            // Implementation for sending all intended emails
+        }
+
+        async function sendMultiAIEmails() {
+            showSuccess('Starting Multi-AI email campaign...');
+            // Implementation for sending multi-AI emails
+        }
+
+        // New Email Testing Functions
+        async function testSendGridConnection() {
+            try {
+                showSuccess('Testing SendGrid connection...');
+                const response = await fetch('/api/test-sendgrid-connection');
+                const result = await response.json();
+
+                if (result.success) {
+                    showSuccess(`✅ SendGrid connection successful: ${result.message}`);
+                    document.getElementById('multiAiResults').innerHTML = `
+                        <div class="alert alert-success">
+                            <h5><i class="fas fa-check-circle"></i> SendGrid Connection Test</h5>
+                            <p><strong>Status:</strong> Connected ✅</p>
+                            <p><strong>Details:</strong> ${JSON.stringify(result.details, null, 2)}</p>
+                            <p><strong>Timestamp:</strong> ${result.timestamp}</p>
+                </div>
+            `;
+                } else {
+                    showError(`❌ SendGrid connection failed: ${result.error}`);
+                }
+            } catch (error) {
+                showError(`❌ Error testing SendGrid: ${error.message}`);
+            }
+        }
+
+        async function getEmailAnalysisBasis() {
+            try {
+                const customerId = document.getElementById('customerId').value || 144;
+                showSuccess('Getting email analysis basis...');
+                
+                const response = await fetch(`/api/email-analysis-basis/${customerId}`);
+                const result = await response.json();
+
+                if (result.success) {
+                    document.getElementById('multiAiResults').innerHTML = `
+                        <div class="alert alert-info">
+                            <h5><i class="fas fa-search-plus"></i> Email Analysis Basis for Customer ${customerId}</h5>
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <h6>Customer Preferences:</h6>
+                                    <pre>${JSON.stringify(result.analysis_basis.customer_preferences, null, 2)}</pre>
+                </div>
+                                <div class="col-md-6">
+                                    <h6>Email Triggers:</h6>
+                                    ${Object.entries(result.email_triggers).map(([type, trigger]) => 
+                                        `<p><strong>${type}:</strong> ${trigger}</p>`
+                                    ).join('')}
+                </div>
+                        </div>
+                            <div class="row mt-3">
+                                <div class="col-12">
+                                    <h6>AI Insights Summary:</h6>
+                                    <p><strong>Engagement Level:</strong> ${result.analysis_basis.engagement_level}</p>
+                                    <p><strong>Conversion Probability:</strong> ${(result.analysis_basis.conversion_probability * 100).toFixed(1)}%</p>
+                                </div>
+                            </div>
+                </div>
+            `;
+                    showSuccess('✅ Email analysis basis retrieved successfully');
+                } else {
+                    showError(`❌ Failed to get analysis basis: ${result.error}`);
+                }
+            } catch (error) {
+                showError(`❌ Error getting analysis basis: ${error.message}`);
+            }
+        }
+
+        async function previewAllEmailContent() {
+            try {
+                const customerId = document.getElementById('customerId').value || 144;
+                showSuccess('Previewing all 10 email contents...');
+                
+                const response = await fetch(`/api/email-content-preview/${customerId}`);
+                const result = await response.json();
+                
+                if (result.success) {
+                    let previewHtml = `
+                        <div class="alert alert-warning">
+                            <h5><i class="fas fa-file-alt"></i> All 10 Email Content Previews</h5>
+                            <p><strong>Total Emails:</strong> ${result.total_emails}</p>
+                </div>
+            `;
+                    
+                    result.email_previews.forEach((preview, index) => {
+                        previewHtml += `
+                            <div class="card mb-3">
+                                <div class="card-header">
+                                    <h6>${index + 1}. ${preview.email_type.replace('_', ' ').toUpperCase()}</h6>
+                                    <p class="mb-0"><strong>Subject:</strong> ${preview.subject}</p>
+                            </div>
+                                <div class="card-body">
+                                    ${preview.error ? 
+                                        `<div class="alert alert-danger">Error: ${preview.error}</div>` :
+                                        `
+                                        <p><strong>Properties Included:</strong> ${preview.recommendations_count}</p>
+                    <div class="row">
+                        <div class="col-md-6">
+                                                <h6>Sample Properties:</h6>
+                                                ${preview.properties_included.map(prop => 
+                                                    `<p>• ${prop.name} - ₹${prop.price} (${prop.type}) - Score: ${prop.score}</p>`
+                                                ).join('')}
+                        </div>
+                        <div class="col-md-6">
+                                                <h6>Email Content Preview:</h6>
+                                                <div style="max-height: 150px; overflow-y: auto; border: 1px solid #ddd; padding: 10px;">
+                                                    ${preview.text_content.substring(0, 300)}...
+                        </div>
+                        </div>
+                                        </div>
+                                        `
+                                    }
+                                </div>
+                        </div>
+                    `;
+                    });
+                    
+                    document.getElementById('multiAiResults').innerHTML = previewHtml;
+                    showSuccess('✅ All email content previews generated successfully');
+                } else {
+                    showError(`❌ Failed to preview email content: ${result.error}`);
+                }
+            } catch (error) {
+                showError(`❌ Error previewing email content: ${error.message}`);
+            }
+        }
+
+                async function testAll10Emails() {
+            try {
+                const customerId = document.getElementById('customerId').value || 144;
+                const email = document.getElementById('testEmail').value;
+                
+                if (!email) {
+                    showError('Please enter an email address');
+                return;
+            }
+
+                showSuccess('Preparing to send all 10 email types... Ensuring properties are available...');
+                
+                // First, make sure properties are fetched
+                try {
+                    const fetchResponse = await fetch('/api/fetch-all-properties');
+                    const fetchResult = await fetchResponse.json();
+                    if (fetchResult.success) {
+                        showSuccess(`✅ Properties ready: ${fetchResult.summary.total_stored} properties available`);
+                    }
+                } catch (fetchError) {
+                    showError('Warning: Could not verify property availability, continuing anyway...');
+                }
+                
+                showSuccess('Sending all 10 email types with real properties... This may take a few minutes.');
+
+                const response = await fetch(`/api/test-all-10-emails/${customerId}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ email: email })
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    let resultsHtml = `
+                        <div class="alert alert-success">
+                            <h5><i class="fas fa-envelope-open-text"></i> All 10 Email Types Test Results</h5>
+                            <p><strong>Customer ID:</strong> ${result.customer_id}</p>
+                            <p><strong>Recipient:</strong> ${result.recipient_email}</p>
+                            <p><strong>Total Attempted:</strong> ${result.test_results.total_attempted}</p>
+                            <p><strong>Successfully Sent:</strong> ${result.test_results.total_sent}</p>
+                            <p><strong>Failed:</strong> ${result.test_results.total_failed}</p>
+                            <p><strong>ChromaDB Status:</strong> ${result.chromadb_status}</p>
+                        </div>
+                    `;
+                    
+                    if (result.test_results.sent_emails.length > 0) {
+                        resultsHtml += '<h6>✅ Successfully Sent Emails:</h6>';
+                        result.test_results.sent_emails.forEach((email, index) => {
+                            resultsHtml += `
+                                <div class="card mb-2">
+                                    <div class="card-body">
+                                        <h6>${index + 1}. ${email.type.replace('_', ' ').toUpperCase()}</h6>
+                                        <p><strong>Subject:</strong> ${email.subject}</p>
+                                        <p><strong>Strategy:</strong> ${email.strategy}</p>
+                                        <p><strong>Properties:</strong> ${email.recommendations_count} from ChromaDB</p>
+                                        <p><strong>Sample Properties:</strong></p>
+                                        <ul>
+                                            ${email.sample_properties.map(prop => 
+                                                `<li>${prop.name} - ₹${prop.price} (${prop.type}) - AI Score: ${prop.ai_score}</li>`
+                                            ).join('')}
+                                        </ul>
+                                        <small class="text-muted">Sent at: ${email.timestamp}</small>
+                                    </div>
+                                </div>
+                            `;
+                        });
+                    }
+                    
+                    if (result.test_results.failed_emails.length > 0) {
+                        resultsHtml += '<h6>❌ Failed Emails:</h6>';
+                        result.test_results.failed_emails.forEach((email, index) => {
+                            resultsHtml += `
+                                <div class="alert alert-danger">
+                                    <strong>${index + 1}. ${email.type}:</strong> ${email.error}
+                                    <br><small>Strategy: ${email.strategy}</small>
+                                </div>
+                            `;
+                        });
+                    }
+                    
+                    document.getElementById('multiAiResults').innerHTML = resultsHtml;
+                    showSuccess(`✅ Email test completed! ${result.test_results.total_sent}/${result.test_results.total_attempted} emails sent successfully.`);
+                } else {
+                    showError(`❌ Failed to test emails: ${result.error}`);
+                }
+            } catch (error) {
+                showError(`❌ Error testing emails: ${error.message}`);
+            }
+        }
+
+        async function checkChromaDBStatus() {
+            try {
+                showSuccess('Checking ChromaDB status...');
+                
+                const response = await fetch('/api/chromadb-status');
+                const result = await response.json();
+
+                if (result.success) {
+                    let statusHtml = `
+                        <div class="alert alert-${result.chromadb_initialized ? (result.property_count > 0 ? 'success' : 'warning') : 'danger'}">
+                            <h5><i class="fas fa-database"></i> ChromaDB Status Report</h5>
+                            <p><strong>Initialized:</strong> ${result.chromadb_initialized ? '✅ Yes' : '❌ No'}</p>
+                    `;
+                    
+                    if (result.chromadb_initialized) {
+                        statusHtml += `
+                            <p><strong>Collection Name:</strong> ${result.collection_name}</p>
+                            <p><strong>Property Count:</strong> ${result.property_count}</p>
+                            <p><strong>Status:</strong> ${result.status === 'ready' ? '✅ Ready' : '⚠️ Empty'}</p>
+                        `;
+                    }
+                    
+                    statusHtml += `
+                            <p><strong>Message:</strong> ${result.message}</p>
+                            <p><strong>Timestamp:</strong> ${result.timestamp}</p>
+                    </div>
+                `;
+                    
+                    document.getElementById('multiAiResults').innerHTML = statusHtml;
+                    
+                    if (result.property_count > 0) {
+                        showSuccess(`✅ ChromaDB ready with ${result.property_count} properties!`);
+                } else {
+                        showError(`⚠️ ChromaDB is empty. Click "Fetch Properties" to populate it.`);
+                    }
+                } else {
+                    showError(`❌ ChromaDB status check failed: ${result.error}`);
+                }
+            } catch (error) {
+                showError(`❌ Error checking ChromaDB status: ${error.message}`);
+            }
+        }
+
+        async function showEmailTypes() {
+            const emailTypes = [
+                { type: 'property_based', description: 'Properties matching customer\'s preferred property types', icon: '🏠' },
+                { type: 'price_based', description: 'Properties within customer\'s budget range', icon: '💰' },
+                { type: 'location_based', description: 'Properties in customer\'s preferred locations', icon: '📍' },
+                { type: 'similarity_based', description: 'Properties similar to customer\'s viewed properties', icon: '🔍' },
+                { type: 'behavioral_based', description: 'Properties based on customer behavior patterns', icon: '🧠' },
+                { type: 'premium_properties', description: 'High-end luxury properties', icon: '⭐' },
+                { type: 'budget_friendly', description: 'Value-for-money properties', icon: '💵' },
+                { type: 'trending_properties', description: 'Currently trending market properties', icon: '📈' },
+                { type: 'family_oriented', description: 'Family-suitable properties with amenities', icon: '👨‍👩‍👧‍👦' },
+                { type: 'investment_opportunities', description: 'Properties with high ROI potential', icon: '💼' }
+            ];
+            
+            let typesHtml = `
+                <div class="alert alert-info">
+                    <h5><i class="fas fa-list"></i> All 10 Email Types & ChromaDB Strategies</h5>
+                    <p>Each email type uses unique ChromaDB vector search strategies:</p>
+                </div>
+            `;
+            
+            emailTypes.forEach((emailType, index) => {
+                typesHtml += `
+                    <div class="card mb-2">
+                        <div class="card-body">
+                            <h6>${emailType.icon} ${index + 1}. ${emailType.type.replace('_', ' ').toUpperCase()}</h6>
+                            <p class="mb-0">${emailType.description}</p>
+                        </div>
+                    </div>
+                `;
+            });
+            
+            document.getElementById('multiAiResults').innerHTML = typesHtml;
+            showSuccess('✅ All email types displayed');
+        }
+
+        // Utility Functions
+        function formatPrice(price) {
+            return new Intl.NumberFormat('en-IN').format(price);
+        }
+
+        function formatDuration(seconds) {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            return `${hours}h ${minutes}m`;
+        }
+
+        function showSuccess(message) {
+            const alert = document.createElement('div');
+            alert.className = 'alert alert-success alert-dismissible fade show position-fixed';
+            alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 400px;';
+            alert.innerHTML = `
+                ${message}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            `;
+            document.body.appendChild(alert);
+            
+            setTimeout(() => {
+                if (alert.parentNode) {
+                    alert.remove();
+                }
+            }, 5000);
+        }
+
+        function showError(message) {
+            const alert = document.createElement('div');
+            alert.className = 'alert alert-danger alert-dismissible fade show position-fixed';
+            alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 400px;';
+            alert.innerHTML = `
+                ${message}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            `;
+            document.body.appendChild(alert);
+            
+            setTimeout(() => {
+                if (alert.parentNode) {
+                    alert.remove();
+                }
+            }, 5000);
+        }
+
+        // List saved emails function
+        function listSavedEmails() {
+            console.log('Getting saved emails...');
+            document.getElementById('emailTestResults').innerHTML = '<div class="alert alert-info"><i class="fas fa-spinner fa-spin"></i> Loading saved emails...</div>';
+            
+            fetch(`${API_BASE_URL}/api/saved-emails`)
+                .then(response => response.json())
+                .then(data => {
+                    let html = '<div class="alert alert-success"><h5><i class="fas fa-folder-open"></i> Saved Emails</h5>';
+                    
+                    if (data.saved_emails && data.saved_emails.length > 0) {
+                        html += `<p><strong>Found ${data.total_count} saved email files:</strong></p>`;
+                        html += '<div class="row">';
+                        
+                        data.saved_emails.forEach(email => {
+                            html += `
+                                <div class="col-md-6 mb-3">
+                                    <div class="card">
+                                        <div class="card-body">
+                                            <h6 class="card-title">${email.email_type}</h6>
+                                            <p class="card-text">
+                                                <small class="text-muted">
+                                                    📅 ${email.created_time}<br>
+                                                    📁 ${email.size_kb} KB
+                                                </small>
+                                            </p>
+                                            <a href="${API_BASE_URL}/view-email/${email.filename}" target="_blank" class="btn btn-primary btn-sm">
+                                                <i class="fas fa-external-link-alt"></i> Open Email
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            `;
+                        });
+                        
+                        html += '</div>';
+                    } else {
+                        html += '<p>No saved emails found. Emails will be saved here when SendGrid limits are exceeded.</p>';
+                    }
+                    
+                    html += '</div>';
+                    document.getElementById('emailTestResults').innerHTML = html;
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    document.getElementById('emailTestResults').innerHTML = 
+                        '<div class="alert alert-danger"><i class="fas fa-exclamation-triangle"></i> Error loading saved emails: ' + error.message + '</div>';
+                });
+        }
+
+        // Auto-analyze customer 144 on page load
+        window.onload = function() {
+            analyzeCustomer();
+        };
+    </script>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html> 

templates/analytics.html

@@ -0,0 +1,919 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lead Qualification Analytics Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            background-color: #f8f9fa;
+            padding-top: 2rem;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 2rem 0;
+            margin-bottom: 2rem;
+        }
+        .stats-card {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            margin-bottom: 1rem;
+            text-align: center;
+        }
+        .stats-number {
+            font-size: 2.5rem;
+            font-weight: bold;
+            color: #007bff;
+        }
+        .stats-label {
+            color: #6c757d;
+            font-size: 1rem;
+            margin-top: 0.5rem;
+        }
+        .chart-container {
+            background: white;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+        }
+        .activity-list {
+            background: white;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+        }
+        .activity-item {
+            padding: 1rem;
+            border-bottom: 1px solid #e9ecef;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .activity-item:last-child {
+            border-bottom: none;
+        }
+        .activity-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.2rem;
+        }
+        .activity-icon.click {
+            background: #28a745;
+        }
+        .activity-icon.search {
+            background: #007bff;
+        }
+        .activity-icon.visit {
+            background: #ffc107;
+        }
+        .activity-icon.email {
+            background: #6c757d;
+        }
+        .clear-data-btn {
+            background: #dc3545;
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .clear-data-btn:hover {
+            background: #c82333;
+        }
+        .export-btn {
+            background: #28a745;
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .export-btn:hover {
+            background: #218838;
+        }
+        .lead-score-card {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 2rem;
+            border-radius: 15px;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .lead-score-number {
+            font-size: 4rem;
+            font-weight: bold;
+            margin-bottom: 1rem;
+        }
+        .lead-score-label {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .lead-status {
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-weight: bold;
+            margin-top: 1rem;
+        }
+        .lead-status.hot {
+            background: #dc3545;
+        }
+        .lead-status.warm {
+            background: #ffc107;
+            color: #212529;
+        }
+        .lead-status.cold {
+            background: #6c757d;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <!-- Header -->
+        <div class="header">
+        <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-md-8">
+                        <h1><i class="fas fa-chart-bar"></i> Lead Qualification Analytics Dashboard</h1>
+                        <p class="mb-0">Track user behavior and lead qualification metrics</p>
+                    </div>
+                    <div class="col-md-4 text-end">
+                        <a href="/" class="btn btn-outline-light me-2">
+                            <i class="fas fa-home"></i> Home
+                        </a>
+                        <button class="btn btn-outline-light me-2" onclick="exportData()">
+                            <i class="fas fa-download"></i> Export
+                        </button>
+                        <button class="btn btn-light" onclick="clearData()">
+                            <i class="fas fa-trash"></i> Clear
+                </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="container">
+            <!-- Lead Score Card -->
+            <div class="row mb-4">
+                <div class="col-md-12">
+                    <div class="lead-score-card">
+                        <div class="lead-score-number" id="leadScore">0</div>
+                        <div class="lead-score-label">Lead Qualification Score</div>
+                        <div class="lead-status" id="leadStatus">Cold</div>
+                    </div>
+        </div>
+    </div>
+
+            <!-- Action Buttons -->
+            <div class="row mb-4">
+                <div class="col-md-6">
+                    <button class="clear-data-btn me-2" onclick="clearData()">
+                        <i class="fas fa-trash"></i> Clear All Data
+                    </button>
+                    <button class="export-btn" onclick="exportData()">
+                        <i class="fas fa-download"></i> Export Data
+                    </button>
+                </div>
+                <div class="col-md-6 text-end">
+                    <small class="text-muted">Last updated: <span id="lastUpdated"></span></small>
+                </div>
+        </div>
+
+            <!-- Stats Cards -->
+            <div class="row mb-4">
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="totalClicks">0</div>
+                        <div class="stats-label">Total Clicks</div>
+                    </div>
+                        </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="totalSearches">0</div>
+                        <div class="stats-label">Total Searches</div>
+                    </div>
+                </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="uniqueProperties">0</div>
+                        <div class="stats-label">Unique Properties</div>
+                    </div>
+                        </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="totalViewTime">0s</div>
+                        <div class="stats-label">Total View Time</div>
+                    </div>
+                </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="avgViewDuration">0s</div>
+                        <div class="stats-label">Avg View Duration</div>
+                    </div>
+                </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="visitRequests">0</div>
+                        <div class="stats-label">Visit Requests</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Charts Row -->
+            <div class="row mb-4">
+                <div class="col-md-6">
+                    <div class="chart-container">
+                        <h5><i class="fas fa-chart-pie"></i> Property Type Preferences</h5>
+                        <canvas id="propertyTypeChart"></canvas>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="chart-container">
+                        <h5><i class="fas fa-chart-bar"></i> Price Range Preferences</h5>
+                        <canvas id="priceRangeChart"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Feature Preferences -->
+            <div class="row mb-4">
+                <div class="col-md-12">
+                    <div class="chart-container">
+                        <h5><i class="fas fa-star"></i> Feature Preferences</h5>
+                        <canvas id="featureChart"></canvas>
+                    </div>
+                </div>
+                        </div>
+
+            <!-- Detailed View Analytics -->
+            <div class="row mb-4">
+                <div class="col-md-12">
+                    <div class="chart-container">
+                        <h5><i class="fas fa-clock"></i> Detailed View Analytics</h5>
+                        <canvas id="viewDurationChart"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Recent Activity -->
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="activity-list">
+                        <h5><i class="fas fa-history"></i> Recent Activity</h5>
+                        <div id="activityList">
+                            <p class="text-muted">No activity recorded yet.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        class LeadAnalyticsDashboard {
+            constructor() {
+                this.trackingData = this.loadTrackingData();
+                this.init();
+            }
+
+            loadTrackingData() {
+                const data = localStorage.getItem('userTrackingData');
+                return data ? JSON.parse(data) : {
+                    clickedProperties: [],
+                    detailedViews: [],
+                    searchHistory: [],
+                    features: [],
+                    priceRanges: [],
+                    propertyTypes: []
+                };
+            }
+
+            init() {
+                this.updateStats();
+                this.createCharts();
+                this.displayRecentActivity();
+                this.updateLastUpdated();
+                this.updateLeadScore();
+                this.generateInsights();
+            }
+
+            updateStats() {
+                document.getElementById('totalClicks').textContent = this.trackingData.clickedProperties.length;
+                document.getElementById('totalSearches').textContent = this.trackingData.searchHistory.length;
+                
+                // Unique properties clicked
+                const uniqueProperties = new Set(this.trackingData.clickedProperties.map(p => p.id)).size;
+                document.getElementById('uniqueProperties').textContent = uniqueProperties;
+                
+                // Total view time
+                const totalViewTime = this.trackingData.detailedViews.reduce((sum, view) => sum + view.totalDuration, 0);
+                document.getElementById('totalViewTime').textContent = this.formatDuration(totalViewTime);
+                
+                // Average view duration
+                if (this.trackingData.detailedViews.length > 0) {
+                    const totalDuration = this.trackingData.detailedViews.reduce((sum, view) => sum + view.totalDuration, 0);
+                    const totalViews = this.trackingData.detailedViews.reduce((sum, view) => sum + view.viewCount, 0);
+                    const avgDuration = totalViews > 0 ? Math.round(totalDuration / totalViews) : 0;
+                    document.getElementById('avgViewDuration').textContent = this.formatDuration(avgDuration);
+                }
+                
+                // Visit requests (from localStorage or session)
+                const visitHistory = JSON.parse(localStorage.getItem('visitHistory') || '[]');
+                document.getElementById('visitRequests').textContent = visitHistory.length;
+            }
+
+            generateInsights() {
+                const insights = this.analyzeUserBehavior();
+                this.displayInsights(insights);
+            }
+
+            analyzeUserBehavior() {
+                const insights = {
+                    preferredTypes: {},
+                    preferredPriceRanges: {},
+                    engagementLevel: 'low',
+                    sessionDuration: 0,
+                    topProperties: [],
+                    recommendations: []
+                };
+
+                // Analyze property type preferences
+                this.trackingData.propertyTypes.forEach(type => {
+                    insights.preferredTypes[type] = (insights.preferredTypes[type] || 0) + 1;
+                });
+
+                // Analyze price range preferences
+                this.trackingData.priceRanges.forEach(range => {
+                    insights.preferredPriceRanges[range] = (insights.preferredPriceRanges[range] || 0) + 1;
+                });
+
+                // Calculate engagement level
+                const totalInteractions = this.trackingData.clickedProperties.length + this.trackingData.detailedViews.length;
+                const totalTime = this.trackingData.detailedViews.reduce((sum, view) => sum + view.totalDuration, 0);
+                
+                if (totalInteractions >= 10 && totalTime >= 60) {
+                    insights.engagementLevel = 'high';
+                } else if (totalInteractions >= 5 && totalTime >= 30) {
+                    insights.engagementLevel = 'medium';
+                }
+
+                insights.sessionDuration = totalTime;
+
+                // Get top properties by engagement
+                insights.topProperties = this.trackingData.detailedViews
+                    .sort((a, b) => b.totalDuration - a.totalDuration)
+                    .slice(0, 3);
+
+                // Generate recommendations
+                insights.recommendations = this.generateRecommendations();
+
+                return insights;
+            }
+
+            generateRecommendations() {
+                const recommendations = [];
+                const insights = this.analyzeUserBehavior();
+
+                // Recommendation 1: Based on most viewed property type
+                const topType = Object.keys(insights.preferredTypes)
+                    .sort((a, b) => insights.preferredTypes[b] - insights.preferredTypes[a])[0];
+                
+                if (topType) {
+                    recommendations.push({
+                        type: 'property_type',
+                        message: `You show strong interest in ${topType} properties. Consider exploring more ${topType} options.`,
+                        priority: 'high'
+                    });
+                }
+
+                // Recommendation 2: Based on price range
+                const topPriceRange = Object.keys(insights.preferredPriceRanges)
+                    .sort((a, b) => insights.preferredPriceRanges[b] - insights.preferredPriceRanges[a])[0];
+                
+                if (topPriceRange) {
+                    recommendations.push({
+                        type: 'price_range',
+                        message: `Your preferred price range is ${this.formatPriceRange(topPriceRange)}. Focus on properties in this range.`,
+                        priority: 'medium'
+                    });
+                }
+
+                // Recommendation 3: Based on engagement
+                if (insights.engagementLevel === 'high') {
+                    recommendations.push({
+                        type: 'engagement',
+                        message: 'High engagement detected! You\'re ready for personalized recommendations and follow-up.',
+                        priority: 'high'
+                    });
+                } else if (insights.engagementLevel === 'medium') {
+                    recommendations.push({
+                        type: 'engagement',
+                        message: 'Good engagement level. Consider scheduling property visits for interested properties.',
+                        priority: 'medium'
+                    });
+                }
+
+                // Recommendation 4: Based on session duration
+                if (insights.sessionDuration < 30) {
+                    recommendations.push({
+                        type: 'duration',
+                        message: 'Short session duration. Consider providing more detailed property information.',
+                        priority: 'low'
+                    });
+                }
+
+                return recommendations;
+            }
+
+            displayInsights(insights) {
+                // Create insights section if it doesn't exist
+                let insightsSection = document.getElementById('insightsSection');
+                if (!insightsSection) {
+                    insightsSection = document.createElement('div');
+                    insightsSection.id = 'insightsSection';
+                    insightsSection.className = 'row mb-4';
+                    insightsSection.innerHTML = `
+                        <div class="col-md-12">
+                            <div class="chart-container">
+                                <h5><i class="fas fa-lightbulb"></i> AI-Powered Insights & Recommendations</h5>
+                                <div id="insightsContent"></div>
+                            </div>
+                        </div>
+                    `;
+                    
+                    // Insert after the charts row
+                    const chartsRow = document.querySelector('.row.mb-4:nth-of-type(3)');
+                    if (chartsRow) {
+                        chartsRow.parentNode.insertBefore(insightsSection, chartsRow.nextSibling);
+                    }
+                }
+
+                const insightsContent = document.getElementById('insightsContent');
+                let insightsHTML = '';
+
+                // Display engagement summary
+                insightsHTML += `
+                    <div class="row mb-3">
+                        <div class="col-md-6">
+                            <div class="alert alert-info">
+                                <h6><i class="fas fa-chart-line"></i> Engagement Summary</h6>
+                                <p><strong>Level:</strong> <span class="badge bg-${insights.engagementLevel === 'high' ? 'success' : insights.engagementLevel === 'medium' ? 'warning' : 'secondary'}">${insights.engagementLevel.toUpperCase()}</span></p>
+                                <p><strong>Session Duration:</strong> ${this.formatDuration(insights.sessionDuration)}</p>
+                                <p><strong>Total Interactions:</strong> ${this.trackingData.clickedProperties.length + this.trackingData.detailedViews.length}</p>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="alert alert-success">
+                                <h6><i class="fas fa-star"></i> Top Property Types</h6>
+                                ${Object.entries(insights.preferredTypes)
+                                    .sort(([,a], [,b]) => b - a)
+                                    .slice(0, 3)
+                                    .map(([type, count]) => `<p><strong>${type}:</strong> ${count} interactions</p>`)
+                                    .join('')}
+                            </div>
+                        </div>
+                    </div>
+                `;
+
+                // Display recommendations
+                insightsHTML += `
+                    <div class="row">
+                        <div class="col-md-12">
+                            <h6><i class="fas fa-recommendations"></i> AI Recommendations</h6>
+                            ${insights.recommendations.map(rec => `
+                                <div class="alert alert-${rec.priority === 'high' ? 'danger' : rec.priority === 'medium' ? 'warning' : 'info'}">
+                                    <i class="fas fa-${rec.type === 'property_type' ? 'home' : rec.type === 'price_range' ? 'money-bill' : rec.type === 'engagement' ? 'chart-line' : 'clock'}"></i>
+                                    ${rec.message}
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                `;
+
+                // Display top properties
+                if (insights.topProperties.length > 0) {
+                    insightsHTML += `
+                        <div class="row mt-3">
+                            <div class="col-md-12">
+                                <h6><i class="fas fa-trophy"></i> Most Engaged Properties</h6>
+                                <div class="row">
+                                    ${insights.topProperties.map(prop => `
+                                        <div class="col-md-4">
+                                            <div class="card">
+                                                <div class="card-body">
+                                                    <h6 class="card-title">${prop.propertyName.substring(0, 30)}...</h6>
+                                                    <p class="card-text">
+                                                        <strong>Type:</strong> ${prop.propertyType}<br>
+                                                        <strong>Price:</strong> ₹${this.formatPrice(prop.price)}<br>
+                                                        <strong>Duration:</strong> ${this.formatDuration(prop.totalDuration)}<br>
+                                                        <strong>Views:</strong> ${prop.viewCount}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    `).join('')}
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                }
+
+                insightsContent.innerHTML = insightsHTML;
+            }
+
+            createCharts() {
+                this.createPropertyTypeChart();
+                this.createPriceRangeChart();
+                this.createFeatureChart();
+                this.createViewDurationChart();
+            }
+
+            createPropertyTypeChart() {
+                const ctx = document.getElementById('propertyTypeChart').getContext('2d');
+                const typeCounts = {};
+                
+                this.trackingData.propertyTypes.forEach(type => {
+                    typeCounts[type] = (typeCounts[type] || 0) + 1;
+                });
+
+                if (Object.keys(typeCounts).length === 0) {
+                    ctx.canvas.style.display = 'none';
+                    return;
+                }
+
+                new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                        labels: Object.keys(typeCounts),
+                    datasets: [{
+                            data: Object.values(typeCounts),
+                        backgroundColor: [
+                                '#FF6384',
+                                '#36A2EB',
+                                '#FFCE56',
+                                '#4BC0C0',
+                                '#9966FF',
+                                '#FF9F40'
+                            ]
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }
+            });
+            }
+
+            createPriceRangeChart() {
+                const ctx = document.getElementById('priceRangeChart').getContext('2d');
+                const rangeCounts = {};
+                
+                this.trackingData.priceRanges.forEach(range => {
+                    rangeCounts[range] = (rangeCounts[range] || 0) + 1;
+                });
+
+                if (Object.keys(rangeCounts).length === 0) {
+                    ctx.canvas.style.display = 'none';
+                    return;
+                }
+
+                const labels = {
+                    '0-500000': 'Under ₹5L',
+                    '500000-1000000': '₹5L - ₹10L',
+                    '1000000-2000000': '₹10L - ₹20L',
+                    '2000000-5000000': '₹20L - ₹50L',
+                    '5000000-10000000': '₹50L - ₹1Cr',
+                    '10000000+': 'Above ₹1Cr'
+                };
+
+                new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: Object.keys(rangeCounts).map(key => labels[key] || key),
+                        datasets: [{
+                            label: 'Clicks',
+                            data: Object.values(rangeCounts),
+                            backgroundColor: '#007bff'
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        scales: {
+                            y: {
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                });
+            }
+
+            createFeatureChart() {
+                const ctx = document.getElementById('featureChart').getContext('2d');
+                const featureCounts = {};
+                
+                this.trackingData.features.forEach(feature => {
+                    featureCounts[feature] = (featureCounts[feature] || 0) + 1;
+                });
+
+                if (Object.keys(featureCounts).length === 0) {
+                    ctx.canvas.style.display = 'none';
+                    return;
+                }
+
+                // Sort by count and take top 10
+                const sortedFeatures = Object.entries(featureCounts)
+                    .sort(([,a], [,b]) => b - a)
+                    .slice(0, 10);
+
+                new Chart(ctx, {
+                    type: 'horizontalBar',
+                data: {
+                        labels: sortedFeatures.map(([feature]) => feature),
+                    datasets: [{
+                            label: 'Clicks',
+                            data: sortedFeatures.map(([,count]) => count),
+                            backgroundColor: '#28a745'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                        scales: {
+                            x: {
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                });
+            }
+
+            createViewDurationChart() {
+                const ctx = document.getElementById('viewDurationChart').getContext('2d');
+                const detailedViews = this.trackingData.detailedViews;
+                
+                if (detailedViews.length === 0) {
+                    ctx.canvas.style.display = 'none';
+                    return;
+                }
+
+                // Sort by total duration and take top 10
+                const sortedViews = detailedViews
+                    .sort((a, b) => b.totalDuration - a.totalDuration)
+                    .slice(0, 10);
+
+                new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: sortedViews.map(view => view.propertyName.substring(0, 20) + '...'),
+                        datasets: [{
+                            label: 'Total Duration (seconds)',
+                            data: sortedViews.map(view => view.totalDuration),
+                            backgroundColor: '#ff6384'
+                        }, {
+                            label: 'View Count',
+                            data: sortedViews.map(view => view.viewCount),
+                            backgroundColor: '#36a2eb'
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+        }
+        
+            displayRecentActivity() {
+                const container = document.getElementById('activityList');
+                const allActivities = [];
+
+                // Add clicked properties
+                this.trackingData.clickedProperties.forEach(prop => {
+                    allActivities.push({
+                        type: 'click',
+                        text: `Clicked on ${prop.name}`,
+                        timestamp: new Date(prop.timestamp),
+                        price: prop.price,
+                        propertyType: prop.type
+                    });
+                });
+
+                // Add detailed views
+                this.trackingData.detailedViews.forEach(view => {
+                    allActivities.push({
+                        type: 'detailed_view',
+                        text: `Viewed ${view.propertyName} for ${this.formatDuration(view.totalDuration)}`,
+                        timestamp: new Date(view.lastViewed),
+                        price: view.price,
+                        propertyType: view.propertyType,
+                        viewCount: view.viewCount,
+                        totalDuration: view.totalDuration
+                    });
+                });
+
+                // Add searches
+                this.trackingData.searchHistory.forEach(search => {
+                    allActivities.push({
+                        type: 'search',
+                        text: `Searched for "${search.query}"`,
+                        timestamp: new Date(search.timestamp),
+                        filters: search.filters
+                    });
+                });
+
+                // Add visit requests
+                const visitHistory = JSON.parse(localStorage.getItem('visitHistory') || '[]');
+                visitHistory.forEach(visit => {
+                    allActivities.push({
+                        type: 'visit',
+                        text: `Requested visit for ${visit.propertyName}`,
+                        timestamp: new Date(visit.timestamp),
+                        propertyType: visit.propertyType
+                    });
+                });
+
+                // Sort by timestamp (most recent first)
+                allActivities.sort((a, b) => b.timestamp - a.timestamp);
+
+                if (allActivities.length === 0) {
+                    container.innerHTML = '<p class="text-muted">No activity recorded yet.</p>';
+                    return;
+                }
+
+                const activitiesHTML = allActivities.slice(0, 20).map(activity => {
+                    let iconClass, icon;
+                    if (activity.type === 'click') {
+                        iconClass = 'click';
+                        icon = 'fas fa-mouse-pointer';
+                    } else if (activity.type === 'detailed_view') {
+                        iconClass = 'visit';
+                        icon = 'fas fa-clock';
+                    } else if (activity.type === 'search') {
+                        iconClass = 'search';
+                        icon = 'fas fa-search';
+                    } else {
+                        iconClass = 'visit';
+                        icon = 'fas fa-calendar';
+                    }
+                    
+                    return `
+                        <div class="activity-item">
+                            <div class="d-flex align-items-center">
+                                <div class="activity-icon ${iconClass} me-3">
+                                    <i class="${icon}"></i>
+                                </div>
+                                <div>
+                                    <div class="fw-bold">${activity.text}</div>
+                                    <small class="text-muted">${activity.timestamp.toLocaleString()}</small>
+                                    ${activity.price ? `<br><small class="text-primary">₹${this.formatPrice(activity.price)}</small>` : ''}
+                                    ${activity.viewCount ? `<br><small class="text-success">Viewed ${activity.viewCount} times</small>` : ''}
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                }).join('');
+
+                container.innerHTML = activitiesHTML;
+            }
+
+            updateLastUpdated() {
+                const now = new Date();
+                document.getElementById('lastUpdated').textContent = now.toLocaleString();
+            }
+
+            updateLeadScore() {
+                // Calculate lead score based on user behavior
+                let score = 0;
+                
+                // Points for clicks
+                score += this.trackingData.clickedProperties.length * 5;
+                
+                // Points for detailed views
+                score += this.trackingData.detailedViews.length * 10;
+                
+                // Points for searches
+                score += this.trackingData.searchHistory.length * 3;
+                
+                // Points for visit requests
+                const visitHistory = JSON.parse(localStorage.getItem('visitHistory') || '[]');
+                score += visitHistory.length * 15;
+                
+                // Points for time spent
+                const totalViewTime = this.trackingData.detailedViews.reduce((sum, view) => sum + view.totalDuration, 0);
+                score += Math.min(totalViewTime / 60, 20); // Max 20 points for time
+                
+                // Cap score at 100
+                score = Math.min(score, 100);
+                
+                document.getElementById('leadScore').textContent = Math.round(score);
+                
+                // Update lead status
+                const statusElement = document.getElementById('leadStatus');
+                statusElement.className = 'lead-status';
+                
+                if (score >= 70) {
+                    statusElement.textContent = 'Hot Lead';
+                    statusElement.classList.add('hot');
+                } else if (score >= 40) {
+                    statusElement.textContent = 'Warm Lead';
+                    statusElement.classList.add('warm');
+                } else {
+                    statusElement.textContent = 'Cold Lead';
+                    statusElement.classList.add('cold');
+                }
+            }
+
+            formatPrice(price) {
+                if (price >= 10000000) {
+                    return (price / 10000000).toFixed(1) + 'Cr';
+                } else if (price >= 100000) {
+                    return (price / 100000).toFixed(1) + 'L';
+                } else {
+                    return price.toLocaleString();
+                }
+            }
+
+            formatDuration(seconds) {
+                if (seconds < 60) {
+                    return seconds + 's';
+                } else if (seconds < 3600) {
+                    const minutes = Math.floor(seconds / 60);
+                    const remainingSeconds = seconds % 60;
+                    return minutes + 'm ' + remainingSeconds + 's';
+            } else {
+                    const hours = Math.floor(seconds / 3600);
+                    const minutes = Math.floor((seconds % 3600) / 60);
+                    return hours + 'h ' + minutes + 'm';
+                }
+            }
+
+            formatPriceRange(range) {
+                const ranges = {
+                    '0-500000': 'Under ₹5L',
+                    '500000-1000000': '₹5L - ₹10L',
+                    '1000000-2000000': '₹10L - ₹20L',
+                    '2000000-5000000': '₹20L - ₹50L',
+                    '5000000-10000000': '₹50L - ₹1Cr',
+                    '10000000+': 'Above ₹1Cr'
+                };
+                return ranges[range] || range;
+            }
+        }
+
+        // Global functions for buttons
+        function clearData() {
+            if (confirm('Are you sure you want to clear all tracking data? This cannot be undone.')) {
+                localStorage.removeItem('userTrackingData');
+                localStorage.removeItem('userSessionId');
+                localStorage.removeItem('visitHistory');
+                location.reload();
+            }
+        }
+
+        function exportData() {
+            const trackingData = localStorage.getItem('userTrackingData');
+            const visitHistory = localStorage.getItem('visitHistory');
+            
+            const exportData = {
+                tracking_data: trackingData ? JSON.parse(trackingData) : {},
+                visit_history: visitHistory ? JSON.parse(visitHistory) : [],
+                export_timestamp: new Date().toISOString()
+            };
+            
+            const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'lead_analytics_data.json';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+
+        // Initialize dashboard
+        document.addEventListener('DOMContentLoaded', () => {
+            new LeadAnalyticsDashboard();
+        });
+    </script>
+</body>
+</html> 

templates/enhanced_dashboard.html

@@ -0,0 +1,1264 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Real Estate Lead Qualification Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2c3e50;
+            --secondary-color: #3498db;
+            --success-color: #27ae60;
+            --warning-color: #f39c12;
+            --danger-color: #e74c3c;
+            --light-bg: #f8f9fa;
+            --dark-bg: #343a40;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+
+        .dashboard-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            margin: 20px;
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+
+        .header h1 {
+            margin: 0;
+            font-size: 2.5rem;
+            font-weight: 300;
+        }
+
+        .header p {
+            margin: 10px 0 0 0;
+            opacity: 0.9;
+            font-size: 1.1rem;
+        }
+
+        .search-section {
+            background: white;
+            padding: 30px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .search-box {
+            background: var(--light-bg);
+            border: none;
+            border-radius: 50px;
+            padding: 15px 25px;
+            font-size: 1.1rem;
+            width: 100%;
+            max-width: 400px;
+            transition: all 0.3s ease;
+        }
+
+        .search-box:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
+            transform: translateY(-2px);
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--secondary-color), #2980b9);
+            border: none;
+            border-radius: 50px;
+            padding: 15px 30px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
+        }
+
+        .content-section {
+            padding: 30px;
+        }
+
+        .stats-card {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+            transition: all 0.3s ease;
+            border-left: 5px solid var(--secondary-color);
+        }
+
+        .stats-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+        }
+
+        .stats-card.success {
+            border-left-color: var(--success-color);
+        }
+
+        .stats-card.warning {
+            border-left-color: var(--warning-color);
+        }
+
+        .stats-card.danger {
+            border-left-color: var(--danger-color);
+        }
+
+        .stats-number {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }
+
+        .stats-label {
+            color: #666;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .property-card {
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+            transition: all 0.3s ease;
+            border: 1px solid #eee;
+        }
+
+        .property-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        }
+
+        .property-name {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }
+
+        .property-details {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .property-badge {
+            background: var(--light-bg);
+            color: var(--primary-color);
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+
+        .price {
+            font-size: 1.3rem;
+            font-weight: 700;
+            color: var(--success-color);
+        }
+
+        .engagement-score {
+            display: inline-block;
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: white;
+        }
+
+        .engagement-high {
+            background: var(--success-color);
+        }
+
+        .engagement-medium {
+            background: var(--warning-color);
+        }
+
+        .engagement-low {
+            background: var(--danger-color);
+        }
+
+        .loading {
+            text-align: center;
+            padding: 50px;
+            color: #666;
+        }
+
+        .loading i {
+            font-size: 3rem;
+            color: var(--secondary-color);
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .error-message {
+            background: #fee;
+            color: var(--danger-color);
+            padding: 20px;
+            border-radius: 10px;
+            border: 1px solid #fcc;
+            margin: 20px 0;
+        }
+
+        .chart-container {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+        }
+
+        .analytics-section {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+        }
+
+        .insight-item {
+            background: var(--light-bg);
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            border-left: 4px solid var(--secondary-color);
+        }
+
+        .insight-label {
+            font-weight: 600;
+            color: var(--primary-color);
+            margin-bottom: 5px;
+        }
+
+        .insight-value {
+            color: #666;
+        }
+
+        .recommendation {
+            background: #e8f5e8;
+            border: 1px solid #c3e6c3;
+            color: #2d5a2d;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+        }
+
+        .risk-high {
+            background: #fee;
+            border-color: #fcc;
+            color: #c33;
+        }
+
+        .risk-medium {
+            background: #fff3cd;
+            border-color: #ffeaa7;
+            color: #856404;
+        }
+
+        .risk-low {
+            background: #e8f5e8;
+            border-color: #c3e6c3;
+            color: #2d5a2d;
+        }
+
+        .no-data {
+            text-align: center;
+            padding: 50px;
+            color: #666;
+        }
+
+        .no-data i {
+            font-size: 4rem;
+            color: #ddd;
+            margin-bottom: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .dashboard-container {
+                margin: 10px;
+            }
+            
+            .header h1 {
+                font-size: 2rem;
+            }
+            
+            .stats-number {
+                font-size: 2rem;
+            }
+            
+            .property-details {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- Header -->
+        <div class="header">
+            <h1><i class="fas fa-chart-line"></i> Lead Qualification Dashboard</h1>
+            <p>Real-time property engagement analytics and insights</p>
+        </div>
+
+        <!-- Search Section -->
+        <div class="search-section">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <div class="input-group">
+                        <input type="number" id="customerIdInput" class="form-control search-box" 
+                               placeholder="Enter Customer ID (e.g., 105)" min="1">
+                        <button class="btn btn-primary" onclick="loadCustomerData()">
+                            <i class="fas fa-search"></i> Load Data
+                        </button>
+                    </div>
+                </div>
+                <div class="col-md-6 text-end">
+                    <button class="btn btn-outline-secondary" onclick="loadSampleData()">
+                        <i class="fas fa-eye"></i> View Sample Data
+                    </button>
+                    <button class="btn btn-outline-info" onclick="exportData()">
+                        <i class="fas fa-download"></i> Export
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Content Section -->
+        <div class="content-section">
+            <!-- Loading State -->
+            <div id="loadingState" class="loading" style="display: none;">
+                <i class="fas fa-spinner"></i>
+                <p>Loading customer data...</p>
+            </div>
+
+            <!-- Error State -->
+            <div id="errorState" class="error-message" style="display: none;">
+                <i class="fas fa-exclamation-triangle"></i>
+                <span id="errorMessage"></span>
+            </div>
+
+            <!-- No Data State -->
+            <div id="noDataState" class="no-data" style="display: none;">
+                <i class="fas fa-search"></i>
+                <h3>No Data Found</h3>
+                <p>Enter a customer ID to view their property engagement data</p>
+            </div>
+
+            <!-- Data Content -->
+            <div id="dataContent" style="display: none;">
+                <!-- Summary Statistics -->
+                <div class="row mb-4">
+                    <div class="col-md-3">
+                        <div class="stats-card">
+                            <div class="stats-number" id="totalProperties">0</div>
+                            <div class="stats-label">Total Properties</div>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stats-card">
+                            <div class="stats-number" id="totalViews">0</div>
+                            <div class="stats-label">Total Views</div>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stats-card">
+                            <div class="stats-number" id="avgPrice">₹0</div>
+                            <div class="stats-label">Average Price</div>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stats-card">
+                            <div class="stats-number" id="engagementScore">0</div>
+                            <div class="stats-label">Engagement Score</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Charts Section -->
+                <div class="row mb-4">
+                    <div class="col-md-6">
+                        <div class="chart-container">
+                            <h5><i class="fas fa-chart-pie"></i> Property Type Distribution</h5>
+                            <canvas id="propertyTypeChart"></canvas>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="chart-container">
+                            <h5><i class="fas fa-chart-bar"></i> Engagement by Property</h5>
+                            <canvas id="engagementChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Lead Qualification Section -->
+                <div class="row mb-4">
+                    <div class="col-12">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-fire"></i> Lead Qualification Analysis</h5>
+                            <div id="leadQualificationContainer"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Detailed Analytics Section -->
+                <div class="row mb-4">
+                    <div class="col-md-6">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-brain"></i> AI Insights</h5>
+                            <div id="insightsContainer"></div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-lightbulb"></i> Recommendations</h5>
+                            <div id="recommendationsContainer"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Property Analysis Section -->
+                <div class="row mb-4">
+                    <div class="col-12">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-home"></i> Detailed Property Analysis</h5>
+                            <div id="propertyAnalysisContainer"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Conversion Probability Section -->
+                <div class="row mb-4">
+                    <div class="col-md-6">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-chart-line"></i> Conversion Probability</h5>
+                            <div id="conversionContainer"></div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-clock"></i> Lead Timeline</h5>
+                            <div id="timelineContainer"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Properties List -->
+                <div class="row">
+                    <div class="col-12">
+                        <h5><i class="fas fa-home"></i> Property Engagement Details</h5>
+                        <div id="propertiesContainer"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js" 
+            onerror="console.error('Failed to load Chart.js from primary CDN')"></script>
+    <script>
+        // Fallback for Chart.js if primary CDN fails
+        if (typeof Chart === 'undefined') {
+            const script = document.createElement('script');
+            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js';
+            script.onload = function() {
+                console.log('Chart.js loaded from fallback CDN');
+            };
+            script.onerror = function() {
+                console.error('Failed to load Chart.js from fallback CDN');
+            };
+            document.head.appendChild(script);
+        }
+    </script>
+    <script>
+        let currentCustomerId = null;
+        let propertyTypeChart = null;
+        let engagementChart = null;
+
+        // Initialize dashboard
+        document.addEventListener('DOMContentLoaded', function() {
+            // Load sample data on page load
+            loadSampleData();
+            
+            // Add enter key support for search
+            document.getElementById('customerIdInput').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    loadCustomerData();
+                }
+            });
+        });
+
+        function showLoading() {
+            document.getElementById('loadingState').style.display = 'block';
+            document.getElementById('errorState').style.display = 'none';
+            document.getElementById('noDataState').style.display = 'none';
+            document.getElementById('dataContent').style.display = 'none';
+        }
+
+        function showError(message) {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('errorState').style.display = 'block';
+            document.getElementById('errorMessage').textContent = message;
+            document.getElementById('noDataState').style.display = 'none';
+            document.getElementById('dataContent').style.display = 'none';
+        }
+
+        function showNoData() {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('errorState').style.display = 'none';
+            document.getElementById('noDataState').style.display = 'block';
+            document.getElementById('dataContent').style.display = 'none';
+        }
+
+        function showData() {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('errorState').style.display = 'none';
+            document.getElementById('noDataState').style.display = 'none';
+            document.getElementById('dataContent').style.display = 'block';
+        }
+
+        function formatPrice(price) {
+            return new Intl.NumberFormat('en-IN', {
+                style: 'currency',
+                currency: 'INR',
+                maximumFractionDigits: 0
+            }).format(price);
+        }
+
+        function formatDuration(seconds) {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            return `${hours}h ${minutes}m`;
+        }
+
+        function getEngagementClass(score) {
+            if (score >= 80) return 'engagement-high';
+            if (score >= 50) return 'engagement-medium';
+            return 'engagement-low';
+        }
+
+        function getRiskClass(level) {
+            switch(level.toLowerCase()) {
+                case 'high': return 'risk-high';
+                case 'medium': return 'risk-medium';
+                case 'low': return 'risk-low';
+                default: return '';
+            }
+        }
+
+        async function loadCustomerData() {
+            const customerId = document.getElementById('customerIdInput').value.trim();
+            
+            if (!customerId) {
+                showError('Please enter a customer ID');
+                return;
+            }
+
+            showLoading();
+            currentCustomerId = customerId;
+
+            try {
+                console.log('🔍 Making combined API request for customer:', customerId);
+                console.log('📡 Request URL:', `/api/lead-analysis/${customerId}`);
+                
+                // Load combined lead analysis data
+                const response = await fetch(`/api/lead-analysis/${customerId}`);
+                console.log('📥 Response status:', response.status);
+                console.log('📥 Response headers:', Object.fromEntries(response.headers.entries()));
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                
+                const combinedData = await response.json();
+                console.log('📊 Combined Lead Analysis Data:', combinedData);
+                
+                if (combinedData.error) {
+                    showError(combinedData.error);
+                    return;
+                }
+                
+                if (!combinedData.properties || combinedData.properties.length === 0) {
+                    showNoData();
+                    return;
+                }
+
+                // Display network info
+                displayNetworkInfo(customerId, combinedData);
+
+                // Display all data from single response
+                displayData(combinedData);
+                
+            } catch (error) {
+                console.error('❌ Error loading data:', error);
+                showError(`Failed to load data: ${error.message}`);
+            }
+        }
+
+        function loadSampleData() {
+            document.getElementById('customerIdInput').value = '105';
+            loadCustomerData();
+        }
+
+        function displayData(data) {
+            showData();
+            
+            // Update summary statistics
+            const summary = data.summary;
+            document.getElementById('totalProperties').textContent = summary.total_properties;
+            document.getElementById('totalViews').textContent = summary.total_views;
+            document.getElementById('avgPrice').textContent = formatPrice(summary.average_price);
+            document.getElementById('engagementScore').textContent = Math.round(summary.engagement_score);
+
+            // Display all sections immediately
+            displayLeadQualification(data);
+            displayInsights(data);
+            displayRecommendations(data);
+            displayPropertyAnalysis(data);
+            displayConversionProbability(data);
+            displayTimeline(data);
+            displayProperties(data.properties);
+
+            // Create charts with delay to ensure Chart.js is loaded
+            setTimeout(() => {
+                createPropertyTypeChart(summary.property_types);
+                createEngagementChart(data.properties);
+            }, 500);
+        }
+
+        function displayLeadQualification(data) {
+            const container = document.getElementById('leadQualificationContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.lead_qualification) {
+                container.innerHTML = '<p class="text-muted">No lead qualification data available</p>';
+                return;
+            }
+
+            const lead = data.lead_qualification;
+            
+            // Lead status card
+            const statusCard = document.createElement('div');
+            statusCard.className = 'row mb-3';
+            statusCard.innerHTML = `
+                <div class="col-md-6">
+                    <div class="stats-card" style="border-left-color: ${lead.status_color}">
+                        <div class="stats-number" style="color: ${lead.status_color}">${lead.lead_status}</div>
+                        <div class="stats-label">Lead Status</div>
+                        <small class="text-muted">${lead.status_description}</small>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="stats-card">
+                        <div class="stats-number">${lead.lead_score}/100</div>
+                        <div class="stats-label">Lead Score</div>
+                        <small class="text-muted">Based on multiple factors</small>
+                    </div>
+                </div>
+            `;
+            container.appendChild(statusCard);
+
+            // Factors breakdown
+            const factorsCard = document.createElement('div');
+            factorsCard.className = 'row';
+            factorsCard.innerHTML = '<div class="col-12"><h6>Lead Score Breakdown:</h6></div>';
+            
+            Object.entries(lead.factors).forEach(([factor, data]) => {
+                const factorDiv = document.createElement('div');
+                factorDiv.className = 'col-md-6 mb-2';
+                factorDiv.innerHTML = `
+                    <div class="insight-item">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <div>
+                                <div class="insight-label">${factor.replace('_', ' ').toUpperCase()}</div>
+                                <div class="insight-value">${data.description}</div>
+                            </div>
+                            <div class="text-end">
+                                <div class="fw-bold">${data.points.toFixed(1)}/${data.max_points}</div>
+                                <small class="text-muted">Score: ${data.score}</small>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                factorsCard.appendChild(factorDiv);
+            });
+            
+            container.appendChild(factorsCard);
+        }
+
+        function displayPropertyAnalysis(data) {
+            const container = document.getElementById('propertyAnalysisContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || !data.analytics.property_analysis) {
+                container.innerHTML = '<p class="text-muted">No property analysis available</p>';
+                return;
+            }
+
+            const analysis = data.analytics.property_analysis;
+
+            // Price Analysis
+            if (analysis.price_analysis && analysis.price_analysis.min_price !== undefined) {
+                const priceDiv = document.createElement('div');
+                priceDiv.className = 'mb-3';
+                priceDiv.innerHTML = `
+                    <h6><i class="fas fa-money-bill-wave"></i> Price Analysis</h6>
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Price Range</div>
+                                <div class="insight-value">${formatPrice(analysis.price_analysis.min_price)} - ${formatPrice(analysis.price_analysis.max_price)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Average Price</div>
+                                <div class="insight-value">${formatPrice(analysis.price_analysis.avg_price)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Preferred Range</div>
+                                <div class="insight-value">${getPreferredRangeDisplay(analysis.price_analysis.preferred_range)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Price Trend</div>
+                                <div class="insight-value">${analysis.price_analysis.price_trend || 'N/A'}</div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(priceDiv);
+            }
+
+            // Duration Analysis
+            if (analysis.duration_analysis && analysis.duration_analysis.total_duration !== undefined) {
+                const durationDiv = document.createElement('div');
+                durationDiv.className = 'mb-3';
+                durationDiv.innerHTML = `
+                    <h6><i class="fas fa-clock"></i> Duration Analysis</h6>
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Total Duration</div>
+                                <div class="insight-value">${formatDuration(analysis.duration_analysis.total_duration)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Average Duration</div>
+                                <div class="insight-value">${formatDuration(analysis.duration_analysis.avg_duration)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Max Duration</div>
+                                <div class="insight-value">${formatDuration(analysis.duration_analysis.max_duration)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Min Duration</div>
+                                <div class="insight-value">${formatDuration(analysis.duration_analysis.min_duration)}</div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(durationDiv);
+            }
+
+            // Individual Property Analysis
+            if (analysis.properties && Array.isArray(analysis.properties) && analysis.properties.length > 0) {
+                const propertiesDiv = document.createElement('div');
+                propertiesDiv.className = 'mt-4';
+                propertiesDiv.innerHTML = '<h6><i class="fas fa-list"></i> Individual Property Analysis</h6>';
+                
+                analysis.properties.forEach(prop => {
+                    if (!prop || typeof prop !== 'object') return;
+                    
+                    const propDiv = document.createElement('div');
+                    propDiv.className = 'property-card mb-3';
+                    propDiv.innerHTML = `
+                        <div class="row">
+                            <div class="col-md-8">
+                                <div class="property-name">${prop.property_name || 'Unknown Property'}</div>
+                                <div class="property-details">
+                                    <span class="property-badge">${prop.property_type || 'Unknown'}</span>
+                                    <span class="property-badge">${prop.view_count || 0} views</span>
+                                    <span class="property-badge">${prop.duration_formatted || '0h 0m'}</span>
+                                    <span class="property-badge ${getInterestClass(prop.interest_level || 'Unknown')}">${prop.interest_level || 'Unknown'} Interest</span>
+                                </div>
+                            </div>
+                            <div class="col-md-4 text-end">
+                                <div class="price">${prop.price_formatted || '₹0'}</div>
+                                <div class="engagement-score ${getEngagementClass(prop.engagement_score || 0)}">${Math.round(prop.engagement_score || 0)}%</div>
+                            </div>
+                        </div>
+                        <div class="mt-2">
+                            <small class="text-muted">
+                                <i class="fas fa-lightbulb"></i> ${prop.recommendation || 'No recommendation available'}
+                            </small>
+                        </div>
+                    `;
+                    propertiesDiv.appendChild(propDiv);
+                });
+                
+                container.appendChild(propertiesDiv);
+            }
+        }
+
+        function displayConversionProbability(data) {
+            const container = document.getElementById('conversionContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || !data.analytics.conversion_probability) {
+                container.innerHTML = '<p class="text-muted">No conversion data available</p>';
+                return;
+            }
+
+            const conversion = data.analytics.conversion_probability;
+            
+            // Main probability card
+            const probCard = document.createElement('div');
+            probCard.className = 'stats-card mb-3';
+            probCard.innerHTML = `
+                <div class="stats-number">${Math.round(conversion.final_probability)}%</div>
+                <div class="stats-label">Conversion Probability</div>
+                <small class="text-muted">Confidence: ${conversion.confidence_level}</small>
+            `;
+            container.appendChild(probCard);
+
+            // Breakdown
+            const breakdownDiv = document.createElement('div');
+            breakdownDiv.innerHTML = `
+                <h6>Probability Breakdown:</h6>
+                <div class="insight-item">
+                    <div class="d-flex justify-content-between">
+                        <span>Base Probability:</span>
+                        <span>${Math.round(conversion.base_probability)}%</span>
+                    </div>
+                </div>
+            `;
+            
+            Object.entries(conversion.adjustments).forEach(([factor, value]) => {
+                const factorDiv = document.createElement('div');
+                factorDiv.className = 'insight-item';
+                factorDiv.innerHTML = `
+                    <div class="d-flex justify-content-between">
+                        <span>${factor.replace('_', ' ').toUpperCase()}:</span>
+                        <span>+${Math.round(value)}%</span>
+                    </div>
+                `;
+                breakdownDiv.appendChild(factorDiv);
+            });
+            
+            container.appendChild(breakdownDiv);
+        }
+
+        function displayTimeline(data) {
+            const container = document.getElementById('timelineContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || !data.analytics.lead_timeline || data.analytics.lead_timeline.length === 0) {
+                container.innerHTML = '<p class="text-muted">No timeline data available</p>';
+                return;
+            }
+
+            const timeline = data.analytics.lead_timeline;
+            
+            timeline.forEach((event, index) => {
+                const eventDiv = document.createElement('div');
+                eventDiv.className = 'insight-item mb-2';
+                eventDiv.innerHTML = `
+                    <div class="d-flex justify-content-between align-items-start">
+                        <div>
+                            <div class="insight-label">${event.property_name}</div>
+                            <div class="insight-value">
+                                ${event.property_type} • ${formatPrice(event.price)} • ${event.views} views
+                            </div>
+                            <small class="text-muted">${formatDate(event.date)}</small>
+                        </div>
+                        <div class="text-end">
+                            <div class="engagement-score ${getEngagementClass(event.engagement_score)}">${Math.round(event.engagement_score)}%</div>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(eventDiv);
+            });
+        }
+
+        function createPropertyTypeChart(propertyTypes) {
+            try {
+                const canvas = document.getElementById('propertyTypeChart');
+                if (!canvas) {
+                    console.error('Property type chart canvas not found');
+                    return;
+                }
+                
+                const ctx = canvas.getContext('2d');
+                
+                if (propertyTypeChart) {
+                    propertyTypeChart.destroy();
+                }
+
+                const labels = Object.keys(propertyTypes);
+                const data = Object.values(propertyTypes);
+
+                if (typeof Chart === 'undefined') {
+                    console.error('Chart.js not loaded');
+                    return;
+                }
+
+                propertyTypeChart = new Chart(ctx, {
+                    type: 'doughnut',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            data: data,
+                            backgroundColor: [
+                                '#3498db',
+                                '#e74c3c',
+                                '#2ecc71',
+                                '#f39c12',
+                                '#9b59b6',
+                                '#1abc9c'
+                            ]
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'bottom'
+                            }
+                        }
+                    }
+                });
+            } catch (error) {
+                console.error('Error creating property type chart:', error);
+            }
+        }
+
+        function createEngagementChart(properties) {
+            try {
+                const canvas = document.getElementById('engagementChart');
+                if (!canvas) {
+                    console.error('Engagement chart canvas not found');
+                    return;
+                }
+                
+                const ctx = canvas.getContext('2d');
+                
+                if (engagementChart) {
+                    engagementChart.destroy();
+                }
+
+                const labels = properties.map(p => p.propertyName.substring(0, 20) + '...');
+                const data = properties.map(p => p.engagement_score || 0);
+
+                if (typeof Chart === 'undefined') {
+                    console.error('Chart.js not loaded');
+                    return;
+                }
+
+                engagementChart = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: 'Engagement Score',
+                            data: data,
+                            backgroundColor: '#3498db',
+                            borderColor: '#2980b9',
+                            borderWidth: 1
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                max: 100
+                            }
+                        },
+                        plugins: {
+                            legend: {
+                                display: false
+                            }
+                        }
+                    }
+                });
+            } catch (error) {
+                console.error('Error creating engagement chart:', error);
+            }
+        }
+
+        function displayInsights(data) {
+            const container = document.getElementById('insightsContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || Object.keys(data.analytics).length === 0) {
+                container.innerHTML = '<p class="text-muted">No insights available</p>';
+                return;
+            }
+
+            const analytics = data.analytics;
+            const insights = [
+                { label: 'Engagement Level', value: analytics.engagement_level || 'Unknown' },
+                { label: 'Preferred Types', value: (analytics.preferred_property_types || []).join(', ') || 'None' },
+                { label: 'Opportunity Score', value: `${Math.round(analytics.opportunity_score || 0)}%` },
+                { label: 'Risk Level', value: analytics.risk_assessment?.risk_level || 'Unknown' }
+            ];
+
+            insights.forEach(insight => {
+                const div = document.createElement('div');
+                div.className = 'insight-item';
+                div.innerHTML = `
+                    <div class="insight-label">${insight.label}</div>
+                    <div class="insight-value">${insight.value}</div>
+                `;
+                container.appendChild(div);
+            });
+        }
+
+        function displayRecommendations(data) {
+            const container = document.getElementById('recommendationsContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || !data.analytics.recommendations || data.analytics.recommendations.length === 0) {
+                container.innerHTML = '<p class="text-muted">No recommendations available</p>';
+                return;
+            }
+
+            data.analytics.recommendations.forEach(rec => {
+                const div = document.createElement('div');
+                div.className = 'recommendation';
+                div.innerHTML = `<i class="fas fa-lightbulb"></i> ${rec}`;
+                container.appendChild(div);
+            });
+
+            // Add risk assessment if available
+            if (data.analytics.risk_assessment && data.analytics.risk_assessment.risk_factors) {
+                const riskDiv = document.createElement('div');
+                riskDiv.className = `recommendation ${getRiskClass(data.analytics.risk_assessment.risk_level)}`;
+                riskDiv.innerHTML = `
+                    <strong><i class="fas fa-exclamation-triangle"></i> Risk Factors:</strong><br>
+                    ${data.analytics.risk_assessment.risk_factors.join(', ')}
+                `;
+                container.appendChild(riskDiv);
+            }
+        }
+
+        function displayProperties(properties) {
+            const container = document.getElementById('propertiesContainer');
+            container.innerHTML = '';
+
+            properties.forEach(property => {
+                const div = document.createElement('div');
+                div.className = 'property-card';
+                
+                const engagementClass = getEngagementClass(property.engagement_score || 0);
+                const engagementText = property.engagement_score ? `${Math.round(property.engagement_score)}%` : 'N/A';
+                
+                div.innerHTML = `
+                    <div class="property-name">${property.propertyName}</div>
+                    <div class="property-details">
+                        <div>
+                            <span class="property-badge">${property.propertyTypeName}</span>
+                            <span class="property-badge">${property.viewCount} views</span>
+                            <span class="property-badge">${formatDuration(property.totalDuration)}</span>
+                        </div>
+                        <div>
+                            <span class="price">${formatPrice(property.price)}</span>
+                            <span class="engagement-score ${engagementClass}">${engagementText}</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 text-muted">
+                        <small>
+                            <i class="fas fa-clock"></i> Last viewed: ${formatDate(property.lastViewedAt)}
+                            ${property.last_viewed_days_ago !== undefined ? `(${property.last_viewed_days_ago} days ago)` : ''}
+                        </small>
+                    </div>
+                `;
+                
+                container.appendChild(div);
+            });
+        }
+
+        function formatDate(dateString) {
+            if (!dateString) return 'Unknown';
+            
+            try {
+                const date = new Date(dateString);
+                return date.toLocaleDateString('en-IN', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+            } catch (e) {
+                return 'Invalid date';
+            }
+        }
+
+        async function exportData() {
+            if (!currentCustomerId) {
+                alert('Please load customer data first');
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/export/${currentCustomerId}?format=json`);
+                const data = await response.json();
+                
+                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `customer_${currentCustomerId}_data.json`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+                
+            } catch (error) {
+                console.error('Export error:', error);
+                alert('Failed to export data');
+            }
+        }
+
+        function getInterestClass(level) {
+            switch(level.toLowerCase()) {
+                case 'very high': return 'engagement-high';
+                case 'high': return 'engagement-medium';
+                case 'medium': return 'engagement-medium';
+                case 'low': return 'engagement-low';
+                case 'very low': return 'engagement-low';
+                default: return '';
+            }
+        }
+
+        function getPreferredRangeDisplay(preferredRange) {
+            if (!preferredRange || typeof preferredRange !== 'string') {
+                return 'N/A';
+            }
+            return preferredRange.replace('_', ' ').toUpperCase();
+        }
+
+        function displayNetworkInfo(customerId, data) {
+            // Create network info section
+            const networkInfo = `
+                <div class="analytics-section mb-4">
+                    <h5><i class="fas fa-network-wired"></i> Network Request Information</h5>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <h6>API Requests Made:</h6>
+                            <div class="insight-item">
+                                <div class="insight-label">Lead Analysis Request</div>
+                                <div class="insight-value">GET /api/lead-analysis/${customerId}</div>
+                                <small class="text-muted">Status: 200 OK</small>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <h6>Data Summary:</h6>
+                            <div class="insight-item">
+                                <div class="insight-label">Properties Found</div>
+                                <div class="insight-value">${data.properties ? data.properties.length : 0}</div>
+                            </div>
+                            <div class="insight-item">
+                                <div class="insight-label">Analytics Generated</div>
+                                <div class="insight-value">${Object.keys(data).length} sections</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-3">
+                        <button class="btn btn-sm btn-outline-info" onclick="showRawData()">
+                            <i class="fas fa-code"></i> View Raw JSON Data
+                        </button>
+                        <button class="btn btn-sm btn-outline-secondary" onclick="copyToClipboard()">
+                            <i class="fas fa-copy"></i> Copy to Clipboard
+                        </button>
+                    </div>
+                    
+                    <div id="rawDataContainer" style="display: none;" class="mt-3">
+                        <h6>Raw API Response Data:</h6>
+                        <div class="row">
+                            <div class="col-md-6">
+                                <h6>Combined Lead Analysis Data:</h6>
+                                <pre class="bg-light p-2 rounded" style="max-height: 300px; overflow-y: auto; font-size: 0.8rem;">${JSON.stringify(data, null, 2)}</pre>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            // Insert network info at the top of the data content
+            const dataContent = document.getElementById('dataContent');
+            dataContent.insertAdjacentHTML('afterbegin', networkInfo);
+        }
+
+        function showRawData() {
+            const container = document.getElementById('rawDataContainer');
+            if (container.style.display === 'none') {
+                container.style.display = 'block';
+            } else {
+                container.style.display = 'none';
+            }
+        }
+
+        function copyToClipboard() {
+            const customerId = document.getElementById('customerIdInput').value.trim();
+            const data = {
+                customer_id: customerId,
+                timestamp: new Date().toISOString(),
+                api_requests: [
+                    {
+                        url: `/api/lead-analysis/${customerId}`,
+                        method: 'GET',
+                        description: 'Combined lead analysis data'
+                    }
+                ],
+                note: 'Check browser Network tab for actual request/response details'
+            };
+            
+            navigator.clipboard.writeText(JSON.stringify(data, null, 2)).then(() => {
+                alert('Network information copied to clipboard!');
+            }).catch(() => {
+                alert('Failed to copy to clipboard. Check console for data.');
+                console.log('Network Info:', data);
+            });
+        }
+    </script>
+</body>
+</html> 

templates/index.html

@@ -0,0 +1,2272 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Real Estate Lead Qualification Engine</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Font Awesome -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --secondary-color: #64748b;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --danger-color: #ef4444;
+            --dark-color: #1e293b;
+            --light-color: #f8fafc;
+            --border-color: #e2e8f0;
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: var(--dark-color);
+        }
+        
+        .navbar {
+            background: rgba(255, 255, 255, 0.95) !important;
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .hero-section {
+            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+            padding: 80px 0;
+            text-align: center;
+        }
+        
+        .hero-title {
+            font-size: 3.5rem;
+            font-weight: 700;
+            color: var(--dark-color);
+            margin-bottom: 1rem;
+        }
+        
+        .hero-subtitle {
+            font-size: 1.25rem;
+            color: var(--secondary-color);
+            margin-bottom: 2rem;
+        }
+        
+        .search-container {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            margin-bottom: 3rem;
+        }
+        
+        .property-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+        
+        .property-card {
+            background: white;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+        }
+        
+        .property-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+        }
+        
+        .property-image {
+            width: 100%;
+            height: 250px;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+        }
+        
+        .property-card:hover .property-image {
+            transform: scale(1.05);
+        }
+        
+        .property-badge {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: var(--primary-color);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+        
+        .property-content {
+            padding: 1.5rem;
+        }
+        
+        .property-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--dark-color);
+        }
+        
+        .property-price {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+        }
+        
+        .property-location {
+            color: var(--secondary-color);
+            margin-bottom: 1rem;
+            font-size: 0.875rem;
+        }
+        
+        .property-features {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        
+        .feature-tag {
+            background: var(--light-color);
+            color: var(--secondary-color);
+            padding: 0.25rem 0.75rem;
+            border-radius: 15px;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+        
+        .feature-tag.available {
+            background: #dcfce7;
+            color: #166534;
+        }
+        
+        .property-actions {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 1rem;
+        }
+        
+        .btn-action {
+            flex: 1;
+            padding: 0.75rem;
+            border: none;
+            border-radius: 10px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            text-align: center;
+        }
+        
+        .btn-primary-custom {
+            background: var(--primary-color);
+            color: white;
+        }
+        
+        .btn-primary-custom:hover {
+            background: #1d4ed8;
+            color: white;
+        }
+        
+        .btn-outline-custom {
+            background: transparent;
+            color: var(--primary-color);
+            border: 2px solid var(--primary-color);
+        }
+        
+        .btn-outline-custom:hover {
+            background: var(--primary-color);
+            color: white;
+        }
+        
+        .floating-email {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            background: white;
+            border-radius: 15px;
+            padding: 1.5rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+            max-width: 350px;
+            display: none;
+            border: 2px solid var(--primary-color);
+        }
+        
+        .floating-email.show {
+            display: block;
+            animation: slideIn 0.3s ease, pulse 2s infinite;
+        }
+
+        .floating-email.hidden {
+            display: none !important;
+        }
+
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
+            }
+            50% {
+                box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
+            }
+            100% {
+                box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
+            }
+        }
+        
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        
+        .email-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        
+        .email-icon {
+            width: 40px;
+            height: 40px;
+            background: var(--primary-color);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+        
+        .loading-spinner {
+            display: none;
+            text-align: center;
+            padding: 2rem;
+        }
+        
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid var(--border-color);
+            border-top: 4px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .recommendations-section {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            margin-top: 3rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        
+        .section-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--dark-color);
+        }
+        
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        
+        .stat-card {
+            background: var(--light-color);
+            padding: 1.5rem;
+            border-radius: 15px;
+            text-align: center;
+        }
+        
+        .stat-number {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+        
+        .stat-label {
+            color: var(--secondary-color);
+            font-size: 0.875rem;
+            margin-top: 0.5rem;
+        }
+        
+        .whatsapp-float {
+            position: fixed;
+            bottom: 30px;
+            left: 30px;
+            background: #25d366;
+            color: white;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            box-shadow: 0 5px 15px rgba(37, 214, 102, 0.3);
+            transition: all 0.3s ease;
+            z-index: 1000;
+        }
+        
+        .whatsapp-float:hover {
+            transform: scale(1.1);
+            color: white;
+        }
+
+        .visit-history-float {
+            position: fixed;
+            bottom: 100px;
+            left: 30px;
+            background: #6c757d;
+            color: white;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
+            transition: all 0.3s ease;
+            z-index: 1000;
+            cursor: pointer;
+        }
+
+        .visit-history-float:hover {
+            transform: scale(1.1);
+            background: #495057;
+        }
+        
+        .dark-mode-toggle {
+            position: fixed;
+            top: 100px;
+            right: 30px;
+            background: white;
+            border: none;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+        
+        .dark-mode-toggle:hover {
+            transform: scale(1.1);
+        }
+        
+        /* Dark mode styles */
+        body.dark-mode {
+            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+            color: #f1f5f9;
+        }
+        
+        body.dark-mode .navbar {
+            background: rgba(30, 41, 59, 0.95) !important;
+        }
+        
+        body.dark-mode .property-card,
+        body.dark-mode .search-container,
+        body.dark-mode .recommendations-section,
+        body.dark-mode .floating-email {
+            background: #334155;
+            color: #f1f5f9;
+        }
+        
+        body.dark-mode .property-title {
+            color: #f1f5f9;
+        }
+        
+        body.dark-mode .stat-card {
+            background: #475569;
+        }
+        
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2.5rem;
+            }
+            
+            .property-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .floating-email {
+                bottom: 20px;
+                right: 20px;
+                left: 20px;
+                max-width: none;
+            }
+            
+            .whatsapp-float {
+                bottom: 20px;
+                left: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container">
+            <a class="navbar-brand fw-bold" href="#">
+                <i class="fas fa-home me-2"></i>
+                Real Estate Lead Engine
+            </a>
+            
+            <div class="navbar-nav ms-auto">
+                <a class="nav-link" href="#properties">Properties</a>
+                <a class="nav-link" href="#recommendations">Recommendations</a>
+                <a class="nav-link" href="#" onclick="showVisitHistory()">Visit History</a>
+                <a class="nav-link" href="/analytics">Analytics</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero-section">
+        <div class="container">
+            <h1 class="hero-title">Discover Your Perfect Property</h1>
+            <p class="hero-subtitle">Explore thousands of properties with smart recommendations based on your preferences</p>
+            
+            <div class="search-container">
+                <div class="row">
+                    <div class="col-md-3">
+                        <select class="form-select" id="propertyType">
+                            <option value="">All Property Types</option>
+                            <option value="Flat">Flat</option>
+                            <option value="Villa">Villa</option>
+                            <option value="House">House</option>
+                            <option value="Apartment">Apartment</option>
+                        </select>
+                    </div>
+                    <div class="col-md-3">
+                        <input type="number" class="form-control" id="minPrice" placeholder="Min Price">
+                    </div>
+                    <div class="col-md-3">
+                        <input type="number" class="form-control" id="maxPrice" placeholder="Max Price">
+                    </div>
+                    <div class="col-md-3">
+                        <button class="btn btn-primary w-100" onclick="searchProperties()">
+                            <i class="fas fa-search me-2"></i>Search
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testing Controls -->
+    <div class="container mb-4">
+        <div class="row">
+            <div class="col-12">
+                <div class="alert alert-info">
+                    <h6>🧪 Testing Controls:</h6>
+                    <button class="btn btn-sm btn-danger me-2" onclick="clearTrackingData()">
+                        <i class="fas fa-trash"></i> Clear Data
+                    </button>
+                    <button class="btn btn-sm btn-warning me-2" onclick="testModal()">
+                        <i class="fas fa-eye"></i> Test Modal
+                    </button>
+                    <button class="btn btn-sm btn-secondary me-2" onclick="testPropertyClick()">
+                        <i class="fas fa-mouse-pointer"></i> Test Click
+                    </button>
+                    <button class="btn btn-sm btn-info me-2" onclick="showTrackingData()">
+                        <i class="fas fa-chart-bar"></i> Show Data
+                    </button>
+                    <small class="d-block mt-2">
+                        <strong>Expected Behavior:</strong> Card clicks = tracked + opens modal, "View Details" = same behavior, NO DUPLICATES
+                    </small>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Properties Section -->
+    <section class="container" id="properties">
+        <div class="loading-spinner" id="loadingSpinner">
+            <div class="spinner"></div>
+            <p class="mt-3">Loading properties...</p>
+        </div>
+        
+        <div class="property-grid" id="propertyGrid"></div>
+        
+        <div class="text-center mt-4">
+            <button class="btn btn-outline-primary" id="loadMoreBtn" onclick="loadMoreProperties()" style="display: none;">
+                Load More Properties
+            </button>
+        </div>
+    </section>
+
+    <!-- Recommendations Section -->
+    <section class="container" id="recommendations">
+        <div class="recommendations-section">
+            <h2 class="section-title">
+                <i class="fas fa-star me-2"></i>
+                Personalized Recommendations
+            </h2>
+            
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-number" id="propertiesViewed">0</div>
+                    <div class="stat-label">Properties Viewed</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number" id="timeSpent">0</div>
+                    <div class="stat-label">Minutes Spent</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number" id="leadScore">0</div>
+                    <div class="stat-label">Lead Score</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number" id="visitRequests">0</div>
+                    <div class="stat-label">Visit Requests</div>
+                </div>
+            </div>
+            
+            <div class="property-grid" id="recommendationsGrid"></div>
+        </div>
+    </section>
+
+    <!-- Floating Email Capture -->
+    <div class="floating-email" id="floatingEmail">
+        <div class="email-header">
+            <div class="email-icon">
+                <i class="fas fa-envelope"></i>
+            </div>
+            <div>
+                <h5 class="mb-0">Get Your Perfect Matches!</h5>
+                <small class="text-muted">Receive personalized property recommendations</small>
+            </div>
+                <button type="button" class="btn-close" onclick="hideFloatingEmail()" style="position: absolute; top: 10px; right: 10px;"></button>
+        </div>
+        
+        <form id="emailForm">
+            <div class="mb-3">
+                <input type="email" class="form-control" id="userEmail" placeholder="Enter your email" required>
+            </div>
+            <button type="submit" class="btn btn-primary w-100">
+                <i class="fas fa-paper-plane me-2"></i>
+                Send Recommendations
+            </button>
+        </form>
+    </div>
+
+    <!-- WhatsApp Float -->
+    <a href="https://wa.me/919876543210" class="whatsapp-float" target="_blank">
+        <i class="fab fa-whatsapp"></i>
+    </a>
+
+    <!-- Visit History Float -->
+    <div class="visit-history-float" onclick="showVisitHistory()">
+        <i class="fas fa-history"></i>
+    </div>
+
+    <!-- Dark Mode Toggle -->
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">
+        <i class="fas fa-moon" id="darkModeIcon"></i>
+    </button>
+
+    <!-- Property Details Modal -->
+    <div class="modal fade" id="propertyDetailsModal" tabindex="-1" aria-labelledby="propertyDetailsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="propertyDetailsModalLabel">
+                        <i class="fas fa-home me-2"></i>Property Details
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-8">
+                            <div id="propertyImages" class="mb-4">
+                                <!-- Property images will be loaded here -->
+                            </div>
+                            <div id="propertyDescription" class="mb-4">
+                                <!-- Property description will be loaded here -->
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="property-details-sidebar">
+                                <div class="card">
+                                    <div class="card-body">
+                                        <h5 id="detailPropertyName" class="card-title"></h5>
+                                        <h4 id="detailPropertyPrice" class="text-primary mb-3"></h4>
+                                        <div class="property-meta mb-3">
+                                            <div class="row">
+                                                <div class="col-6">
+                                                    <small class="text-muted">Type</small>
+                                                    <p id="detailPropertyType" class="mb-0"></p>
+                                                </div>
+                                                <div class="col-6">
+                                                    <small class="text-muted">Location</small>
+                                                    <p id="detailPropertyAddress" class="mb-0"></p>
+                                                </div>
+                                            </div>
+                                            <div class="row mt-2">
+                                                <div class="col-4">
+                                                    <small class="text-muted">Beds</small>
+                                                    <p id="detailPropertyBeds" class="mb-0"></p>
+                                                </div>
+                                                <div class="col-4">
+                                                    <small class="text-muted">Baths</small>
+                                                    <p id="detailPropertyBaths" class="mb-0"></p>
+                                                </div>
+                                                <div class="col-4">
+                                                    <small class="text-muted">Size</small>
+                                                    <p id="detailPropertySize" class="mb-0"></p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="property-features mb-3">
+                                            <h6>Features</h6>
+                                            <div id="detailPropertyFeatures"></div>
+                                        </div>
+                                        <div class="d-grid gap-2">
+                                            <button type="button" class="btn btn-primary" onclick="openVisitModalFromDetails()">
+                                                <i class="fas fa-calendar-check me-2"></i>Schedule Visit
+                                            </button>
+                                            <button type="button" class="btn btn-outline-primary" onclick="addToFavorites()">
+                                                <i class="fas fa-heart me-2"></i>Add to Favorites
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        <i class="fas fa-times me-2"></i>Close
+                    </button>
+                    <button type="button" class="btn btn-success" onclick="openVisitModalFromDetails()">
+                        <i class="fas fa-calendar-check me-2"></i>Schedule Visit
+                    </button>
+                    <button type="button" class="btn btn-primary" onclick="shareProperty()">
+                        <i class="fas fa-share me-2"></i>Share
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Visit Modal -->
+    <div class="modal fade" id="visitModal" tabindex="-1" aria-labelledby="visitModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="visitModalLabel">
+                        <i class="fas fa-calendar-check me-2"></i>Schedule Property Visit
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="property-summary mb-4">
+                                <h6 class="text-muted mb-2">Property Details</h6>
+                                <div class="property-info">
+                                    <h5 id="modalPropertyName" class="mb-2"></h5>
+                                    <p class="text-primary mb-1" id="modalPropertyPrice"></p>
+                                    <p class="text-muted mb-1" id="modalPropertyType"></p>
+                                    <p class="text-muted mb-3" id="modalPropertyAddress"></p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <form id="visitForm">
+                                <div class="mb-3">
+                                    <label for="visitorName" class="form-label">Your Name *</label>
+                                    <input type="text" class="form-control" id="visitorName" required>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="visitorEmail" class="form-label">Email Address *</label>
+                                    <input type="email" class="form-control" id="visitorEmail" required>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="visitorPhone" class="form-label">Phone Number *</label>
+                                    <input type="tel" class="form-control" id="visitorPhone" required>
+                                </div>
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <div class="mb-3">
+                                            <label for="visitDate" class="form-label">Preferred Date *</label>
+                                            <input type="date" class="form-control" id="visitDate" required>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <div class="mb-3">
+                                            <label for="visitTime" class="form-label">Preferred Time *</label>
+                                            <select class="form-select" id="visitTime" required>
+                                                <option value="">Select Time</option>
+                                                <option value="09:00">09:00 AM</option>
+                                                <option value="10:00">10:00 AM</option>
+                                                <option value="11:00">11:00 AM</option>
+                                                <option value="12:00">12:00 PM</option>
+                                                <option value="14:00">02:00 PM</option>
+                                                <option value="15:00">03:00 PM</option>
+                                                <option value="16:00">04:00 PM</option>
+                                                <option value="17:00">05:00 PM</option>
+                                                <option value="18:00">06:00 PM</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="visitNotes" class="form-label">Additional Notes</label>
+                                    <textarea class="form-control" id="visitNotes" rows="3" placeholder="Any specific requirements or questions..."></textarea>
+                                </div>
+                                <div class="mb-3">
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" id="agreeTerms" required>
+                                        <label class="form-check-label" for="agreeTerms">
+                                            I agree to receive communications about this property visit
+                                        </label>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        <i class="fas fa-times me-2"></i>Cancel
+                    </button>
+                    <button type="button" class="btn btn-primary" onclick="submitVisitRequest()">
+                        <i class="fas fa-calendar-plus me-2"></i>Schedule Visit
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Custom JS -->
+    <script>
+        // Global variables
+        let currentPage = 1;
+        let allProperties = [];
+        let userSessionId = null;
+        let userEmail = null;
+        let isDarkMode = false;
+        
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', function() {
+            loadProperties();
+            initializeDetailedViewTracking();
+            
+            // Show email form immediately
+            showEmailFormImmediately();
+            
+            // Track page load
+            trackActivity('page_load', {
+                page: 'home',
+                timestamp: new Date().toISOString()
+            });
+        });
+        
+        function initializeApp() {
+            // Generate session ID if not exists
+            userSessionId = localStorage.getItem('userSessionId') || generateSessionId();
+            localStorage.setItem('userSessionId', userSessionId);
+            
+            // Load dark mode preference
+            isDarkMode = localStorage.getItem('darkMode') === 'true';
+            if (isDarkMode) {
+                document.body.classList.add('dark-mode');
+                document.getElementById('darkModeIcon').className = 'fas fa-sun';
+            }
+            
+            // Load properties
+            loadProperties();
+            
+            // Show floating email after 30 seconds
+            setTimeout(() => {
+                showFloatingEmail();
+            }, 30000);
+            
+            // Track page view
+            trackActivity('page_view', { page: 'home' });
+        }
+        
+        function generateSessionId() {
+            return 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+        }
+        
+        async function loadProperties(page = 1, append = false) {
+            try {
+                showLoading(true);
+                
+                const params = new URLSearchParams({
+                    page: page,
+                    page_size: 20
+                });
+                
+                const response = await fetch(`/api/properties?${params}`);
+                const data = await response.json();
+                
+                if (data.properties) {
+                    if (append) {
+                        allProperties = allProperties.concat(data.properties);
+                    } else {
+                        allProperties = data.properties;
+                    }
+                    
+                    renderProperties(allProperties);
+                    
+                    // Show/hide load more button
+                    const loadMoreBtn = document.getElementById('loadMoreBtn');
+                    if (data.page < data.total_pages) {
+                        loadMoreBtn.style.display = 'block';
+                    } else {
+                        loadMoreBtn.style.display = 'none';
+                    }
+                }
+                
+            } catch (error) {
+                console.error('Error loading properties:', error);
+                showError('Failed to load properties');
+            } finally {
+                showLoading(false);
+            }
+        }
+        
+        function renderProperties(properties) {
+            const grid = document.getElementById('propertyGrid');
+            grid.innerHTML = '';
+            
+            properties.forEach(property => {
+                const card = createPropertyCard(property);
+                grid.appendChild(card);
+            });
+            
+            // Initialize detailed view tracking after properties are rendered
+            setTimeout(() => {
+                addDetailedViewTracking();
+            }, 500);
+        }
+        
+        function createPropertyCard(property) {
+            const card = document.createElement('div');
+            card.className = 'property-card';
+            card.onclick = () => viewProperty(property);
+            
+            const features = property.features || [];
+            // Use property images if available, otherwise show no image
+            const images = property.propertyImages || [];
+            
+            card.innerHTML = `
+                <div class="position-relative">
+                    ${images.length > 0 ? `
+                        <img src="${images[0]}" 
+                             alt="${property.propertyName}" 
+                             class="property-image"
+                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                    ` : ''}
+                    <div class="property-badge">${property.typeName || 'Property'}</div>
+                    ${images.length === 0 ? `
+                        <div class="no-image-placeholder" style="width: 100%; height: 250px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px;">
+                            <i class="fas fa-home me-2"></i>${property.propertyName || 'Property'}
+                        </div>
+                    ` : ''}
+                </div>
+                <div class="property-content">
+                    <h5 class="property-title">${property.propertyName || 'Property'}</h5>
+                    <div class="property-price">₹${(property.marketValue || 0).toLocaleString()}</div>
+                    <div class="property-location">
+                        <i class="fas fa-map-marker-alt me-2"></i>
+                        ${property.address || 'Location not specified'}
+                    </div>
+                    <div class="property-features">
+                        ${features.slice(0, 3).map(feature => 
+                            `<span class="feature-tag available">${feature}</span>`
+                        ).join('')}
+                        ${features.length > 3 ? `<span class="feature-tag">+${features.length - 3} more</span>` : ''}
+                    </div>
+                    <div class="property-actions">
+                        <button class="btn-action btn-primary-custom" onclick="event.stopPropagation(); scheduleVisit('${property.id}', '${property.propertyName}', '${property.marketValue}', '${property.typeName}', '${property.address}')">
+                            <i class="fas fa-calendar me-2"></i>Schedule Visit
+                        </button>
+                        <button class="btn-action btn-outline-custom" onclick="event.stopPropagation(); contactAgent('${property.id}')">
+                            <i class="fas fa-phone me-2"></i>Contact
+                        </button>
+                    </div>
+                </div>
+            `;
+            
+            return card;
+        }
+        
+        function viewProperty(property) {
+            console.log('🔍 Property clicked:', property.propertyName, 'ID:', property.id);
+            
+            // Track property click (not just view)
+            trackActivity('property_click', {
+                property: property
+            });
+            
+            // Track property type preference
+            if (property.typeName) {
+                trackActivity('property_type_select', { propertyType: property.typeName });
+            }
+            
+            // Track price range preference
+            if (property.marketValue) {
+                const priceRange = getPriceRange(property.marketValue);
+                trackActivity('price_range_select', { priceRange: priceRange });
+            }
+            
+            // Show property details modal
+            showPropertyDetailsModal(property);
+            
+            console.log('✅ Property click tracked and modal opened for:', property.propertyName);
+        }
+        
+        function scheduleVisit(propertyId, propertyName, propertyPrice, propertyType, propertyAddress) {
+            // Open visit modal directly
+            openVisitModal(propertyId, propertyName, propertyPrice, propertyType, propertyAddress);
+        }
+        
+        function contactAgent(propertyId) {
+            trackActivity('contact_agent', { property_id: propertyId });
+            // Implement contact agent functionality
+            alert('Agent contact feature coming soon!');
+        }
+        
+        // Global variables for visit modal
+        let currentVisitProperty = null;
+        let modalOpenTime = null;
+        let visitModal = null;
+        let visitHistory = [];
+        let userPreferences = {};
+
+        function openVisitModal(propertyId, propertyName, propertyPrice, propertyType, propertyAddress) {
+            // Store current property info
+            currentVisitProperty = {
+                id: propertyId,
+                name: propertyName,
+                price: propertyPrice,
+                type: propertyType,
+                address: propertyAddress,
+                timestamp: new Date().toISOString()
+            };
+            
+            // Set modal content
+            document.getElementById('modalPropertyName').textContent = propertyName || 'Property';
+            document.getElementById('modalPropertyPrice').textContent = `₹${parseInt(propertyPrice || 0).toLocaleString()}`;
+            document.getElementById('modalPropertyType').textContent = propertyType || 'Property';
+            document.getElementById('modalPropertyAddress').textContent = propertyAddress || 'Location not specified';
+            
+            // Set minimum date to today
+            const today = new Date().toISOString().split('T')[0];
+            document.getElementById('visitDate').min = today;
+            document.getElementById('visitDate').value = today;
+            
+            // Load user preferences from localStorage
+            loadUserPreferences();
+            
+            // Pre-fill form with saved data if available
+            prefillVisitForm();
+            
+            // Track modal open
+            trackActivity('visit_modal_open', {
+                property_id: propertyId,
+                property_name: propertyName,
+                property_price: propertyPrice,
+                property_type: propertyType,
+                property_address: propertyAddress
+            });
+            
+            // Store visit attempt in localStorage
+            storeVisitAttempt(currentVisitProperty);
+            
+            // Record modal open time
+            modalOpenTime = Date.now();
+            
+            // Show modal
+            visitModal = new bootstrap.Modal(document.getElementById('visitModal'));
+            visitModal.show();
+            
+            // Track modal duration when closed
+            document.getElementById('visitModal').addEventListener('hidden.bs.modal', function() {
+                if (modalOpenTime) {
+                    const duration = Date.now() - modalOpenTime;
+                    trackActivity('visit_modal_duration', {
+                        property_id: propertyId,
+                        duration: duration,
+                        modal_action: 'closed'
+                    });
+                    
+                    // Store modal interaction data
+                    storeModalInteraction({
+                        property_id: propertyId,
+                        duration: duration,
+                        action: 'closed',
+                        timestamp: new Date().toISOString()
+                    });
+                    
+                    modalOpenTime = null;
+                }
+            });
+        }
+
+        function submitVisitRequest() {
+            // Get form data
+            const formData = {
+                visitorName: document.getElementById('visitorName').value,
+                visitorEmail: document.getElementById('visitorEmail').value,
+                visitorPhone: document.getElementById('visitorPhone').value,
+                visitDate: document.getElementById('visitDate').value,
+                visitTime: document.getElementById('visitTime').value,
+                visitNotes: document.getElementById('visitNotes').value,
+                agreeTerms: document.getElementById('agreeTerms').checked
+            };
+            
+            // Validate form
+            if (!formData.visitorName || !formData.visitorEmail || !formData.visitorPhone || 
+                !formData.visitDate || !formData.visitTime || !formData.agreeTerms) {
+                showNotification('Please fill in all required fields', 'warning');
+                return;
+            }
+            
+            // Calculate modal duration
+            const duration = modalOpenTime ? Date.now() - modalOpenTime : 0;
+            
+            // Store user preferences in localStorage
+            storeUserPreferences(formData);
+            
+            // Store visit request in localStorage
+            const visitRequest = {
+                ...currentVisitProperty,
+                visitor_data: formData,
+                modal_duration: duration,
+                submitted_at: new Date().toISOString(),
+                status: 'submitted'
+            };
+            storeVisitRequest(visitRequest);
+            
+            // Track visit request submission
+            trackActivity('visit_request_submitted', {
+                property_id: currentVisitProperty.id,
+                property_name: currentVisitProperty.name,
+                property_price: currentVisitProperty.price,
+                property_type: currentVisitProperty.type,
+                property_address: currentVisitProperty.address,
+                visitor_name: formData.visitorName,
+                visitor_email: formData.visitorEmail,
+                visitor_phone: formData.visitorPhone,
+                visit_date: formData.visitDate,
+                visit_time: formData.visitTime,
+                visit_notes: formData.visitNotes,
+                modal_duration: duration,
+                form_data: formData
+            });
+            
+            // Update user email for future tracking
+            userEmail = formData.visitorEmail;
+            
+            // Show success message
+            showNotification('Visit request submitted successfully! We will contact you soon.', 'success');
+            
+            // Close modal
+            visitModal.hide();
+            
+            // Reset form
+            document.getElementById('visitForm').reset();
+            
+            // Send confirmation email (if email service is configured)
+            sendVisitConfirmationEmail(formData);
+            
+            // Update visit history display
+            updateVisitHistoryDisplay();
+        }
+
+        function sendVisitConfirmationEmail(formData) {
+            // This would integrate with your email service
+            console.log('Sending visit confirmation email to:', formData.visitorEmail);
+            
+            // You can implement email sending here or call your backend API
+            fetch('/api/send-visit-confirmation', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    visitor_data: formData,
+                    property_data: currentVisitProperty
+                })
+            }).catch(error => {
+                console.error('Error sending visit confirmation:', error);
+            });
+        }
+
+        function bookVisit(propertyId) {
+            // Fallback function for backward compatibility
+            trackActivity('book_visit', { property_id: propertyId });
+            showNotification('Please use the Visit button to schedule a property visit', 'info');
+        }
+
+        // ===== LOCALSTORAGE FUNCTIONS =====
+
+        function storeUserPreferences(formData) {
+            const preferences = {
+                visitorName: formData.visitorName,
+                visitorEmail: formData.visitorEmail,
+                visitorPhone: formData.visitorPhone,
+                lastUpdated: new Date().toISOString()
+            };
+            localStorage.setItem('userPreferences', JSON.stringify(preferences));
+        }
+
+        function loadUserPreferences() {
+            const saved = localStorage.getItem('userPreferences');
+            if (saved) {
+                userPreferences = JSON.parse(saved);
+            }
+            return userPreferences;
+        }
+
+        function prefillVisitForm() {
+            if (userPreferences.visitorName) {
+                document.getElementById('visitorName').value = userPreferences.visitorName;
+            }
+            if (userPreferences.visitorEmail) {
+                document.getElementById('visitorEmail').value = userPreferences.visitorEmail;
+            }
+            if (userPreferences.visitorPhone) {
+                document.getElementById('visitorPhone').value = userPreferences.visitorPhone;
+            }
+        }
+
+        function storeVisitAttempt(propertyData) {
+            const attempts = JSON.parse(localStorage.getItem('visitAttempts') || '[]');
+            attempts.push({
+                ...propertyData,
+                attempt_time: new Date().toISOString()
+            });
+            localStorage.setItem('visitAttempts', JSON.stringify(attempts));
+        }
+
+        function storeVisitRequest(visitRequest) {
+            const requests = JSON.parse(localStorage.getItem('visitRequests') || '[]');
+            requests.push(visitRequest);
+            localStorage.setItem('visitRequests', JSON.stringify(requests));
+        }
+
+        function storeModalInteraction(interactionData) {
+            const interactions = JSON.parse(localStorage.getItem('modalInteractions') || '[]');
+            interactions.push(interactionData);
+            localStorage.setItem('modalInteractions', JSON.stringify(interactions));
+        }
+
+        function getVisitHistory() {
+            return JSON.parse(localStorage.getItem('visitRequests') || '[]');
+        }
+
+        function getVisitAttempts() {
+            return JSON.parse(localStorage.getItem('visitAttempts') || '[]');
+        }
+
+        function getModalInteractions() {
+            return JSON.parse(localStorage.getItem('modalInteractions') || '[]');
+        }
+
+        function clearVisitHistory() {
+            localStorage.removeItem('visitRequests');
+            localStorage.removeItem('visitAttempts');
+            localStorage.removeItem('modalInteractions');
+            showNotification('Visit history cleared', 'info');
+        }
+
+        function updateVisitHistoryDisplay() {
+            const history = getVisitHistory();
+            const attempts = getVisitAttempts();
+            
+            // Update analytics if available
+            if (typeof updateVisitStats === 'function') {
+                updateVisitStats(history, attempts);
+            }
+        }
+
+        function exportVisitData() {
+            const data = {
+                visitRequests: getVisitHistory(),
+                visitAttempts: getVisitAttempts(),
+                modalInteractions: getModalInteractions(),
+                userPreferences: loadUserPreferences(),
+                exportDate: new Date().toISOString()
+            };
+            
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `visit-data-${new Date().toISOString().split('T')[0]}.json`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            showNotification('Visit data exported successfully', 'success');
+        }
+
+        function showVisitHistory() {
+            const history = getVisitHistory();
+            const attempts = getVisitAttempts();
+            
+            let historyHtml = '<div class="visit-history-modal">';
+            historyHtml += '<h4>Visit History</h4>';
+            
+            if (history.length === 0 && attempts.length === 0) {
+                historyHtml += '<p>No visit history found.</p>';
+            } else {
+                // Show submitted requests
+                if (history.length > 0) {
+                    historyHtml += '<h5>Submitted Requests</h5>';
+                    history.forEach((request, index) => {
+                        historyHtml += `
+                            <div class="visit-item">
+                                <strong>${request.name}</strong><br>
+                                <small>Date: ${request.visitor_data.visit_date} at ${request.visitor_data.visit_time}</small><br>
+                                <small>Status: ${request.status}</small>
+                            </div>
+                        `;
+                    });
+                }
+                
+                // Show visit attempts
+                if (attempts.length > 0) {
+                    historyHtml += '<h5>Visit Attempts</h5>';
+                    attempts.forEach((attempt, index) => {
+                        historyHtml += `
+                            <div class="visit-item">
+                                <strong>${attempt.name}</strong><br>
+                                <small>Attempted: ${new Date(attempt.attempt_time).toLocaleDateString()}</small>
+                            </div>
+                        `;
+                    });
+                }
+            }
+            
+            historyHtml += '</div>';
+            
+            // Show in modal or notification
+            showNotification(historyHtml, 'info', 10000);
+        }
+
+        // Initialize localStorage data on page load
+        function initializeLocalStorage() {
+            loadUserPreferences();
+            updateVisitHistoryDisplay();
+        }
+
+        // Call initialization
+        initializeLocalStorage();
+        
+        function searchProperties() {
+            const propertyType = document.getElementById('propertyType').value;
+            const minPrice = document.getElementById('minPrice').value;
+            const maxPrice = document.getElementById('maxPrice').value;
+            
+            // Track search
+            trackActivity('property_search', {
+                property_type: propertyType,
+                min_price: minPrice,
+                max_price: maxPrice
+            });
+            
+            // Filter properties
+            let filtered = allProperties;
+            
+            if (propertyType) {
+                filtered = filtered.filter(p => p.typeName === propertyType);
+            }
+            if (minPrice) {
+                filtered = filtered.filter(p => p.marketValue >= parseInt(minPrice));
+            }
+            if (maxPrice) {
+                filtered = filtered.filter(p => p.marketValue <= parseInt(maxPrice));
+            }
+            
+            renderProperties(filtered);
+        }
+        
+        function loadMoreProperties() {
+            currentPage++;
+            loadProperties(currentPage, true);
+        }
+        
+        function showFloatingEmail() {
+            const emailDiv = document.getElementById('floatingEmail');
+            if (emailDiv) {
+                emailDiv.classList.remove('hidden');
+            emailDiv.classList.add('show');
+                console.log('Email form shown');
+            }
+        }
+        
+        function hideFloatingEmail() {
+            const emailDiv = document.getElementById('floatingEmail');
+            if (emailDiv) {
+            emailDiv.classList.remove('show');
+                emailDiv.classList.add('hidden');
+            }
+        }
+
+        // Show email form immediately on page load
+        function showEmailFormImmediately() {
+            setTimeout(() => {
+                showFloatingEmail();
+            }, 1000);
+        }
+        
+        function toggleDarkMode() {
+            isDarkMode = !isDarkMode;
+            document.body.classList.toggle('dark-mode', isDarkMode);
+            
+            const icon = document.getElementById('darkModeIcon');
+            icon.className = isDarkMode ? 'fas fa-sun' : 'fas fa-moon';
+            
+            localStorage.setItem('darkMode', isDarkMode);
+        }
+        
+        function showLoading(show) {
+            const spinner = document.getElementById('loadingSpinner');
+            const grid = document.getElementById('propertyGrid');
+            
+            if (show) {
+                spinner.style.display = 'block';
+                grid.style.display = 'none';
+            } else {
+                spinner.style.display = 'none';
+                grid.style.display = 'grid';
+            }
+        }
+        
+        function showError(message) {
+            // Implement error notification
+            console.error(message);
+        }
+        
+        // Show notification
+        function showNotification(message, type = 'info') {
+            const notification = document.createElement('div');
+            notification.className = `alert alert-${type} alert-dismissible fade show`;
+            notification.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                z-index: 9999;
+                min-width: 300px;
+                max-width: 400px;
+            `;
+            notification.innerHTML = `
+                ${message}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            `;
+            
+            document.body.appendChild(notification);
+            
+            // Auto-remove after 3 seconds
+            setTimeout(() => {
+                if (notification.parentNode) {
+                    notification.remove();
+                }
+            }, 3000);
+        }
+        
+        // Track user activity
+        function trackActivity(actionType, actionData = {}) {
+            // Get or create session ID
+            let sessionId = localStorage.getItem('userSessionId');
+            if (!sessionId) {
+                sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+                localStorage.setItem('userSessionId', sessionId);
+            }
+            
+            // Get current user tracking data
+            let userTrackingData = JSON.parse(localStorage.getItem('userTrackingData') || '{}');
+            
+            // Initialize tracking data structure if not exists
+            if (!userTrackingData.clickedProperties) userTrackingData.clickedProperties = [];
+            if (!userTrackingData.detailedViews) userTrackingData.detailedViews = [];
+            if (!userTrackingData.searchHistory) userTrackingData.searchHistory = [];
+            if (!userTrackingData.features) userTrackingData.features = [];
+            if (!userTrackingData.priceRanges) userTrackingData.priceRanges = [];
+            if (!userTrackingData.propertyTypes) userTrackingData.propertyTypes = [];
+            
+            // Track based on action type
+            switch (actionType) {
+                case 'property_click':
+                    console.log('🔵 Property CLICK tracked:', actionData.property?.propertyName);
+                    showNotification(`✅ Click tracked: ${actionData.property?.propertyName}`, 'success');
+                    
+                    if (actionData.property) {
+                        // Check if this property is already in clickedProperties to avoid duplicates
+                        const existingClick = userTrackingData.clickedProperties.find(p => parseInt(p.id) === parseInt(actionData.property.id));
+                        if (!existingClick) {
+                            userTrackingData.clickedProperties.push({
+                                id: actionData.property.id,
+                                name: actionData.property.propertyName,
+                                type: actionData.property.typeName,
+                                price: actionData.property.marketValue,
+                                timestamp: new Date().toISOString()
+                            });
+                            console.log('✅ Added to clickedProperties:', actionData.property.propertyName);
+                        } else {
+                            console.log('⚠️ Property already in clickedProperties:', actionData.property.propertyName);
+                        }
+                        
+                        // Track property type (avoid duplicates)
+                        if (actionData.property.typeName) {
+                            if (!userTrackingData.propertyTypes.includes(actionData.property.typeName)) {
+                                userTrackingData.propertyTypes.push(actionData.property.typeName);
+                            }
+                        }
+                        
+                        // Track price range (avoid duplicates)
+                        if (actionData.property.marketValue) {
+                            const price = actionData.property.marketValue;
+                            let priceRange = '';
+                            if (price <= 500000) priceRange = '0-500000';
+                            else if (price <= 1000000) priceRange = '500000-1000000';
+                            else if (price <= 2000000) priceRange = '1000000-2000000';
+                            else if (price <= 5000000) priceRange = '2000000-5000000';
+                            else if (price <= 10000000) priceRange = '5000000-10000000';
+                            else priceRange = '10000000+';
+                            
+                            if (!userTrackingData.priceRanges.includes(priceRange)) {
+                                userTrackingData.priceRanges.push(priceRange);
+                            }
+                        }
+                    }
+                    break;
+                    
+                case 'click':
+                    if (actionData.property) {
+                        userTrackingData.clickedProperties.push({
+                            id: actionData.property.id,
+                            name: actionData.property.propertyName,
+                            type: actionData.property.typeName,
+                            price: actionData.property.marketValue,
+                            timestamp: new Date().toISOString()
+                        });
+                    }
+                    break;
+                    
+                case 'detailed_view':
+                    console.log('🟢 Property DETAILED VIEW tracked:', actionData.property?.propertyName, 'Duration:', actionData.duration, 'seconds');
+                    showNotification(`👁️ Detailed view tracked: ${actionData.property?.propertyName} (${actionData.duration}s)`, 'info');
+                    
+                    if (actionData.property) {
+                        const existingView = userTrackingData.detailedViews.find(
+                            view => parseInt(view.propertyId) === parseInt(actionData.property.id)
+                        );
+                        
+                        if (existingView) {
+                            existingView.totalDuration += actionData.duration || 0;
+                            existingView.viewCount += 1;
+                            existingView.lastViewed = new Date().toISOString();
+                            console.log('✅ Updated existing detailed view:', actionData.property.propertyName, 'Duration:', actionData.duration, 'Total:', existingView.totalDuration);
+                        } else {
+                            userTrackingData.detailedViews.push({
+                                propertyId: actionData.property.id,
+                                propertyName: actionData.property.propertyName,
+                                propertyType: actionData.property.typeName,
+                                price: actionData.property.marketValue,
+                                totalDuration: actionData.duration || 0,
+                                viewCount: 1,
+                                lastViewed: new Date().toISOString()
+                            });
+                            console.log('✅ Added new detailed view:', actionData.property.propertyName, 'Duration:', actionData.duration);
+                        }
+                    }
+                    break;
+                    
+                case 'search':
+                    userTrackingData.searchHistory.push({
+                        query: actionData.query || '',
+                        filters: actionData.filters || {},
+                        timestamp: new Date().toISOString()
+                    });
+                    break;
+                    
+                case 'feature_click':
+                    if (actionData.feature && !userTrackingData.features.includes(actionData.feature)) {
+                        userTrackingData.features.push(actionData.feature);
+                    }
+                    break;
+                    
+                case 'price_range_select':
+                    if (actionData.priceRange) {
+                        userTrackingData.priceRanges.push(actionData.priceRange);
+                    }
+                    break;
+                    
+                case 'property_type_select':
+                    if (actionData.propertyType) {
+                        userTrackingData.propertyTypes.push(actionData.propertyType);
+                    }
+                    break;
+            }
+            
+            // Save updated tracking data
+            localStorage.setItem('userTrackingData', JSON.stringify(userTrackingData));
+            
+            // Send to server
+            fetch('/api/track', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    session_id: sessionId,
+                    action_type: actionType,
+                    action_data: actionData,
+                    user_id: sessionId,
+                    email: userEmail
+                })
+            }).catch(error => {
+                console.error('Error tracking activity:', error);
+            });
+        }
+        
+        // Enhanced property click tracking
+        function trackPropertyClick(property) {
+            trackActivity('click', { property: property });
+            
+            // Track property type preference
+            if (property.typeName) {
+                trackActivity('property_type_select', { propertyType: property.typeName });
+            }
+            
+            // Track price range preference
+            if (property.marketValue) {
+                const priceRange = getPriceRange(property.marketValue);
+                trackActivity('price_range_select', { priceRange: priceRange });
+            }
+        }
+        
+        // Track detailed view with duration
+        function trackDetailedView(property, duration = 0) {
+            trackActivity('detailed_view', { 
+                property: property, 
+                duration: duration 
+            });
+        }
+        
+        // Track search activity
+        function trackSearch(query, filters = {}) {
+            trackActivity('search', { 
+                query: query, 
+                filters: filters 
+            });
+        }
+        
+        // Track feature interest
+        function trackFeatureInterest(feature) {
+            trackActivity('feature_click', { feature: feature });
+        }
+        
+        // Get price range category
+        function getPriceRange(price) {
+            if (price <= 500000) return '0-500000';
+            if (price <= 1000000) return '500000-1000000';
+            if (price <= 2000000) return '1000000-2000000';
+            if (price <= 5000000) return '2000000-5000000';
+            if (price <= 10000000) return '5000000-10000000';
+            return '10000000+';
+        }
+        
+        // Get user tracking data
+        function getUserTrackingData() {
+            return JSON.parse(localStorage.getItem('userTrackingData') || '{}');
+        }
+        
+        // Clear user tracking data
+        function clearUserTrackingData() {
+            localStorage.removeItem('userTrackingData');
+            localStorage.removeItem('userSessionId');
+            console.log('User tracking data cleared');
+        }
+        
+        // Export user tracking data
+        function exportUserTrackingData() {
+            const data = getUserTrackingData();
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'user_tracking_data.json';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+        
+        // Enhanced property card creation with tracking
+        function createPropertyCard(property) {
+            const card = document.createElement('div');
+            card.className = 'property-card';
+            card.onclick = () => viewProperty(property);
+            
+            const features = property.features || [];
+            // Use property images if available, otherwise show no image
+            const images = property.propertyImages || [];
+            
+            card.innerHTML = `
+                <div class="position-relative">
+                    ${images.length > 0 ? `
+                        <img src="${images[0]}" 
+                             alt="${property.propertyName}" 
+                             class="property-image"
+                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                    ` : ''}
+                    <div class="property-badge">${property.typeName || 'Property'}</div>
+                    ${images.length === 0 ? `
+                        <div class="no-image-placeholder" style="width: 100%; height: 250px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px;">
+                            <i class="fas fa-home me-2"></i>${property.propertyName || 'Property'}
+                        </div>
+                    ` : ''}
+                </div>
+                <div class="property-content">
+                    <h5 class="property-title">${property.propertyName || 'Property'}</h5>
+                    <div class="property-price">₹${(property.marketValue || 0).toLocaleString()}</div>
+                    <div class="property-location">
+                        <i class="fas fa-map-marker-alt me-2"></i>
+                        ${property.address || 'Location not specified'}
+                    </div>
+                    <div class="property-features">
+                        ${features.slice(0, 3).map(feature => 
+                            `<span class="feature-tag available">${feature}</span>`
+                        ).join('')}
+                        ${features.length > 3 ? `<span class="feature-tag">+${features.length - 3} more</span>` : ''}
+                    </div>
+                    <div class="property-actions">
+                        <button class="btn-action btn-primary-custom" onclick="event.stopPropagation(); scheduleVisit('${property.id}', '${property.propertyName}', '${property.marketValue}', '${property.typeName}', '${property.address}')">
+                            <i class="fas fa-calendar me-2"></i>Schedule Visit
+                        </button>
+                        <button class="btn-action btn-outline-custom" onclick="event.stopPropagation(); contactAgent('${property.id}')">
+                            <i class="fas fa-phone me-2"></i>Contact
+                        </button>
+                    </div>
+                </div>
+            `;
+            
+            return card;
+        }
+        
+        // Enhanced visit request with tracking
+        function requestVisit(propertyId) {
+            const property = allProperties.find(p => p.id === propertyId);
+            if (!property) return;
+            
+            // Track visit request
+            trackActivity('visit_request', { 
+                property: property,
+                action: 'visit_request_initiated'
+            });
+            
+            // Show visit request modal
+            showVisitRequestModal(property);
+        }
+        
+        // Enhanced view details with tracking
+        function viewDetails(propertyId) {
+            const property = allProperties.find(p => p.id === propertyId);
+            if (!property) return;
+            
+            // Track detailed view with default duration
+            trackDetailedView(property, 10); // Assume 10 seconds for button click
+            
+            // Show property details modal
+            showPropertyDetailsModal(property);
+        }
+
+        // Property details modal with duration tracking
+        let propertyModalOpenTime = null;
+        let currentPropertyInModal = null;
+
+        function showPropertyDetailsModal(property) {
+            console.log('🟢 Opening modal for:', property.propertyName);
+            console.log('🟢 Property data:', property);
+            
+            currentPropertyInModal = property;
+            propertyModalOpenTime = Date.now();
+            
+            // Set modal content
+            document.getElementById('detailPropertyName').textContent = property.propertyName || 'Property';
+            document.getElementById('detailPropertyPrice').textContent = `₹${parseInt(property.marketValue || 0).toLocaleString()}`;
+            document.getElementById('detailPropertyType').textContent = property.typeName || 'Property';
+            document.getElementById('detailPropertyAddress').textContent = property.address || 'Location not specified';
+            document.getElementById('detailPropertyBeds').textContent = property.beds || 'N/A';
+            document.getElementById('detailPropertyBaths').textContent = property.baths || 'N/A';
+            document.getElementById('detailPropertySize').textContent = `${property.totalSquareFeet || 0} sq ft`;
+            
+            // Load property images
+            const imagesContainer = document.getElementById('propertyImages');
+            // Use property images if available
+            const validImages = property.propertyImages || [];
+            
+            if (validImages && validImages.length > 0) {
+                imagesContainer.innerHTML = `
+                    <div id="propertyImageCarousel" class="carousel slide" data-bs-ride="carousel">
+                        <div class="carousel-inner">
+                            ${validImages.map((img, index) => `
+                                <div class="carousel-item ${index === 0 ? 'active' : ''}">
+                                    <img src="${img}" class="d-block w-100" style="height: 400px; object-fit: cover;" alt="Property Image" 
+                                         onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                                    <div class="text-center py-5" style="display: none; height: 400px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
+                                        <div>
+                                            <i class="fas fa-image fa-3x mb-3"></i>
+                                            <p class="mb-0">Image not available</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            `).join('')}
+                        </div>
+                        ${validImages.length > 1 ? `
+                            <button class="carousel-control-prev" type="button" data-bs-target="#propertyImageCarousel" data-bs-slide="prev">
+                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Previous</span>
+                            </button>
+                            <button class="carousel-control-next" type="button" data-bs-target="#propertyImageCarousel" data-bs-slide="next">
+                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Next</span>
+                            </button>
+                        ` : ''}
+                    </div>
+                `;
+            } else {
+                imagesContainer.innerHTML = `
+                    <div class="text-center py-5">
+                        <i class="fas fa-image fa-3x text-muted mb-3"></i>
+                        <p class="text-muted">No images available</p>
+                    </div>
+                `;
+            }
+            
+            // Load property description
+            const descriptionContainer = document.getElementById('propertyDescription');
+            descriptionContainer.innerHTML = `
+                <h5>Description</h5>
+                <p>${property.description || 'No description available'}</p>
+            `;
+            
+            // Load property features
+            const featuresContainer = document.getElementById('detailPropertyFeatures');
+            if (property.features && Object.keys(property.features).length > 0) {
+                const featuresList = Object.keys(property.features).map(feature => 
+                    `<span class="badge bg-primary me-2 mb-2">${feature}</span>`
+                ).join('');
+                featuresContainer.innerHTML = featuresList;
+            } else {
+                featuresContainer.innerHTML = '<p class="text-muted">No features listed</p>';
+            }
+            
+            // Track modal open
+            trackActivity('property_details_modal_open', {
+                property_id: property.id,
+                property_name: property.propertyName,
+                property_type: property.typeName,
+                property_price: property.marketValue,
+                timestamp: new Date().toISOString()
+            });
+            
+            // Show modal
+            const modalElement = document.getElementById('propertyDetailsModal');
+            if (modalElement) {
+                console.log('🟢 Modal element found:', modalElement);
+                const propertyModal = new bootstrap.Modal(modalElement);
+                propertyModal.show();
+                console.log('✅ Modal should now be visible');
+                
+                // Show notification that modal opened
+                showNotification(`🔍 Modal opened: ${property.propertyName}`, 'info');
+            } else {
+                console.error('❌ Modal element not found!');
+                showNotification('❌ Modal element not found! Check console for details.', 'danger');
+                console.log('🟢 Available elements with "modal" in ID:');
+                document.querySelectorAll('[id*="modal"]').forEach(el => {
+                    console.log('  -', el.id);
+                });
+            }
+            
+            // Track modal duration when closed
+            document.getElementById('propertyDetailsModal').addEventListener('hidden.bs.modal', function() {
+                if (propertyModalOpenTime && currentPropertyInModal) {
+                    const duration = Date.now() - propertyModalOpenTime;
+                    const durationSeconds = Math.round(duration / 1000);
+                    
+                    // Track detailed view with actual duration
+                    trackActivity('detailed_view', {
+                        property: currentPropertyInModal,
+                        duration: durationSeconds
+                    });
+                    
+                    // Track modal close
+                    trackActivity('property_details_modal_close', {
+                        property_id: currentPropertyInModal.id,
+                        property_name: currentPropertyInModal.propertyName,
+                        duration_seconds: durationSeconds,
+                        timestamp: new Date().toISOString()
+                    });
+                    
+                    console.log(`Property details viewed: ${currentPropertyInModal.propertyName} for ${durationSeconds} seconds`);
+                    
+                    propertyModalOpenTime = null;
+                    currentPropertyInModal = null;
+                }
+            }, { once: true }); // Use once: true to prevent multiple event listeners
+        }
+
+        function openVisitModalFromDetails() {
+            if (currentPropertyInModal) {
+                // Close property details modal
+                const propertyModal = bootstrap.Modal.getInstance(document.getElementById('propertyDetailsModal'));
+                propertyModal.hide();
+                
+                // Open visit modal with current property
+                openVisitModal(
+                    currentPropertyInModal.id,
+                    currentPropertyInModal.propertyName,
+                    currentPropertyInModal.marketValue,
+                    currentPropertyInModal.typeName,
+                    currentPropertyInModal.address
+                );
+            }
+        }
+
+        function addToFavorites() {
+            if (currentPropertyInModal) {
+                // Add to favorites logic
+                const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+                const existingIndex = favorites.findIndex(f => f.id === currentPropertyInModal.id);
+                
+                if (existingIndex === -1) {
+                    favorites.push(currentPropertyInModal);
+                    localStorage.setItem('favorites', JSON.stringify(favorites));
+                    alert('Added to favorites!');
+                    
+                    // Track favorite action
+                    trackActivity('property_added_to_favorites', {
+                        property_id: currentPropertyInModal.id,
+                        property_name: currentPropertyInModal.propertyName
+                    });
+                } else {
+                    alert('Already in favorites!');
+                }
+            }
+        }
+
+        function shareProperty() {
+            if (currentPropertyInModal) {
+                // Share property logic
+                const shareText = `Check out this property: ${currentPropertyInModal.propertyName} - ₹${parseInt(currentPropertyInModal.marketValue || 0).toLocaleString()}`;
+                
+                if (navigator.share) {
+                    navigator.share({
+                        title: currentPropertyInModal.propertyName,
+                        text: shareText,
+                        url: window.location.href
+                    });
+                } else {
+                    // Fallback: copy to clipboard
+                    navigator.clipboard.writeText(shareText).then(() => {
+                        alert('Property link copied to clipboard!');
+                    });
+                }
+                
+                // Track share action
+                trackActivity('property_shared', {
+                    property_id: currentPropertyInModal.id,
+                    property_name: currentPropertyInModal.propertyName
+                });
+            }
+        }
+        
+        // Track scroll depth with enhanced analytics
+        let maxScrollDepth = 0;
+        let scrollStartTime = Date.now();
+        
+        window.addEventListener('scroll', () => {
+            const scrollDepth = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
+            if (scrollDepth > maxScrollDepth) {
+                maxScrollDepth = scrollDepth;
+                
+                // Track scroll depth every 10%
+                if (scrollDepth % 10 === 0) {
+                    trackActivity('scroll_depth', { 
+                        depth: scrollDepth,
+                        max_depth: maxScrollDepth,
+                        time_spent: Math.round((Date.now() - scrollStartTime) / 1000)
+                    });
+                }
+            }
+        });
+        
+        // Track time spent with enhanced analytics
+        let startTime = Date.now();
+        let lastTrackedTime = 0;
+        
+        setInterval(() => {
+            const timeSpent = Math.round((Date.now() - startTime) / 1000);
+            
+            // Track every minute
+            if (timeSpent >= lastTrackedTime + 60) {
+                trackActivity('time_spent', { 
+                    duration: timeSpent,
+                    session_duration: timeSpent
+                });
+                lastTrackedTime = timeSpent;
+            }
+        }, 60000);
+        
+        // Track page load and session start
+        document.addEventListener('DOMContentLoaded', () => {
+            trackActivity('page_load', {
+                page: 'home',
+                timestamp: new Date().toISOString()
+            });
+        });
+        
+        // Track search functionality
+        function performSearch() {
+            const searchQuery = document.getElementById('searchInput').value;
+            const propertyType = document.getElementById('propertyTypeFilter').value;
+            const minPrice = document.getElementById('minPriceFilter').value;
+            const maxPrice = document.getElementById('maxPriceFilter').value;
+            
+            const filters = {
+                propertyType: propertyType,
+                minPrice: minPrice,
+                maxPrice: maxPrice
+            };
+            
+            // Track search activity
+            trackSearch(searchQuery, filters);
+            
+            // Perform search
+            filterProperties();
+        }
+        
+        // Enhanced email form submission with tracking
+        document.getElementById('emailForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            
+            const email = document.getElementById('userEmail').value;
+            userEmail = email;
+            
+            // Track email submission
+            trackActivity('email_submit', { 
+                email: email,
+                timestamp: new Date().toISOString()
+            });
+            
+            try {
+                const userTrackingData = getUserTrackingData();
+                const sessionId = localStorage.getItem('userSessionId');
+                
+                const response = await fetch('/api/send-recommendations', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        email: email,
+                        session_id: sessionId,
+                        user_tracking_data: userTrackingData
+                    })
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    alert('Recommendations sent to your email!');
+                    hideFloatingEmail();
+                    
+                    // Track successful email send
+                    trackActivity('email_sent_success', { 
+                        email: email,
+                        recommendations_count: data.recommendations?.length || 0
+                    });
+                    
+                    // Load recommendations
+                    loadRecommendations();
+                } else {
+                    alert('Failed to send recommendations. Please try again.');
+                    
+                    // Track failed email send
+                    trackActivity('email_sent_failed', { 
+                        email: email,
+                        error: data.error
+                    });
+                }
+                
+            } catch (error) {
+                console.error('Error sending recommendations:', error);
+                alert('Failed to send recommendations. Please try again.');
+                
+                // Track error
+                trackActivity('email_sent_error', { 
+                    email: email,
+                    error: error.message
+                });
+            }
+        });
+        
+        // Enhanced recommendations loading with tracking
+        async function loadRecommendations() {
+            try {
+                const sessionId = localStorage.getItem('userSessionId');
+                const userTrackingData = getUserTrackingData();
+                
+                const params = new URLSearchParams({
+                    email: userEmail,
+                    session_id: sessionId
+                });
+                
+                const response = await fetch(`/api/recommendations?${params}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        user_tracking_data: userTrackingData
+                    })
+                });
+                
+                const data = await response.json();
+                
+                if (data.success && data.recommendations) {
+                    renderRecommendations(data.recommendations);
+                    updateStats(data.user_preferences);
+                    
+                    // Track recommendations loaded
+                    trackActivity('recommendations_loaded', {
+                        count: data.recommendations.length,
+                        user_preferences: data.user_preferences
+                    });
+                }
+                
+            } catch (error) {
+                console.error('Error loading recommendations:', error);
+                
+                // Track error
+                trackActivity('recommendations_error', {
+                    error: error.message
+                });
+            }
+        }
+        
+        // Enhanced stats update with tracking data
+        function updateStats(preferences) {
+            const userTrackingData = getUserTrackingData();
+            
+            document.getElementById('propertiesViewed').textContent = preferences.total_properties_viewed || 0;
+            document.getElementById('timeSpent').textContent = Math.round((preferences.total_time_spent || 0) / 60);
+            
+            // Update visit requests count
+            const visitHistory = getVisitHistory();
+            document.getElementById('visitRequests').textContent = visitHistory.length;
+            
+            // Get lead score with tracking
+            if (userEmail) {
+                fetch(`/api/lead-qualification?email=${userEmail}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        document.getElementById('leadScore').textContent = data.lead_score || 0;
+                        
+                        // Track lead score update
+                        trackActivity('lead_score_updated', {
+                            score: data.lead_score,
+                            status: data.lead_status
+                        });
+                    })
+                    .catch(error => {
+                        console.error('Error getting lead score:', error);
+                    });
+            }
+            
+            // Track stats update
+            trackActivity('stats_updated', {
+                properties_viewed: preferences.total_properties_viewed,
+                time_spent: preferences.total_time_spent,
+                visit_requests: visitHistory.length
+            });
+        }
+
+        function updateVisitStats(history, attempts) {
+            // Update visit requests count
+            document.getElementById('visitRequests').textContent = history.length;
+            
+            // Calculate average modal duration
+            const interactions = getModalInteractions();
+            const avgDuration = interactions.length > 0 
+                ? Math.round(interactions.reduce((sum, i) => sum + i.duration, 0) / interactions.length / 1000)
+                : 0;
+            
+            // Track visit analytics
+            trackActivity('visit_analytics_updated', {
+                total_requests: history.length,
+                total_attempts: attempts.length,
+                total_interactions: interactions.length,
+                average_modal_duration: avgDuration
+            });
+            
+            // Show visit analytics in console for debugging
+            console.log('Visit Analytics:', {
+                totalRequests: history.length,
+                totalAttempts: attempts.length,
+                totalInteractions: interactions.length,
+                averageModalDuration: avgDuration + ' seconds'
+            });
+        }
+        
+        // Add automatic detailed view tracking for property cards
+        function addDetailedViewTracking() {
+            const propertyCards = document.querySelectorAll('.property-card');
+            propertyCards.forEach(card => {
+                let viewStartTime = null;
+                
+                card.addEventListener('mouseenter', () => {
+                    viewStartTime = Date.now();
+                });
+                
+                card.addEventListener('mouseleave', () => {
+                    if (viewStartTime) {
+                        const duration = Math.round((Date.now() - viewStartTime) / 1000);
+                        if (duration >= 2) { // Track if viewed for at least 2 seconds
+                            const propertyId = card.getAttribute('data-property-id');
+                            const property = allProperties.find(p => p.id == propertyId);
+                            if (property) {
+                                trackDetailedView(property, duration);
+                                console.log(`Auto-tracked detailed view: ${property.propertyName} for ${duration}s`);
+                            }
+                        }
+                        viewStartTime = null;
+                    }
+                });
+            });
+        }
+        
+        // Call this function after properties are loaded
+        function initializeDetailedViewTracking() {
+            setTimeout(() => {
+                addDetailedViewTracking();
+            }, 1000); // Wait for properties to load
+        }
+
+        // Test functions for debugging
+        function testPropertyClick() {
+            console.log('🧪 Testing property click...');
+            
+            // Create a test property
+            const testProperty = {
+                id: 999,
+                propertyName: 'Test Property',
+                typeName: 'Villa',
+                marketValue: 5000000,
+                beds: 3,
+                baths: 2,
+                totalSquareFeet: 2000,
+                numberOfRooms: 4,
+                address: 'Test Address, Test City',
+                description: 'This is a test property for debugging purposes.',
+                propertyImages: [],
+                features: ['parking', 'garden', 'security']
+            };
+            
+            console.log('🧪 Test property created:', testProperty);
+            
+            // Simulate property click
+            viewProperty(testProperty);
+            
+            console.log('🧪 Test property click completed');
+        }
+        
+        function testModal() {
+            console.log('🧪 Testing modal...');
+            const testProperty = {
+                id: 888,
+                propertyName: 'Test Modal Property',
+                typeName: 'Apartment',
+                marketValue: 3000000,
+                beds: 2,
+                baths: 2,
+                totalSquareFeet: 1200,
+                numberOfRooms: 3,
+                address: 'Test Modal Address',
+                description: 'This is a test modal property.',
+                propertyImages: [],
+                features: ['lift', 'security', 'parking']
+            };
+            
+            showPropertyDetailsModal(testProperty);
+        }
+        
+        function showTrackingData() {
+            const userTrackingData = getUserTrackingData();
+            console.log('📊 Current Tracking Data:');
+            console.log('Clicked Properties:', userTrackingData.clickedProperties);
+            console.log('Detailed Views:', userTrackingData.detailedViews);
+            console.log('Property Types:', userTrackingData.propertyTypes);
+            console.log('Price Ranges:', userTrackingData.priceRanges);
+            console.log('Full Data:', userTrackingData);
+            
+            showNotification(`📊 Clicked: ${userTrackingData.clickedProperties?.length || 0}, Views: ${userTrackingData.detailedViews?.length || 0}`, 'info');
+        }
+        
+        function clearTrackingData() {
+            localStorage.removeItem('userTrackingData');
+            localStorage.removeItem('userSessionId');
+            console.log('✅ Tracking data cleared');
+            showNotification('✅ Tracking data cleared', 'success');
+        }
+    </script>
+</body>
+</html> 

templates/lead_analysis.html

@@ -0,0 +1,796 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lead Analysis Dashboard</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+
+        .header p {
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+
+        .search-section {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .search-form {
+            display: flex;
+            gap: 15px;
+            align-items: end;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .input-group {
+            display: flex;
+            flex-direction: column;
+            min-width: 200px;
+        }
+
+        .input-group label {
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #555;
+        }
+
+        .input-group input {
+            padding: 12px 15px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+
+        .input-group input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .btn {
+            padding: 12px 25px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: white;
+            font-size: 18px;
+        }
+
+        .error {
+            background: #ff6b6b;
+            color: white;
+            padding: 20px;
+            border-radius: 10px;
+            margin: 20px 0;
+            text-align: center;
+        }
+
+        .results-section {
+            display: none;
+        }
+
+        .lead-status {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .status-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+
+        .status-badge {
+            padding: 10px 20px;
+            border-radius: 25px;
+            font-weight: bold;
+            font-size: 16px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .lead-score {
+            text-align: center;
+        }
+
+        .score-circle {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 10px;
+            font-size: 24px;
+            font-weight: bold;
+            color: white;
+            background: conic-gradient(#667eea 0deg, #764ba2 360deg);
+        }
+
+        .analytics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .analytics-card {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .card-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            font-size: 20px;
+            color: white;
+        }
+
+        .card-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #333;
+        }
+
+        .metric-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .metric-item:last-child {
+            border-bottom: none;
+        }
+
+        .metric-label {
+            color: #666;
+            font-weight: 500;
+        }
+
+        .metric-value {
+            font-weight: 600;
+            color: #333;
+        }
+
+        .properties-section {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .properties-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+
+        .property-card {
+            border: 2px solid #f0f0f0;
+            border-radius: 10px;
+            padding: 20px;
+            transition: all 0.3s ease;
+        }
+
+        .property-card:hover {
+            border-color: #667eea;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+
+        .property-name {
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 10px;
+        }
+
+        .property-price {
+            font-size: 18px;
+            font-weight: bold;
+            color: #667eea;
+            margin-bottom: 10px;
+        }
+
+        .property-stats {
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .recommendations {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .recommendation-item {
+            background: #f8f9ff;
+            border-left: 4px solid #667eea;
+            padding: 15px;
+            margin-bottom: 10px;
+            border-radius: 5px;
+        }
+
+        .chart-container {
+            position: relative;
+            height: 300px;
+            margin-top: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .search-form {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .input-group {
+                min-width: auto;
+            }
+
+            .status-header {
+                flex-direction: column;
+                text-align: center;
+            }
+
+            .analytics-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .fade-in {
+            animation: fadeIn 0.6s ease-in-out;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🎯 Lead Analysis Dashboard</h1>
+            <p>Comprehensive Customer Behavior Analytics & Lead Qualification</p>
+        </div>
+
+        <div class="search-section">
+            <form class="search-form" id="searchForm">
+                <div class="input-group">
+                    <label for="customerId">Customer ID</label>
+                    <input type="number" id="customerId" name="customerId" placeholder="Enter Customer ID" required 
+                           value="{{ customer_id if customer_id else '' }}">
+                </div>
+                <button type="submit" class="btn" id="searchBtn">
+                    🔍 Analyze Customer
+                </button>
+            </form>
+        </div>
+
+        <div id="loadingSection" class="loading" style="display: none;">
+            <div>🔄 Analyzing customer data...</div>
+            <div style="margin-top: 10px; font-size: 14px; opacity: 0.8;">
+                Fetching lead qualification and property analytics
+            </div>
+        </div>
+
+        <div id="errorSection" class="error" style="display: none;"></div>
+
+        <div id="resultsSection" class="results-section">
+            <!-- Lead Status Section -->
+            <div class="lead-status fade-in">
+                <div class="status-header">
+                    <div>
+                        <h2>Lead Qualification Status</h2>
+                        <div id="statusBadge" class="status-badge"></div>
+                        <p id="statusDescription" style="margin-top: 10px; color: #666;"></p>
+                    </div>
+                    <div class="lead-score">
+                        <div id="scoreCircle" class="score-circle"></div>
+                        <div>Lead Score</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Analytics Grid -->
+            <div class="analytics-grid fade-in">
+                <!-- Engagement Analytics -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: #667eea;">📊</div>
+                        <div class="card-title">Engagement Analytics</div>
+                    </div>
+                    <div id="engagementMetrics"></div>
+                    <div class="chart-container">
+                        <canvas id="engagementChart"></canvas>
+                    </div>
+                </div>
+
+                <!-- Property Preferences -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: #764ba2;">🏠</div>
+                        <div class="card-title">Property Preferences</div>
+                    </div>
+                    <div id="propertyPreferences"></div>
+                    <div class="chart-container">
+                        <canvas id="propertyChart"></canvas>
+                    </div>
+                </div>
+
+                <!-- Price Analysis -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: #f39c12;">💰</div>
+                        <div class="card-title">Price Analysis</div>
+                    </div>
+                    <div id="priceAnalysis"></div>
+                </div>
+
+                <!-- Conversion Probability -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: #e74c3c;">🎯</div>
+                        <div class="card-title">Conversion Probability</div>
+                    </div>
+                    <div id="conversionAnalysis"></div>
+                    <div class="chart-container">
+                        <canvas id="conversionChart"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Properties Section -->
+            <div class="properties-section fade-in">
+                <div class="card-header">
+                    <div class="card-icon" style="background: #2ecc71;">🏘️</div>
+                    <div class="card-title">Viewed Properties</div>
+                </div>
+                <div id="propertiesGrid" class="properties-grid"></div>
+            </div>
+
+            <!-- Recommendations Section -->
+            <div class="recommendations fade-in">
+                <div class="card-header">
+                    <div class="card-icon" style="background: #9b59b6;">💡</div>
+                    <div class="card-title">AI Recommendations</div>
+                </div>
+                <div id="recommendationsContent"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Global variables
+        let currentData = null;
+        let charts = {};
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            const customerId = document.getElementById('customerId').value;
+            if (customerId) {
+                fetchAnalysis(customerId);
+            }
+        });
+
+        // Form submission
+        document.getElementById('searchForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const customerId = document.getElementById('customerId').value;
+            if (customerId) {
+                fetchAnalysis(customerId);
+            }
+        });
+
+        // Fetch analysis data
+        async function fetchAnalysis(customerId) {
+            showLoading();
+            hideError();
+            hideResults();
+
+            try {
+                const response = await fetch(`/api/customer/${customerId}`);
+                const data = await response.json();
+
+                if (data.success) {
+                    currentData = data;
+                    displayResults(data);
+                    showResults();
+                } else {
+                    showError(data.error || 'Failed to fetch analysis');
+                }
+            } catch (error) {
+                showError(`Error: ${error.message}`);
+            } finally {
+                hideLoading();
+            }
+        }
+
+        // Display results
+        function displayResults(data) {
+            const leadData = data.data.lead_qualification;
+            const analytics = data.data.analytics;
+            const properties = data.data.properties;
+
+            // Update lead status
+            updateLeadStatus(leadData);
+
+            // Update analytics cards
+            updateEngagementMetrics(analytics);
+            updatePropertyPreferences(analytics);
+            updatePriceAnalysis(analytics);
+            updateConversionAnalysis(analytics);
+
+            // Update properties
+            updatePropertiesGrid(properties);
+
+            // Update recommendations
+            updateRecommendations(analytics.recommendations);
+
+            // Create charts
+            createCharts(analytics);
+        }
+
+        // Update lead status
+        function updateLeadStatus(leadData) {
+            const statusBadge = document.getElementById('statusBadge');
+            const statusDescription = document.getElementById('statusDescription');
+            const scoreCircle = document.getElementById('scoreCircle');
+
+            statusBadge.textContent = leadData.lead_status;
+            statusBadge.style.backgroundColor = leadData.status_color;
+            statusDescription.textContent = leadData.status_description;
+            scoreCircle.textContent = `${Math.round(leadData.lead_score)}/100`;
+        }
+
+        // Update engagement metrics
+        function updateEngagementMetrics(analytics) {
+            const container = document.getElementById('engagementMetrics');
+            container.innerHTML = `
+                <div class="metric-item">
+                    <span class="metric-label">Engagement Level</span>
+                    <span class="metric-value">${analytics.engagement_level}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Total Views</span>
+                    <span class="metric-value">${currentData.data.summary.total_views}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Total Duration</span>
+                    <span class="metric-value">${formatDuration(currentData.data.summary.total_duration)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Engagement Score</span>
+                    <span class="metric-value">${Math.round(currentData.data.summary.engagement_score)}</span>
+                </div>
+            `;
+        }
+
+        // Update property preferences
+        function updatePropertyPreferences(analytics) {
+            const container = document.getElementById('propertyPreferences');
+            const preferredTypes = analytics.preferred_property_types || [];
+            
+            container.innerHTML = preferredTypes.map((type, index) => `
+                <div class="metric-item">
+                    <span class="metric-label">Preference ${index + 1}</span>
+                    <span class="metric-value">${type}</span>
+                </div>
+            `).join('');
+        }
+
+        // Update price analysis
+        function updatePriceAnalysis(analytics) {
+            const container = document.getElementById('priceAnalysis');
+            const priceData = analytics.price_preferences || {};
+            
+            container.innerHTML = `
+                <div class="metric-item">
+                    <span class="metric-label">Average Price</span>
+                    <span class="metric-value">${formatPrice(priceData.avg_price || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Min Price</span>
+                    <span class="metric-value">${formatPrice(priceData.min_price || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Max Price</span>
+                    <span class="metric-value">${formatPrice(priceData.max_price || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Price Range</span>
+                    <span class="metric-value">${formatPrice(priceData.price_range || 0)}</span>
+                </div>
+            `;
+        }
+
+        // Update conversion analysis
+        function updateConversionAnalysis(analytics) {
+            const container = document.getElementById('conversionAnalysis');
+            const conversionData = analytics.conversion_probability || {};
+            
+            container.innerHTML = `
+                <div class="metric-item">
+                    <span class="metric-label">Conversion Probability</span>
+                    <span class="metric-value">${Math.round(conversionData.final_probability || 0)}%</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Confidence Level</span>
+                    <span class="metric-value">${conversionData.confidence_level || 'Unknown'}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Opportunity Score</span>
+                    <span class="metric-value">${Math.round(analytics.opportunity_score || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Risk Level</span>
+                    <span class="metric-value">${analytics.risk_assessment?.risk_level || 'Unknown'}</span>
+                </div>
+            `;
+        }
+
+        // Update properties grid
+        function updatePropertiesGrid(properties) {
+            const container = document.getElementById('propertiesGrid');
+            
+            container.innerHTML = properties.map(property => `
+                <div class="property-card">
+                    <div class="property-name">${property.propertyName || 'Unknown Property'}</div>
+                    <div class="property-price">${formatPrice(property.price || 0)}</div>
+                    <div class="property-stats">
+                        <span>Views: ${property.viewCount || 0}</span>
+                        <span>Duration: ${formatDuration(property.totalDuration || 0)}</span>
+                        <span>Type: ${property.propertyTypeName || 'Unknown'}</span>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        // Update recommendations
+        function updateRecommendations(recommendations) {
+            const container = document.getElementById('recommendationsContent');
+            
+            if (recommendations && recommendations.length > 0) {
+                container.innerHTML = recommendations.map(rec => `
+                    <div class="recommendation-item">${rec}</div>
+                `).join('');
+            } else {
+                container.innerHTML = '<div class="recommendation-item">No specific recommendations available.</div>';
+            }
+        }
+
+        // Create charts
+        function createCharts(analytics) {
+            createEngagementChart(analytics);
+            createPropertyChart(analytics);
+            createConversionChart(analytics);
+        }
+
+        // Create engagement chart
+        function createEngagementChart(analytics) {
+            const ctx = document.getElementById('engagementChart').getContext('2d');
+            
+            if (charts.engagement) {
+                charts.engagement.destroy();
+            }
+
+            charts.engagement = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['High Engagement', 'Medium Engagement', 'Low Engagement'],
+                    datasets: [{
+                        data: [40, 35, 25], // Sample data
+                        backgroundColor: ['#667eea', '#764ba2', '#95a5a6']
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }
+            });
+        }
+
+        // Create property chart
+        function createPropertyChart(analytics) {
+            const ctx = document.getElementById('propertyChart').getContext('2d');
+            
+            if (charts.property) {
+                charts.property.destroy();
+            }
+
+            const propertyTypes = analytics.preferred_property_types || [];
+            const labels = propertyTypes.slice(0, 5);
+            const data = labels.map((_, i) => Math.max(1, 5 - i));
+
+            charts.property = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Interest Level',
+                        data: data,
+                        backgroundColor: '#667eea'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+        }
+
+        // Create conversion chart
+        function createConversionChart(analytics) {
+            const ctx = document.getElementById('conversionChart').getContext('2d');
+            
+            if (charts.conversion) {
+                charts.conversion.destroy();
+            }
+
+            const conversionProb = analytics.conversion_probability?.final_probability || 0;
+
+            charts.conversion = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Conversion Probability', 'Remaining'],
+                    datasets: [{
+                        data: [conversionProb, 100 - conversionProb],
+                        backgroundColor: ['#e74c3c', '#ecf0f1'],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    cutout: '70%',
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    }
+                }
+            });
+        }
+
+        // Utility functions
+        function formatPrice(price) {
+            return `₹${price.toLocaleString('en-IN')}`;
+        }
+
+        function formatDuration(seconds) {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            return `${hours}h ${minutes}m`;
+        }
+
+        function showLoading() {
+            document.getElementById('loadingSection').style.display = 'block';
+            document.getElementById('searchBtn').disabled = true;
+            document.getElementById('searchBtn').textContent = '🔄 Analyzing...';
+        }
+
+        function hideLoading() {
+            document.getElementById('loadingSection').style.display = 'none';
+            document.getElementById('searchBtn').disabled = false;
+            document.getElementById('searchBtn').textContent = '🔍 Analyze Customer';
+        }
+
+        function showError(message) {
+            const errorSection = document.getElementById('errorSection');
+            errorSection.textContent = message;
+            errorSection.style.display = 'block';
+        }
+
+        function hideError() {
+            document.getElementById('errorSection').style.display = 'none';
+        }
+
+        function showResults() {
+            document.getElementById('resultsSection').style.display = 'block';
+        }
+
+        function hideResults() {
+            document.getElementById('resultsSection').style.display = 'none';
+        }
+    </script>
+</body>
+</html> 

templates/templates/ai_lead_analysis.html

@@ -0,0 +1,2152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI-Enhanced Lead Analysis Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        :root {
+            --primary-color: #667eea;
+            --secondary-color: #764ba2;
+            --accent-color: #ff6b6b;
+            --success-color: #2ecc71;
+            --warning-color: #f39c12;
+            --danger-color: #e74c3c;
+            --light-color: #f8f9fa;
+            --dark-color: #343a40;
+            --info-color: #17a2b8;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f5f7fa;
+            color: var(--dark-color);
+            line-height: 1.6;
+        }
+
+        .gradient-bg {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+            padding: 20px 0;
+        }
+
+        .header h1 {
+            font-size: 2.8rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .header p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+
+        .ai-badge {
+            background: linear-gradient(45deg, var(--accent-color), #4ecdc4);
+            color: white;
+            padding: 8px 20px;
+            border-radius: 30px;
+            font-size: 1rem;
+            font-weight: bold;
+            display: inline-block;
+            margin-top: 10px;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+
+        .card {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+        }
+
+        .search-form {
+            display: flex;
+            gap: 15px;
+            align-items: end;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .input-group {
+            display: flex;
+            flex-direction: column;
+            min-width: 200px;
+        }
+
+        .input-group label {
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: var(--dark-color);
+        }
+
+        .input-group input, .input-group select {
+            padding: 12px 15px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+
+        .input-group input:focus, .input-group select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+        }
+
+        .btn {
+            padding: 12px 25px;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+            text-align: center;
+            margin: 5px 0;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+            color: white;
+        }
+
+        .btn-secondary {
+            background-color: var(--secondary-color);
+            color: white;
+        }
+
+        .btn-accent {
+            background: linear-gradient(135deg, var(--accent-color) 0%, #4ecdc4 100%);
+            color: white;
+        }
+
+        .btn-success {
+            background: linear-gradient(135deg, var(--success-color) 0%, #27ae60 100%);
+            color: white;
+        }
+
+        .btn-warning {
+            background: linear-gradient(135deg, var(--warning-color) 0%, #d35400 100%);
+            color: white;
+        }
+
+        .btn-danger {
+            background: linear-gradient(135deg, var(--danger-color) 0%, #c0392b 100%);
+            color: white;
+        }
+
+        .btn-info {
+            background: linear-gradient(135deg, var(--info-color) 0%, #138d75 100%);
+            color: white;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .action-buttons {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: var(--dark-color);
+            font-size: 18px;
+        }
+
+        .loading-spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-top: 4px solid var(--primary-color);
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .alert {
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 8px;
+        }
+
+        .alert-success {
+            background-color: rgba(46, 204, 113, 0.2);
+            border-left: 4px solid var(--success-color);
+            color: var(--success-color);
+        }
+
+        .alert-danger {
+            background-color: rgba(231, 76, 60, 0.2);
+            border-left: 4px solid var(--danger-color);
+            color: var(--danger-color);
+        }
+
+        .alert-info {
+            background-color: rgba(23, 162, 184, 0.2);
+            border-left: 4px solid var(--info-color);
+            color: var(--info-color);
+        }
+
+        .alert-warning {
+            background-color: rgba(243, 156, 18, 0.2);
+            border-left: 4px solid var(--warning-color);
+            color: var(--warning-color);
+        }
+
+        .results-section {
+            display: none;
+        }
+
+        .section {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+        }
+
+        .status-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+
+        .status-badge {
+            padding: 8px 18px;
+            border-radius: 25px;
+            font-weight: bold;
+            font-size: 14px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .lead-score {
+            text-align: center;
+        }
+
+        .score-circle {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 10px;
+            font-size: 20px;
+            font-weight: bold;
+            color: white;
+            background: conic-gradient(var(--primary-color) 0deg, var(--secondary-color) 360deg);
+        }
+
+        .ai-insights {
+            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+        }
+
+        .ai-insight-item {
+            background: rgba(255, 255, 255, 0.8);
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+        }
+
+        .ai-insight-label {
+            font-weight: 600;
+            color: var(--dark-color);
+            margin-bottom: 5px;
+        }
+
+        .ai-insight-value {
+            color: var(--dark-color);
+            font-style: italic;
+        }
+
+        .email-form {
+            display: flex;
+            gap: 15px;
+            align-items: end;
+            flex-wrap: wrap;
+        }
+
+        .recommendation-card {
+            background: #f8f9ff;
+            border: 2px solid #e0e6ff;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 15px;
+            transition: all 0.3s ease;
+            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
+        }
+
+        .recommendation-card:hover {
+            border-color: var(--primary-color);
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .recommendation-name {
+            font-weight: 600;
+            color: var(--dark-color);
+            margin-bottom: 8px;
+            font-size: 18px;
+        }
+
+        .recommendation-price {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }
+
+        .recommendation-reason {
+            background: #fff3cd;
+            border-left: 4px solid var(--warning-color);
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            font-style: italic;
+            color: #856404;
+            font-size: 14px;
+        }
+
+        .analytics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .analytics-card {
+            background: white;
+            border-radius: 12px;
+            padding: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s ease;
+        }
+
+        .analytics-card:hover {
+            transform: translateY(-5px);
+        }
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+
+        .card-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 12px;
+            font-size: 20px;
+            color: white;
+        }
+
+        .card-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--dark-color);
+        }
+
+        .metric-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .metric-item:last-child {
+            border-bottom: none;
+        }
+
+        .metric-label {
+            color: var(--dark-color);
+            font-weight: 500;
+            font-size: 14px;
+        }
+
+        .metric-value {
+            font-weight: 600;
+            color: var(--dark-color);
+            font-size: 14px;
+        }
+
+        .status-indicator {
+            display: inline-block;
+            padding: 5px 10px;
+            border-radius: 15px;
+            font-size: 12px;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+
+        .status-processing {
+            background: #fff3cd;
+            color: #856404;
+        }
+
+        .status-completed {
+            background: #d4edda;
+            color: #155724;
+        }
+
+        .status-failed {
+            background: #f8d7da;
+            color: #721c24;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+
+        .row {
+            display: flex;
+            flex-wrap: wrap;
+            margin: 0 -15px;
+        }
+
+        .col-md-6, .col-md-4, .col-md-3, .col-md-8 {
+            padding: 0 15px;
+            box-sizing: border-box;
+        }
+
+        .col-md-6 {
+            flex: 0 0 50%;
+            max-width: 50%;
+        }
+
+        .col-md-4 {
+            flex: 0 0 33.333333%;
+            max-width: 33.333333%;
+        }
+
+        .col-md-3 {
+            flex: 0 0 25%;
+            max-width: 25%;
+        }
+
+        .col-md-8 {
+            flex: 0 0 66.666667%;
+            max-width: 66.666667%;
+        }
+
+        @media (max-width: 768px) {
+            .search-form, .email-form, .action-buttons {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .input-group {
+                min-width: auto;
+            }
+
+            .status-header {
+                flex-direction: column;
+                text-align: center;
+            }
+
+            .analytics-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .col-md-6, .col-md-4, .col-md-3, .col-md-8 {
+                flex: 0 0 100%;
+                max-width: 100%;
+            }
+        }
+
+        .fade-in {
+            animation: fadeIn 0.6s ease-in-out;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .small {
+            font-size: 0.875rem;
+        }
+
+        .text-muted {
+            color: #6c757d !important;
+        }
+
+        .mt-2 {
+            margin-top: 0.5rem !important;
+        }
+
+        .mt-3 {
+            margin-top: 1rem !important;
+        }
+
+        .mb-0 {
+            margin-bottom: 0 !important;
+        }
+
+        .mb-2 {
+            margin-bottom: 0.5rem !important;
+        }
+
+        .mb-3 {
+            margin-bottom: 1rem !important;
+        }
+
+        .mb-4 {
+            margin-bottom: 1.5rem !important;
+        }
+
+        .text-center {
+            text-align: center !important;
+        }
+
+        .btn-block {
+            display: block;
+            width: 100%;
+        }
+
+        .btn-lg {
+            padding: 0.5rem 1rem;
+            font-size: 1.25rem;
+            line-height: 1.5;
+            border-radius: 0.3rem;
+        }
+
+        .badge {
+            display: inline-block;
+            padding: 0.25em 0.4em;
+            font-size: 75%;
+            font-weight: 700;
+            line-height: 1;
+            text-align: center;
+            white-space: nowrap;
+            vertical-align: baseline;
+            border-radius: 0.25rem;
+        }
+
+        .bg-success {
+            background-color: var(--success-color) !important;
+        }
+
+        .bg-info {
+            background-color: var(--info-color) !important;
+        }
+
+        .bg-warning {
+            background-color: var(--warning-color) !important;
+        }
+
+        .bg-light {
+            background-color: #f8f9fa !important;
+        }
+
+        .text-dark {
+            color: var(--dark-color) !important;
+        }
+
+        .float-end {
+            float: right !important;
+        }
+
+        .mb-3 {
+            margin-bottom: 1rem !important;
+        }
+
+        .text-uppercase {
+            text-transform: uppercase !important;
+        }
+
+        .shadow-sm {
+            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+        }
+
+        .rounded {
+            border-radius: 0.25rem !important;
+        }
+
+        .p-3 {
+            padding: 1rem !important;
+        }
+
+        .h-100 {
+            height: 100% !important;
+        }
+    </style>
+</head>
+<body>
+    <div class="gradient-bg">
+        <div class="container header">
+            <h1>🤖 AI-Enhanced Lead Analysis</h1>
+            <p>Advanced Customer Behavior Analytics with AI-Powered Recommendations</p>
+            <div class="ai-badge">🧠 Powered by Hugging Face AI Models</div>
+        </div>
+        </div>
+
+    <div class="container">
+        <div class="card search-section">
+            <form class="search-form" id="searchForm">
+                <div class="input-group">
+                    <label for="customerId">Customer ID</label>
+                    <input type="number" id="customerId" name="customerId" placeholder="Enter Customer ID" required value="{{ customer_id if customer_id else '' }}">
+                </div>
+                <div class="action-buttons">
+                    <button type="submit" class="btn btn-primary" id="searchBtn">
+                        <i class="fas fa-search"></i> Analyze Customer
+                    </button>
+                    <button type="button" class="btn btn-accent" id="aiAnalyzeBtn" disabled>
+                        <i class="fas fa-robot"></i> AI Analysis
+                    </button>
+                </div>
+            </form>
+        </div>
+
+        <div class="card email-section" id="emailSection" style="display: none;">
+            <h3><i class="fas fa-envelope"></i> Email Automation & Testing</h3>
+            <p>Test email functionality and send automated AI-powered recommendations.</p>
+            
+            <!-- Email Testing Section -->
+            <div class="section">
+                <h4><i class="fas fa-vial"></i> Email System Testing</h4>
+                <p>Test the email automation system functionality.</p>
+                <div class="row">
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label for="testEmail">Test Email Address:</label>
+                            <input type="email" id="testEmail" class="form-control" value="shaiksameermujahid@gmail.com" placeholder="Enter email address">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label>&nbsp;</label>
+                            <div>
+                                <button type="button" class="btn btn-primary" onclick="testEmail()">
+                                    <i class="fas fa-vial"></i> Test SendGrid Email
+                    </button>
+                                <button type="button" class="btn btn-info" onclick="testEmailSimple()">
+                                    <i class="fas fa-vial"></i> Simple Email Test (GET)
+                    </button>
+                </div>
+                        </div>
+                    </div>
+                </div>
+                <div id="emailTestResult" class="mt-3"></div>
+            </div>
+
+            <!-- Automated Email Analysis Section -->
+            <div class="section gradient-bg">
+                <h4><i class="fas fa-robot"></i> AI-Powered Email Analysis & Testing</h4>
+                <p><strong>How it works:</strong> Enter a Customer ID, and our AI will analyze their behavior patterns to determine exactly which automated emails would be triggered and why. Then test sending all triggered emails!</p>
+
+                <!-- Customer ID Input -->
+                <div class="row mb-4">
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label><i class="fas fa-user"></i> Customer ID:</label>
+                            <input type="number" id="customerId" class="form-control" value="105" placeholder="Enter Customer ID (e.g., 105)">
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="form-group">
+                            <label><i class="fas fa-envelope"></i> Test Email:</label>
+                            <input type="email" id="automatedEmailTest" class="form-control" value="shaiksameermujahid@gmail.com" placeholder="Email for testing">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Main Action Buttons -->
+                <div class="row mb-4">
+                    <div class="col-md-6">
+                        <div class="text-center">
+                            <h6><i class="fas fa-chart-line"></i> Step 1: Analyze Email Triggers</h6>
+                            <p>See exactly which automated emails would be sent based on customer behavior patterns</p>
+                            <button type="button" class="btn btn-light btn-lg" onclick="analyzeEmailTriggers()">
+                                <i class="fas fa-chart-line"></i> Analyze Email Triggers
+                            </button>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="text-center">
+                            <h6><i class="fas fa-paper-plane"></i> Step 2: Test Automated Emails</h6>
+                            <p>Send all triggered emails to test the automated system</p>
+                            <button type="button" class="btn btn-success btn-lg" onclick="testAutomatedEmails()">
+                                <i class="fas fa-paper-plane"></i> Test All Emails
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- AI Analysis Summary -->
+                <div id="aiAnalysisSummary" style="display: none;" class="mb-4">
+                    <div class="alert alert-light">
+                        <h6><i class="fas fa-brain"></i> AI Analysis Summary</h6>
+                        <div id="aiAnalysisContent"></div>
+                    </div>
+                </div>
+
+                <!-- Email Triggers Display -->
+                <div id="emailTriggersDisplay" style="display: none;">
+                    <h6><i class="fas fa-envelope"></i> Email Triggers Based on AI Analysis:</h6>
+                    <div id="emailTriggersContent"></div>
+                </div>
+
+                <!-- Test Results -->
+                <div id="automatedEmailResult" class="mt-3"></div>
+            </div>
+
+            <!-- Property Database Management Section -->
+            <div class="section bg-light">
+                <h4><i class="fas fa-database"></i> Property Database Management (500+ Properties)</h4>
+                <p>Fetch all 500+ properties from <code>/api/Property/allPropertieswithfulldetails</code> and store in ChromaDB for AI analysis and email recommendations.</p>
+                <p class="text-muted small">
+                    <strong>API Parameters:</strong> pageNumber (1-10), pageSize (500), using parallel processing for faster fetching
+                </p>
+
+                <!-- Current Status -->
+                <div class="row mb-3">
+                    <div class="col-md-12">
+                        <div class="alert alert-info">
+                            <h6><i class="fas fa-info-circle"></i> Current Database Status:</h6>
+                            <div id="databaseStatus">
+                                <p>Loading database status...</p>
+                            </div>
+                            <button type="button" class="btn btn-sm btn-outline-info" onclick="checkDatabaseStatus()">
+                                <i class="fas fa-sync"></i> Refresh Status
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col-md-8">
+                        <div class="form-group">
+                            <label><i class="fas fa-download"></i> Fetch All 500+ Properties:</label>
+                            <p class="text-muted small">Use optimized parallel processing to fetch all available properties</p>
+                            <div class="row">
+                                <div class="col-md-3">
+                                    <label class="small">Workers:</label>
+                                    <input type="number" id="workerCount" class="form-control" value="10" min="1" max="20" placeholder="10">
+                                </div>
+                                <div class="col-md-3">
+                                    <label class="small">Page Size:</label>
+                                    <input type="number" id="pageSize" class="form-control" value="500" min="100" max="1000" placeholder="500">
+                                </div>
+                                <div class="col-md-3">
+                                    <label class="small">Max Pages:</label>
+                                    <input type="number" id="maxPages" class="form-control" value="10" min="1" max="50" placeholder="10">
+                                </div>
+                                <div class="col-md-3">
+                                    <label class="small">&nbsp;</label>
+                                    <button type="button" class="btn btn-success btn-block" onclick="fetchAllProperties()">
+                                        <i class="fas fa-download"></i> Fetch All Properties
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="form-group">
+                            <label><i class="fas fa-bolt"></i> Quick Test:</label>
+                            <p class="text-muted small">Test with default settings</p>
+                            <button type="button" class="btn btn-warning btn-block" onclick="testParallelFetching()">
+                                <i class="fas fa-bolt"></i> Quick Test
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="fetchResult" class="mt-3"></div>
+            </div>
+
+            <!-- Performance Testing Section -->
+            <div class="section bg-warning bg-opacity-10">
+                <h4><i class="fas fa-tachometer-alt"></i> Performance Testing</h4>
+                <p>Test parallel property fetching and system performance.</p>
+                <div class="row">
+                    <div class="col-md-4">
+                        <div class="form-group">
+                            <label for="workerCount">Workers:</label>
+                            <input type="number" id="workerCount" class="form-control" value="8" min="1" max="20">
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="form-group">
+                            <label for="pageSize">Page Size:</label>
+                            <input type="number" id="pageSize" class="form-control" value="100" min="10" max="500">
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="form-group">
+                            <label for="maxPages">Max Pages:</label>
+                            <input type="number" id="maxPages" class="form-control" value="20" min="1" max="100">
+                        </div>
+                    </div>
+                </div>
+                <div class="row mt-3">
+                    <div class="col-12">
+                        <button type="button" class="btn btn-warning" onclick="testParallelFetching()">
+                            <i class="fas fa-rocket"></i> Test Parallel Property Fetching
+                        </button>
+                        <button type="button" class="btn btn-info" onclick="testPerformance()">
+                            <i class="fas fa-bolt"></i> Test Performance
+                        </button>
+                    </div>
+                </div>
+                <div id="parallelFetchResult" class="mt-3"></div>
+            </div>
+            
+            <!-- Manual Email Section -->
+            <div class="section">
+                <h4><i class="fas fa-envelope"></i> Manual Email Sending</h4>
+                <p>Send personalized property recommendations to your email.</p>
+            <div class="email-form" id="emailForm">
+                <div class="input-group">
+                    <label for="userEmail">Email Address</label>
+                        <input type="email" id="userEmail" placeholder="Enter email address" value="sameermujahid7777@gmail.com" required>
+                </div>
+                    <div class="action-buttons">
+                <button type="button" class="btn btn-success" id="sendEmailBtn">
+                            <i class="fas fa-envelope"></i> Send AI Recommendations
+                </button>
+                        <button type="button" class="btn btn-info" id="previewEmailBtn">
+                            <i class="fas fa-eye"></i> Preview Email
+                    </button>
+            </div>
+                </div>
+                <div id="emailStatus" class="mt-3"></div>
+            </div>
+            
+            <!-- Automated Email Section -->
+            <div class="section bg-success bg-opacity-10">
+                <h4><i class="fas fa-robot"></i> Automated Email Features</h4>
+                <p>Configure automated email sending based on behavioral triggers.</p>
+                <div class="action-buttons">
+                    <button type="button" class="btn btn-success" id="enableAutoEmailBtn">
+                        <i class="fas fa-check"></i> Enable Automated Emails
+                    </button>
+                    <button type="button" class="btn btn-primary" id="configureTriggersBtn">
+                        <i class="fas fa-cog"></i> Configure Triggers
+                    </button>
+                </div>
+                <div id="autoEmailStatus" class="mt-3"></div>
+            </div>
+        </div>
+
+        <div id="loadingSection" class="loading text-center" style="display: none;">
+            <div class="loading-spinner"></div>
+            <div id="loadingText" class="mt-3">🔄 Analyzing customer data...</div>
+            <div style="margin-top: 10px; font-size: 14px; opacity: 0.8;" id="loadingSubtext">
+                Fetching lead qualification and property analytics
+            </div>
+        </div>
+
+        <div id="errorSection" class="alert alert-danger" style="display: none;"></div>
+        <div id="successSection" class="alert alert-success" style="display: none;"></div>
+
+        <div id="resultsSection" class="results-section">
+            <!-- Lead Status Section -->
+            <div class="section fade-in">
+                <div class="status-header">
+                    <div>
+                        <h2><i class="fas fa-user-check"></i> Lead Qualification Status</h2>
+                        <div id="statusBadge" class="status-badge"></div>
+                        <p id="statusDescription" class="mt-2 text-muted"></p>
+                    </div>
+                    <div class="lead-score">
+                        <div id="scoreCircle" class="score-circle"></div>
+                        <div>Lead Score</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- AI Insights Section -->
+            <div class="section ai-insights fade-in" id="aiInsightsSection" style="display: none;">
+                <h3><i class="fas fa-brain"></i> AI Behavioral Analysis</h3>
+                <div id="aiInsightsContent"></div>
+            </div>
+
+            <!-- AI Recommendations Section -->
+            <div class="section fade-in" id="aiRecommendationsSection" style="display: none;">
+                <h3><i class="fas fa-bullseye"></i> AI-Curated Property Recommendations</h3>
+                <div id="aiRecommendationsContent"></div>
+            </div>
+
+            <!-- Analytics Grid -->
+            <div class="analytics-grid fade-in">
+                <!-- Engagement Analytics -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon gradient-bg">📊</div>
+                        <div class="card-title">Engagement Analytics</div>
+                    </div>
+                    <div id="engagementMetrics"></div>
+                </div>
+
+                <!-- Property Preferences -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: var(--secondary-color);">🏠</div>
+                        <div class="card-title">Property Preferences</div>
+                    </div>
+                    <div id="propertyPreferences"></div>
+                </div>
+
+                <!-- Price Analysis -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: var(--warning-color);">💰</div>
+                        <div class="card-title">Price Analysis</div>
+                    </div>
+                    <div id="priceAnalysis"></div>
+                </div>
+
+                <!-- Conversion Probability -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: var(--danger-color);">🎯</div>
+                        <div class="card-title">Conversion Probability</div>
+                    </div>
+                    <div id="conversionAnalysis"></div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="card-header">
+                    <h5><i class="fas fa-rocket"></i> Performance Testing</h5>
+                </div>
+                <div class="card-body">
+                    <div class="row">
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="workerCount">Workers:</label>
+                                <input type="number" id="workerCount" class="form-control" value="8" min="1" max="20">
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="pageSize">Page Size:</label>
+                                <input type="number" id="pageSize" class="form-control" value="100" min="10" max="500">
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="form-group">
+                                <label for="maxPages">Max Pages:</label>
+                                <input type="number" id="maxPages" class="form-control" value="20" min="1" max="100">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row mt-3">
+                        <div class="col-12">
+                            <button type="button" class="btn btn-warning" onclick="testParallelFetching()">
+                                <i class="fas fa-rocket"></i> Test Parallel Property Fetching
+                            </button>
+                            <button type="button" class="btn btn-info" onclick="testPerformance()">
+                                <i class="fas fa-bolt"></i> Test Performance
+                            </button>
+                        </div>
+                    </div>
+                    <div id="parallelFetchResult" class="mt-3"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Global variables
+        let currentData = null;
+        let currentCustomerId = null;
+        let aiData = null;
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('🤖 AI Lead Analysis System initialized');
+
+            // Check database status on page load
+            checkDatabaseStatus();
+
+            // Initialize search form
+            const searchForm = document.getElementById('searchForm');
+            if (searchForm) {
+                searchForm.addEventListener('submit', handleSearch);
+            }
+
+            // Initialize email form
+            const emailForm = document.getElementById('emailForm');
+            if (emailForm) {
+                const sendEmailBtn = document.getElementById('sendEmailBtn');
+                const previewEmailBtn = document.getElementById('previewEmailBtn');
+
+                if (sendEmailBtn) {
+                    sendEmailBtn.addEventListener('click', sendEmail);
+                }
+                if (previewEmailBtn) {
+                    previewEmailBtn.addEventListener('click', previewEmail);
+                }
+            }
+
+            // Initialize AI analysis button
+            const aiAnalyzeBtn = document.getElementById('aiAnalyzeBtn');
+            if (aiAnalyzeBtn) {
+                aiAnalyzeBtn.addEventListener('click', performAIAnalysis);
+            }
+
+            // Initialize automated email buttons
+            const enableAutoEmailBtn = document.getElementById('enableAutoEmailBtn');
+            const configureTriggersBtn = document.getElementById('configureTriggersBtn');
+
+            if (enableAutoEmailBtn) {
+                enableAutoEmailBtn.addEventListener('click', function() {
+                    showSuccess('✅ Automated emails enabled! The system will now send emails based on customer behavior triggers.');
+                });
+            }
+
+            if (configureTriggersBtn) {
+                configureTriggersBtn.addEventListener('click', function() {
+                    showInfo('⚙️ Trigger configuration: Currently using AI-powered automatic trigger detection based on customer behavior analysis.');
+                });
+            }
+        });
+
+        // Form submission
+        document.getElementById('searchForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const customerId = document.getElementById('customerId').value;
+            if (customerId) {
+                currentCustomerId = customerId;
+                fetchAnalysis(customerId);
+            }
+        });
+
+        // AI Analysis button
+        document.getElementById('aiAnalyzeBtn').addEventListener('click', function() {
+            if (currentCustomerId) {
+                fetchAIAnalysis(currentCustomerId);
+            }
+        });
+
+        // Send email button
+        document.getElementById('sendEmailBtn').addEventListener('click', function() {
+            const email = document.getElementById('userEmail').value;
+            if (email && currentCustomerId) {
+                sendAIRecommendations(currentCustomerId, email);
+            }
+        });
+
+        // Preview email button
+        document.getElementById('previewEmailBtn').addEventListener('click', function() {
+            if (currentCustomerId) {
+                previewEmail(currentCustomerId);
+            } else {
+                showError('Please analyze a customer first');
+            }
+        });
+
+        // Test email system button
+        document.getElementById('testEmailBtn').addEventListener('click', function() {
+            testEmailSystem();
+        });
+
+        // Test automated email button
+        document.getElementById('testAutomatedEmailBtn').addEventListener('click', function() {
+            if (currentCustomerId) {
+                testAutomatedEmail(currentCustomerId);
+            } else {
+                showError('Please analyze a customer first');
+            }
+        });
+
+        // Enable automated emails button
+        document.getElementById('enableAutoEmailBtn').addEventListener('click', function() {
+            enableAutomatedEmails();
+        });
+
+        // Configure triggers button
+        document.getElementById('configureTriggersBtn').addEventListener('click', function() {
+            configureEmailTriggers();
+        });
+
+        // Fetch regular analysis
+        async function fetchAnalysis(customerId) {
+            showLoading('🔄 Analyzing customer data...', 'Fetching lead qualification and property analytics');
+            hideError();
+            hideSuccess();
+            hideResults();
+            try {
+                const response = await fetch(`/api/lead-analysis/${customerId}`);
+                const data = await response.json();
+                if (data.success) {
+                    currentData = data;
+                    displayResults(data);
+                    showResults();
+                    showEmailSection();
+                    enableAIButton();
+                } else {
+                    showError(data.error || 'Failed to fetch analysis');
+                }
+            } catch (error) {
+                showError(`Error: ${error.message}`);
+            } finally {
+                hideLoading();
+            }
+        }
+
+        // Fetch AI analysis
+        async function fetchAIAnalysis(customerId) {
+            showLoading('🤖 AI Analysis in progress...', 'Using Hugging Face models for behavioral analysis');
+            hideError();
+            try {
+                const response = await fetch(`/api/ai-analysis/${customerId}`);
+                const data = await response.json();
+                if (data.success) {
+                    aiData = data;
+                    displayAIResults(data);
+                    showSuccess('🤖 AI Analysis completed successfully!');
+                } else {
+                    showError(data.error || 'Failed to fetch AI analysis');
+                }
+            } catch (error) {
+                showError(`AI Error: ${error.message}`);
+            } finally {
+                hideLoading();
+            }
+        }
+
+        // Send AI recommendations
+        async function sendAIRecommendations(customerId, email) {
+            const sendBtn = document.getElementById('sendEmailBtn');
+            const statusDiv = document.getElementById('emailStatus');
+            
+            sendBtn.disabled = true;
+            sendBtn.textContent = '📧 Sending...';
+            
+            statusDiv.innerHTML = '<div class="status-indicator status-processing">🔄 Processing AI recommendations...</div>';
+            try {
+                const response = await fetch(`/api/ai-recommendations/${customerId}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ email: email })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    statusDiv.innerHTML = '<div class="status-indicator status-processing">✅ AI recommendations initiated! Check your email in 2-3 minutes.</div>';
+                    
+                    // Poll for status updates
+                    pollAIStatus(customerId, statusDiv);
+                } else {
+                    statusDiv.innerHTML = `<div class="status-indicator status-failed">❌ ${data.error}</div>`;
+                }
+            } catch (error) {
+                statusDiv.innerHTML = `<div class="status-indicator status-failed">❌ Error: ${error.message}</div>`;
+            } finally {
+                sendBtn.disabled = false;
+                sendBtn.textContent = '📧 Send AI Recommendations';
+            }
+        }
+
+        // Preview email
+        async function previewEmail(customerId) {
+            const previewBtn = document.getElementById('previewEmailBtn');
+            const statusDiv = document.getElementById('emailStatus');
+            
+            try {
+                previewBtn.disabled = true;
+                previewBtn.textContent = '🔄 Generating...';
+                statusDiv.innerHTML = '<div class="status-indicator status-processing">🔄 Generating email preview...</div>';
+                
+                // Open email preview in new window
+                const previewUrl = `/email-preview/${customerId}`;
+                window.open(previewUrl, '_blank', 'width=1000,height=800,scrollbars=yes,resizable=yes');
+                
+                statusDiv.innerHTML = '<div class="status-indicator status-completed">✅ Email preview opened in new window!</div>';
+                
+            } catch (error) {
+                statusDiv.innerHTML = '<div class="status-indicator status-error">❌ Error: ' + error.message + '</div>';
+            } finally {
+                previewBtn.disabled = false;
+                previewBtn.textContent = '👁️ Preview Email';
+            }
+        }
+
+        // Poll AI status
+        async function pollAIStatus(customerId, statusDiv) {
+            const maxPolls = 20; // 10 minutes max
+            let polls = 0;
+            const pollInterval = setInterval(async () => {
+                polls++;
+                
+                try {
+                    const response = await fetch(`/api/ai-status/${customerId}`);
+                    const data = await response.json();
+                    
+                    const aiStatus = data.ai_processing || {};
+                    
+                    if (aiStatus.status === 'completed') {
+                        clearInterval(pollInterval);
+                        statusDiv.innerHTML = '<div class="status-indicator status-completed">🎉 AI recommendations sent successfully!</div>';
+                    } else if (aiStatus.status === 'failed') {
+                        clearInterval(pollInterval);
+                        statusDiv.innerHTML = `<div class="status-indicator status-failed">❌ AI processing failed: ${aiStatus.error || 'Unknown error'}</div>`;
+                    } else if (polls >= maxPolls) {
+                        clearInterval(pollInterval);
+                        statusDiv.innerHTML = '<div class="status-indicator status-failed">⏰ Processing timeout. Please try again.</div>';
+                    }
+                } catch (error) {
+                    // Continue polling on error
+                    console.warn('Status polling error:', error);
+                }
+            }, 30000); // Poll every 30 seconds
+        }
+
+        // Display results
+        function displayResults(data) {
+            const leadData = data.data.lead_qualification;
+            const analytics = data.data.analytics;
+            // Update lead status
+            updateLeadStatus(leadData);
+            // Update analytics cards
+            updateEngagementMetrics(analytics);
+            updatePropertyPreferences(analytics);
+            updatePriceAnalysis(analytics);
+            updateConversionAnalysis(analytics);
+        }
+
+        // Display AI results
+        function displayAIResults(data) {
+            const aiInsights = data.data.ai_insights;
+            const aiRecommendations = data.data.ai_recommendations;
+            // Show AI insights
+            updateAIInsights(aiInsights);
+            
+            // Show AI recommendations
+            updateAIRecommendations(aiRecommendations);
+        }
+
+        // Update AI insights
+        function updateAIInsights(aiInsights) {
+            const container = document.getElementById('aiInsightsContent');
+            const section = document.getElementById('aiInsightsSection');
+            
+            if (!aiInsights || aiInsights.error) {
+                container.innerHTML = '<div class="ai-insight-item">AI analysis not available</div>';
+                section.style.display = 'block';
+                return;
+            }
+            const insights = [
+                { label: 'AI Personality Type', value: aiInsights.ai_personality_type || 'Unknown' },
+                { label: 'Buying Motivation', value: aiInsights.buying_motivation || 'Unknown' },
+                { label: 'Recommendation Strategy', value: aiInsights.recommendation_strategy || 'Unknown' },
+                { label: 'Urgency Level', value: aiInsights.urgency_level || 'Medium' },
+                { label: 'Sentiment Analysis', value: aiInsights.sentiment_analysis ? 
+                    `${aiInsights.sentiment_analysis[0]?.label} (${Math.round(aiInsights.sentiment_analysis[0]?.score * 100)}%)` : 'Not available' }
+            ];
+            container.innerHTML = insights.map(insight => `
+                <div class="ai-insight-item">
+                    <div class="ai-insight-label">${insight.label}:</div>
+                    <div class="ai-insight-value">${insight.value}</div>
+                </div>
+            `).join('');
+            section.style.display = 'block';
+        }
+
+        // Update AI recommendations
+        function updateAIRecommendations(recommendations) {
+            const container = document.getElementById('aiRecommendationsContent');
+            const section = document.getElementById('aiRecommendationsSection');
+            
+            if (!recommendations || recommendations.length === 0) {
+                container.innerHTML = '<div class="recommendation-card">No AI recommendations available</div>';
+                section.style.display = 'block';
+                return;
+            }
+            container.innerHTML = recommendations.slice(0, 5).map(rec => `
+                <div class="recommendation-card">
+                    <div class="recommendation-name">${rec.propertyName || 'Premium Property'}</div>
+                    <div class="recommendation-price">${formatPrice(rec.price || 0)}</div>
+                    <div><strong>Type:</strong> ${rec.propertyTypeName || 'Residential'}</div>
+                    <div><strong>AI Score:</strong> ${Math.round((rec.ai_similarity_score || 0) * 100)}%</div>
+                    <div class="recommendation-reason">
+                        <strong>Why AI recommends this:</strong> ${rec.recommendation_reason || 'Based on your viewing patterns'}
+                    </div>
+                </div>
+            `).join('');
+            section.style.display = 'block';
+        }
+
+        // Update lead status
+        function updateLeadStatus(leadData) {
+            const statusBadge = document.getElementById('statusBadge');
+            const statusDescription = document.getElementById('statusDescription');
+            const scoreCircle = document.getElementById('scoreCircle');
+            statusBadge.textContent = leadData.lead_status;
+            statusBadge.style.backgroundColor = leadData.status_color;
+            statusDescription.textContent = leadData.status_description;
+            scoreCircle.textContent = `${Math.round(leadData.lead_score)}/100`;
+        }
+
+        // Update engagement metrics
+        function updateEngagementMetrics(analytics) {
+            const container = document.getElementById('engagementMetrics');
+            container.innerHTML = `
+                <div class="metric-item">
+                    <span class="metric-label">Engagement Level</span>
+                    <span class="metric-value">${analytics.engagement_level}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Total Views</span>
+                    <span class="metric-value">${currentData.data.summary.total_views}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Total Duration</span>
+                    <span class="metric-value">${formatDuration(currentData.data.summary.total_duration)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Engagement Score</span>
+                    <span class="metric-value">${Math.round(currentData.data.summary.engagement_score)}</span>
+                </div>
+            `;
+        }
+
+        // Update property preferences
+        function updatePropertyPreferences(analytics) {
+            const container = document.getElementById('propertyPreferences');
+            const preferredTypes = analytics.preferred_property_types || [];
+            
+            container.innerHTML = preferredTypes.map((type, index) => `
+                <div class="metric-item">
+                    <span class="metric-label">Preference ${index + 1}</span>
+                    <span class="metric-value">${type}</span>
+                </div>
+            `).join('');
+        }
+
+        // Update price analysis
+        function updatePriceAnalysis(analytics) {
+            const container = document.getElementById('priceAnalysis');
+            const priceData = analytics.price_preferences || {};
+            
+            container.innerHTML = `
+                <div class="metric-item">
+                    <span class="metric-label">Average Price</span>
+                    <span class="metric-value">${formatPrice(priceData.avg_price || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Min Price</span>
+                    <span class="metric-value">${formatPrice(priceData.min_price || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Max Price</span>
+                    <span class="metric-value">${formatPrice(priceData.max_price || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Price Range</span>
+                    <span class="metric-value">${formatPrice(priceData.price_range || 0)}</span>
+                </div>
+            `;
+        }
+
+        // Update conversion analysis
+        function updateConversionAnalysis(analytics) {
+            const container = document.getElementById('conversionAnalysis');
+            const conversionData = analytics.conversion_probability || {};
+            
+            container.innerHTML = `
+                <div class="metric-item">
+                    <span class="metric-label">Conversion Probability</span>
+                    <span class="metric-value">${Math.round(conversionData.final_probability || 0)}%</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Confidence Level</span>
+                    <span class="metric-value">${conversionData.confidence_level || 'Unknown'}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Opportunity Score</span>
+                    <span class="metric-value">${Math.round(analytics.opportunity_score || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Risk Level</span>
+                    <span class="metric-value">${analytics.risk_assessment?.risk_level || 'Unknown'}</span>
+                </div>
+            `;
+        }
+
+        // Utility functions
+        function formatPrice(price) {
+            return `₹${price.toLocaleString('en-IN')}`;
+        }
+
+        function formatDuration(seconds) {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            return `${hours}h ${minutes}m`;
+        }
+
+        function showLoading(text, subtext) {
+            document.getElementById('loadingSection').style.display = 'block';
+            document.getElementById('loadingText').textContent = text;
+            document.getElementById('loadingSubtext').textContent = subtext;
+            document.getElementById('searchBtn').disabled = true;
+            document.getElementById('aiAnalyzeBtn').disabled = true;
+        }
+
+        function hideLoading() {
+            document.getElementById('loadingSection').style.display = 'none';
+            document.getElementById('searchBtn').disabled = false;
+            if (currentData) {
+                document.getElementById('aiAnalyzeBtn').disabled = false;
+            }
+        }
+
+        function showError(message) {
+            const errorSection = document.getElementById('errorSection');
+            errorSection.textContent = message;
+            errorSection.style.display = 'block';
+        }
+
+        function hideError() {
+            document.getElementById('errorSection').style.display = 'none';
+        }
+
+        function showSuccess(message) {
+            const successSection = document.getElementById('successSection');
+            successSection.textContent = message;
+            successSection.style.display = 'block';
+            setTimeout(() => {
+                successSection.style.display = 'none';
+            }, 5000);
+        }
+
+        function hideSuccess() {
+            document.getElementById('successSection').style.display = 'none';
+        }
+
+        function showResults() {
+            document.getElementById('resultsSection').style.display = 'block';
+        }
+
+        function hideResults() {
+            document.getElementById('resultsSection').style.display = 'none';
+        }
+
+        function showEmailSection() {
+            document.getElementById('emailSection').style.display = 'block';
+        }
+
+        function enableAIButton() {
+            const aiBtn = document.getElementById('aiAnalyzeBtn');
+            aiBtn.disabled = false;
+        }
+
+        // Test email system
+        async function testEmailSystem() {
+            const testBtn = document.getElementById('testEmailBtn');
+            const statusDiv = document.getElementById('testEmailStatus');
+            
+            testBtn.disabled = true;
+            testBtn.textContent = '🧪 Testing...';
+            statusDiv.innerHTML = '<div class="status-indicator status-processing">🔄 Testing email system...</div>';
+            try {
+                const response = await fetch('/api/test-email', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+                const data = await response.json();
+                if (data.success) {
+                    statusDiv.innerHTML = '<div class="status-indicator status-completed">✅ Email system test successful! Check your email.</div>';
+                    showSuccess('🧪 Email system test completed successfully!');
+                } else {
+                    statusDiv.innerHTML = `<div class="status-indicator status-failed">❌ ${data.error}</div>`;
+                }
+            } catch (error) {
+                statusDiv.innerHTML = `<div class="status-indicator status-failed">❌ Error: ${error.message}</div>`;
+            } finally {
+                testBtn.disabled = false;
+                testBtn.textContent = '🧪 Test Email System';
+            }
+        }
+
+        // Test automated email
+        async function testAutomatedEmail(customerId) {
+            const testBtn = document.getElementById('testAutomatedEmailBtn');
+            const statusDiv = document.getElementById('testEmailStatus');
+            
+            testBtn.disabled = true;
+            testBtn.textContent = '🤖 Testing...';
+            statusDiv.innerHTML = '<div class="status-indicator status-processing">🔄 Testing automated email...</div>';
+            try {
+                const response = await fetch('/api/automated-email', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        customer_id: customerId,
+                        email_type: 'behavioral_trigger',
+                        recipient_email: 'sameermujahid7777@gmail.com'
+                    })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    statusDiv.innerHTML = '<div class="status-indicator status-completed">✅ Automated email test successful! Check your email.</div>';
+                    showSuccess('🤖 Automated email test completed successfully!');
+                } else {
+                    statusDiv.innerHTML = `<div class="status-indicator status-failed">❌ ${data.error}</div>`;
+                }
+            } catch (error) {
+                statusDiv.innerHTML = `<div class="status-indicator status-failed">❌ Error: ${error.message}</div>`;
+            } finally {
+                testBtn.disabled = false;
+                testBtn.textContent = '🤖 Test Automated Email';
+            }
+        }
+
+        // Enable automated emails
+        async function enableAutomatedEmails() {
+            const enableBtn = document.getElementById('enableAutoEmailBtn');
+            const statusDiv = document.getElementById('autoEmailStatus');
+            
+            enableBtn.disabled = true;
+            enableBtn.textContent = '✅ Enabling...';
+            statusDiv.innerHTML = '<div class="status-indicator status-processing">🔄 Enabling automated emails...</div>';
+            try {
+                // This would typically configure the automation system
+                // For now, we'll just show a success message
+                setTimeout(() => {
+                    statusDiv.innerHTML = '<div class="status-indicator status-completed">✅ Automated emails enabled successfully!</div>';
+                    enableBtn.textContent = '✅ Automated Emails Enabled';
+                    showSuccess('🤖 Automated emails enabled successfully!');
+                }, 2000);
+            } catch (error) {
+                statusDiv.innerHTML = `<div class="status-indicator status-failed">❌ Error: ${error.message}</div>`;
+                enableBtn.disabled = false;
+                enableBtn.textContent = '✅ Enable Automated Emails';
+            }
+        }
+
+        // Configure email triggers
+        function configureEmailTriggers() {
+            const statusDiv = document.getElementById('autoEmailStatus');
+            
+            statusDiv.innerHTML = `
+                <div class="alert alert-light shadow-sm rounded p-3">
+                    <h4 class="mb-3"><i class="fas fa-cog"></i> Email Trigger Configuration</h4>
+                    <p><strong>Current Triggers:</strong></p>
+                    <ul>
+                        <li><i class="fas fa-clock"></i> Peak Time Emails (9:00 AM daily)</li>
+                        <li><i class="fas fa-chart-line"></i> Engagement Follow-up (2:00 PM daily)</li>
+                        <li><i class="fas fa-bullseye"></i> Behavioral Triggers (6:00 PM daily)</li>
+                        <li><i class="fas fa-fire"></i> Hot Lead Alerts (Immediate)</li>
+                        <li><i class="fas fa-sun"></i> Warm Lead Nurturing (24 hours)</li>
+                    </ul>
+                    <p><strong>Recipient:</strong> sameermujahid7777@gmail.com</p>
+                    <p class="text-muted small mb-0"><em>All emails are automatically sent to the configured recipient address.</em></p>
+                </div>
+            `;
+        }
+
+        // Email functions
+        async function testEmailSimple() {
+            const resultDiv = document.getElementById('emailTestResult');
+
+            resultDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-vial"></i> Testing SendGrid email (simple GET)...</div>';
+
+            try {
+                const response = await fetch('/api/test-email-simple');
+                const data = await response.json();
+
+                if (data.success) {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-success">
+                            <h6><i class="fas fa-check-circle"></i> Simple Email Test Successful!</h6>
+                            <p><strong>Recipient:</strong> ${data.recipient}</p>
+                            <p><strong>Subject:</strong> ${data.subject}</p>
+                            <p><strong>Message:</strong> ${data.message}</p>
+                            <p><strong>Timestamp:</strong> ${new Date(data.timestamp).toLocaleString()}</p>
+                        </div>
+                    `;
+                    showSuccess('Simple SendGrid email test successful!');
+                } else {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-danger">
+                            <h6><i class="fas fa-times-circle"></i> Simple Email Test Failed</h6>
+                            <p><strong>Error:</strong> ${data.error}</p>
+                            <p><strong>Timestamp:</strong> ${new Date(data.timestamp || Date.now()).toLocaleString()}</p>
+                        </div>
+                    `;
+                    showError('Simple email test failed: ' + data.error);
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `
+                    <div class="alert alert-danger">
+                        <h6><i class="fas fa-times-circle"></i> Simple Email Test Error</h6>
+                        <p><strong>Error:</strong> ${error.message}</p>
+                    </div>
+                `;
+                showError('Simple email test error: ' + error.message);
+            }
+        }
+
+        async function testEmail() {
+            const email = document.getElementById('testEmail').value;
+            const resultDiv = document.getElementById('emailTestResult');
+
+            if (!email) {
+                showError('Please enter an email address');
+                return;
+            }
+
+            resultDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-vial"></i> Testing SendGrid email...</div>';
+
+            // Debug the request data
+            const requestData = { email: email };
+            console.log('Sending email test request:', requestData);
+
+            try {
+                const response = await fetch('/api/test-email', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        email: email
+                    })
+                });
+
+                console.log('Response status:', response.status);
+                console.log('Response headers:', response.headers);
+
+                const data = await response.json();
+                console.log('Response data:', data);
+
+                if (data.success) {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-success">
+                            <h6><i class="fas fa-check-circle"></i> Email Test Successful!</h6>
+                            <p><strong>Recipient:</strong> ${data.recipient}</p>
+                            <p><strong>Subject:</strong> ${data.subject}</p>
+                            <p><strong>Message:</strong> ${data.message}</p>
+                            <p><strong>Timestamp:</strong> ${new Date(data.timestamp).toLocaleString()}</p>
+                        </div>
+                    `;
+                    showSuccess('SendGrid email test successful!');
+                } else {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-danger">
+                            <h6><i class="fas fa-times-circle"></i> Email Test Failed</h6>
+                            <p><strong>Error:</strong> ${data.error}</p>
+                            <p><strong>Timestamp:</strong> ${new Date(data.timestamp || Date.now()).toLocaleString()}</p>
+                        </div>
+                    `;
+                    showError('Email test failed: ' + data.error);
+                }
+            } catch (error) {
+                console.error('Email test error:', error);
+                resultDiv.innerHTML = `
+                    <div class="alert alert-danger">
+                        <h6><i class="fas fa-times-circle"></i> Email Test Error</h6>
+                        <p><strong>Error:</strong> ${error.message}</p>
+                        <p><strong>Request Data:</strong> ${JSON.stringify(requestData)}</p>
+                    </div>
+                `;
+                showError('Email test error: ' + error.message);
+            }
+        }
+
+        async function sendAutomatedEmail() {
+            const email = document.getElementById('userEmail').value;
+            const sendBtn = document.getElementById('sendEmailBtn');
+            const statusDiv = document.getElementById('emailStatus');
+
+            if (!email) {
+                showError('Please enter an email address for automated email sending.');
+                return;
+            }
+            sendBtn.disabled = true;
+            sendBtn.textContent = '📧 Sending...';
+            statusDiv.innerHTML = '<div class="status-indicator status-processing"><i class="fas fa-spinner fa-spin"></i> Sending automated email...</div>';
+            try {
+                const response = await fetch(`/api/automated-email`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        customer_id: currentCustomerId,
+                        email_type: 'behavioral_trigger',
+                        recipient_email: email
+                    })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    statusDiv.innerHTML = '<div class="status-indicator status-completed"><i class="fas fa-check-circle"></i> Automated email sent successfully!</div>';
+                    showSuccess('Automated email sent successfully!');
+                } else {
+                    statusDiv.innerHTML = `<div class="status-indicator status-failed"><i class="fas fa-times-circle"></i> ${data.error}</div>`;
+                    showError('Failed to send automated email: ' + data.error);
+                }
+            } catch (error) {
+                statusDiv.innerHTML = `<div class="status-indicator status-failed"><i class="fas fa-times-circle"></i> Error: ${error.message}</div>`;
+                showError('Error sending automated email: ' + error.message);
+            } finally {
+                sendBtn.disabled = false;
+                sendBtn.textContent = '<i class="fas fa-envelope"></i> Send AI Recommendations';
+            }
+        }
+
+        // Automated Email Analysis Functions
+        async function analyzeEmailTriggers() {
+            const customerId = document.getElementById('customerId').value;
+            if (!customerId) {
+                showError('Please enter a Customer ID');
+                return;
+            }
+
+            currentCustomerId = parseInt(customerId);
+
+            const aiSummaryDiv = document.getElementById('aiAnalysisSummary');
+            const aiContentDiv = document.getElementById('aiAnalysisContent');
+            const triggersDisplayDiv = document.getElementById('emailTriggersDisplay');
+            const triggersContentDiv = document.getElementById('emailTriggersContent');
+            const resultDiv = document.getElementById('automatedEmailResult');
+
+            // Show loading
+            aiSummaryDiv.style.display = 'none';
+            triggersDisplayDiv.style.display = 'none';
+            resultDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-search"></i> Analyzing email triggers for customer ' + customerId + '...</div>';
+
+            try {
+                const response = await fetch(`/api/automated-email-analysis/${currentCustomerId}`);
+                const data = await response.json();
+
+                if (data.success) {
+                    // Display AI Analysis Summary
+                    let aiSummaryHtml = '';
+                    if (data.analysis_summary) {
+                        const summary = data.analysis_summary;
+                        aiSummaryHtml = `
+                            <div class="row">
+                                <div class="col-md-3">
+                                    <strong>Engagement Level:</strong><br>
+                                    <span class="badge bg-${summary.engagement_level === 'High' ? 'success' : summary.engagement_level === 'Medium' ? 'warning' : 'secondary'}">${summary.engagement_level}</span>
+                                </div>
+                                <div class="col-md-3">
+                                    <strong>Lead Score:</strong><br>
+                                    <span class="badge bg-primary">${summary.lead_score}/100</span>
+                                </div>
+                                <div class="col-md-3">
+                                    <strong>Properties Viewed:</strong><br>
+                                    <span class="badge bg-info">${summary.total_properties_viewed}</span>
+                                </div>
+                                <div class="col-md-3">
+                                    <strong>Price Range:</strong><br>
+                                    <span class="badge bg-warning">${summary.average_price_range}</span>
+                                </div>
+                            </div>
+                            <div class="row mt-2">
+                                <div class="col-md-6">
+                                    <strong>Preferred Locations:</strong> ${summary.preferred_locations} areas
+                                </div>
+                                <div class="col-md-6">
+                                    <strong>AI Personality:</strong> ${data.ai_insights?.personality_type || 'Data-driven'}
+                                </div>
+                            </div>
+                        `;
+                    }
+                    aiContentDiv.innerHTML = aiSummaryHtml;
+                    aiSummaryDiv.style.display = 'block';
+
+                    // Display Email Triggers
+                    let triggersHtml = '';
+                    if (data.triggers && data.triggers.length > 0) {
+                        triggersHtml = `
+                            <div class="alert alert-success">
+                                <h6><i class="fas fa-check-circle"></i> Found ${data.total_triggers} Email Triggers!</h6>
+                                <p>Based on AI analysis of customer behavior, the following automated emails would be sent:</p>
+                            </div>
+                            <div class="row">
+                        `;
+
+                        data.triggers.forEach((trigger, index) => {
+                            const priorityColor = trigger.priority === 'high' ? 'danger' :
+                                                trigger.priority === 'medium' ? 'warning' : 'info';
+                            const priorityIcon = trigger.priority === 'high' ? '🔥' :
+                                                trigger.priority === 'medium' ? '⚡' : '📧';
+
+                            triggersHtml += `
+                                <div class="col-md-6 mb-3">
+                                    <div class="card border-${priorityColor} h-100 shadow-sm">
+                                        <div class="card-header bg-${priorityColor} text-white">
+                                            <strong>${priorityIcon} ${trigger.trigger_type.replace('_', ' ').toUpperCase()}</strong>
+                                            <span class="badge bg-light text-dark float-end">${trigger.priority.toUpperCase()}</span>
+                                        </div>
+                                        <div class="card-body">
+                                            <h6 class="card-title">Why this email would be sent:</h6>
+                                            <p class="card-text"><strong>Condition:</strong> ${trigger.condition}</p>
+                                            <p class="card-text"><strong>Reason:</strong> ${trigger.reason}</p>
+                                            <p class="card-text"><strong>Recommendations:</strong> ${trigger.recommendation_count} properties</p>
+                                            <div class="mt-2">
+                                                <small class="text-muted">
+                                                    <i class="fas fa-info-circle"></i> This email would be automatically triggered based on customer behavior analysis.
+                                                </small>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            `;
+                        });
+
+                        triggersHtml += `
+                                </div>
+                                <div class="alert alert-info mt-3">
+                                    <h6><i class="fas fa-clipboard-list"></i> Email Trigger Summary:</h6>
+                                    <ul>
+                                        <li><strong>High Priority:</strong> ${data.triggers.filter(t => t.priority === 'high').length} emails</li>
+                                        <li><strong>Medium Priority:</strong> ${data.triggers.filter(t => t.priority === 'medium').length} emails</li>
+                                        <li><strong>Total Triggers:</strong> ${data.total_triggers} emails</li>
+                                    </ul>
+                                    <p class="mb-0"><strong>Ready to test?</strong> Use the "Test All Emails" button above to send these triggered emails.</p>
+                                </div>
+                            `;
+                    } else {
+                        triggersHtml = `
+                            <div class="alert alert-warning">
+                                <h6><i class="fas fa-exclamation-triangle"></i> No Email Triggers Found</h6>
+                                <p>No automated email triggers were detected for this customer based on current behavior patterns.</p>
+                                <p><strong>Possible reasons:</strong></p>
+                                <ul>
+                                    <li>Customer has low engagement level</li>
+                                    <li>Insufficient property viewing data</li>
+                                    <li>Customer behavior doesn't match trigger conditions</li>
+                                </ul>
+                                <p class="mb-0"><strong>Note:</strong> The AI system analyzes customer behavior to determine when automated emails should be sent. No triggers mean the customer doesn't currently meet the criteria for automated emails.</p>
+                            </div>
+                        `;
+                    }
+
+                    triggersContentDiv.innerHTML = triggersHtml;
+                    triggersDisplayDiv.style.display = 'block';
+
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-success">
+                            <h6><i class="fas fa-check-circle"></i> Email Trigger Analysis Complete!</h6>
+                            <p><strong>Customer ID:</strong> ${data.customer_id}</p>
+                            <p><strong>Analysis Method:</strong> AI-powered behavioral analysis</p>
+                            <p><strong>Total Triggers Found:</strong> ${data.total_triggers}</p>
+                            <p><strong>Analysis Timestamp:</strong> ${new Date().toLocaleString()}</p>
+                        </div>
+                    `;
+                    showSuccess('Email trigger analysis completed! Check the details above.');
+                } else {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-danger">
+                            <h6><i class="fas fa-times-circle"></i> Analysis Failed</h6>
+                            <p><strong>Error:</strong> ${data.error}</p>
+                        </div>
+                    `;
+                    showError('Analysis failed: ' + data.error);
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `
+                    <div class="alert alert-danger">
+                        <h6><i class="fas fa-times-circle"></i> Analysis Error</h6>
+                        <p><strong>Error:</strong> ${error.message}</p>
+                    </div>
+                `;
+                showError('Analysis error: ' + error.message);
+            }
+        }
+
+        async function testAutomatedEmails() {
+            const customerId = document.getElementById('customerId').value;
+            const testEmail = document.getElementById('automatedEmailTest').value;
+
+            if (!customerId) {
+                showError('Please enter a Customer ID');
+                return;
+            }
+
+            if (!testEmail) {
+                showError('Please enter a test email address');
+                return;
+            }
+
+            currentCustomerId = parseInt(customerId);
+
+            const resultDiv = document.getElementById('automatedEmailResult');
+            resultDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-paper-plane"></i> Testing automated emails for customer ' + customerId + '...</div>';
+
+            try {
+                const response = await fetch(`/api/test-automated-emails/${currentCustomerId}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        recipient_email: testEmail
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-success">
+                            <h6><i class="fas fa-check-circle"></i> Automated Email Test Successful!</h6>
+                            <p><strong>Customer ID:</strong> ${data.customer_id}</p>
+                            <p><strong>Emails Sent:</strong> ${data.emails_sent}</p>
+                            <p><strong>Success Rate:</strong> ${data.success_rate}%</p>
+                            <p><strong>Test Email:</strong> ${testEmail}</p>
+                            <p><strong>Timestamp:</strong> ${new Date().toLocaleString()}</p>
+                        </div>
+                    `;
+                    showSuccess(`Successfully sent ${data.emails_sent} automated emails to ${testEmail}`);
+                } else {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-danger">
+                            <h6><i class="fas fa-times-circle"></i> Automated Email Test Failed</h6>
+                            <p><strong>Error:</strong> ${data.error}</p>
+                        </div>
+                    `;
+                    showError('Automated email test failed: ' + data.error);
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `
+                    <div class="alert alert-danger">
+                        <h6><i class="fas fa-times-circle"></i> Automated Email Test Error</h6>
+                        <p><strong>Error:</strong> ${error.message}</p>
+                    </div>
+                `;
+                showError('Automated email test error: ' + error.message);
+            }
+        }
+
+        // Property Database Management Functions
+        async function checkDatabaseStatus() {
+            const statusDiv = document.getElementById('databaseStatus');
+            statusDiv.innerHTML = '<p><i class="fas fa-spinner fa-spin"></i> Checking database status...</p>';
+
+            try {
+                const response = await fetch('/api/fetch-all-properties');
+                const data = await response.json();
+
+                if (data.success) {
+                    statusDiv.innerHTML = `
+                        <div class="row">
+                            <div class="col-md-3">
+                                <strong>Properties in Database:</strong><br>
+                                <span class="badge bg-success">${data.total_properties}</span>
+                            </div>
+                            <div class="col-md-3">
+                                <strong>Database Status:</strong><br>
+                                <span class="badge bg-success">Active</span>
+                            </div>
+                            <div class="col-md-3">
+                                <strong>Last Updated:</strong><br>
+                                <span class="badge bg-info">${new Date(data.timestamp).toLocaleString()}</span>
+                            </div>
+                            <div class="col-md-3">
+                                <strong>Storage:</strong><br>
+                                <span class="badge bg-warning">ChromaDB</span>
+                            </div>
+                        </div>
+                        <p class="mt-2 mb-0"><small class="text-muted">Database is ready for AI analysis and email generation.</small></p>
+                    `;
+                } else {
+                    statusDiv.innerHTML = `
+                        <div class="alert alert-warning">
+                            <strong>Database Status:</strong> ${data.error || 'Unknown error'}
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                statusDiv.innerHTML = `
+                    <div class="alert alert-danger">
+                        <strong>Error:</strong> ${error.message}
+                    </div>
+                `;
+            }
+        }
+
+        async function fetchAllProperties() {
+            const resultDiv = document.getElementById('fetchResult');
+            resultDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-rocket"></i> Fetching all 500+ properties using parallel processing...</div>';
+
+            const workers = document.getElementById('workerCount').value || 10;
+            const pageSize = document.getElementById('pageSize').value || 500;
+            const maxPages = document.getElementById('maxPages').value || 10;
+
+            const startTime = Date.now();
+
+            try {
+                const response = await fetch(`/api/fetch-all-properties?workers=${workers}&page_size=${pageSize}&max_pages=${maxPages}`);
+                const data = await response.json();
+                const endTime = Date.now();
+                const duration = (endTime - startTime) / 1000;
+
+                if (data.success) {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-success">
+                            <h6><i class="fas fa-check-circle"></i> Successfully Fetched All Properties!</h6>
+                            <p><strong>Total Properties:</strong> ${data.total_properties}</p>
+                            <p><strong>Parameters Used:</strong></p>
+                            <ul>
+                                <li>Workers: ${data.parameters_used.workers}</li>
+                                <li>Page Size: ${data.parameters_used.page_size}</li>
+                                <li>Max Pages: ${data.parameters_used.max_pages}</li>
+                            </ul>
+                            <p><strong>Duration:</strong> ${duration.toFixed(2)} seconds</p>
+                            <p><strong>Timestamp:</strong> ${new Date(data.timestamp).toLocaleString()}</p>
+                        </div>
+                    `;
+                    showSuccess(`Successfully fetched ${data.total_properties} properties in ${duration.toFixed(2)}s`);
+
+                    // Refresh database status
+                    checkDatabaseStatus();
+                } else {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-danger">
+                            <h6><i class="fas fa-times-circle"></i> Property Fetch Failed</h6>
+                            <p><strong>Error:</strong> ${data.error}</p>
+                            <p><strong>Duration:</strong> ${duration.toFixed(2)} seconds</p>
+                        </div>
+                    `;
+                    showError('Property fetch failed: ' + data.error);
+                }
+            } catch (error) {
+                const endTime = Date.now();
+                const duration = (endTime - startTime) / 1000;
+
+                resultDiv.innerHTML = `
+                    <div class="alert alert-danger">
+                        <h6><i class="fas fa-times-circle"></i> Property Fetch Error</h6>
+                        <p><strong>Error:</strong> ${error.message}</p>
+                        <p><strong>Duration:</strong> ${duration.toFixed(2)} seconds</p>
+                    </div>
+                `;
+                showError('Property fetch error: ' + error.message);
+            }
+        }
+
+        async function testParallelFetching() {
+            const resultDiv = document.getElementById('fetchResult');
+            resultDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-bolt"></i> Testing parallel fetching with default settings...</div>';
+
+            const startTime = Date.now();
+
+            try {
+                const response = await fetch('/api/fetch-all-properties');
+                const data = await response.json();
+                const endTime = Date.now();
+                const duration = (endTime - startTime) / 1000;
+
+                if (data.success) {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-success">
+                            <h6><i class="fas fa-check-circle"></i> Quick Test Successful!</h6>
+                            <p><strong>Total Properties:</strong> ${data.total_properties}</p>
+                            <p><strong>Duration:</strong> ${duration.toFixed(2)} seconds</p>
+                        </div>
+                    `;
+                    showSuccess(`Quick test completed: ${data.total_properties} properties in ${duration.toFixed(2)}s`);
+
+                    // Refresh database status
+                    checkDatabaseStatus();
+                } else {
+                    resultDiv.innerHTML = `
+                        <div class="alert alert-danger">
+                            <h6><i class="fas fa-times-circle"></i> Quick Test Failed</h6>
+                            <p><strong>Error:</strong> ${data.error}</p>
+                        </div>
+                    `;
+                    showError('Quick test failed: ' + data.error);
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `
+                    <div class="alert alert-danger">
+                        <h6><i class="fas fa-times-circle"></i> Quick Test Error</h6>
+                        <p><strong>Error:</strong> ${error.message}</p>
+                    </div>
+                `;
+                showError('Quick test error: ' + error.message);
+            }
+        }
+    </script>
+</body>
+</html> 

templates/templates/analytics.html

@@ -0,0 +1,919 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lead Qualification Analytics Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            background-color: #f8f9fa;
+            padding-top: 2rem;
+        }
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 2rem 0;
+            margin-bottom: 2rem;
+        }
+        .stats-card {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            margin-bottom: 1rem;
+            text-align: center;
+        }
+        .stats-number {
+            font-size: 2.5rem;
+            font-weight: bold;
+            color: #007bff;
+        }
+        .stats-label {
+            color: #6c757d;
+            font-size: 1rem;
+            margin-top: 0.5rem;
+        }
+        .chart-container {
+            background: white;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+        }
+        .activity-list {
+            background: white;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            margin-bottom: 2rem;
+        }
+        .activity-item {
+            padding: 1rem;
+            border-bottom: 1px solid #e9ecef;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .activity-item:last-child {
+            border-bottom: none;
+        }
+        .activity-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.2rem;
+        }
+        .activity-icon.click {
+            background: #28a745;
+        }
+        .activity-icon.search {
+            background: #007bff;
+        }
+        .activity-icon.visit {
+            background: #ffc107;
+        }
+        .activity-icon.email {
+            background: #6c757d;
+        }
+        .clear-data-btn {
+            background: #dc3545;
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .clear-data-btn:hover {
+            background: #c82333;
+        }
+        .export-btn {
+            background: #28a745;
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .export-btn:hover {
+            background: #218838;
+        }
+        .lead-score-card {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 2rem;
+            border-radius: 15px;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .lead-score-number {
+            font-size: 4rem;
+            font-weight: bold;
+            margin-bottom: 1rem;
+        }
+        .lead-score-label {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .lead-status {
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-weight: bold;
+            margin-top: 1rem;
+        }
+        .lead-status.hot {
+            background: #dc3545;
+        }
+        .lead-status.warm {
+            background: #ffc107;
+            color: #212529;
+        }
+        .lead-status.cold {
+            background: #6c757d;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <!-- Header -->
+        <div class="header">
+        <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-md-8">
+                        <h1><i class="fas fa-chart-bar"></i> Lead Qualification Analytics Dashboard</h1>
+                        <p class="mb-0">Track user behavior and lead qualification metrics</p>
+                    </div>
+                    <div class="col-md-4 text-end">
+                        <a href="/" class="btn btn-outline-light me-2">
+                            <i class="fas fa-home"></i> Home
+                        </a>
+                        <button class="btn btn-outline-light me-2" onclick="exportData()">
+                            <i class="fas fa-download"></i> Export
+                        </button>
+                        <button class="btn btn-light" onclick="clearData()">
+                            <i class="fas fa-trash"></i> Clear
+                </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="container">
+            <!-- Lead Score Card -->
+            <div class="row mb-4">
+                <div class="col-md-12">
+                    <div class="lead-score-card">
+                        <div class="lead-score-number" id="leadScore">0</div>
+                        <div class="lead-score-label">Lead Qualification Score</div>
+                        <div class="lead-status" id="leadStatus">Cold</div>
+                    </div>
+        </div>
+    </div>
+
+            <!-- Action Buttons -->
+            <div class="row mb-4">
+                <div class="col-md-6">
+                    <button class="clear-data-btn me-2" onclick="clearData()">
+                        <i class="fas fa-trash"></i> Clear All Data
+                    </button>
+                    <button class="export-btn" onclick="exportData()">
+                        <i class="fas fa-download"></i> Export Data
+                    </button>
+                </div>
+                <div class="col-md-6 text-end">
+                    <small class="text-muted">Last updated: <span id="lastUpdated"></span></small>
+                </div>
+        </div>
+
+            <!-- Stats Cards -->
+            <div class="row mb-4">
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="totalClicks">0</div>
+                        <div class="stats-label">Total Clicks</div>
+                    </div>
+                        </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="totalSearches">0</div>
+                        <div class="stats-label">Total Searches</div>
+                    </div>
+                </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="uniqueProperties">0</div>
+                        <div class="stats-label">Unique Properties</div>
+                    </div>
+                        </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="totalViewTime">0s</div>
+                        <div class="stats-label">Total View Time</div>
+                    </div>
+                </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="avgViewDuration">0s</div>
+                        <div class="stats-label">Avg View Duration</div>
+                    </div>
+                </div>
+                <div class="col-md-2">
+                    <div class="stats-card">
+                        <div class="stats-number" id="visitRequests">0</div>
+                        <div class="stats-label">Visit Requests</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Charts Row -->
+            <div class="row mb-4">
+                <div class="col-md-6">
+                    <div class="chart-container">
+                        <h5><i class="fas fa-chart-pie"></i> Property Type Preferences</h5>
+                        <canvas id="propertyTypeChart"></canvas>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="chart-container">
+                        <h5><i class="fas fa-chart-bar"></i> Price Range Preferences</h5>
+                        <canvas id="priceRangeChart"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Feature Preferences -->
+            <div class="row mb-4">
+                <div class="col-md-12">
+                    <div class="chart-container">
+                        <h5><i class="fas fa-star"></i> Feature Preferences</h5>
+                        <canvas id="featureChart"></canvas>
+                    </div>
+                </div>
+                        </div>
+
+            <!-- Detailed View Analytics -->
+            <div class="row mb-4">
+                <div class="col-md-12">
+                    <div class="chart-container">
+                        <h5><i class="fas fa-clock"></i> Detailed View Analytics</h5>
+                        <canvas id="viewDurationChart"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Recent Activity -->
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="activity-list">
+                        <h5><i class="fas fa-history"></i> Recent Activity</h5>
+                        <div id="activityList">
+                            <p class="text-muted">No activity recorded yet.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        class LeadAnalyticsDashboard {
+            constructor() {
+                this.trackingData = this.loadTrackingData();
+                this.init();
+            }
+
+            loadTrackingData() {
+                const data = localStorage.getItem('userTrackingData');
+                return data ? JSON.parse(data) : {
+                    clickedProperties: [],
+                    detailedViews: [],
+                    searchHistory: [],
+                    features: [],
+                    priceRanges: [],
+                    propertyTypes: []
+                };
+            }
+
+            init() {
+                this.updateStats();
+                this.createCharts();
+                this.displayRecentActivity();
+                this.updateLastUpdated();
+                this.updateLeadScore();
+                this.generateInsights();
+            }
+
+            updateStats() {
+                document.getElementById('totalClicks').textContent = this.trackingData.clickedProperties.length;
+                document.getElementById('totalSearches').textContent = this.trackingData.searchHistory.length;
+                
+                // Unique properties clicked
+                const uniqueProperties = new Set(this.trackingData.clickedProperties.map(p => p.id)).size;
+                document.getElementById('uniqueProperties').textContent = uniqueProperties;
+                
+                // Total view time
+                const totalViewTime = this.trackingData.detailedViews.reduce((sum, view) => sum + view.totalDuration, 0);
+                document.getElementById('totalViewTime').textContent = this.formatDuration(totalViewTime);
+                
+                // Average view duration
+                if (this.trackingData.detailedViews.length > 0) {
+                    const totalDuration = this.trackingData.detailedViews.reduce((sum, view) => sum + view.totalDuration, 0);
+                    const totalViews = this.trackingData.detailedViews.reduce((sum, view) => sum + view.viewCount, 0);
+                    const avgDuration = totalViews > 0 ? Math.round(totalDuration / totalViews) : 0;
+                    document.getElementById('avgViewDuration').textContent = this.formatDuration(avgDuration);
+                }
+                
+                // Visit requests (from localStorage or session)
+                const visitHistory = JSON.parse(localStorage.getItem('visitHistory') || '[]');
+                document.getElementById('visitRequests').textContent = visitHistory.length;
+            }
+
+            generateInsights() {
+                const insights = this.analyzeUserBehavior();
+                this.displayInsights(insights);
+            }
+
+            analyzeUserBehavior() {
+                const insights = {
+                    preferredTypes: {},
+                    preferredPriceRanges: {},
+                    engagementLevel: 'low',
+                    sessionDuration: 0,
+                    topProperties: [],
+                    recommendations: []
+                };
+
+                // Analyze property type preferences
+                this.trackingData.propertyTypes.forEach(type => {
+                    insights.preferredTypes[type] = (insights.preferredTypes[type] || 0) + 1;
+                });
+
+                // Analyze price range preferences
+                this.trackingData.priceRanges.forEach(range => {
+                    insights.preferredPriceRanges[range] = (insights.preferredPriceRanges[range] || 0) + 1;
+                });
+
+                // Calculate engagement level
+                const totalInteractions = this.trackingData.clickedProperties.length + this.trackingData.detailedViews.length;
+                const totalTime = this.trackingData.detailedViews.reduce((sum, view) => sum + view.totalDuration, 0);
+                
+                if (totalInteractions >= 10 && totalTime >= 60) {
+                    insights.engagementLevel = 'high';
+                } else if (totalInteractions >= 5 && totalTime >= 30) {
+                    insights.engagementLevel = 'medium';
+                }
+
+                insights.sessionDuration = totalTime;
+
+                // Get top properties by engagement
+                insights.topProperties = this.trackingData.detailedViews
+                    .sort((a, b) => b.totalDuration - a.totalDuration)
+                    .slice(0, 3);
+
+                // Generate recommendations
+                insights.recommendations = this.generateRecommendations();
+
+                return insights;
+            }
+
+            generateRecommendations() {
+                const recommendations = [];
+                const insights = this.analyzeUserBehavior();
+
+                // Recommendation 1: Based on most viewed property type
+                const topType = Object.keys(insights.preferredTypes)
+                    .sort((a, b) => insights.preferredTypes[b] - insights.preferredTypes[a])[0];
+                
+                if (topType) {
+                    recommendations.push({
+                        type: 'property_type',
+                        message: `You show strong interest in ${topType} properties. Consider exploring more ${topType} options.`,
+                        priority: 'high'
+                    });
+                }
+
+                // Recommendation 2: Based on price range
+                const topPriceRange = Object.keys(insights.preferredPriceRanges)
+                    .sort((a, b) => insights.preferredPriceRanges[b] - insights.preferredPriceRanges[a])[0];
+                
+                if (topPriceRange) {
+                    recommendations.push({
+                        type: 'price_range',
+                        message: `Your preferred price range is ${this.formatPriceRange(topPriceRange)}. Focus on properties in this range.`,
+                        priority: 'medium'
+                    });
+                }
+
+                // Recommendation 3: Based on engagement
+                if (insights.engagementLevel === 'high') {
+                    recommendations.push({
+                        type: 'engagement',
+                        message: 'High engagement detected! You\'re ready for personalized recommendations and follow-up.',
+                        priority: 'high'
+                    });
+                } else if (insights.engagementLevel === 'medium') {
+                    recommendations.push({
+                        type: 'engagement',
+                        message: 'Good engagement level. Consider scheduling property visits for interested properties.',
+                        priority: 'medium'
+                    });
+                }
+
+                // Recommendation 4: Based on session duration
+                if (insights.sessionDuration < 30) {
+                    recommendations.push({
+                        type: 'duration',
+                        message: 'Short session duration. Consider providing more detailed property information.',
+                        priority: 'low'
+                    });
+                }
+
+                return recommendations;
+            }
+
+            displayInsights(insights) {
+                // Create insights section if it doesn't exist
+                let insightsSection = document.getElementById('insightsSection');
+                if (!insightsSection) {
+                    insightsSection = document.createElement('div');
+                    insightsSection.id = 'insightsSection';
+                    insightsSection.className = 'row mb-4';
+                    insightsSection.innerHTML = `
+                        <div class="col-md-12">
+                            <div class="chart-container">
+                                <h5><i class="fas fa-lightbulb"></i> AI-Powered Insights & Recommendations</h5>
+                                <div id="insightsContent"></div>
+                            </div>
+                        </div>
+                    `;
+                    
+                    // Insert after the charts row
+                    const chartsRow = document.querySelector('.row.mb-4:nth-of-type(3)');
+                    if (chartsRow) {
+                        chartsRow.parentNode.insertBefore(insightsSection, chartsRow.nextSibling);
+                    }
+                }
+
+                const insightsContent = document.getElementById('insightsContent');
+                let insightsHTML = '';
+
+                // Display engagement summary
+                insightsHTML += `
+                    <div class="row mb-3">
+                        <div class="col-md-6">
+                            <div class="alert alert-info">
+                                <h6><i class="fas fa-chart-line"></i> Engagement Summary</h6>
+                                <p><strong>Level:</strong> <span class="badge bg-${insights.engagementLevel === 'high' ? 'success' : insights.engagementLevel === 'medium' ? 'warning' : 'secondary'}">${insights.engagementLevel.toUpperCase()}</span></p>
+                                <p><strong>Session Duration:</strong> ${this.formatDuration(insights.sessionDuration)}</p>
+                                <p><strong>Total Interactions:</strong> ${this.trackingData.clickedProperties.length + this.trackingData.detailedViews.length}</p>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="alert alert-success">
+                                <h6><i class="fas fa-star"></i> Top Property Types</h6>
+                                ${Object.entries(insights.preferredTypes)
+                                    .sort(([,a], [,b]) => b - a)
+                                    .slice(0, 3)
+                                    .map(([type, count]) => `<p><strong>${type}:</strong> ${count} interactions</p>`)
+                                    .join('')}
+                            </div>
+                        </div>
+                    </div>
+                `;
+
+                // Display recommendations
+                insightsHTML += `
+                    <div class="row">
+                        <div class="col-md-12">
+                            <h6><i class="fas fa-recommendations"></i> AI Recommendations</h6>
+                            ${insights.recommendations.map(rec => `
+                                <div class="alert alert-${rec.priority === 'high' ? 'danger' : rec.priority === 'medium' ? 'warning' : 'info'}">
+                                    <i class="fas fa-${rec.type === 'property_type' ? 'home' : rec.type === 'price_range' ? 'money-bill' : rec.type === 'engagement' ? 'chart-line' : 'clock'}"></i>
+                                    ${rec.message}
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                `;
+
+                // Display top properties
+                if (insights.topProperties.length > 0) {
+                    insightsHTML += `
+                        <div class="row mt-3">
+                            <div class="col-md-12">
+                                <h6><i class="fas fa-trophy"></i> Most Engaged Properties</h6>
+                                <div class="row">
+                                    ${insights.topProperties.map(prop => `
+                                        <div class="col-md-4">
+                                            <div class="card">
+                                                <div class="card-body">
+                                                    <h6 class="card-title">${prop.propertyName.substring(0, 30)}...</h6>
+                                                    <p class="card-text">
+                                                        <strong>Type:</strong> ${prop.propertyType}<br>
+                                                        <strong>Price:</strong> ₹${this.formatPrice(prop.price)}<br>
+                                                        <strong>Duration:</strong> ${this.formatDuration(prop.totalDuration)}<br>
+                                                        <strong>Views:</strong> ${prop.viewCount}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    `).join('')}
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                }
+
+                insightsContent.innerHTML = insightsHTML;
+            }
+
+            createCharts() {
+                this.createPropertyTypeChart();
+                this.createPriceRangeChart();
+                this.createFeatureChart();
+                this.createViewDurationChart();
+            }
+
+            createPropertyTypeChart() {
+                const ctx = document.getElementById('propertyTypeChart').getContext('2d');
+                const typeCounts = {};
+                
+                this.trackingData.propertyTypes.forEach(type => {
+                    typeCounts[type] = (typeCounts[type] || 0) + 1;
+                });
+
+                if (Object.keys(typeCounts).length === 0) {
+                    ctx.canvas.style.display = 'none';
+                    return;
+                }
+
+                new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                        labels: Object.keys(typeCounts),
+                    datasets: [{
+                            data: Object.values(typeCounts),
+                        backgroundColor: [
+                                '#FF6384',
+                                '#36A2EB',
+                                '#FFCE56',
+                                '#4BC0C0',
+                                '#9966FF',
+                                '#FF9F40'
+                            ]
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }
+            });
+            }
+
+            createPriceRangeChart() {
+                const ctx = document.getElementById('priceRangeChart').getContext('2d');
+                const rangeCounts = {};
+                
+                this.trackingData.priceRanges.forEach(range => {
+                    rangeCounts[range] = (rangeCounts[range] || 0) + 1;
+                });
+
+                if (Object.keys(rangeCounts).length === 0) {
+                    ctx.canvas.style.display = 'none';
+                    return;
+                }
+
+                const labels = {
+                    '0-500000': 'Under ₹5L',
+                    '500000-1000000': '₹5L - ₹10L',
+                    '1000000-2000000': '₹10L - ₹20L',
+                    '2000000-5000000': '₹20L - ₹50L',
+                    '5000000-10000000': '₹50L - ₹1Cr',
+                    '10000000+': 'Above ₹1Cr'
+                };
+
+                new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: Object.keys(rangeCounts).map(key => labels[key] || key),
+                        datasets: [{
+                            label: 'Clicks',
+                            data: Object.values(rangeCounts),
+                            backgroundColor: '#007bff'
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        scales: {
+                            y: {
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                });
+            }
+
+            createFeatureChart() {
+                const ctx = document.getElementById('featureChart').getContext('2d');
+                const featureCounts = {};
+                
+                this.trackingData.features.forEach(feature => {
+                    featureCounts[feature] = (featureCounts[feature] || 0) + 1;
+                });
+
+                if (Object.keys(featureCounts).length === 0) {
+                    ctx.canvas.style.display = 'none';
+                    return;
+                }
+
+                // Sort by count and take top 10
+                const sortedFeatures = Object.entries(featureCounts)
+                    .sort(([,a], [,b]) => b - a)
+                    .slice(0, 10);
+
+                new Chart(ctx, {
+                    type: 'horizontalBar',
+                data: {
+                        labels: sortedFeatures.map(([feature]) => feature),
+                    datasets: [{
+                            label: 'Clicks',
+                            data: sortedFeatures.map(([,count]) => count),
+                            backgroundColor: '#28a745'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                        scales: {
+                            x: {
+                                beginAtZero: true
+                            }
+                        }
+                    }
+                });
+            }
+
+            createViewDurationChart() {
+                const ctx = document.getElementById('viewDurationChart').getContext('2d');
+                const detailedViews = this.trackingData.detailedViews;
+                
+                if (detailedViews.length === 0) {
+                    ctx.canvas.style.display = 'none';
+                    return;
+                }
+
+                // Sort by total duration and take top 10
+                const sortedViews = detailedViews
+                    .sort((a, b) => b.totalDuration - a.totalDuration)
+                    .slice(0, 10);
+
+                new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: sortedViews.map(view => view.propertyName.substring(0, 20) + '...'),
+                        datasets: [{
+                            label: 'Total Duration (seconds)',
+                            data: sortedViews.map(view => view.totalDuration),
+                            backgroundColor: '#ff6384'
+                        }, {
+                            label: 'View Count',
+                            data: sortedViews.map(view => view.viewCount),
+                            backgroundColor: '#36a2eb'
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+        }
+        
+            displayRecentActivity() {
+                const container = document.getElementById('activityList');
+                const allActivities = [];
+
+                // Add clicked properties
+                this.trackingData.clickedProperties.forEach(prop => {
+                    allActivities.push({
+                        type: 'click',
+                        text: `Clicked on ${prop.name}`,
+                        timestamp: new Date(prop.timestamp),
+                        price: prop.price,
+                        propertyType: prop.type
+                    });
+                });
+
+                // Add detailed views
+                this.trackingData.detailedViews.forEach(view => {
+                    allActivities.push({
+                        type: 'detailed_view',
+                        text: `Viewed ${view.propertyName} for ${this.formatDuration(view.totalDuration)}`,
+                        timestamp: new Date(view.lastViewed),
+                        price: view.price,
+                        propertyType: view.propertyType,
+                        viewCount: view.viewCount,
+                        totalDuration: view.totalDuration
+                    });
+                });
+
+                // Add searches
+                this.trackingData.searchHistory.forEach(search => {
+                    allActivities.push({
+                        type: 'search',
+                        text: `Searched for "${search.query}"`,
+                        timestamp: new Date(search.timestamp),
+                        filters: search.filters
+                    });
+                });
+
+                // Add visit requests
+                const visitHistory = JSON.parse(localStorage.getItem('visitHistory') || '[]');
+                visitHistory.forEach(visit => {
+                    allActivities.push({
+                        type: 'visit',
+                        text: `Requested visit for ${visit.propertyName}`,
+                        timestamp: new Date(visit.timestamp),
+                        propertyType: visit.propertyType
+                    });
+                });
+
+                // Sort by timestamp (most recent first)
+                allActivities.sort((a, b) => b.timestamp - a.timestamp);
+
+                if (allActivities.length === 0) {
+                    container.innerHTML = '<p class="text-muted">No activity recorded yet.</p>';
+                    return;
+                }
+
+                const activitiesHTML = allActivities.slice(0, 20).map(activity => {
+                    let iconClass, icon;
+                    if (activity.type === 'click') {
+                        iconClass = 'click';
+                        icon = 'fas fa-mouse-pointer';
+                    } else if (activity.type === 'detailed_view') {
+                        iconClass = 'visit';
+                        icon = 'fas fa-clock';
+                    } else if (activity.type === 'search') {
+                        iconClass = 'search';
+                        icon = 'fas fa-search';
+                    } else {
+                        iconClass = 'visit';
+                        icon = 'fas fa-calendar';
+                    }
+                    
+                    return `
+                        <div class="activity-item">
+                            <div class="d-flex align-items-center">
+                                <div class="activity-icon ${iconClass} me-3">
+                                    <i class="${icon}"></i>
+                                </div>
+                                <div>
+                                    <div class="fw-bold">${activity.text}</div>
+                                    <small class="text-muted">${activity.timestamp.toLocaleString()}</small>
+                                    ${activity.price ? `<br><small class="text-primary">₹${this.formatPrice(activity.price)}</small>` : ''}
+                                    ${activity.viewCount ? `<br><small class="text-success">Viewed ${activity.viewCount} times</small>` : ''}
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                }).join('');
+
+                container.innerHTML = activitiesHTML;
+            }
+
+            updateLastUpdated() {
+                const now = new Date();
+                document.getElementById('lastUpdated').textContent = now.toLocaleString();
+            }
+
+            updateLeadScore() {
+                // Calculate lead score based on user behavior
+                let score = 0;
+                
+                // Points for clicks
+                score += this.trackingData.clickedProperties.length * 5;
+                
+                // Points for detailed views
+                score += this.trackingData.detailedViews.length * 10;
+                
+                // Points for searches
+                score += this.trackingData.searchHistory.length * 3;
+                
+                // Points for visit requests
+                const visitHistory = JSON.parse(localStorage.getItem('visitHistory') || '[]');
+                score += visitHistory.length * 15;
+                
+                // Points for time spent
+                const totalViewTime = this.trackingData.detailedViews.reduce((sum, view) => sum + view.totalDuration, 0);
+                score += Math.min(totalViewTime / 60, 20); // Max 20 points for time
+                
+                // Cap score at 100
+                score = Math.min(score, 100);
+                
+                document.getElementById('leadScore').textContent = Math.round(score);
+                
+                // Update lead status
+                const statusElement = document.getElementById('leadStatus');
+                statusElement.className = 'lead-status';
+                
+                if (score >= 70) {
+                    statusElement.textContent = 'Hot Lead';
+                    statusElement.classList.add('hot');
+                } else if (score >= 40) {
+                    statusElement.textContent = 'Warm Lead';
+                    statusElement.classList.add('warm');
+                } else {
+                    statusElement.textContent = 'Cold Lead';
+                    statusElement.classList.add('cold');
+                }
+            }
+
+            formatPrice(price) {
+                if (price >= 10000000) {
+                    return (price / 10000000).toFixed(1) + 'Cr';
+                } else if (price >= 100000) {
+                    return (price / 100000).toFixed(1) + 'L';
+                } else {
+                    return price.toLocaleString();
+                }
+            }
+
+            formatDuration(seconds) {
+                if (seconds < 60) {
+                    return seconds + 's';
+                } else if (seconds < 3600) {
+                    const minutes = Math.floor(seconds / 60);
+                    const remainingSeconds = seconds % 60;
+                    return minutes + 'm ' + remainingSeconds + 's';
+            } else {
+                    const hours = Math.floor(seconds / 3600);
+                    const minutes = Math.floor((seconds % 3600) / 60);
+                    return hours + 'h ' + minutes + 'm';
+                }
+            }
+
+            formatPriceRange(range) {
+                const ranges = {
+                    '0-500000': 'Under ₹5L',
+                    '500000-1000000': '₹5L - ₹10L',
+                    '1000000-2000000': '₹10L - ₹20L',
+                    '2000000-5000000': '₹20L - ₹50L',
+                    '5000000-10000000': '₹50L - ₹1Cr',
+                    '10000000+': 'Above ₹1Cr'
+                };
+                return ranges[range] || range;
+            }
+        }
+
+        // Global functions for buttons
+        function clearData() {
+            if (confirm('Are you sure you want to clear all tracking data? This cannot be undone.')) {
+                localStorage.removeItem('userTrackingData');
+                localStorage.removeItem('userSessionId');
+                localStorage.removeItem('visitHistory');
+                location.reload();
+            }
+        }
+
+        function exportData() {
+            const trackingData = localStorage.getItem('userTrackingData');
+            const visitHistory = localStorage.getItem('visitHistory');
+            
+            const exportData = {
+                tracking_data: trackingData ? JSON.parse(trackingData) : {},
+                visit_history: visitHistory ? JSON.parse(visitHistory) : [],
+                export_timestamp: new Date().toISOString()
+            };
+            
+            const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'lead_analytics_data.json';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+
+        // Initialize dashboard
+        document.addEventListener('DOMContentLoaded', () => {
+            new LeadAnalyticsDashboard();
+        });
+    </script>
+</body>
+</html> 

templates/templates/enhanced_dashboard.html

@@ -0,0 +1,1264 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Real Estate Lead Qualification Dashboard</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2c3e50;
+            --secondary-color: #3498db;
+            --success-color: #27ae60;
+            --warning-color: #f39c12;
+            --danger-color: #e74c3c;
+            --light-bg: #f8f9fa;
+            --dark-bg: #343a40;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+
+        .dashboard-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            margin: 20px;
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+
+        .header h1 {
+            margin: 0;
+            font-size: 2.5rem;
+            font-weight: 300;
+        }
+
+        .header p {
+            margin: 10px 0 0 0;
+            opacity: 0.9;
+            font-size: 1.1rem;
+        }
+
+        .search-section {
+            background: white;
+            padding: 30px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .search-box {
+            background: var(--light-bg);
+            border: none;
+            border-radius: 50px;
+            padding: 15px 25px;
+            font-size: 1.1rem;
+            width: 100%;
+            max-width: 400px;
+            transition: all 0.3s ease;
+        }
+
+        .search-box:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
+            transform: translateY(-2px);
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, var(--secondary-color), #2980b9);
+            border: none;
+            border-radius: 50px;
+            padding: 15px 30px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
+        }
+
+        .content-section {
+            padding: 30px;
+        }
+
+        .stats-card {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+            transition: all 0.3s ease;
+            border-left: 5px solid var(--secondary-color);
+        }
+
+        .stats-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
+        }
+
+        .stats-card.success {
+            border-left-color: var(--success-color);
+        }
+
+        .stats-card.warning {
+            border-left-color: var(--warning-color);
+        }
+
+        .stats-card.danger {
+            border-left-color: var(--danger-color);
+        }
+
+        .stats-number {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }
+
+        .stats-label {
+            color: #666;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .property-card {
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+            transition: all 0.3s ease;
+            border: 1px solid #eee;
+        }
+
+        .property-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        }
+
+        .property-name {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: var(--primary-color);
+            margin-bottom: 10px;
+        }
+
+        .property-details {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+
+        .property-badge {
+            background: var(--light-bg);
+            color: var(--primary-color);
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+
+        .price {
+            font-size: 1.3rem;
+            font-weight: 700;
+            color: var(--success-color);
+        }
+
+        .engagement-score {
+            display: inline-block;
+            padding: 5px 12px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: white;
+        }
+
+        .engagement-high {
+            background: var(--success-color);
+        }
+
+        .engagement-medium {
+            background: var(--warning-color);
+        }
+
+        .engagement-low {
+            background: var(--danger-color);
+        }
+
+        .loading {
+            text-align: center;
+            padding: 50px;
+            color: #666;
+        }
+
+        .loading i {
+            font-size: 3rem;
+            color: var(--secondary-color);
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .error-message {
+            background: #fee;
+            color: var(--danger-color);
+            padding: 20px;
+            border-radius: 10px;
+            border: 1px solid #fcc;
+            margin: 20px 0;
+        }
+
+        .chart-container {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+        }
+
+        .analytics-section {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
+        }
+
+        .insight-item {
+            background: var(--light-bg);
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            border-left: 4px solid var(--secondary-color);
+        }
+
+        .insight-label {
+            font-weight: 600;
+            color: var(--primary-color);
+            margin-bottom: 5px;
+        }
+
+        .insight-value {
+            color: #666;
+        }
+
+        .recommendation {
+            background: #e8f5e8;
+            border: 1px solid #c3e6c3;
+            color: #2d5a2d;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 10px;
+        }
+
+        .risk-high {
+            background: #fee;
+            border-color: #fcc;
+            color: #c33;
+        }
+
+        .risk-medium {
+            background: #fff3cd;
+            border-color: #ffeaa7;
+            color: #856404;
+        }
+
+        .risk-low {
+            background: #e8f5e8;
+            border-color: #c3e6c3;
+            color: #2d5a2d;
+        }
+
+        .no-data {
+            text-align: center;
+            padding: 50px;
+            color: #666;
+        }
+
+        .no-data i {
+            font-size: 4rem;
+            color: #ddd;
+            margin-bottom: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .dashboard-container {
+                margin: 10px;
+            }
+            
+            .header h1 {
+                font-size: 2rem;
+            }
+            
+            .stats-number {
+                font-size: 2rem;
+            }
+            
+            .property-details {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="dashboard-container">
+        <!-- Header -->
+        <div class="header">
+            <h1><i class="fas fa-chart-line"></i> Lead Qualification Dashboard</h1>
+            <p>Real-time property engagement analytics and insights</p>
+        </div>
+
+        <!-- Search Section -->
+        <div class="search-section">
+            <div class="row align-items-center">
+                <div class="col-md-6">
+                    <div class="input-group">
+                        <input type="number" id="customerIdInput" class="form-control search-box" 
+                               placeholder="Enter Customer ID (e.g., 105)" min="1">
+                        <button class="btn btn-primary" onclick="loadCustomerData()">
+                            <i class="fas fa-search"></i> Load Data
+                        </button>
+                    </div>
+                </div>
+                <div class="col-md-6 text-end">
+                    <button class="btn btn-outline-secondary" onclick="loadSampleData()">
+                        <i class="fas fa-eye"></i> View Sample Data
+                    </button>
+                    <button class="btn btn-outline-info" onclick="exportData()">
+                        <i class="fas fa-download"></i> Export
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Content Section -->
+        <div class="content-section">
+            <!-- Loading State -->
+            <div id="loadingState" class="loading" style="display: none;">
+                <i class="fas fa-spinner"></i>
+                <p>Loading customer data...</p>
+            </div>
+
+            <!-- Error State -->
+            <div id="errorState" class="error-message" style="display: none;">
+                <i class="fas fa-exclamation-triangle"></i>
+                <span id="errorMessage"></span>
+            </div>
+
+            <!-- No Data State -->
+            <div id="noDataState" class="no-data" style="display: none;">
+                <i class="fas fa-search"></i>
+                <h3>No Data Found</h3>
+                <p>Enter a customer ID to view their property engagement data</p>
+            </div>
+
+            <!-- Data Content -->
+            <div id="dataContent" style="display: none;">
+                <!-- Summary Statistics -->
+                <div class="row mb-4">
+                    <div class="col-md-3">
+                        <div class="stats-card">
+                            <div class="stats-number" id="totalProperties">0</div>
+                            <div class="stats-label">Total Properties</div>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stats-card">
+                            <div class="stats-number" id="totalViews">0</div>
+                            <div class="stats-label">Total Views</div>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stats-card">
+                            <div class="stats-number" id="avgPrice">₹0</div>
+                            <div class="stats-label">Average Price</div>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="stats-card">
+                            <div class="stats-number" id="engagementScore">0</div>
+                            <div class="stats-label">Engagement Score</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Charts Section -->
+                <div class="row mb-4">
+                    <div class="col-md-6">
+                        <div class="chart-container">
+                            <h5><i class="fas fa-chart-pie"></i> Property Type Distribution</h5>
+                            <canvas id="propertyTypeChart"></canvas>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="chart-container">
+                            <h5><i class="fas fa-chart-bar"></i> Engagement by Property</h5>
+                            <canvas id="engagementChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Lead Qualification Section -->
+                <div class="row mb-4">
+                    <div class="col-12">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-fire"></i> Lead Qualification Analysis</h5>
+                            <div id="leadQualificationContainer"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Detailed Analytics Section -->
+                <div class="row mb-4">
+                    <div class="col-md-6">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-brain"></i> AI Insights</h5>
+                            <div id="insightsContainer"></div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-lightbulb"></i> Recommendations</h5>
+                            <div id="recommendationsContainer"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Property Analysis Section -->
+                <div class="row mb-4">
+                    <div class="col-12">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-home"></i> Detailed Property Analysis</h5>
+                            <div id="propertyAnalysisContainer"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Conversion Probability Section -->
+                <div class="row mb-4">
+                    <div class="col-md-6">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-chart-line"></i> Conversion Probability</h5>
+                            <div id="conversionContainer"></div>
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="analytics-section">
+                            <h5><i class="fas fa-clock"></i> Lead Timeline</h5>
+                            <div id="timelineContainer"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Properties List -->
+                <div class="row">
+                    <div class="col-12">
+                        <h5><i class="fas fa-home"></i> Property Engagement Details</h5>
+                        <div id="propertiesContainer"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js" 
+            onerror="console.error('Failed to load Chart.js from primary CDN')"></script>
+    <script>
+        // Fallback for Chart.js if primary CDN fails
+        if (typeof Chart === 'undefined') {
+            const script = document.createElement('script');
+            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js';
+            script.onload = function() {
+                console.log('Chart.js loaded from fallback CDN');
+            };
+            script.onerror = function() {
+                console.error('Failed to load Chart.js from fallback CDN');
+            };
+            document.head.appendChild(script);
+        }
+    </script>
+    <script>
+        let currentCustomerId = null;
+        let propertyTypeChart = null;
+        let engagementChart = null;
+
+        // Initialize dashboard
+        document.addEventListener('DOMContentLoaded', function() {
+            // Load sample data on page load
+            loadSampleData();
+            
+            // Add enter key support for search
+            document.getElementById('customerIdInput').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    loadCustomerData();
+                }
+            });
+        });
+
+        function showLoading() {
+            document.getElementById('loadingState').style.display = 'block';
+            document.getElementById('errorState').style.display = 'none';
+            document.getElementById('noDataState').style.display = 'none';
+            document.getElementById('dataContent').style.display = 'none';
+        }
+
+        function showError(message) {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('errorState').style.display = 'block';
+            document.getElementById('errorMessage').textContent = message;
+            document.getElementById('noDataState').style.display = 'none';
+            document.getElementById('dataContent').style.display = 'none';
+        }
+
+        function showNoData() {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('errorState').style.display = 'none';
+            document.getElementById('noDataState').style.display = 'block';
+            document.getElementById('dataContent').style.display = 'none';
+        }
+
+        function showData() {
+            document.getElementById('loadingState').style.display = 'none';
+            document.getElementById('errorState').style.display = 'none';
+            document.getElementById('noDataState').style.display = 'none';
+            document.getElementById('dataContent').style.display = 'block';
+        }
+
+        function formatPrice(price) {
+            return new Intl.NumberFormat('en-IN', {
+                style: 'currency',
+                currency: 'INR',
+                maximumFractionDigits: 0
+            }).format(price);
+        }
+
+        function formatDuration(seconds) {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            return `${hours}h ${minutes}m`;
+        }
+
+        function getEngagementClass(score) {
+            if (score >= 80) return 'engagement-high';
+            if (score >= 50) return 'engagement-medium';
+            return 'engagement-low';
+        }
+
+        function getRiskClass(level) {
+            switch(level.toLowerCase()) {
+                case 'high': return 'risk-high';
+                case 'medium': return 'risk-medium';
+                case 'low': return 'risk-low';
+                default: return '';
+            }
+        }
+
+        async function loadCustomerData() {
+            const customerId = document.getElementById('customerIdInput').value.trim();
+            
+            if (!customerId) {
+                showError('Please enter a customer ID');
+                return;
+            }
+
+            showLoading();
+            currentCustomerId = customerId;
+
+            try {
+                console.log('🔍 Making combined API request for customer:', customerId);
+                console.log('📡 Request URL:', `/api/lead-analysis/${customerId}`);
+                
+                // Load combined lead analysis data
+                const response = await fetch(`/api/lead-analysis/${customerId}`);
+                console.log('📥 Response status:', response.status);
+                console.log('📥 Response headers:', Object.fromEntries(response.headers.entries()));
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                
+                const combinedData = await response.json();
+                console.log('📊 Combined Lead Analysis Data:', combinedData);
+                
+                if (combinedData.error) {
+                    showError(combinedData.error);
+                    return;
+                }
+                
+                if (!combinedData.properties || combinedData.properties.length === 0) {
+                    showNoData();
+                    return;
+                }
+
+                // Display network info
+                displayNetworkInfo(customerId, combinedData);
+
+                // Display all data from single response
+                displayData(combinedData);
+                
+            } catch (error) {
+                console.error('❌ Error loading data:', error);
+                showError(`Failed to load data: ${error.message}`);
+            }
+        }
+
+        function loadSampleData() {
+            document.getElementById('customerIdInput').value = '105';
+            loadCustomerData();
+        }
+
+        function displayData(data) {
+            showData();
+            
+            // Update summary statistics
+            const summary = data.summary;
+            document.getElementById('totalProperties').textContent = summary.total_properties;
+            document.getElementById('totalViews').textContent = summary.total_views;
+            document.getElementById('avgPrice').textContent = formatPrice(summary.average_price);
+            document.getElementById('engagementScore').textContent = Math.round(summary.engagement_score);
+
+            // Display all sections immediately
+            displayLeadQualification(data);
+            displayInsights(data);
+            displayRecommendations(data);
+            displayPropertyAnalysis(data);
+            displayConversionProbability(data);
+            displayTimeline(data);
+            displayProperties(data.properties);
+
+            // Create charts with delay to ensure Chart.js is loaded
+            setTimeout(() => {
+                createPropertyTypeChart(summary.property_types);
+                createEngagementChart(data.properties);
+            }, 500);
+        }
+
+        function displayLeadQualification(data) {
+            const container = document.getElementById('leadQualificationContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.lead_qualification) {
+                container.innerHTML = '<p class="text-muted">No lead qualification data available</p>';
+                return;
+            }
+
+            const lead = data.lead_qualification;
+            
+            // Lead status card
+            const statusCard = document.createElement('div');
+            statusCard.className = 'row mb-3';
+            statusCard.innerHTML = `
+                <div class="col-md-6">
+                    <div class="stats-card" style="border-left-color: ${lead.status_color}">
+                        <div class="stats-number" style="color: ${lead.status_color}">${lead.lead_status}</div>
+                        <div class="stats-label">Lead Status</div>
+                        <small class="text-muted">${lead.status_description}</small>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="stats-card">
+                        <div class="stats-number">${lead.lead_score}/100</div>
+                        <div class="stats-label">Lead Score</div>
+                        <small class="text-muted">Based on multiple factors</small>
+                    </div>
+                </div>
+            `;
+            container.appendChild(statusCard);
+
+            // Factors breakdown
+            const factorsCard = document.createElement('div');
+            factorsCard.className = 'row';
+            factorsCard.innerHTML = '<div class="col-12"><h6>Lead Score Breakdown:</h6></div>';
+            
+            Object.entries(lead.factors).forEach(([factor, data]) => {
+                const factorDiv = document.createElement('div');
+                factorDiv.className = 'col-md-6 mb-2';
+                factorDiv.innerHTML = `
+                    <div class="insight-item">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <div>
+                                <div class="insight-label">${factor.replace('_', ' ').toUpperCase()}</div>
+                                <div class="insight-value">${data.description}</div>
+                            </div>
+                            <div class="text-end">
+                                <div class="fw-bold">${data.points.toFixed(1)}/${data.max_points}</div>
+                                <small class="text-muted">Score: ${data.score}</small>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                factorsCard.appendChild(factorDiv);
+            });
+            
+            container.appendChild(factorsCard);
+        }
+
+        function displayPropertyAnalysis(data) {
+            const container = document.getElementById('propertyAnalysisContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || !data.analytics.property_analysis) {
+                container.innerHTML = '<p class="text-muted">No property analysis available</p>';
+                return;
+            }
+
+            const analysis = data.analytics.property_analysis;
+
+            // Price Analysis
+            if (analysis.price_analysis && analysis.price_analysis.min_price !== undefined) {
+                const priceDiv = document.createElement('div');
+                priceDiv.className = 'mb-3';
+                priceDiv.innerHTML = `
+                    <h6><i class="fas fa-money-bill-wave"></i> Price Analysis</h6>
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Price Range</div>
+                                <div class="insight-value">${formatPrice(analysis.price_analysis.min_price)} - ${formatPrice(analysis.price_analysis.max_price)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Average Price</div>
+                                <div class="insight-value">${formatPrice(analysis.price_analysis.avg_price)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Preferred Range</div>
+                                <div class="insight-value">${getPreferredRangeDisplay(analysis.price_analysis.preferred_range)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Price Trend</div>
+                                <div class="insight-value">${analysis.price_analysis.price_trend || 'N/A'}</div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(priceDiv);
+            }
+
+            // Duration Analysis
+            if (analysis.duration_analysis && analysis.duration_analysis.total_duration !== undefined) {
+                const durationDiv = document.createElement('div');
+                durationDiv.className = 'mb-3';
+                durationDiv.innerHTML = `
+                    <h6><i class="fas fa-clock"></i> Duration Analysis</h6>
+                    <div class="row">
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Total Duration</div>
+                                <div class="insight-value">${formatDuration(analysis.duration_analysis.total_duration)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Average Duration</div>
+                                <div class="insight-value">${formatDuration(analysis.duration_analysis.avg_duration)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Max Duration</div>
+                                <div class="insight-value">${formatDuration(analysis.duration_analysis.max_duration)}</div>
+                            </div>
+                        </div>
+                        <div class="col-md-3">
+                            <div class="insight-item">
+                                <div class="insight-label">Min Duration</div>
+                                <div class="insight-value">${formatDuration(analysis.duration_analysis.min_duration)}</div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(durationDiv);
+            }
+
+            // Individual Property Analysis
+            if (analysis.properties && Array.isArray(analysis.properties) && analysis.properties.length > 0) {
+                const propertiesDiv = document.createElement('div');
+                propertiesDiv.className = 'mt-4';
+                propertiesDiv.innerHTML = '<h6><i class="fas fa-list"></i> Individual Property Analysis</h6>';
+                
+                analysis.properties.forEach(prop => {
+                    if (!prop || typeof prop !== 'object') return;
+                    
+                    const propDiv = document.createElement('div');
+                    propDiv.className = 'property-card mb-3';
+                    propDiv.innerHTML = `
+                        <div class="row">
+                            <div class="col-md-8">
+                                <div class="property-name">${prop.property_name || 'Unknown Property'}</div>
+                                <div class="property-details">
+                                    <span class="property-badge">${prop.property_type || 'Unknown'}</span>
+                                    <span class="property-badge">${prop.view_count || 0} views</span>
+                                    <span class="property-badge">${prop.duration_formatted || '0h 0m'}</span>
+                                    <span class="property-badge ${getInterestClass(prop.interest_level || 'Unknown')}">${prop.interest_level || 'Unknown'} Interest</span>
+                                </div>
+                            </div>
+                            <div class="col-md-4 text-end">
+                                <div class="price">${prop.price_formatted || '₹0'}</div>
+                                <div class="engagement-score ${getEngagementClass(prop.engagement_score || 0)}">${Math.round(prop.engagement_score || 0)}%</div>
+                            </div>
+                        </div>
+                        <div class="mt-2">
+                            <small class="text-muted">
+                                <i class="fas fa-lightbulb"></i> ${prop.recommendation || 'No recommendation available'}
+                            </small>
+                        </div>
+                    `;
+                    propertiesDiv.appendChild(propDiv);
+                });
+                
+                container.appendChild(propertiesDiv);
+            }
+        }
+
+        function displayConversionProbability(data) {
+            const container = document.getElementById('conversionContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || !data.analytics.conversion_probability) {
+                container.innerHTML = '<p class="text-muted">No conversion data available</p>';
+                return;
+            }
+
+            const conversion = data.analytics.conversion_probability;
+            
+            // Main probability card
+            const probCard = document.createElement('div');
+            probCard.className = 'stats-card mb-3';
+            probCard.innerHTML = `
+                <div class="stats-number">${Math.round(conversion.final_probability)}%</div>
+                <div class="stats-label">Conversion Probability</div>
+                <small class="text-muted">Confidence: ${conversion.confidence_level}</small>
+            `;
+            container.appendChild(probCard);
+
+            // Breakdown
+            const breakdownDiv = document.createElement('div');
+            breakdownDiv.innerHTML = `
+                <h6>Probability Breakdown:</h6>
+                <div class="insight-item">
+                    <div class="d-flex justify-content-between">
+                        <span>Base Probability:</span>
+                        <span>${Math.round(conversion.base_probability)}%</span>
+                    </div>
+                </div>
+            `;
+            
+            Object.entries(conversion.adjustments).forEach(([factor, value]) => {
+                const factorDiv = document.createElement('div');
+                factorDiv.className = 'insight-item';
+                factorDiv.innerHTML = `
+                    <div class="d-flex justify-content-between">
+                        <span>${factor.replace('_', ' ').toUpperCase()}:</span>
+                        <span>+${Math.round(value)}%</span>
+                    </div>
+                `;
+                breakdownDiv.appendChild(factorDiv);
+            });
+            
+            container.appendChild(breakdownDiv);
+        }
+
+        function displayTimeline(data) {
+            const container = document.getElementById('timelineContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || !data.analytics.lead_timeline || data.analytics.lead_timeline.length === 0) {
+                container.innerHTML = '<p class="text-muted">No timeline data available</p>';
+                return;
+            }
+
+            const timeline = data.analytics.lead_timeline;
+            
+            timeline.forEach((event, index) => {
+                const eventDiv = document.createElement('div');
+                eventDiv.className = 'insight-item mb-2';
+                eventDiv.innerHTML = `
+                    <div class="d-flex justify-content-between align-items-start">
+                        <div>
+                            <div class="insight-label">${event.property_name}</div>
+                            <div class="insight-value">
+                                ${event.property_type} • ${formatPrice(event.price)} • ${event.views} views
+                            </div>
+                            <small class="text-muted">${formatDate(event.date)}</small>
+                        </div>
+                        <div class="text-end">
+                            <div class="engagement-score ${getEngagementClass(event.engagement_score)}">${Math.round(event.engagement_score)}%</div>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(eventDiv);
+            });
+        }
+
+        function createPropertyTypeChart(propertyTypes) {
+            try {
+                const canvas = document.getElementById('propertyTypeChart');
+                if (!canvas) {
+                    console.error('Property type chart canvas not found');
+                    return;
+                }
+                
+                const ctx = canvas.getContext('2d');
+                
+                if (propertyTypeChart) {
+                    propertyTypeChart.destroy();
+                }
+
+                const labels = Object.keys(propertyTypes);
+                const data = Object.values(propertyTypes);
+
+                if (typeof Chart === 'undefined') {
+                    console.error('Chart.js not loaded');
+                    return;
+                }
+
+                propertyTypeChart = new Chart(ctx, {
+                    type: 'doughnut',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            data: data,
+                            backgroundColor: [
+                                '#3498db',
+                                '#e74c3c',
+                                '#2ecc71',
+                                '#f39c12',
+                                '#9b59b6',
+                                '#1abc9c'
+                            ]
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        plugins: {
+                            legend: {
+                                position: 'bottom'
+                            }
+                        }
+                    }
+                });
+            } catch (error) {
+                console.error('Error creating property type chart:', error);
+            }
+        }
+
+        function createEngagementChart(properties) {
+            try {
+                const canvas = document.getElementById('engagementChart');
+                if (!canvas) {
+                    console.error('Engagement chart canvas not found');
+                    return;
+                }
+                
+                const ctx = canvas.getContext('2d');
+                
+                if (engagementChart) {
+                    engagementChart.destroy();
+                }
+
+                const labels = properties.map(p => p.propertyName.substring(0, 20) + '...');
+                const data = properties.map(p => p.engagement_score || 0);
+
+                if (typeof Chart === 'undefined') {
+                    console.error('Chart.js not loaded');
+                    return;
+                }
+
+                engagementChart = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: 'Engagement Score',
+                            data: data,
+                            backgroundColor: '#3498db',
+                            borderColor: '#2980b9',
+                            borderWidth: 1
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                max: 100
+                            }
+                        },
+                        plugins: {
+                            legend: {
+                                display: false
+                            }
+                        }
+                    }
+                });
+            } catch (error) {
+                console.error('Error creating engagement chart:', error);
+            }
+        }
+
+        function displayInsights(data) {
+            const container = document.getElementById('insightsContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || Object.keys(data.analytics).length === 0) {
+                container.innerHTML = '<p class="text-muted">No insights available</p>';
+                return;
+            }
+
+            const analytics = data.analytics;
+            const insights = [
+                { label: 'Engagement Level', value: analytics.engagement_level || 'Unknown' },
+                { label: 'Preferred Types', value: (analytics.preferred_property_types || []).join(', ') || 'None' },
+                { label: 'Opportunity Score', value: `${Math.round(analytics.opportunity_score || 0)}%` },
+                { label: 'Risk Level', value: analytics.risk_assessment?.risk_level || 'Unknown' }
+            ];
+
+            insights.forEach(insight => {
+                const div = document.createElement('div');
+                div.className = 'insight-item';
+                div.innerHTML = `
+                    <div class="insight-label">${insight.label}</div>
+                    <div class="insight-value">${insight.value}</div>
+                `;
+                container.appendChild(div);
+            });
+        }
+
+        function displayRecommendations(data) {
+            const container = document.getElementById('recommendationsContainer');
+            container.innerHTML = '';
+
+            if (!data || !data.analytics || !data.analytics.recommendations || data.analytics.recommendations.length === 0) {
+                container.innerHTML = '<p class="text-muted">No recommendations available</p>';
+                return;
+            }
+
+            data.analytics.recommendations.forEach(rec => {
+                const div = document.createElement('div');
+                div.className = 'recommendation';
+                div.innerHTML = `<i class="fas fa-lightbulb"></i> ${rec}`;
+                container.appendChild(div);
+            });
+
+            // Add risk assessment if available
+            if (data.analytics.risk_assessment && data.analytics.risk_assessment.risk_factors) {
+                const riskDiv = document.createElement('div');
+                riskDiv.className = `recommendation ${getRiskClass(data.analytics.risk_assessment.risk_level)}`;
+                riskDiv.innerHTML = `
+                    <strong><i class="fas fa-exclamation-triangle"></i> Risk Factors:</strong><br>
+                    ${data.analytics.risk_assessment.risk_factors.join(', ')}
+                `;
+                container.appendChild(riskDiv);
+            }
+        }
+
+        function displayProperties(properties) {
+            const container = document.getElementById('propertiesContainer');
+            container.innerHTML = '';
+
+            properties.forEach(property => {
+                const div = document.createElement('div');
+                div.className = 'property-card';
+                
+                const engagementClass = getEngagementClass(property.engagement_score || 0);
+                const engagementText = property.engagement_score ? `${Math.round(property.engagement_score)}%` : 'N/A';
+                
+                div.innerHTML = `
+                    <div class="property-name">${property.propertyName}</div>
+                    <div class="property-details">
+                        <div>
+                            <span class="property-badge">${property.propertyTypeName}</span>
+                            <span class="property-badge">${property.viewCount} views</span>
+                            <span class="property-badge">${formatDuration(property.totalDuration)}</span>
+                        </div>
+                        <div>
+                            <span class="price">${formatPrice(property.price)}</span>
+                            <span class="engagement-score ${engagementClass}">${engagementText}</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 text-muted">
+                        <small>
+                            <i class="fas fa-clock"></i> Last viewed: ${formatDate(property.lastViewedAt)}
+                            ${property.last_viewed_days_ago !== undefined ? `(${property.last_viewed_days_ago} days ago)` : ''}
+                        </small>
+                    </div>
+                `;
+                
+                container.appendChild(div);
+            });
+        }
+
+        function formatDate(dateString) {
+            if (!dateString) return 'Unknown';
+            
+            try {
+                const date = new Date(dateString);
+                return date.toLocaleDateString('en-IN', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+            } catch (e) {
+                return 'Invalid date';
+            }
+        }
+
+        async function exportData() {
+            if (!currentCustomerId) {
+                alert('Please load customer data first');
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/export/${currentCustomerId}?format=json`);
+                const data = await response.json();
+                
+                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `customer_${currentCustomerId}_data.json`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                window.URL.revokeObjectURL(url);
+                
+            } catch (error) {
+                console.error('Export error:', error);
+                alert('Failed to export data');
+            }
+        }
+
+        function getInterestClass(level) {
+            switch(level.toLowerCase()) {
+                case 'very high': return 'engagement-high';
+                case 'high': return 'engagement-medium';
+                case 'medium': return 'engagement-medium';
+                case 'low': return 'engagement-low';
+                case 'very low': return 'engagement-low';
+                default: return '';
+            }
+        }
+
+        function getPreferredRangeDisplay(preferredRange) {
+            if (!preferredRange || typeof preferredRange !== 'string') {
+                return 'N/A';
+            }
+            return preferredRange.replace('_', ' ').toUpperCase();
+        }
+
+        function displayNetworkInfo(customerId, data) {
+            // Create network info section
+            const networkInfo = `
+                <div class="analytics-section mb-4">
+                    <h5><i class="fas fa-network-wired"></i> Network Request Information</h5>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <h6>API Requests Made:</h6>
+                            <div class="insight-item">
+                                <div class="insight-label">Lead Analysis Request</div>
+                                <div class="insight-value">GET /api/lead-analysis/${customerId}</div>
+                                <small class="text-muted">Status: 200 OK</small>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <h6>Data Summary:</h6>
+                            <div class="insight-item">
+                                <div class="insight-label">Properties Found</div>
+                                <div class="insight-value">${data.properties ? data.properties.length : 0}</div>
+                            </div>
+                            <div class="insight-item">
+                                <div class="insight-label">Analytics Generated</div>
+                                <div class="insight-value">${Object.keys(data).length} sections</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="mt-3">
+                        <button class="btn btn-sm btn-outline-info" onclick="showRawData()">
+                            <i class="fas fa-code"></i> View Raw JSON Data
+                        </button>
+                        <button class="btn btn-sm btn-outline-secondary" onclick="copyToClipboard()">
+                            <i class="fas fa-copy"></i> Copy to Clipboard
+                        </button>
+                    </div>
+                    
+                    <div id="rawDataContainer" style="display: none;" class="mt-3">
+                        <h6>Raw API Response Data:</h6>
+                        <div class="row">
+                            <div class="col-md-6">
+                                <h6>Combined Lead Analysis Data:</h6>
+                                <pre class="bg-light p-2 rounded" style="max-height: 300px; overflow-y: auto; font-size: 0.8rem;">${JSON.stringify(data, null, 2)}</pre>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            // Insert network info at the top of the data content
+            const dataContent = document.getElementById('dataContent');
+            dataContent.insertAdjacentHTML('afterbegin', networkInfo);
+        }
+
+        function showRawData() {
+            const container = document.getElementById('rawDataContainer');
+            if (container.style.display === 'none') {
+                container.style.display = 'block';
+            } else {
+                container.style.display = 'none';
+            }
+        }
+
+        function copyToClipboard() {
+            const customerId = document.getElementById('customerIdInput').value.trim();
+            const data = {
+                customer_id: customerId,
+                timestamp: new Date().toISOString(),
+                api_requests: [
+                    {
+                        url: `/api/lead-analysis/${customerId}`,
+                        method: 'GET',
+                        description: 'Combined lead analysis data'
+                    }
+                ],
+                note: 'Check browser Network tab for actual request/response details'
+            };
+            
+            navigator.clipboard.writeText(JSON.stringify(data, null, 2)).then(() => {
+                alert('Network information copied to clipboard!');
+            }).catch(() => {
+                alert('Failed to copy to clipboard. Check console for data.');
+                console.log('Network Info:', data);
+            });
+        }
+    </script>
+</body>
+</html> 

templates/templates/index.html

@@ -0,0 +1,2272 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Real Estate Lead Qualification Engine</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Font Awesome -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --secondary-color: #64748b;
+            --success-color: #10b981;
+            --warning-color: #f59e0b;
+            --danger-color: #ef4444;
+            --dark-color: #1e293b;
+            --light-color: #f8fafc;
+            --border-color: #e2e8f0;
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: var(--dark-color);
+        }
+        
+        .navbar {
+            background: rgba(255, 255, 255, 0.95) !important;
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .hero-section {
+            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+            padding: 80px 0;
+            text-align: center;
+        }
+        
+        .hero-title {
+            font-size: 3.5rem;
+            font-weight: 700;
+            color: var(--dark-color);
+            margin-bottom: 1rem;
+        }
+        
+        .hero-subtitle {
+            font-size: 1.25rem;
+            color: var(--secondary-color);
+            margin-bottom: 2rem;
+        }
+        
+        .search-container {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            margin-bottom: 3rem;
+        }
+        
+        .property-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            gap: 2rem;
+            margin-top: 2rem;
+        }
+        
+        .property-card {
+            background: white;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+            cursor: pointer;
+            position: relative;
+        }
+        
+        .property-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+        }
+        
+        .property-image {
+            width: 100%;
+            height: 250px;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+        }
+        
+        .property-card:hover .property-image {
+            transform: scale(1.05);
+        }
+        
+        .property-badge {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: var(--primary-color);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-size: 0.875rem;
+            font-weight: 500;
+        }
+        
+        .property-content {
+            padding: 1.5rem;
+        }
+        
+        .property-title {
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--dark-color);
+        }
+        
+        .property-price {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+        }
+        
+        .property-location {
+            color: var(--secondary-color);
+            margin-bottom: 1rem;
+            font-size: 0.875rem;
+        }
+        
+        .property-features {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        
+        .feature-tag {
+            background: var(--light-color);
+            color: var(--secondary-color);
+            padding: 0.25rem 0.75rem;
+            border-radius: 15px;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+        
+        .feature-tag.available {
+            background: #dcfce7;
+            color: #166534;
+        }
+        
+        .property-actions {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 1rem;
+        }
+        
+        .btn-action {
+            flex: 1;
+            padding: 0.75rem;
+            border: none;
+            border-radius: 10px;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            text-align: center;
+        }
+        
+        .btn-primary-custom {
+            background: var(--primary-color);
+            color: white;
+        }
+        
+        .btn-primary-custom:hover {
+            background: #1d4ed8;
+            color: white;
+        }
+        
+        .btn-outline-custom {
+            background: transparent;
+            color: var(--primary-color);
+            border: 2px solid var(--primary-color);
+        }
+        
+        .btn-outline-custom:hover {
+            background: var(--primary-color);
+            color: white;
+        }
+        
+        .floating-email {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            background: white;
+            border-radius: 15px;
+            padding: 1.5rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+            max-width: 350px;
+            display: none;
+            border: 2px solid var(--primary-color);
+        }
+        
+        .floating-email.show {
+            display: block;
+            animation: slideIn 0.3s ease, pulse 2s infinite;
+        }
+
+        .floating-email.hidden {
+            display: none !important;
+        }
+
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
+            }
+            50% {
+                box-shadow: 0 10px 30px rgba(37, 99, 235, 0.4);
+            }
+            100% {
+                box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
+            }
+        }
+        
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        
+        .email-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+        
+        .email-icon {
+            width: 40px;
+            height: 40px;
+            background: var(--primary-color);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+        
+        .loading-spinner {
+            display: none;
+            text-align: center;
+            padding: 2rem;
+        }
+        
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid var(--border-color);
+            border-top: 4px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .recommendations-section {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            margin-top: 3rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        
+        .section-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--dark-color);
+        }
+        
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+        
+        .stat-card {
+            background: var(--light-color);
+            padding: 1.5rem;
+            border-radius: 15px;
+            text-align: center;
+        }
+        
+        .stat-number {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+        
+        .stat-label {
+            color: var(--secondary-color);
+            font-size: 0.875rem;
+            margin-top: 0.5rem;
+        }
+        
+        .whatsapp-float {
+            position: fixed;
+            bottom: 30px;
+            left: 30px;
+            background: #25d366;
+            color: white;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            box-shadow: 0 5px 15px rgba(37, 214, 102, 0.3);
+            transition: all 0.3s ease;
+            z-index: 1000;
+        }
+        
+        .whatsapp-float:hover {
+            transform: scale(1.1);
+            color: white;
+        }
+
+        .visit-history-float {
+            position: fixed;
+            bottom: 100px;
+            left: 30px;
+            background: #6c757d;
+            color: white;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
+            transition: all 0.3s ease;
+            z-index: 1000;
+            cursor: pointer;
+        }
+
+        .visit-history-float:hover {
+            transform: scale(1.1);
+            background: #495057;
+        }
+        
+        .dark-mode-toggle {
+            position: fixed;
+            top: 100px;
+            right: 30px;
+            background: white;
+            border: none;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+            transition: all 0.3s ease;
+        }
+        
+        .dark-mode-toggle:hover {
+            transform: scale(1.1);
+        }
+        
+        /* Dark mode styles */
+        body.dark-mode {
+            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+            color: #f1f5f9;
+        }
+        
+        body.dark-mode .navbar {
+            background: rgba(30, 41, 59, 0.95) !important;
+        }
+        
+        body.dark-mode .property-card,
+        body.dark-mode .search-container,
+        body.dark-mode .recommendations-section,
+        body.dark-mode .floating-email {
+            background: #334155;
+            color: #f1f5f9;
+        }
+        
+        body.dark-mode .property-title {
+            color: #f1f5f9;
+        }
+        
+        body.dark-mode .stat-card {
+            background: #475569;
+        }
+        
+        /* Responsive design */
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2.5rem;
+            }
+            
+            .property-grid {
+                grid-template-columns: 1fr;
+            }
+            
+            .floating-email {
+                bottom: 20px;
+                right: 20px;
+                left: 20px;
+                max-width: none;
+            }
+            
+            .whatsapp-float {
+                bottom: 20px;
+                left: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-light">
+        <div class="container">
+            <a class="navbar-brand fw-bold" href="#">
+                <i class="fas fa-home me-2"></i>
+                Real Estate Lead Engine
+            </a>
+            
+            <div class="navbar-nav ms-auto">
+                <a class="nav-link" href="#properties">Properties</a>
+                <a class="nav-link" href="#recommendations">Recommendations</a>
+                <a class="nav-link" href="#" onclick="showVisitHistory()">Visit History</a>
+                <a class="nav-link" href="/analytics">Analytics</a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero-section">
+        <div class="container">
+            <h1 class="hero-title">Discover Your Perfect Property</h1>
+            <p class="hero-subtitle">Explore thousands of properties with smart recommendations based on your preferences</p>
+            
+            <div class="search-container">
+                <div class="row">
+                    <div class="col-md-3">
+                        <select class="form-select" id="propertyType">
+                            <option value="">All Property Types</option>
+                            <option value="Flat">Flat</option>
+                            <option value="Villa">Villa</option>
+                            <option value="House">House</option>
+                            <option value="Apartment">Apartment</option>
+                        </select>
+                    </div>
+                    <div class="col-md-3">
+                        <input type="number" class="form-control" id="minPrice" placeholder="Min Price">
+                    </div>
+                    <div class="col-md-3">
+                        <input type="number" class="form-control" id="maxPrice" placeholder="Max Price">
+                    </div>
+                    <div class="col-md-3">
+                        <button class="btn btn-primary w-100" onclick="searchProperties()">
+                            <i class="fas fa-search me-2"></i>Search
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testing Controls -->
+    <div class="container mb-4">
+        <div class="row">
+            <div class="col-12">
+                <div class="alert alert-info">
+                    <h6>🧪 Testing Controls:</h6>
+                    <button class="btn btn-sm btn-danger me-2" onclick="clearTrackingData()">
+                        <i class="fas fa-trash"></i> Clear Data
+                    </button>
+                    <button class="btn btn-sm btn-warning me-2" onclick="testModal()">
+                        <i class="fas fa-eye"></i> Test Modal
+                    </button>
+                    <button class="btn btn-sm btn-secondary me-2" onclick="testPropertyClick()">
+                        <i class="fas fa-mouse-pointer"></i> Test Click
+                    </button>
+                    <button class="btn btn-sm btn-info me-2" onclick="showTrackingData()">
+                        <i class="fas fa-chart-bar"></i> Show Data
+                    </button>
+                    <small class="d-block mt-2">
+                        <strong>Expected Behavior:</strong> Card clicks = tracked + opens modal, "View Details" = same behavior, NO DUPLICATES
+                    </small>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Properties Section -->
+    <section class="container" id="properties">
+        <div class="loading-spinner" id="loadingSpinner">
+            <div class="spinner"></div>
+            <p class="mt-3">Loading properties...</p>
+        </div>
+        
+        <div class="property-grid" id="propertyGrid"></div>
+        
+        <div class="text-center mt-4">
+            <button class="btn btn-outline-primary" id="loadMoreBtn" onclick="loadMoreProperties()" style="display: none;">
+                Load More Properties
+            </button>
+        </div>
+    </section>
+
+    <!-- Recommendations Section -->
+    <section class="container" id="recommendations">
+        <div class="recommendations-section">
+            <h2 class="section-title">
+                <i class="fas fa-star me-2"></i>
+                Personalized Recommendations
+            </h2>
+            
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-number" id="propertiesViewed">0</div>
+                    <div class="stat-label">Properties Viewed</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number" id="timeSpent">0</div>
+                    <div class="stat-label">Minutes Spent</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number" id="leadScore">0</div>
+                    <div class="stat-label">Lead Score</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-number" id="visitRequests">0</div>
+                    <div class="stat-label">Visit Requests</div>
+                </div>
+            </div>
+            
+            <div class="property-grid" id="recommendationsGrid"></div>
+        </div>
+    </section>
+
+    <!-- Floating Email Capture -->
+    <div class="floating-email" id="floatingEmail">
+        <div class="email-header">
+            <div class="email-icon">
+                <i class="fas fa-envelope"></i>
+            </div>
+            <div>
+                <h5 class="mb-0">Get Your Perfect Matches!</h5>
+                <small class="text-muted">Receive personalized property recommendations</small>
+            </div>
+                <button type="button" class="btn-close" onclick="hideFloatingEmail()" style="position: absolute; top: 10px; right: 10px;"></button>
+        </div>
+        
+        <form id="emailForm">
+            <div class="mb-3">
+                <input type="email" class="form-control" id="userEmail" placeholder="Enter your email" required>
+            </div>
+            <button type="submit" class="btn btn-primary w-100">
+                <i class="fas fa-paper-plane me-2"></i>
+                Send Recommendations
+            </button>
+        </form>
+    </div>
+
+    <!-- WhatsApp Float -->
+    <a href="https://wa.me/919876543210" class="whatsapp-float" target="_blank">
+        <i class="fab fa-whatsapp"></i>
+    </a>
+
+    <!-- Visit History Float -->
+    <div class="visit-history-float" onclick="showVisitHistory()">
+        <i class="fas fa-history"></i>
+    </div>
+
+    <!-- Dark Mode Toggle -->
+    <button class="dark-mode-toggle" onclick="toggleDarkMode()">
+        <i class="fas fa-moon" id="darkModeIcon"></i>
+    </button>
+
+    <!-- Property Details Modal -->
+    <div class="modal fade" id="propertyDetailsModal" tabindex="-1" aria-labelledby="propertyDetailsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="propertyDetailsModalLabel">
+                        <i class="fas fa-home me-2"></i>Property Details
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-8">
+                            <div id="propertyImages" class="mb-4">
+                                <!-- Property images will be loaded here -->
+                            </div>
+                            <div id="propertyDescription" class="mb-4">
+                                <!-- Property description will be loaded here -->
+                            </div>
+                        </div>
+                        <div class="col-md-4">
+                            <div class="property-details-sidebar">
+                                <div class="card">
+                                    <div class="card-body">
+                                        <h5 id="detailPropertyName" class="card-title"></h5>
+                                        <h4 id="detailPropertyPrice" class="text-primary mb-3"></h4>
+                                        <div class="property-meta mb-3">
+                                            <div class="row">
+                                                <div class="col-6">
+                                                    <small class="text-muted">Type</small>
+                                                    <p id="detailPropertyType" class="mb-0"></p>
+                                                </div>
+                                                <div class="col-6">
+                                                    <small class="text-muted">Location</small>
+                                                    <p id="detailPropertyAddress" class="mb-0"></p>
+                                                </div>
+                                            </div>
+                                            <div class="row mt-2">
+                                                <div class="col-4">
+                                                    <small class="text-muted">Beds</small>
+                                                    <p id="detailPropertyBeds" class="mb-0"></p>
+                                                </div>
+                                                <div class="col-4">
+                                                    <small class="text-muted">Baths</small>
+                                                    <p id="detailPropertyBaths" class="mb-0"></p>
+                                                </div>
+                                                <div class="col-4">
+                                                    <small class="text-muted">Size</small>
+                                                    <p id="detailPropertySize" class="mb-0"></p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="property-features mb-3">
+                                            <h6>Features</h6>
+                                            <div id="detailPropertyFeatures"></div>
+                                        </div>
+                                        <div class="d-grid gap-2">
+                                            <button type="button" class="btn btn-primary" onclick="openVisitModalFromDetails()">
+                                                <i class="fas fa-calendar-check me-2"></i>Schedule Visit
+                                            </button>
+                                            <button type="button" class="btn btn-outline-primary" onclick="addToFavorites()">
+                                                <i class="fas fa-heart me-2"></i>Add to Favorites
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        <i class="fas fa-times me-2"></i>Close
+                    </button>
+                    <button type="button" class="btn btn-success" onclick="openVisitModalFromDetails()">
+                        <i class="fas fa-calendar-check me-2"></i>Schedule Visit
+                    </button>
+                    <button type="button" class="btn btn-primary" onclick="shareProperty()">
+                        <i class="fas fa-share me-2"></i>Share
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Visit Modal -->
+    <div class="modal fade" id="visitModal" tabindex="-1" aria-labelledby="visitModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="visitModalLabel">
+                        <i class="fas fa-calendar-check me-2"></i>Schedule Property Visit
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="property-summary mb-4">
+                                <h6 class="text-muted mb-2">Property Details</h6>
+                                <div class="property-info">
+                                    <h5 id="modalPropertyName" class="mb-2"></h5>
+                                    <p class="text-primary mb-1" id="modalPropertyPrice"></p>
+                                    <p class="text-muted mb-1" id="modalPropertyType"></p>
+                                    <p class="text-muted mb-3" id="modalPropertyAddress"></p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <form id="visitForm">
+                                <div class="mb-3">
+                                    <label for="visitorName" class="form-label">Your Name *</label>
+                                    <input type="text" class="form-control" id="visitorName" required>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="visitorEmail" class="form-label">Email Address *</label>
+                                    <input type="email" class="form-control" id="visitorEmail" required>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="visitorPhone" class="form-label">Phone Number *</label>
+                                    <input type="tel" class="form-control" id="visitorPhone" required>
+                                </div>
+                                <div class="row">
+                                    <div class="col-md-6">
+                                        <div class="mb-3">
+                                            <label for="visitDate" class="form-label">Preferred Date *</label>
+                                            <input type="date" class="form-control" id="visitDate" required>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <div class="mb-3">
+                                            <label for="visitTime" class="form-label">Preferred Time *</label>
+                                            <select class="form-select" id="visitTime" required>
+                                                <option value="">Select Time</option>
+                                                <option value="09:00">09:00 AM</option>
+                                                <option value="10:00">10:00 AM</option>
+                                                <option value="11:00">11:00 AM</option>
+                                                <option value="12:00">12:00 PM</option>
+                                                <option value="14:00">02:00 PM</option>
+                                                <option value="15:00">03:00 PM</option>
+                                                <option value="16:00">04:00 PM</option>
+                                                <option value="17:00">05:00 PM</option>
+                                                <option value="18:00">06:00 PM</option>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="mb-3">
+                                    <label for="visitNotes" class="form-label">Additional Notes</label>
+                                    <textarea class="form-control" id="visitNotes" rows="3" placeholder="Any specific requirements or questions..."></textarea>
+                                </div>
+                                <div class="mb-3">
+                                    <div class="form-check">
+                                        <input class="form-check-input" type="checkbox" id="agreeTerms" required>
+                                        <label class="form-check-label" for="agreeTerms">
+                                            I agree to receive communications about this property visit
+                                        </label>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+                        <i class="fas fa-times me-2"></i>Cancel
+                    </button>
+                    <button type="button" class="btn btn-primary" onclick="submitVisitRequest()">
+                        <i class="fas fa-calendar-plus me-2"></i>Schedule Visit
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Custom JS -->
+    <script>
+        // Global variables
+        let currentPage = 1;
+        let allProperties = [];
+        let userSessionId = null;
+        let userEmail = null;
+        let isDarkMode = false;
+        
+        // Initialize the application
+        document.addEventListener('DOMContentLoaded', function() {
+            loadProperties();
+            initializeDetailedViewTracking();
+            
+            // Show email form immediately
+            showEmailFormImmediately();
+            
+            // Track page load
+            trackActivity('page_load', {
+                page: 'home',
+                timestamp: new Date().toISOString()
+            });
+        });
+        
+        function initializeApp() {
+            // Generate session ID if not exists
+            userSessionId = localStorage.getItem('userSessionId') || generateSessionId();
+            localStorage.setItem('userSessionId', userSessionId);
+            
+            // Load dark mode preference
+            isDarkMode = localStorage.getItem('darkMode') === 'true';
+            if (isDarkMode) {
+                document.body.classList.add('dark-mode');
+                document.getElementById('darkModeIcon').className = 'fas fa-sun';
+            }
+            
+            // Load properties
+            loadProperties();
+            
+            // Show floating email after 30 seconds
+            setTimeout(() => {
+                showFloatingEmail();
+            }, 30000);
+            
+            // Track page view
+            trackActivity('page_view', { page: 'home' });
+        }
+        
+        function generateSessionId() {
+            return 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+        }
+        
+        async function loadProperties(page = 1, append = false) {
+            try {
+                showLoading(true);
+                
+                const params = new URLSearchParams({
+                    page: page,
+                    page_size: 20
+                });
+                
+                const response = await fetch(`/api/properties?${params}`);
+                const data = await response.json();
+                
+                if (data.properties) {
+                    if (append) {
+                        allProperties = allProperties.concat(data.properties);
+                    } else {
+                        allProperties = data.properties;
+                    }
+                    
+                    renderProperties(allProperties);
+                    
+                    // Show/hide load more button
+                    const loadMoreBtn = document.getElementById('loadMoreBtn');
+                    if (data.page < data.total_pages) {
+                        loadMoreBtn.style.display = 'block';
+                    } else {
+                        loadMoreBtn.style.display = 'none';
+                    }
+                }
+                
+            } catch (error) {
+                console.error('Error loading properties:', error);
+                showError('Failed to load properties');
+            } finally {
+                showLoading(false);
+            }
+        }
+        
+        function renderProperties(properties) {
+            const grid = document.getElementById('propertyGrid');
+            grid.innerHTML = '';
+            
+            properties.forEach(property => {
+                const card = createPropertyCard(property);
+                grid.appendChild(card);
+            });
+            
+            // Initialize detailed view tracking after properties are rendered
+            setTimeout(() => {
+                addDetailedViewTracking();
+            }, 500);
+        }
+        
+        function createPropertyCard(property) {
+            const card = document.createElement('div');
+            card.className = 'property-card';
+            card.onclick = () => viewProperty(property);
+            
+            const features = property.features || [];
+            // Use property images if available, otherwise show no image
+            const images = property.propertyImages || [];
+            
+            card.innerHTML = `
+                <div class="position-relative">
+                    ${images.length > 0 ? `
+                        <img src="${images[0]}" 
+                             alt="${property.propertyName}" 
+                             class="property-image"
+                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                    ` : ''}
+                    <div class="property-badge">${property.typeName || 'Property'}</div>
+                    ${images.length === 0 ? `
+                        <div class="no-image-placeholder" style="width: 100%; height: 250px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px;">
+                            <i class="fas fa-home me-2"></i>${property.propertyName || 'Property'}
+                        </div>
+                    ` : ''}
+                </div>
+                <div class="property-content">
+                    <h5 class="property-title">${property.propertyName || 'Property'}</h5>
+                    <div class="property-price">₹${(property.marketValue || 0).toLocaleString()}</div>
+                    <div class="property-location">
+                        <i class="fas fa-map-marker-alt me-2"></i>
+                        ${property.address || 'Location not specified'}
+                    </div>
+                    <div class="property-features">
+                        ${features.slice(0, 3).map(feature => 
+                            `<span class="feature-tag available">${feature}</span>`
+                        ).join('')}
+                        ${features.length > 3 ? `<span class="feature-tag">+${features.length - 3} more</span>` : ''}
+                    </div>
+                    <div class="property-actions">
+                        <button class="btn-action btn-primary-custom" onclick="event.stopPropagation(); scheduleVisit('${property.id}', '${property.propertyName}', '${property.marketValue}', '${property.typeName}', '${property.address}')">
+                            <i class="fas fa-calendar me-2"></i>Schedule Visit
+                        </button>
+                        <button class="btn-action btn-outline-custom" onclick="event.stopPropagation(); contactAgent('${property.id}')">
+                            <i class="fas fa-phone me-2"></i>Contact
+                        </button>
+                    </div>
+                </div>
+            `;
+            
+            return card;
+        }
+        
+        function viewProperty(property) {
+            console.log('🔍 Property clicked:', property.propertyName, 'ID:', property.id);
+            
+            // Track property click (not just view)
+            trackActivity('property_click', {
+                property: property
+            });
+            
+            // Track property type preference
+            if (property.typeName) {
+                trackActivity('property_type_select', { propertyType: property.typeName });
+            }
+            
+            // Track price range preference
+            if (property.marketValue) {
+                const priceRange = getPriceRange(property.marketValue);
+                trackActivity('price_range_select', { priceRange: priceRange });
+            }
+            
+            // Show property details modal
+            showPropertyDetailsModal(property);
+            
+            console.log('✅ Property click tracked and modal opened for:', property.propertyName);
+        }
+        
+        function scheduleVisit(propertyId, propertyName, propertyPrice, propertyType, propertyAddress) {
+            // Open visit modal directly
+            openVisitModal(propertyId, propertyName, propertyPrice, propertyType, propertyAddress);
+        }
+        
+        function contactAgent(propertyId) {
+            trackActivity('contact_agent', { property_id: propertyId });
+            // Implement contact agent functionality
+            alert('Agent contact feature coming soon!');
+        }
+        
+        // Global variables for visit modal
+        let currentVisitProperty = null;
+        let modalOpenTime = null;
+        let visitModal = null;
+        let visitHistory = [];
+        let userPreferences = {};
+
+        function openVisitModal(propertyId, propertyName, propertyPrice, propertyType, propertyAddress) {
+            // Store current property info
+            currentVisitProperty = {
+                id: propertyId,
+                name: propertyName,
+                price: propertyPrice,
+                type: propertyType,
+                address: propertyAddress,
+                timestamp: new Date().toISOString()
+            };
+            
+            // Set modal content
+            document.getElementById('modalPropertyName').textContent = propertyName || 'Property';
+            document.getElementById('modalPropertyPrice').textContent = `₹${parseInt(propertyPrice || 0).toLocaleString()}`;
+            document.getElementById('modalPropertyType').textContent = propertyType || 'Property';
+            document.getElementById('modalPropertyAddress').textContent = propertyAddress || 'Location not specified';
+            
+            // Set minimum date to today
+            const today = new Date().toISOString().split('T')[0];
+            document.getElementById('visitDate').min = today;
+            document.getElementById('visitDate').value = today;
+            
+            // Load user preferences from localStorage
+            loadUserPreferences();
+            
+            // Pre-fill form with saved data if available
+            prefillVisitForm();
+            
+            // Track modal open
+            trackActivity('visit_modal_open', {
+                property_id: propertyId,
+                property_name: propertyName,
+                property_price: propertyPrice,
+                property_type: propertyType,
+                property_address: propertyAddress
+            });
+            
+            // Store visit attempt in localStorage
+            storeVisitAttempt(currentVisitProperty);
+            
+            // Record modal open time
+            modalOpenTime = Date.now();
+            
+            // Show modal
+            visitModal = new bootstrap.Modal(document.getElementById('visitModal'));
+            visitModal.show();
+            
+            // Track modal duration when closed
+            document.getElementById('visitModal').addEventListener('hidden.bs.modal', function() {
+                if (modalOpenTime) {
+                    const duration = Date.now() - modalOpenTime;
+                    trackActivity('visit_modal_duration', {
+                        property_id: propertyId,
+                        duration: duration,
+                        modal_action: 'closed'
+                    });
+                    
+                    // Store modal interaction data
+                    storeModalInteraction({
+                        property_id: propertyId,
+                        duration: duration,
+                        action: 'closed',
+                        timestamp: new Date().toISOString()
+                    });
+                    
+                    modalOpenTime = null;
+                }
+            });
+        }
+
+        function submitVisitRequest() {
+            // Get form data
+            const formData = {
+                visitorName: document.getElementById('visitorName').value,
+                visitorEmail: document.getElementById('visitorEmail').value,
+                visitorPhone: document.getElementById('visitorPhone').value,
+                visitDate: document.getElementById('visitDate').value,
+                visitTime: document.getElementById('visitTime').value,
+                visitNotes: document.getElementById('visitNotes').value,
+                agreeTerms: document.getElementById('agreeTerms').checked
+            };
+            
+            // Validate form
+            if (!formData.visitorName || !formData.visitorEmail || !formData.visitorPhone || 
+                !formData.visitDate || !formData.visitTime || !formData.agreeTerms) {
+                showNotification('Please fill in all required fields', 'warning');
+                return;
+            }
+            
+            // Calculate modal duration
+            const duration = modalOpenTime ? Date.now() - modalOpenTime : 0;
+            
+            // Store user preferences in localStorage
+            storeUserPreferences(formData);
+            
+            // Store visit request in localStorage
+            const visitRequest = {
+                ...currentVisitProperty,
+                visitor_data: formData,
+                modal_duration: duration,
+                submitted_at: new Date().toISOString(),
+                status: 'submitted'
+            };
+            storeVisitRequest(visitRequest);
+            
+            // Track visit request submission
+            trackActivity('visit_request_submitted', {
+                property_id: currentVisitProperty.id,
+                property_name: currentVisitProperty.name,
+                property_price: currentVisitProperty.price,
+                property_type: currentVisitProperty.type,
+                property_address: currentVisitProperty.address,
+                visitor_name: formData.visitorName,
+                visitor_email: formData.visitorEmail,
+                visitor_phone: formData.visitorPhone,
+                visit_date: formData.visitDate,
+                visit_time: formData.visitTime,
+                visit_notes: formData.visitNotes,
+                modal_duration: duration,
+                form_data: formData
+            });
+            
+            // Update user email for future tracking
+            userEmail = formData.visitorEmail;
+            
+            // Show success message
+            showNotification('Visit request submitted successfully! We will contact you soon.', 'success');
+            
+            // Close modal
+            visitModal.hide();
+            
+            // Reset form
+            document.getElementById('visitForm').reset();
+            
+            // Send confirmation email (if email service is configured)
+            sendVisitConfirmationEmail(formData);
+            
+            // Update visit history display
+            updateVisitHistoryDisplay();
+        }
+
+        function sendVisitConfirmationEmail(formData) {
+            // This would integrate with your email service
+            console.log('Sending visit confirmation email to:', formData.visitorEmail);
+            
+            // You can implement email sending here or call your backend API
+            fetch('/api/send-visit-confirmation', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    visitor_data: formData,
+                    property_data: currentVisitProperty
+                })
+            }).catch(error => {
+                console.error('Error sending visit confirmation:', error);
+            });
+        }
+
+        function bookVisit(propertyId) {
+            // Fallback function for backward compatibility
+            trackActivity('book_visit', { property_id: propertyId });
+            showNotification('Please use the Visit button to schedule a property visit', 'info');
+        }
+
+        // ===== LOCALSTORAGE FUNCTIONS =====
+
+        function storeUserPreferences(formData) {
+            const preferences = {
+                visitorName: formData.visitorName,
+                visitorEmail: formData.visitorEmail,
+                visitorPhone: formData.visitorPhone,
+                lastUpdated: new Date().toISOString()
+            };
+            localStorage.setItem('userPreferences', JSON.stringify(preferences));
+        }
+
+        function loadUserPreferences() {
+            const saved = localStorage.getItem('userPreferences');
+            if (saved) {
+                userPreferences = JSON.parse(saved);
+            }
+            return userPreferences;
+        }
+
+        function prefillVisitForm() {
+            if (userPreferences.visitorName) {
+                document.getElementById('visitorName').value = userPreferences.visitorName;
+            }
+            if (userPreferences.visitorEmail) {
+                document.getElementById('visitorEmail').value = userPreferences.visitorEmail;
+            }
+            if (userPreferences.visitorPhone) {
+                document.getElementById('visitorPhone').value = userPreferences.visitorPhone;
+            }
+        }
+
+        function storeVisitAttempt(propertyData) {
+            const attempts = JSON.parse(localStorage.getItem('visitAttempts') || '[]');
+            attempts.push({
+                ...propertyData,
+                attempt_time: new Date().toISOString()
+            });
+            localStorage.setItem('visitAttempts', JSON.stringify(attempts));
+        }
+
+        function storeVisitRequest(visitRequest) {
+            const requests = JSON.parse(localStorage.getItem('visitRequests') || '[]');
+            requests.push(visitRequest);
+            localStorage.setItem('visitRequests', JSON.stringify(requests));
+        }
+
+        function storeModalInteraction(interactionData) {
+            const interactions = JSON.parse(localStorage.getItem('modalInteractions') || '[]');
+            interactions.push(interactionData);
+            localStorage.setItem('modalInteractions', JSON.stringify(interactions));
+        }
+
+        function getVisitHistory() {
+            return JSON.parse(localStorage.getItem('visitRequests') || '[]');
+        }
+
+        function getVisitAttempts() {
+            return JSON.parse(localStorage.getItem('visitAttempts') || '[]');
+        }
+
+        function getModalInteractions() {
+            return JSON.parse(localStorage.getItem('modalInteractions') || '[]');
+        }
+
+        function clearVisitHistory() {
+            localStorage.removeItem('visitRequests');
+            localStorage.removeItem('visitAttempts');
+            localStorage.removeItem('modalInteractions');
+            showNotification('Visit history cleared', 'info');
+        }
+
+        function updateVisitHistoryDisplay() {
+            const history = getVisitHistory();
+            const attempts = getVisitAttempts();
+            
+            // Update analytics if available
+            if (typeof updateVisitStats === 'function') {
+                updateVisitStats(history, attempts);
+            }
+        }
+
+        function exportVisitData() {
+            const data = {
+                visitRequests: getVisitHistory(),
+                visitAttempts: getVisitAttempts(),
+                modalInteractions: getModalInteractions(),
+                userPreferences: loadUserPreferences(),
+                exportDate: new Date().toISOString()
+            };
+            
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `visit-data-${new Date().toISOString().split('T')[0]}.json`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            showNotification('Visit data exported successfully', 'success');
+        }
+
+        function showVisitHistory() {
+            const history = getVisitHistory();
+            const attempts = getVisitAttempts();
+            
+            let historyHtml = '<div class="visit-history-modal">';
+            historyHtml += '<h4>Visit History</h4>';
+            
+            if (history.length === 0 && attempts.length === 0) {
+                historyHtml += '<p>No visit history found.</p>';
+            } else {
+                // Show submitted requests
+                if (history.length > 0) {
+                    historyHtml += '<h5>Submitted Requests</h5>';
+                    history.forEach((request, index) => {
+                        historyHtml += `
+                            <div class="visit-item">
+                                <strong>${request.name}</strong><br>
+                                <small>Date: ${request.visitor_data.visit_date} at ${request.visitor_data.visit_time}</small><br>
+                                <small>Status: ${request.status}</small>
+                            </div>
+                        `;
+                    });
+                }
+                
+                // Show visit attempts
+                if (attempts.length > 0) {
+                    historyHtml += '<h5>Visit Attempts</h5>';
+                    attempts.forEach((attempt, index) => {
+                        historyHtml += `
+                            <div class="visit-item">
+                                <strong>${attempt.name}</strong><br>
+                                <small>Attempted: ${new Date(attempt.attempt_time).toLocaleDateString()}</small>
+                            </div>
+                        `;
+                    });
+                }
+            }
+            
+            historyHtml += '</div>';
+            
+            // Show in modal or notification
+            showNotification(historyHtml, 'info', 10000);
+        }
+
+        // Initialize localStorage data on page load
+        function initializeLocalStorage() {
+            loadUserPreferences();
+            updateVisitHistoryDisplay();
+        }
+
+        // Call initialization
+        initializeLocalStorage();
+        
+        function searchProperties() {
+            const propertyType = document.getElementById('propertyType').value;
+            const minPrice = document.getElementById('minPrice').value;
+            const maxPrice = document.getElementById('maxPrice').value;
+            
+            // Track search
+            trackActivity('property_search', {
+                property_type: propertyType,
+                min_price: minPrice,
+                max_price: maxPrice
+            });
+            
+            // Filter properties
+            let filtered = allProperties;
+            
+            if (propertyType) {
+                filtered = filtered.filter(p => p.typeName === propertyType);
+            }
+            if (minPrice) {
+                filtered = filtered.filter(p => p.marketValue >= parseInt(minPrice));
+            }
+            if (maxPrice) {
+                filtered = filtered.filter(p => p.marketValue <= parseInt(maxPrice));
+            }
+            
+            renderProperties(filtered);
+        }
+        
+        function loadMoreProperties() {
+            currentPage++;
+            loadProperties(currentPage, true);
+        }
+        
+        function showFloatingEmail() {
+            const emailDiv = document.getElementById('floatingEmail');
+            if (emailDiv) {
+                emailDiv.classList.remove('hidden');
+            emailDiv.classList.add('show');
+                console.log('Email form shown');
+            }
+        }
+        
+        function hideFloatingEmail() {
+            const emailDiv = document.getElementById('floatingEmail');
+            if (emailDiv) {
+            emailDiv.classList.remove('show');
+                emailDiv.classList.add('hidden');
+            }
+        }
+
+        // Show email form immediately on page load
+        function showEmailFormImmediately() {
+            setTimeout(() => {
+                showFloatingEmail();
+            }, 1000);
+        }
+        
+        function toggleDarkMode() {
+            isDarkMode = !isDarkMode;
+            document.body.classList.toggle('dark-mode', isDarkMode);
+            
+            const icon = document.getElementById('darkModeIcon');
+            icon.className = isDarkMode ? 'fas fa-sun' : 'fas fa-moon';
+            
+            localStorage.setItem('darkMode', isDarkMode);
+        }
+        
+        function showLoading(show) {
+            const spinner = document.getElementById('loadingSpinner');
+            const grid = document.getElementById('propertyGrid');
+            
+            if (show) {
+                spinner.style.display = 'block';
+                grid.style.display = 'none';
+            } else {
+                spinner.style.display = 'none';
+                grid.style.display = 'grid';
+            }
+        }
+        
+        function showError(message) {
+            // Implement error notification
+            console.error(message);
+        }
+        
+        // Show notification
+        function showNotification(message, type = 'info') {
+            const notification = document.createElement('div');
+            notification.className = `alert alert-${type} alert-dismissible fade show`;
+            notification.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                z-index: 9999;
+                min-width: 300px;
+                max-width: 400px;
+            `;
+            notification.innerHTML = `
+                ${message}
+                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+            `;
+            
+            document.body.appendChild(notification);
+            
+            // Auto-remove after 3 seconds
+            setTimeout(() => {
+                if (notification.parentNode) {
+                    notification.remove();
+                }
+            }, 3000);
+        }
+        
+        // Track user activity
+        function trackActivity(actionType, actionData = {}) {
+            // Get or create session ID
+            let sessionId = localStorage.getItem('userSessionId');
+            if (!sessionId) {
+                sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+                localStorage.setItem('userSessionId', sessionId);
+            }
+            
+            // Get current user tracking data
+            let userTrackingData = JSON.parse(localStorage.getItem('userTrackingData') || '{}');
+            
+            // Initialize tracking data structure if not exists
+            if (!userTrackingData.clickedProperties) userTrackingData.clickedProperties = [];
+            if (!userTrackingData.detailedViews) userTrackingData.detailedViews = [];
+            if (!userTrackingData.searchHistory) userTrackingData.searchHistory = [];
+            if (!userTrackingData.features) userTrackingData.features = [];
+            if (!userTrackingData.priceRanges) userTrackingData.priceRanges = [];
+            if (!userTrackingData.propertyTypes) userTrackingData.propertyTypes = [];
+            
+            // Track based on action type
+            switch (actionType) {
+                case 'property_click':
+                    console.log('🔵 Property CLICK tracked:', actionData.property?.propertyName);
+                    showNotification(`✅ Click tracked: ${actionData.property?.propertyName}`, 'success');
+                    
+                    if (actionData.property) {
+                        // Check if this property is already in clickedProperties to avoid duplicates
+                        const existingClick = userTrackingData.clickedProperties.find(p => parseInt(p.id) === parseInt(actionData.property.id));
+                        if (!existingClick) {
+                            userTrackingData.clickedProperties.push({
+                                id: actionData.property.id,
+                                name: actionData.property.propertyName,
+                                type: actionData.property.typeName,
+                                price: actionData.property.marketValue,
+                                timestamp: new Date().toISOString()
+                            });
+                            console.log('✅ Added to clickedProperties:', actionData.property.propertyName);
+                        } else {
+                            console.log('⚠️ Property already in clickedProperties:', actionData.property.propertyName);
+                        }
+                        
+                        // Track property type (avoid duplicates)
+                        if (actionData.property.typeName) {
+                            if (!userTrackingData.propertyTypes.includes(actionData.property.typeName)) {
+                                userTrackingData.propertyTypes.push(actionData.property.typeName);
+                            }
+                        }
+                        
+                        // Track price range (avoid duplicates)
+                        if (actionData.property.marketValue) {
+                            const price = actionData.property.marketValue;
+                            let priceRange = '';
+                            if (price <= 500000) priceRange = '0-500000';
+                            else if (price <= 1000000) priceRange = '500000-1000000';
+                            else if (price <= 2000000) priceRange = '1000000-2000000';
+                            else if (price <= 5000000) priceRange = '2000000-5000000';
+                            else if (price <= 10000000) priceRange = '5000000-10000000';
+                            else priceRange = '10000000+';
+                            
+                            if (!userTrackingData.priceRanges.includes(priceRange)) {
+                                userTrackingData.priceRanges.push(priceRange);
+                            }
+                        }
+                    }
+                    break;
+                    
+                case 'click':
+                    if (actionData.property) {
+                        userTrackingData.clickedProperties.push({
+                            id: actionData.property.id,
+                            name: actionData.property.propertyName,
+                            type: actionData.property.typeName,
+                            price: actionData.property.marketValue,
+                            timestamp: new Date().toISOString()
+                        });
+                    }
+                    break;
+                    
+                case 'detailed_view':
+                    console.log('🟢 Property DETAILED VIEW tracked:', actionData.property?.propertyName, 'Duration:', actionData.duration, 'seconds');
+                    showNotification(`👁️ Detailed view tracked: ${actionData.property?.propertyName} (${actionData.duration}s)`, 'info');
+                    
+                    if (actionData.property) {
+                        const existingView = userTrackingData.detailedViews.find(
+                            view => parseInt(view.propertyId) === parseInt(actionData.property.id)
+                        );
+                        
+                        if (existingView) {
+                            existingView.totalDuration += actionData.duration || 0;
+                            existingView.viewCount += 1;
+                            existingView.lastViewed = new Date().toISOString();
+                            console.log('✅ Updated existing detailed view:', actionData.property.propertyName, 'Duration:', actionData.duration, 'Total:', existingView.totalDuration);
+                        } else {
+                            userTrackingData.detailedViews.push({
+                                propertyId: actionData.property.id,
+                                propertyName: actionData.property.propertyName,
+                                propertyType: actionData.property.typeName,
+                                price: actionData.property.marketValue,
+                                totalDuration: actionData.duration || 0,
+                                viewCount: 1,
+                                lastViewed: new Date().toISOString()
+                            });
+                            console.log('✅ Added new detailed view:', actionData.property.propertyName, 'Duration:', actionData.duration);
+                        }
+                    }
+                    break;
+                    
+                case 'search':
+                    userTrackingData.searchHistory.push({
+                        query: actionData.query || '',
+                        filters: actionData.filters || {},
+                        timestamp: new Date().toISOString()
+                    });
+                    break;
+                    
+                case 'feature_click':
+                    if (actionData.feature && !userTrackingData.features.includes(actionData.feature)) {
+                        userTrackingData.features.push(actionData.feature);
+                    }
+                    break;
+                    
+                case 'price_range_select':
+                    if (actionData.priceRange) {
+                        userTrackingData.priceRanges.push(actionData.priceRange);
+                    }
+                    break;
+                    
+                case 'property_type_select':
+                    if (actionData.propertyType) {
+                        userTrackingData.propertyTypes.push(actionData.propertyType);
+                    }
+                    break;
+            }
+            
+            // Save updated tracking data
+            localStorage.setItem('userTrackingData', JSON.stringify(userTrackingData));
+            
+            // Send to server
+            fetch('/api/track', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    session_id: sessionId,
+                    action_type: actionType,
+                    action_data: actionData,
+                    user_id: sessionId,
+                    email: userEmail
+                })
+            }).catch(error => {
+                console.error('Error tracking activity:', error);
+            });
+        }
+        
+        // Enhanced property click tracking
+        function trackPropertyClick(property) {
+            trackActivity('click', { property: property });
+            
+            // Track property type preference
+            if (property.typeName) {
+                trackActivity('property_type_select', { propertyType: property.typeName });
+            }
+            
+            // Track price range preference
+            if (property.marketValue) {
+                const priceRange = getPriceRange(property.marketValue);
+                trackActivity('price_range_select', { priceRange: priceRange });
+            }
+        }
+        
+        // Track detailed view with duration
+        function trackDetailedView(property, duration = 0) {
+            trackActivity('detailed_view', { 
+                property: property, 
+                duration: duration 
+            });
+        }
+        
+        // Track search activity
+        function trackSearch(query, filters = {}) {
+            trackActivity('search', { 
+                query: query, 
+                filters: filters 
+            });
+        }
+        
+        // Track feature interest
+        function trackFeatureInterest(feature) {
+            trackActivity('feature_click', { feature: feature });
+        }
+        
+        // Get price range category
+        function getPriceRange(price) {
+            if (price <= 500000) return '0-500000';
+            if (price <= 1000000) return '500000-1000000';
+            if (price <= 2000000) return '1000000-2000000';
+            if (price <= 5000000) return '2000000-5000000';
+            if (price <= 10000000) return '5000000-10000000';
+            return '10000000+';
+        }
+        
+        // Get user tracking data
+        function getUserTrackingData() {
+            return JSON.parse(localStorage.getItem('userTrackingData') || '{}');
+        }
+        
+        // Clear user tracking data
+        function clearUserTrackingData() {
+            localStorage.removeItem('userTrackingData');
+            localStorage.removeItem('userSessionId');
+            console.log('User tracking data cleared');
+        }
+        
+        // Export user tracking data
+        function exportUserTrackingData() {
+            const data = getUserTrackingData();
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'user_tracking_data.json';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+        
+        // Enhanced property card creation with tracking
+        function createPropertyCard(property) {
+            const card = document.createElement('div');
+            card.className = 'property-card';
+            card.onclick = () => viewProperty(property);
+            
+            const features = property.features || [];
+            // Use property images if available, otherwise show no image
+            const images = property.propertyImages || [];
+            
+            card.innerHTML = `
+                <div class="position-relative">
+                    ${images.length > 0 ? `
+                        <img src="${images[0]}" 
+                             alt="${property.propertyName}" 
+                             class="property-image"
+                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                    ` : ''}
+                    <div class="property-badge">${property.typeName || 'Property'}</div>
+                    ${images.length === 0 ? `
+                        <div class="no-image-placeholder" style="width: 100%; height: 250px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px;">
+                            <i class="fas fa-home me-2"></i>${property.propertyName || 'Property'}
+                        </div>
+                    ` : ''}
+                </div>
+                <div class="property-content">
+                    <h5 class="property-title">${property.propertyName || 'Property'}</h5>
+                    <div class="property-price">₹${(property.marketValue || 0).toLocaleString()}</div>
+                    <div class="property-location">
+                        <i class="fas fa-map-marker-alt me-2"></i>
+                        ${property.address || 'Location not specified'}
+                    </div>
+                    <div class="property-features">
+                        ${features.slice(0, 3).map(feature => 
+                            `<span class="feature-tag available">${feature}</span>`
+                        ).join('')}
+                        ${features.length > 3 ? `<span class="feature-tag">+${features.length - 3} more</span>` : ''}
+                    </div>
+                    <div class="property-actions">
+                        <button class="btn-action btn-primary-custom" onclick="event.stopPropagation(); scheduleVisit('${property.id}', '${property.propertyName}', '${property.marketValue}', '${property.typeName}', '${property.address}')">
+                            <i class="fas fa-calendar me-2"></i>Schedule Visit
+                        </button>
+                        <button class="btn-action btn-outline-custom" onclick="event.stopPropagation(); contactAgent('${property.id}')">
+                            <i class="fas fa-phone me-2"></i>Contact
+                        </button>
+                    </div>
+                </div>
+            `;
+            
+            return card;
+        }
+        
+        // Enhanced visit request with tracking
+        function requestVisit(propertyId) {
+            const property = allProperties.find(p => p.id === propertyId);
+            if (!property) return;
+            
+            // Track visit request
+            trackActivity('visit_request', { 
+                property: property,
+                action: 'visit_request_initiated'
+            });
+            
+            // Show visit request modal
+            showVisitRequestModal(property);
+        }
+        
+        // Enhanced view details with tracking
+        function viewDetails(propertyId) {
+            const property = allProperties.find(p => p.id === propertyId);
+            if (!property) return;
+            
+            // Track detailed view with default duration
+            trackDetailedView(property, 10); // Assume 10 seconds for button click
+            
+            // Show property details modal
+            showPropertyDetailsModal(property);
+        }
+
+        // Property details modal with duration tracking
+        let propertyModalOpenTime = null;
+        let currentPropertyInModal = null;
+
+        function showPropertyDetailsModal(property) {
+            console.log('🟢 Opening modal for:', property.propertyName);
+            console.log('🟢 Property data:', property);
+            
+            currentPropertyInModal = property;
+            propertyModalOpenTime = Date.now();
+            
+            // Set modal content
+            document.getElementById('detailPropertyName').textContent = property.propertyName || 'Property';
+            document.getElementById('detailPropertyPrice').textContent = `₹${parseInt(property.marketValue || 0).toLocaleString()}`;
+            document.getElementById('detailPropertyType').textContent = property.typeName || 'Property';
+            document.getElementById('detailPropertyAddress').textContent = property.address || 'Location not specified';
+            document.getElementById('detailPropertyBeds').textContent = property.beds || 'N/A';
+            document.getElementById('detailPropertyBaths').textContent = property.baths || 'N/A';
+            document.getElementById('detailPropertySize').textContent = `${property.totalSquareFeet || 0} sq ft`;
+            
+            // Load property images
+            const imagesContainer = document.getElementById('propertyImages');
+            // Use property images if available
+            const validImages = property.propertyImages || [];
+            
+            if (validImages && validImages.length > 0) {
+                imagesContainer.innerHTML = `
+                    <div id="propertyImageCarousel" class="carousel slide" data-bs-ride="carousel">
+                        <div class="carousel-inner">
+                            ${validImages.map((img, index) => `
+                                <div class="carousel-item ${index === 0 ? 'active' : ''}">
+                                    <img src="${img}" class="d-block w-100" style="height: 400px; object-fit: cover;" alt="Property Image" 
+                                         onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                                    <div class="text-center py-5" style="display: none; height: 400px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white;">
+                                        <div>
+                                            <i class="fas fa-image fa-3x mb-3"></i>
+                                            <p class="mb-0">Image not available</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            `).join('')}
+                        </div>
+                        ${validImages.length > 1 ? `
+                            <button class="carousel-control-prev" type="button" data-bs-target="#propertyImageCarousel" data-bs-slide="prev">
+                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Previous</span>
+                            </button>
+                            <button class="carousel-control-next" type="button" data-bs-target="#propertyImageCarousel" data-bs-slide="next">
+                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Next</span>
+                            </button>
+                        ` : ''}
+                    </div>
+                `;
+            } else {
+                imagesContainer.innerHTML = `
+                    <div class="text-center py-5">
+                        <i class="fas fa-image fa-3x text-muted mb-3"></i>
+                        <p class="text-muted">No images available</p>
+                    </div>
+                `;
+            }
+            
+            // Load property description
+            const descriptionContainer = document.getElementById('propertyDescription');
+            descriptionContainer.innerHTML = `
+                <h5>Description</h5>
+                <p>${property.description || 'No description available'}</p>
+            `;
+            
+            // Load property features
+            const featuresContainer = document.getElementById('detailPropertyFeatures');
+            if (property.features && Object.keys(property.features).length > 0) {
+                const featuresList = Object.keys(property.features).map(feature => 
+                    `<span class="badge bg-primary me-2 mb-2">${feature}</span>`
+                ).join('');
+                featuresContainer.innerHTML = featuresList;
+            } else {
+                featuresContainer.innerHTML = '<p class="text-muted">No features listed</p>';
+            }
+            
+            // Track modal open
+            trackActivity('property_details_modal_open', {
+                property_id: property.id,
+                property_name: property.propertyName,
+                property_type: property.typeName,
+                property_price: property.marketValue,
+                timestamp: new Date().toISOString()
+            });
+            
+            // Show modal
+            const modalElement = document.getElementById('propertyDetailsModal');
+            if (modalElement) {
+                console.log('🟢 Modal element found:', modalElement);
+                const propertyModal = new bootstrap.Modal(modalElement);
+                propertyModal.show();
+                console.log('✅ Modal should now be visible');
+                
+                // Show notification that modal opened
+                showNotification(`🔍 Modal opened: ${property.propertyName}`, 'info');
+            } else {
+                console.error('❌ Modal element not found!');
+                showNotification('❌ Modal element not found! Check console for details.', 'danger');
+                console.log('🟢 Available elements with "modal" in ID:');
+                document.querySelectorAll('[id*="modal"]').forEach(el => {
+                    console.log('  -', el.id);
+                });
+            }
+            
+            // Track modal duration when closed
+            document.getElementById('propertyDetailsModal').addEventListener('hidden.bs.modal', function() {
+                if (propertyModalOpenTime && currentPropertyInModal) {
+                    const duration = Date.now() - propertyModalOpenTime;
+                    const durationSeconds = Math.round(duration / 1000);
+                    
+                    // Track detailed view with actual duration
+                    trackActivity('detailed_view', {
+                        property: currentPropertyInModal,
+                        duration: durationSeconds
+                    });
+                    
+                    // Track modal close
+                    trackActivity('property_details_modal_close', {
+                        property_id: currentPropertyInModal.id,
+                        property_name: currentPropertyInModal.propertyName,
+                        duration_seconds: durationSeconds,
+                        timestamp: new Date().toISOString()
+                    });
+                    
+                    console.log(`Property details viewed: ${currentPropertyInModal.propertyName} for ${durationSeconds} seconds`);
+                    
+                    propertyModalOpenTime = null;
+                    currentPropertyInModal = null;
+                }
+            }, { once: true }); // Use once: true to prevent multiple event listeners
+        }
+
+        function openVisitModalFromDetails() {
+            if (currentPropertyInModal) {
+                // Close property details modal
+                const propertyModal = bootstrap.Modal.getInstance(document.getElementById('propertyDetailsModal'));
+                propertyModal.hide();
+                
+                // Open visit modal with current property
+                openVisitModal(
+                    currentPropertyInModal.id,
+                    currentPropertyInModal.propertyName,
+                    currentPropertyInModal.marketValue,
+                    currentPropertyInModal.typeName,
+                    currentPropertyInModal.address
+                );
+            }
+        }
+
+        function addToFavorites() {
+            if (currentPropertyInModal) {
+                // Add to favorites logic
+                const favorites = JSON.parse(localStorage.getItem('favorites') || '[]');
+                const existingIndex = favorites.findIndex(f => f.id === currentPropertyInModal.id);
+                
+                if (existingIndex === -1) {
+                    favorites.push(currentPropertyInModal);
+                    localStorage.setItem('favorites', JSON.stringify(favorites));
+                    alert('Added to favorites!');
+                    
+                    // Track favorite action
+                    trackActivity('property_added_to_favorites', {
+                        property_id: currentPropertyInModal.id,
+                        property_name: currentPropertyInModal.propertyName
+                    });
+                } else {
+                    alert('Already in favorites!');
+                }
+            }
+        }
+
+        function shareProperty() {
+            if (currentPropertyInModal) {
+                // Share property logic
+                const shareText = `Check out this property: ${currentPropertyInModal.propertyName} - ₹${parseInt(currentPropertyInModal.marketValue || 0).toLocaleString()}`;
+                
+                if (navigator.share) {
+                    navigator.share({
+                        title: currentPropertyInModal.propertyName,
+                        text: shareText,
+                        url: window.location.href
+                    });
+                } else {
+                    // Fallback: copy to clipboard
+                    navigator.clipboard.writeText(shareText).then(() => {
+                        alert('Property link copied to clipboard!');
+                    });
+                }
+                
+                // Track share action
+                trackActivity('property_shared', {
+                    property_id: currentPropertyInModal.id,
+                    property_name: currentPropertyInModal.propertyName
+                });
+            }
+        }
+        
+        // Track scroll depth with enhanced analytics
+        let maxScrollDepth = 0;
+        let scrollStartTime = Date.now();
+        
+        window.addEventListener('scroll', () => {
+            const scrollDepth = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
+            if (scrollDepth > maxScrollDepth) {
+                maxScrollDepth = scrollDepth;
+                
+                // Track scroll depth every 10%
+                if (scrollDepth % 10 === 0) {
+                    trackActivity('scroll_depth', { 
+                        depth: scrollDepth,
+                        max_depth: maxScrollDepth,
+                        time_spent: Math.round((Date.now() - scrollStartTime) / 1000)
+                    });
+                }
+            }
+        });
+        
+        // Track time spent with enhanced analytics
+        let startTime = Date.now();
+        let lastTrackedTime = 0;
+        
+        setInterval(() => {
+            const timeSpent = Math.round((Date.now() - startTime) / 1000);
+            
+            // Track every minute
+            if (timeSpent >= lastTrackedTime + 60) {
+                trackActivity('time_spent', { 
+                    duration: timeSpent,
+                    session_duration: timeSpent
+                });
+                lastTrackedTime = timeSpent;
+            }
+        }, 60000);
+        
+        // Track page load and session start
+        document.addEventListener('DOMContentLoaded', () => {
+            trackActivity('page_load', {
+                page: 'home',
+                timestamp: new Date().toISOString()
+            });
+        });
+        
+        // Track search functionality
+        function performSearch() {
+            const searchQuery = document.getElementById('searchInput').value;
+            const propertyType = document.getElementById('propertyTypeFilter').value;
+            const minPrice = document.getElementById('minPriceFilter').value;
+            const maxPrice = document.getElementById('maxPriceFilter').value;
+            
+            const filters = {
+                propertyType: propertyType,
+                minPrice: minPrice,
+                maxPrice: maxPrice
+            };
+            
+            // Track search activity
+            trackSearch(searchQuery, filters);
+            
+            // Perform search
+            filterProperties();
+        }
+        
+        // Enhanced email form submission with tracking
+        document.getElementById('emailForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            
+            const email = document.getElementById('userEmail').value;
+            userEmail = email;
+            
+            // Track email submission
+            trackActivity('email_submit', { 
+                email: email,
+                timestamp: new Date().toISOString()
+            });
+            
+            try {
+                const userTrackingData = getUserTrackingData();
+                const sessionId = localStorage.getItem('userSessionId');
+                
+                const response = await fetch('/api/send-recommendations', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ 
+                        email: email,
+                        session_id: sessionId,
+                        user_tracking_data: userTrackingData
+                    })
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    alert('Recommendations sent to your email!');
+                    hideFloatingEmail();
+                    
+                    // Track successful email send
+                    trackActivity('email_sent_success', { 
+                        email: email,
+                        recommendations_count: data.recommendations?.length || 0
+                    });
+                    
+                    // Load recommendations
+                    loadRecommendations();
+                } else {
+                    alert('Failed to send recommendations. Please try again.');
+                    
+                    // Track failed email send
+                    trackActivity('email_sent_failed', { 
+                        email: email,
+                        error: data.error
+                    });
+                }
+                
+            } catch (error) {
+                console.error('Error sending recommendations:', error);
+                alert('Failed to send recommendations. Please try again.');
+                
+                // Track error
+                trackActivity('email_sent_error', { 
+                    email: email,
+                    error: error.message
+                });
+            }
+        });
+        
+        // Enhanced recommendations loading with tracking
+        async function loadRecommendations() {
+            try {
+                const sessionId = localStorage.getItem('userSessionId');
+                const userTrackingData = getUserTrackingData();
+                
+                const params = new URLSearchParams({
+                    email: userEmail,
+                    session_id: sessionId
+                });
+                
+                const response = await fetch(`/api/recommendations?${params}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        user_tracking_data: userTrackingData
+                    })
+                });
+                
+                const data = await response.json();
+                
+                if (data.success && data.recommendations) {
+                    renderRecommendations(data.recommendations);
+                    updateStats(data.user_preferences);
+                    
+                    // Track recommendations loaded
+                    trackActivity('recommendations_loaded', {
+                        count: data.recommendations.length,
+                        user_preferences: data.user_preferences
+                    });
+                }
+                
+            } catch (error) {
+                console.error('Error loading recommendations:', error);
+                
+                // Track error
+                trackActivity('recommendations_error', {
+                    error: error.message
+                });
+            }
+        }
+        
+        // Enhanced stats update with tracking data
+        function updateStats(preferences) {
+            const userTrackingData = getUserTrackingData();
+            
+            document.getElementById('propertiesViewed').textContent = preferences.total_properties_viewed || 0;
+            document.getElementById('timeSpent').textContent = Math.round((preferences.total_time_spent || 0) / 60);
+            
+            // Update visit requests count
+            const visitHistory = getVisitHistory();
+            document.getElementById('visitRequests').textContent = visitHistory.length;
+            
+            // Get lead score with tracking
+            if (userEmail) {
+                fetch(`/api/lead-qualification?email=${userEmail}`)
+                    .then(response => response.json())
+                    .then(data => {
+                        document.getElementById('leadScore').textContent = data.lead_score || 0;
+                        
+                        // Track lead score update
+                        trackActivity('lead_score_updated', {
+                            score: data.lead_score,
+                            status: data.lead_status
+                        });
+                    })
+                    .catch(error => {
+                        console.error('Error getting lead score:', error);
+                    });
+            }
+            
+            // Track stats update
+            trackActivity('stats_updated', {
+                properties_viewed: preferences.total_properties_viewed,
+                time_spent: preferences.total_time_spent,
+                visit_requests: visitHistory.length
+            });
+        }
+
+        function updateVisitStats(history, attempts) {
+            // Update visit requests count
+            document.getElementById('visitRequests').textContent = history.length;
+            
+            // Calculate average modal duration
+            const interactions = getModalInteractions();
+            const avgDuration = interactions.length > 0 
+                ? Math.round(interactions.reduce((sum, i) => sum + i.duration, 0) / interactions.length / 1000)
+                : 0;
+            
+            // Track visit analytics
+            trackActivity('visit_analytics_updated', {
+                total_requests: history.length,
+                total_attempts: attempts.length,
+                total_interactions: interactions.length,
+                average_modal_duration: avgDuration
+            });
+            
+            // Show visit analytics in console for debugging
+            console.log('Visit Analytics:', {
+                totalRequests: history.length,
+                totalAttempts: attempts.length,
+                totalInteractions: interactions.length,
+                averageModalDuration: avgDuration + ' seconds'
+            });
+        }
+        
+        // Add automatic detailed view tracking for property cards
+        function addDetailedViewTracking() {
+            const propertyCards = document.querySelectorAll('.property-card');
+            propertyCards.forEach(card => {
+                let viewStartTime = null;
+                
+                card.addEventListener('mouseenter', () => {
+                    viewStartTime = Date.now();
+                });
+                
+                card.addEventListener('mouseleave', () => {
+                    if (viewStartTime) {
+                        const duration = Math.round((Date.now() - viewStartTime) / 1000);
+                        if (duration >= 2) { // Track if viewed for at least 2 seconds
+                            const propertyId = card.getAttribute('data-property-id');
+                            const property = allProperties.find(p => p.id == propertyId);
+                            if (property) {
+                                trackDetailedView(property, duration);
+                                console.log(`Auto-tracked detailed view: ${property.propertyName} for ${duration}s`);
+                            }
+                        }
+                        viewStartTime = null;
+                    }
+                });
+            });
+        }
+        
+        // Call this function after properties are loaded
+        function initializeDetailedViewTracking() {
+            setTimeout(() => {
+                addDetailedViewTracking();
+            }, 1000); // Wait for properties to load
+        }
+
+        // Test functions for debugging
+        function testPropertyClick() {
+            console.log('🧪 Testing property click...');
+            
+            // Create a test property
+            const testProperty = {
+                id: 999,
+                propertyName: 'Test Property',
+                typeName: 'Villa',
+                marketValue: 5000000,
+                beds: 3,
+                baths: 2,
+                totalSquareFeet: 2000,
+                numberOfRooms: 4,
+                address: 'Test Address, Test City',
+                description: 'This is a test property for debugging purposes.',
+                propertyImages: [],
+                features: ['parking', 'garden', 'security']
+            };
+            
+            console.log('🧪 Test property created:', testProperty);
+            
+            // Simulate property click
+            viewProperty(testProperty);
+            
+            console.log('🧪 Test property click completed');
+        }
+        
+        function testModal() {
+            console.log('🧪 Testing modal...');
+            const testProperty = {
+                id: 888,
+                propertyName: 'Test Modal Property',
+                typeName: 'Apartment',
+                marketValue: 3000000,
+                beds: 2,
+                baths: 2,
+                totalSquareFeet: 1200,
+                numberOfRooms: 3,
+                address: 'Test Modal Address',
+                description: 'This is a test modal property.',
+                propertyImages: [],
+                features: ['lift', 'security', 'parking']
+            };
+            
+            showPropertyDetailsModal(testProperty);
+        }
+        
+        function showTrackingData() {
+            const userTrackingData = getUserTrackingData();
+            console.log('📊 Current Tracking Data:');
+            console.log('Clicked Properties:', userTrackingData.clickedProperties);
+            console.log('Detailed Views:', userTrackingData.detailedViews);
+            console.log('Property Types:', userTrackingData.propertyTypes);
+            console.log('Price Ranges:', userTrackingData.priceRanges);
+            console.log('Full Data:', userTrackingData);
+            
+            showNotification(`📊 Clicked: ${userTrackingData.clickedProperties?.length || 0}, Views: ${userTrackingData.detailedViews?.length || 0}`, 'info');
+        }
+        
+        function clearTrackingData() {
+            localStorage.removeItem('userTrackingData');
+            localStorage.removeItem('userSessionId');
+            console.log('✅ Tracking data cleared');
+            showNotification('✅ Tracking data cleared', 'success');
+        }
+    </script>
+</body>
+</html> 

templates/templates/lead_analysis.html

@@ -0,0 +1,796 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lead Analysis Dashboard</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/index.min.js"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        .header {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+
+        .header p {
+            font-size: 1.1em;
+            opacity: 0.9;
+        }
+
+        .search-section {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .search-form {
+            display: flex;
+            gap: 15px;
+            align-items: end;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+
+        .input-group {
+            display: flex;
+            flex-direction: column;
+            min-width: 200px;
+        }
+
+        .input-group label {
+            font-weight: 600;
+            margin-bottom: 5px;
+            color: #555;
+        }
+
+        .input-group input {
+            padding: 12px 15px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            transition: all 0.3s ease;
+        }
+
+        .input-group input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .btn {
+            padding: 12px 25px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: white;
+            font-size: 18px;
+        }
+
+        .error {
+            background: #ff6b6b;
+            color: white;
+            padding: 20px;
+            border-radius: 10px;
+            margin: 20px 0;
+            text-align: center;
+        }
+
+        .results-section {
+            display: none;
+        }
+
+        .lead-status {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .status-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+
+        .status-badge {
+            padding: 10px 20px;
+            border-radius: 25px;
+            font-weight: bold;
+            font-size: 16px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .lead-score {
+            text-align: center;
+        }
+
+        .score-circle {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 10px;
+            font-size: 24px;
+            font-weight: bold;
+            color: white;
+            background: conic-gradient(#667eea 0deg, #764ba2 360deg);
+        }
+
+        .analytics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .analytics-card {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        .card-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 15px;
+            font-size: 20px;
+            color: white;
+        }
+
+        .card-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #333;
+        }
+
+        .metric-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .metric-item:last-child {
+            border-bottom: none;
+        }
+
+        .metric-label {
+            color: #666;
+            font-weight: 500;
+        }
+
+        .metric-value {
+            font-weight: 600;
+            color: #333;
+        }
+
+        .properties-section {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .properties-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+
+        .property-card {
+            border: 2px solid #f0f0f0;
+            border-radius: 10px;
+            padding: 20px;
+            transition: all 0.3s ease;
+        }
+
+        .property-card:hover {
+            border-color: #667eea;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+
+        .property-name {
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 10px;
+        }
+
+        .property-price {
+            font-size: 18px;
+            font-weight: bold;
+            color: #667eea;
+            margin-bottom: 10px;
+        }
+
+        .property-stats {
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .recommendations {
+            background: white;
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+
+        .recommendation-item {
+            background: #f8f9ff;
+            border-left: 4px solid #667eea;
+            padding: 15px;
+            margin-bottom: 10px;
+            border-radius: 5px;
+        }
+
+        .chart-container {
+            position: relative;
+            height: 300px;
+            margin-top: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .search-form {
+                flex-direction: column;
+                align-items: stretch;
+            }
+
+            .input-group {
+                min-width: auto;
+            }
+
+            .status-header {
+                flex-direction: column;
+                text-align: center;
+            }
+
+            .analytics-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .fade-in {
+            animation: fadeIn 0.6s ease-in-out;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🎯 Lead Analysis Dashboard</h1>
+            <p>Comprehensive Customer Behavior Analytics & Lead Qualification</p>
+        </div>
+
+        <div class="search-section">
+            <form class="search-form" id="searchForm">
+                <div class="input-group">
+                    <label for="customerId">Customer ID</label>
+                    <input type="number" id="customerId" name="customerId" placeholder="Enter Customer ID" required 
+                           value="{{ customer_id if customer_id else '' }}">
+                </div>
+                <button type="submit" class="btn" id="searchBtn">
+                    🔍 Analyze Customer
+                </button>
+            </form>
+        </div>
+
+        <div id="loadingSection" class="loading" style="display: none;">
+            <div>🔄 Analyzing customer data...</div>
+            <div style="margin-top: 10px; font-size: 14px; opacity: 0.8;">
+                Fetching lead qualification and property analytics
+            </div>
+        </div>
+
+        <div id="errorSection" class="error" style="display: none;"></div>
+
+        <div id="resultsSection" class="results-section">
+            <!-- Lead Status Section -->
+            <div class="lead-status fade-in">
+                <div class="status-header">
+                    <div>
+                        <h2>Lead Qualification Status</h2>
+                        <div id="statusBadge" class="status-badge"></div>
+                        <p id="statusDescription" style="margin-top: 10px; color: #666;"></p>
+                    </div>
+                    <div class="lead-score">
+                        <div id="scoreCircle" class="score-circle"></div>
+                        <div>Lead Score</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Analytics Grid -->
+            <div class="analytics-grid fade-in">
+                <!-- Engagement Analytics -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: #667eea;">📊</div>
+                        <div class="card-title">Engagement Analytics</div>
+                    </div>
+                    <div id="engagementMetrics"></div>
+                    <div class="chart-container">
+                        <canvas id="engagementChart"></canvas>
+                    </div>
+                </div>
+
+                <!-- Property Preferences -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: #764ba2;">🏠</div>
+                        <div class="card-title">Property Preferences</div>
+                    </div>
+                    <div id="propertyPreferences"></div>
+                    <div class="chart-container">
+                        <canvas id="propertyChart"></canvas>
+                    </div>
+                </div>
+
+                <!-- Price Analysis -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: #f39c12;">💰</div>
+                        <div class="card-title">Price Analysis</div>
+                    </div>
+                    <div id="priceAnalysis"></div>
+                </div>
+
+                <!-- Conversion Probability -->
+                <div class="analytics-card">
+                    <div class="card-header">
+                        <div class="card-icon" style="background: #e74c3c;">🎯</div>
+                        <div class="card-title">Conversion Probability</div>
+                    </div>
+                    <div id="conversionAnalysis"></div>
+                    <div class="chart-container">
+                        <canvas id="conversionChart"></canvas>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Properties Section -->
+            <div class="properties-section fade-in">
+                <div class="card-header">
+                    <div class="card-icon" style="background: #2ecc71;">🏘️</div>
+                    <div class="card-title">Viewed Properties</div>
+                </div>
+                <div id="propertiesGrid" class="properties-grid"></div>
+            </div>
+
+            <!-- Recommendations Section -->
+            <div class="recommendations fade-in">
+                <div class="card-header">
+                    <div class="card-icon" style="background: #9b59b6;">💡</div>
+                    <div class="card-title">AI Recommendations</div>
+                </div>
+                <div id="recommendationsContent"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Global variables
+        let currentData = null;
+        let charts = {};
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            const customerId = document.getElementById('customerId').value;
+            if (customerId) {
+                fetchAnalysis(customerId);
+            }
+        });
+
+        // Form submission
+        document.getElementById('searchForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const customerId = document.getElementById('customerId').value;
+            if (customerId) {
+                fetchAnalysis(customerId);
+            }
+        });
+
+        // Fetch analysis data
+        async function fetchAnalysis(customerId) {
+            showLoading();
+            hideError();
+            hideResults();
+
+            try {
+                const response = await fetch(`/api/customer/${customerId}`);
+                const data = await response.json();
+
+                if (data.success) {
+                    currentData = data;
+                    displayResults(data);
+                    showResults();
+                } else {
+                    showError(data.error || 'Failed to fetch analysis');
+                }
+            } catch (error) {
+                showError(`Error: ${error.message}`);
+            } finally {
+                hideLoading();
+            }
+        }
+
+        // Display results
+        function displayResults(data) {
+            const leadData = data.data.lead_qualification;
+            const analytics = data.data.analytics;
+            const properties = data.data.properties;
+
+            // Update lead status
+            updateLeadStatus(leadData);
+
+            // Update analytics cards
+            updateEngagementMetrics(analytics);
+            updatePropertyPreferences(analytics);
+            updatePriceAnalysis(analytics);
+            updateConversionAnalysis(analytics);
+
+            // Update properties
+            updatePropertiesGrid(properties);
+
+            // Update recommendations
+            updateRecommendations(analytics.recommendations);
+
+            // Create charts
+            createCharts(analytics);
+        }
+
+        // Update lead status
+        function updateLeadStatus(leadData) {
+            const statusBadge = document.getElementById('statusBadge');
+            const statusDescription = document.getElementById('statusDescription');
+            const scoreCircle = document.getElementById('scoreCircle');
+
+            statusBadge.textContent = leadData.lead_status;
+            statusBadge.style.backgroundColor = leadData.status_color;
+            statusDescription.textContent = leadData.status_description;
+            scoreCircle.textContent = `${Math.round(leadData.lead_score)}/100`;
+        }
+
+        // Update engagement metrics
+        function updateEngagementMetrics(analytics) {
+            const container = document.getElementById('engagementMetrics');
+            container.innerHTML = `
+                <div class="metric-item">
+                    <span class="metric-label">Engagement Level</span>
+                    <span class="metric-value">${analytics.engagement_level}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Total Views</span>
+                    <span class="metric-value">${currentData.data.summary.total_views}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Total Duration</span>
+                    <span class="metric-value">${formatDuration(currentData.data.summary.total_duration)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Engagement Score</span>
+                    <span class="metric-value">${Math.round(currentData.data.summary.engagement_score)}</span>
+                </div>
+            `;
+        }
+
+        // Update property preferences
+        function updatePropertyPreferences(analytics) {
+            const container = document.getElementById('propertyPreferences');
+            const preferredTypes = analytics.preferred_property_types || [];
+            
+            container.innerHTML = preferredTypes.map((type, index) => `
+                <div class="metric-item">
+                    <span class="metric-label">Preference ${index + 1}</span>
+                    <span class="metric-value">${type}</span>
+                </div>
+            `).join('');
+        }
+
+        // Update price analysis
+        function updatePriceAnalysis(analytics) {
+            const container = document.getElementById('priceAnalysis');
+            const priceData = analytics.price_preferences || {};
+            
+            container.innerHTML = `
+                <div class="metric-item">
+                    <span class="metric-label">Average Price</span>
+                    <span class="metric-value">${formatPrice(priceData.avg_price || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Min Price</span>
+                    <span class="metric-value">${formatPrice(priceData.min_price || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Max Price</span>
+                    <span class="metric-value">${formatPrice(priceData.max_price || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Price Range</span>
+                    <span class="metric-value">${formatPrice(priceData.price_range || 0)}</span>
+                </div>
+            `;
+        }
+
+        // Update conversion analysis
+        function updateConversionAnalysis(analytics) {
+            const container = document.getElementById('conversionAnalysis');
+            const conversionData = analytics.conversion_probability || {};
+            
+            container.innerHTML = `
+                <div class="metric-item">
+                    <span class="metric-label">Conversion Probability</span>
+                    <span class="metric-value">${Math.round(conversionData.final_probability || 0)}%</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Confidence Level</span>
+                    <span class="metric-value">${conversionData.confidence_level || 'Unknown'}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Opportunity Score</span>
+                    <span class="metric-value">${Math.round(analytics.opportunity_score || 0)}</span>
+                </div>
+                <div class="metric-item">
+                    <span class="metric-label">Risk Level</span>
+                    <span class="metric-value">${analytics.risk_assessment?.risk_level || 'Unknown'}</span>
+                </div>
+            `;
+        }
+
+        // Update properties grid
+        function updatePropertiesGrid(properties) {
+            const container = document.getElementById('propertiesGrid');
+            
+            container.innerHTML = properties.map(property => `
+                <div class="property-card">
+                    <div class="property-name">${property.propertyName || 'Unknown Property'}</div>
+                    <div class="property-price">${formatPrice(property.price || 0)}</div>
+                    <div class="property-stats">
+                        <span>Views: ${property.viewCount || 0}</span>
+                        <span>Duration: ${formatDuration(property.totalDuration || 0)}</span>
+                        <span>Type: ${property.propertyTypeName || 'Unknown'}</span>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        // Update recommendations
+        function updateRecommendations(recommendations) {
+            const container = document.getElementById('recommendationsContent');
+            
+            if (recommendations && recommendations.length > 0) {
+                container.innerHTML = recommendations.map(rec => `
+                    <div class="recommendation-item">${rec}</div>
+                `).join('');
+            } else {
+                container.innerHTML = '<div class="recommendation-item">No specific recommendations available.</div>';
+            }
+        }
+
+        // Create charts
+        function createCharts(analytics) {
+            createEngagementChart(analytics);
+            createPropertyChart(analytics);
+            createConversionChart(analytics);
+        }
+
+        // Create engagement chart
+        function createEngagementChart(analytics) {
+            const ctx = document.getElementById('engagementChart').getContext('2d');
+            
+            if (charts.engagement) {
+                charts.engagement.destroy();
+            }
+
+            charts.engagement = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['High Engagement', 'Medium Engagement', 'Low Engagement'],
+                    datasets: [{
+                        data: [40, 35, 25], // Sample data
+                        backgroundColor: ['#667eea', '#764ba2', '#95a5a6']
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        }
+                    }
+                }
+            });
+        }
+
+        // Create property chart
+        function createPropertyChart(analytics) {
+            const ctx = document.getElementById('propertyChart').getContext('2d');
+            
+            if (charts.property) {
+                charts.property.destroy();
+            }
+
+            const propertyTypes = analytics.preferred_property_types || [];
+            const labels = propertyTypes.slice(0, 5);
+            const data = labels.map((_, i) => Math.max(1, 5 - i));
+
+            charts.property = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Interest Level',
+                        data: data,
+                        backgroundColor: '#667eea'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true
+                        }
+                    }
+                }
+            });
+        }
+
+        // Create conversion chart
+        function createConversionChart(analytics) {
+            const ctx = document.getElementById('conversionChart').getContext('2d');
+            
+            if (charts.conversion) {
+                charts.conversion.destroy();
+            }
+
+            const conversionProb = analytics.conversion_probability?.final_probability || 0;
+
+            charts.conversion = new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Conversion Probability', 'Remaining'],
+                    datasets: [{
+                        data: [conversionProb, 100 - conversionProb],
+                        backgroundColor: ['#e74c3c', '#ecf0f1'],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    cutout: '70%',
+                    plugins: {
+                        legend: {
+                            display: false
+                        }
+                    }
+                }
+            });
+        }
+
+        // Utility functions
+        function formatPrice(price) {
+            return `₹${price.toLocaleString('en-IN')}`;
+        }
+
+        function formatDuration(seconds) {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            return `${hours}h ${minutes}m`;
+        }
+
+        function showLoading() {
+            document.getElementById('loadingSection').style.display = 'block';
+            document.getElementById('searchBtn').disabled = true;
+            document.getElementById('searchBtn').textContent = '🔄 Analyzing...';
+        }
+
+        function hideLoading() {
+            document.getElementById('loadingSection').style.display = 'none';
+            document.getElementById('searchBtn').disabled = false;
+            document.getElementById('searchBtn').textContent = '🔍 Analyze Customer';
+        }
+
+        function showError(message) {
+            const errorSection = document.getElementById('errorSection');
+            errorSection.textContent = message;
+            errorSection.style.display = 'block';
+        }
+
+        function hideError() {
+            document.getElementById('errorSection').style.display = 'none';
+        }
+
+        function showResults() {
+            document.getElementById('resultsSection').style.display = 'block';
+        }
+
+        function hideResults() {
+            document.getElementById('resultsSection').style.display = 'none';
+        }
+    </script>
+</body>
+</html> 

test_email_system.py

@@ -0,0 +1,231 @@
+#!/usr/bin/env python3
+"""
+Test Email System
+Independent testing of email functionality
+"""
+
+import os
+import sys
+import time
+import logging
+import requests
+from datetime import datetime
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+def test_email_automation_service():
+    """Test the email automation service"""
+    logger.info("🧪 Testing Email Automation Service...")
+    
+    base_url = "http://localhost:5001"
+    
+    # Test health check
+    try:
+        response = requests.get(f"{base_url}/api/email/health", timeout=10)
+        if response.status_code == 200:
+            logger.info("✅ Email automation service is running")
+        else:
+            logger.error(f"❌ Email automation service health check failed: {response.status_code}")
+            return False
+    except Exception as e:
+        logger.error(f"❌ Cannot connect to email automation service: {e}")
+        return False
+    
+    # Test email sending
+    try:
+        response = requests.post(f"{base_url}/api/email/test", timeout=30)
+        if response.status_code == 200:
+            result = response.json()
+            if result.get('success'):
+                logger.info("✅ Test email sent successfully")
+                logger.info(f"📧 Recipient: {result.get('recipient')}")
+                logger.info(f"📧 Subject: {result.get('subject')}")
+                return True
+            else:
+                logger.error(f"❌ Test email failed: {result.get('error')}")
+                return False
+        else:
+            logger.error(f"❌ Test email request failed: {response.status_code}")
+            return False
+    except Exception as e:
+        logger.error(f"❌ Test email request failed: {e}")
+        return False
+
+def test_automated_email():
+    """Test automated email generation"""
+    logger.info("🧪 Testing Automated Email Generation...")
+    
+    base_url = "http://localhost:5001"
+    
+    # Test automated email for customer 105
+    test_data = {
+        'customer_id': 105,
+        'email_type': 'behavioral_trigger',
+        'recipient_email': 'sameermujahid7777@gmail.com'
+    }
+    
+    try:
+        response = requests.post(f"{base_url}/api/email/automated", 
+                               json=test_data, timeout=60)
+        if response.status_code == 200:
+            result = response.json()
+            if result.get('success'):
+                logger.info("✅ Automated email sent successfully")
+                logger.info(f"📧 Customer ID: {result.get('customer_id')}")
+                logger.info(f"📧 Email Type: {result.get('email_type')}")
+                logger.info(f"📧 Subject: {result.get('subject')}")
+                return True
+            else:
+                logger.error(f"❌ Automated email failed: {result.get('error')}")
+                return False
+        else:
+            logger.error(f"❌ Automated email request failed: {response.status_code}")
+            return False
+    except Exception as e:
+        logger.error(f"❌ Automated email request failed: {e}")
+        return False
+
+def test_api_service():
+    """Test the main API service"""
+    logger.info("🧪 Testing Main API Service...")
+    
+    base_url = "http://localhost:5000"
+    
+    # Test health check
+    try:
+        response = requests.get(f"{base_url}/api/health", timeout=10)
+        if response.status_code == 200:
+            logger.info("✅ Main API service is running")
+            return True
+        else:
+            logger.error(f"❌ Main API service health check failed: {response.status_code}")
+            return False
+    except Exception as e:
+        logger.error(f"❌ Cannot connect to main API service: {e}")
+        return False
+
+def test_customer_analysis():
+    """Test customer analysis functionality"""
+    logger.info("🧪 Testing Customer Analysis...")
+    
+    base_url = "http://localhost:5000"
+    
+    # Test customer 105 analysis
+    try:
+        response = requests.get(f"{base_url}/api/customer/105", timeout=30)
+        if response.status_code == 200:
+            result = response.json()
+            if result.get('success'):
+                logger.info("✅ Customer analysis successful")
+                lead_data = result.get('data', {}).get('lead_qualification', {})
+                logger.info(f"📊 Lead Status: {lead_data.get('lead_status')}")
+                logger.info(f"📊 Lead Score: {lead_data.get('lead_score')}")
+                return True
+            else:
+                logger.error(f"❌ Customer analysis failed: {result.get('error')}")
+                return False
+        else:
+            logger.error(f"❌ Customer analysis request failed: {response.status_code}")
+            return False
+    except Exception as e:
+        logger.error(f"❌ Customer analysis request failed: {e}")
+        return False
+
+def test_ai_analysis():
+    """Test AI analysis functionality"""
+    logger.info("🧪 Testing AI Analysis...")
+    
+    base_url = "http://localhost:5000"
+    
+    # Test AI analysis for customer 105
+    try:
+        response = requests.get(f"{base_url}/api/ai-customer/105", timeout=60)
+        if response.status_code == 200:
+            result = response.json()
+            if result.get('success'):
+                logger.info("✅ AI analysis successful")
+                ai_insights = result.get('data', {}).get('ai_insights', {})
+                logger.info(f"🧠 Personality Type: {ai_insights.get('ai_personality_type')}")
+                logger.info(f"🧠 Buying Motivation: {ai_insights.get('buying_motivation')}")
+                return True
+            else:
+                logger.error(f"❌ AI analysis failed: {result.get('error')}")
+                return False
+        else:
+            logger.error(f"❌ AI analysis request failed: {response.status_code}")
+            return False
+    except Exception as e:
+        logger.error(f"❌ AI analysis request failed: {e}")
+        return False
+
+def main():
+    """Main test function"""
+    logger.info("=" * 80)
+    logger.info("🧪 AI Lead Analysis System - Email Testing Suite")
+    logger.info("=" * 80)
+    logger.info(f"📅 Test Time: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+    logger.info("")
+    
+    # Test results
+    tests = {
+        'API Service': test_api_service,
+        'Customer Analysis': test_customer_analysis,
+        'AI Analysis': test_ai_analysis,
+        'Email Automation Service': test_email_automation_service,
+        'Test Email': test_email_automation_service,
+        'Automated Email': test_automated_email
+    }
+    
+    results = {}
+    
+    for test_name, test_func in tests.items():
+        logger.info(f"🔍 Running {test_name} test...")
+        try:
+            result = test_func()
+            results[test_name] = result
+            if result:
+                logger.info(f"✅ {test_name} test PASSED")
+            else:
+                logger.error(f"❌ {test_name} test FAILED")
+        except Exception as e:
+            logger.error(f"❌ {test_name} test ERROR: {e}")
+            results[test_name] = False
+        
+        logger.info("")
+    
+    # Summary
+    logger.info("=" * 80)
+    logger.info("📊 TEST SUMMARY")
+    logger.info("=" * 80)
+    
+    passed = sum(1 for result in results.values() if result)
+    total = len(results)
+    
+    for test_name, result in results.items():
+        status = "✅ PASSED" if result else "❌ FAILED"
+        logger.info(f"{test_name}: {status}")
+    
+    logger.info("")
+    logger.info(f"📈 Overall Result: {passed}/{total} tests passed")
+    
+    if passed == total:
+        logger.info("🎉 All tests passed! Email system is working correctly.")
+    else:
+        logger.warning("⚠️ Some tests failed. Please check the logs above.")
+    
+    logger.info("=" * 80)
+    
+    return passed == total
+
+if __name__ == "__main__":
+    try:
+        success = main()
+        sys.exit(0 if success else 1)
+    except KeyboardInterrupt:
+        logger.info("🛑 Testing interrupted by user")
+        sys.exit(1)
+    except Exception as e:
+        logger.error(f"❌ Testing failed: {e}")
+        sys.exit(1)