django-cfg 1.2.29__py3-none-any.whl → 1.2.31__py3-none-any.whl

django_cfg/apps/payments/templates/payments/dashboard.html

@@ -7,178 +7,179 @@
 {% block header_title %}Payment Dashboard{% endblock %}
 {% block header_subtitle %}Monitor and manage payment transactions in real-time{% endblock %}
 
-{% block extra_head %}
-<!-- Dashboard-specific styles -->
-<style>
-    .dashboard-grid {
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: 1.5rem;
-    }
-    
-    @media (min-width: 1024px) {
-        .dashboard-grid {
-            grid-template-columns: 2fr 1fr;
-        }
-    }
-</style>
-{% endblock %}
-
 {% block content %}
-<div class="payment-dashboard">
+<div class="space-y-6">
+    <!-- Debug Info (Collapsible) -->
+    <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg mb-6">
+        <button onclick="toggleDebug()" class="w-full px-4 py-3 text-left flex items-center justify-between text-yellow-800 dark:text-yellow-200 hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors duration-200">
+            <span class="font-medium">🐛 Debug Information</span>
+            <span id="debug-icon" class="material-icons text-sm transform transition-transform duration-200">expand_more</span>
+        </button>
+        <div id="debug-content" class="hidden px-4 pb-3 text-yellow-700 dark:text-yellow-300 text-sm">
+            <div class="space-y-1">
+                <p><strong>Payments:</strong> {{ payments|length }}</p>
+                <p><strong>Payment Stats:</strong> {{ payment_stats }}</p>
+                <p><strong>Provider Stats:</strong> {{ provider_stats|length }}</p>
+                <p><strong>Context Keys:</strong> {{ view|default:"no view" }}</p>
+            </div>
+        </div>
+    </div>
+    
     <!-- Status Overview -->
     {% include 'payments/components/status_overview.html' %}
     
     <!-- Main Dashboard Grid -->
-    <div class="dashboard-grid">
-        <!-- Left Column: Recent Payments -->
-        <div class="space-y-6">
-            <!-- Filter Controls -->
-            <div class="payment-filters">
-                <div class="flex items-center justify-between mb-4">
-                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Recent Payments</h3>
-                    <div class="flex items-center space-x-2">
-                        <select class="filter-select" id="status-filter" onchange="filterPayments()">
-                            <option value="">All Statuses</option>
-                            <option value="pending">Pending</option>
-                            <option value="confirming">Confirming</option>
-                            <option value="completed">Completed</option>
-                            <option value="failed">Failed</option>
-                        </select>
-                        <select class="filter-select" id="provider-filter" onchange="filterPayments()">
-                            <option value="">All Providers</option>
-                            <option value="nowpayments">NowPayments</option>
-                            <option value="cryptapi">CryptAPI</option>
-                            <option value="cryptomus">Cryptomus</option>
-                            <option value="stripe">Stripe</option>
-                        </select>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- Recent Payments -->
+        <div class="lg:col-span-2">
+            <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Payments</h3>
+                        <a href="/admin/django_cfg_payments/universalpayment/" 
+                           class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium">
+                            View All →
+                        </a>
                     </div>
                 </div>
                 
-                <div class="filter-group">
-                    <input type="text" 
-                           class="filter-input" 
-                           placeholder="Search by payment ID or amount..." 
-                           id="search-input"
-                           onkeyup="searchPayments(event)">
-                    <input type="date" 
-                           class="filter-input" 
-                           id="date-filter"
-                           onchange="filterPayments()">
-                    <button class="btn btn-outline btn-sm" onclick="clearFilters()">
-                        <span class="material-icons text-sm mr-1">clear</span>
-                        Clear
-                    </button>
-                </div>
-            </div>
-            
-            <!-- Payment Cards Grid -->
-            <div id="payments-grid" class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                {% if payments %}
-                    {% for payment in payments %}
-                        {% payment_card payment %}
-                    {% endfor %}
-                {% else %}
-                    <!-- Empty State -->
-                    <div class="col-span-full">
-                        <div class="text-center py-12">
-                            <span class="material-icons text-gray-400 text-6xl mb-4">payment</span>
-                            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No payments found</h3>
-                            <p class="text-gray-500 dark:text-gray-400 mb-4">Get started by creating your first payment.</p>
-                            <button class="btn btn-primary" onclick="createNewPayment()">
-                                <span class="material-icons text-sm mr-2">add</span>
-                                Create Payment
-                            </button>
-                        </div>
+                <div class="p-6">
+                    <!-- Debug: Payments Section -->
+                    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200 px-4 py-3 rounded mb-4">
+                        <strong>Payments Debug:</strong> Count={{ payments|length }}
+                        {% if payments %}
+                            <br><strong>First payment:</strong> {{ payments.0.user.email }} - ${{ payments.0.amount_usd }}
+                        {% endif %}
                     </div>
-                {% endif %}
-            </div>
-            
-            <!-- Load More Button -->
-            {% if has_more_payments %}
-            <div class="text-center">
-                <button class="btn btn-outline" id="load-more-btn" onclick="loadMorePayments()">
-                    <span class="material-icons text-sm mr-2">expand_more</span>
-                    Load More Payments
-                </button>
+                    
+                    {% if payments %}
+                        <div class="space-y-4">
+                            {% for payment in payments %}
+                            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+                                <div class="flex items-center space-x-4">
+                                    <div class="w-3 h-3 rounded-full 
+                                        {% if payment.provider == 'cryptapi' %}bg-orange-500
+                                        {% elif payment.provider == 'cryptomus' %}bg-blue-500
+                                        {% elif payment.provider == 'stripe' %}bg-purple-500
+                                        {% elif payment.provider == 'nowpayments' %}bg-green-500
+                                        {% else %}bg-gray-500{% endif %}">
+                                    </div>
+                                    <div>
+                                        <p class="text-sm font-medium text-gray-900 dark:text-white">
+                                            ${{ payment.amount_usd|floatformat:2 }}
+                                        </p>
+                                        <p class="text-xs text-gray-500 dark:text-gray-400">
+                                            {{ payment.user.email }} • {{ payment.provider|capfirst }}
+                                        </p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center space-x-3">
+                                    <span class="px-2 py-1 text-xs rounded-full bg-warning-100 text-warning-800 dark:bg-warning-900 dark:text-warning-200">
+                                        {{ payment.status|capfirst }}
+                                    </span>
+                                    <span class="text-xs text-gray-500 dark:text-gray-400">
+                                        {{ payment.created_at|timesince }} ago
+                                    </span>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    {% else %}
+                        <div class="text-center py-8">
+                            <div class="text-gray-400 mb-2">💳</div>
+                            <p class="text-gray-600 dark:text-gray-400">No payments found</p>
+                            <a href="/admin/django_cfg_payments/universalpayment/add/" 
+                               class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium">
+                                Create first payment
+                            </a>
+                        </div>
+                    {% endif %}
+                </div>
             </div>
-            {% endif %}
         </div>
         
-        <!-- Right Column: Analytics & Quick Info -->
+        <!-- Sidebar Stats -->
         <div class="space-y-6">
-            <!-- Provider Statistics -->
-            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Provider Performance</h3>
-                {% provider_statistics %}
+            <!-- Provider Performance -->
+            <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Provider Status</h4>
+                </div>
+                <div class="p-6">
+                    {% if provider_stats %}
+                        <div class="space-y-3">
+                            {% for provider in provider_stats %}
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center space-x-2">
+                                    <div class="w-2 h-2 rounded-full 
+                                        {% if provider.provider == 'cryptapi' %}bg-orange-500
+                                        {% elif provider.provider == 'cryptomus' %}bg-blue-500
+                                        {% elif provider.provider == 'stripe' %}bg-purple-500
+                                        {% elif provider.provider == 'nowpayments' %}bg-green-500
+                                        {% else %}bg-gray-500{% endif %}">
+                                    </div>
+                                    <span class="text-sm text-gray-700 dark:text-gray-300 capitalize">{{ provider.provider }}</span>
+                                </div>
+                                <span class="text-xs text-gray-500 dark:text-gray-400">
+                                    {{ provider.count|default:"0" }} payments
+                                </span>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    {% else %}
+                        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">No provider data</p>
+                    {% endif %}
+                </div>
             </div>
             
-            <!-- Recent Activity -->
-            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Recent Activity</h3>
-                <div class="space-y-3">
-                    {% for event in recent_events|slice:":5" %}
-                    <div class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700">
-                        <div class="flex-shrink-0">
-                            {% if event.event_type == 'created' %}
-                                <span class="material-icons text-blue-500">add_circle</span>
-                            {% elif event.event_type == 'completed' %}
-                                <span class="material-icons text-green-500">check_circle</span>
-                            {% elif event.event_type == 'failed' %}
-                                <span class="material-icons text-red-500">error</span>
-                            {% else %}
-                                <span class="material-icons text-gray-500">circle</span>
-                            {% endif %}
+            <!-- System Status -->
+            <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">System Status</h4>
+                </div>
+                <div class="p-6">
+                    <div class="space-y-3">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">API Status</span>
+                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                                Online
+                            </span>
                         </div>
-                        <div class="flex-1 min-w-0">
-                            <p class="text-sm font-medium text-gray-900 dark:text-white">
-                                Payment {{ event.event_type }}
-                            </p>
-                            <p class="text-xs text-gray-500 dark:text-gray-400">
-                                #{{ event.payment.internal_payment_id|default:event.payment.id|truncatechars:8 }} 
-                                • {{ event.created_at|timesince }} ago
-                            </p>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Webhook Queue</span>
+                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                                Processing
+                            </span>
                         </div>
-                        <div class="text-sm font-medium text-gray-900 dark:text-white">
-                            ${{ event.payment.amount_usd|floatformat:2 }}
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-700 dark:text-gray-300">Database</span>
+                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
+                                Connected
+                            </span>
                         </div>
                     </div>
-                    {% empty %}
-                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
-                        No recent activity
-                    </p>
-                    {% endfor %}
                 </div>
             </div>
             
-            <!-- System Status -->
-            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
-                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">System Status</h3>
-                <div class="space-y-3">
-                    <div class="flex items-center justify-between">
-                        <span class="text-sm text-gray-500 dark:text-gray-400">API Status</span>
-                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                            <span class="w-2 h-2 bg-green-500 rounded-full mr-1"></span>
-                            Online
-                        </span>
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <span class="text-sm text-gray-500 dark:text-gray-400">Webhook Queue</span>
-                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                            Processing
-                        </span>
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <span class="text-sm text-gray-500 dark:text-gray-400">Database</span>
-                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                            Connected
-                        </span>
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <span class="text-sm text-gray-500 dark:text-gray-400">Redis Cache</span>
-                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                            Active
-                        </span>
+            <!-- Quick Actions -->
+            <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+                <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+                    <h4 class="text-lg font-semibold text-gray-900 dark:text-white">Quick Actions</h4>
+                </div>
+                <div class="p-6">
+                    <div class="space-y-3">
+                        <a href="/cfg/admin/django_cfg_payments/admin/stats/" 
+                           class="block w-full text-center px-3 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white rounded-md text-sm font-medium transition-colors duration-200">
+                            View Analytics
+                        </a>
+                        <a href="/cfg/admin/django_cfg_payments/admin/test/" 
+                           class="block w-full text-center px-3 py-2 bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-600 text-white rounded-md text-sm font-medium transition-colors duration-200">
+                            Test Providers
+                        </a>
+                        <a href="/admin/django_cfg_payments/universalpayment/add/" 
+                           class="block w-full text-center px-3 py-2 border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 rounded-md text-sm font-medium transition-colors duration-200">
+                            Create Payment
+                        </a>
                     </div>
                 </div>
             </div>
@@ -189,158 +190,69 @@
 
 {% block extra_js %}
 <script>
-// Dashboard JavaScript functionality
-let currentFilters = {
-    status: '',
-    provider: '',
-    search: '',
-    date: ''
-};
-
-let currentPage = 1;
-const PAYMENTS_PER_PAGE = 10;
-
-// Filter functions
-function filterPayments() {
-    currentFilters.status = document.getElementById('status-filter').value;
-    currentFilters.provider = document.getElementById('provider-filter').value;
-    currentFilters.date = document.getElementById('date-filter').value;
+// Simplified dashboard JavaScript
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Payment Dashboard loaded');
     
-    currentPage = 1;
-    loadPayments();
-}
-
-function searchPayments(event) {
-    // Debounce search input
-    clearTimeout(window.searchTimeout);
-    window.searchTimeout = setTimeout(() => {
-        currentFilters.search = event.target.value;
-        currentPage = 1;
-        loadPayments();
-    }, 500);
-}
+    // Initialize any tooltips or interactive elements
+    initializeDashboard();
+});
 
-function clearFilters() {
-    document.getElementById('status-filter').value = '';
-    document.getElementById('provider-filter').value = '';
-    document.getElementById('search-input').value = '';
-    document.getElementById('date-filter').value = '';
+function initializeDashboard() {
+    // Add click handlers for any interactive elements
+    const copyButtons = document.querySelectorAll('[data-copy]');
+    copyButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const text = this.getAttribute('data-copy');
+            if (window.paymentUtils) {
+                window.paymentUtils.copyToClipboard(text);
+            }
+        });
+    });
     
-    currentFilters = { status: '', provider: '', search: '', date: '' };
-    currentPage = 1;
-    loadPayments();
+    // Auto-refresh timestamp every minute
+    setInterval(updateTimestamps, 60000);
 }
 
-function loadPayments() {
-    const grid = document.getElementById('payments-grid');
-    
-    // Show loading state
-    if (currentPage === 1) {
-        grid.innerHTML = '<div class="col-span-full text-center py-8"><div class="skeleton h-32 w-full"></div></div>';
-    }
-    
-    // Build query parameters
-    const params = new URLSearchParams({
-        page: currentPage,
-        page_size: PAYMENTS_PER_PAGE,
-        ...currentFilters
-    });
-    
-    // Remove empty parameters
-    for (const [key, value] of params.entries()) {
-        if (!value) {
-            params.delete(key);
+function updateTimestamps() {
+    const timestampElements = document.querySelectorAll('[data-timestamp]');
+    timestampElements.forEach(element => {
+        const timestamp = element.getAttribute('data-timestamp');
+        if (timestamp && window.paymentUtils) {
+            element.textContent = window.paymentUtils.timeAgo(timestamp);
         }
-    }
-    
-    fetch(`/api/payments/list/?${params}`)
-        .then(response => response.json())
-        .then(data => {
-            if (currentPage === 1) {
-                grid.innerHTML = '';
-            }
-            
-            if (data.results && data.results.length > 0) {
-                data.results.forEach(payment => {
-                    const cardHtml = renderPaymentCard(payment);
-                    grid.insertAdjacentHTML('beforeend', cardHtml);
-                });
-                
-                // Update load more button
-                const loadMoreBtn = document.getElementById('load-more-btn');
-                if (loadMoreBtn) {
-                    loadMoreBtn.style.display = data.has_next ? 'block' : 'none';
-                }
-            } else if (currentPage === 1) {
-                // Show empty state
-                grid.innerHTML = `
-                    <div class="col-span-full text-center py-12">
-                        <span class="material-icons text-gray-400 text-6xl mb-4">search_off</span>
-                        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No payments found</h3>
-                        <p class="text-gray-500 dark:text-gray-400">Try adjusting your filters.</p>
-                    </div>
-                `;
-            }
-        })
-        .catch(error => {
-            console.error('Failed to load payments:', error);
-            if (window.notificationManager) {
-                window.notificationManager.error('Failed to load payments');
-            }
-        });
+    });
 }
 
-function loadMorePayments() {
-    currentPage++;
-    loadPayments();
+// Quick action functions (from status_overview.html)
+function createNewPayment() {
+    window.location.href = '/admin/django_cfg_payments/universalpayment/add/';
 }
 
-function renderPaymentCard(payment) {
-    // This would be a simplified version of the payment card template
-    // In a real implementation, you'd want to render this server-side or use a template engine
-    return `
-        <div class="payment-card" data-payment-id="${payment.id}">
-            <!-- Simplified payment card HTML -->
-            <div class="p-4 bg-white dark:bg-gray-800 rounded-lg border">
-                <div class="flex justify-between items-start mb-2">
-                    <span class="font-medium">#${payment.internal_payment_id || payment.id.substring(0, 8)}</span>
-                    <span class="px-2 py-1 text-xs rounded-full payment-status-${payment.status}">
-                        ${payment.status}
-                    </span>
-                </div>
-                <div class="text-xl font-bold mb-2">$${parseFloat(payment.amount_usd).toFixed(2)}</div>
-                <div class="text-sm text-gray-500">${payment.provider} • ${new Date(payment.created_at).toLocaleDateString()}</div>
-            </div>
-        </div>
-    `;
+function refreshPayments() {
+    location.reload();
 }
 
-// Auto-refresh dashboard every 30 seconds
-setInterval(() => {
-    if (document.visibilityState === 'visible') {
-        loadPayments();
+function exportPayments() {
+    if (window.notificationManager) {
+        window.notificationManager.info('Export functionality coming soon');
     }
-}, 30000);
+}
 
-// Initialize dashboard
-document.addEventListener('DOMContentLoaded', () => {
-    // Update URL parameters on filter change
-    window.addEventListener('popstate', () => {
-        // Handle browser back/forward
-        const urlParams = new URLSearchParams(window.location.search);
-        currentFilters.status = urlParams.get('status') || '';
-        currentFilters.provider = urlParams.get('provider') || '';
-        currentFilters.search = urlParams.get('search') || '';
-        currentFilters.date = urlParams.get('date') || '';
-        
-        // Update form values
-        document.getElementById('status-filter').value = currentFilters.status;
-        document.getElementById('provider-filter').value = currentFilters.provider;
-        document.getElementById('search-input').value = currentFilters.search;
-        document.getElementById('date-filter').value = currentFilters.date;
-        
-        loadPayments();
-    });
-});
+// Debug panel toggle
+function toggleDebug() {
+    const content = document.getElementById('debug-content');
+    const icon = document.getElementById('debug-icon');
+    
+    if (content.classList.contains('hidden')) {
+        content.classList.remove('hidden');
+        icon.textContent = 'expand_less';
+        icon.classList.add('rotate-180');
+    } else {
+        content.classList.add('hidden');
+        icon.textContent = 'expand_more';
+        icon.classList.remove('rotate-180');
+    }
+}
 </script>
-{% endblock %}
+{% endblock %}

django_cfg/apps/payments/templates/payments/dashboard_simple_test.html

@@ -0,0 +1,35 @@
+{% extends 'payments/base.html' %}
+
+{% block title %}Payment Dashboard - Simple Test{% endblock %}
+
+{% block header_title %}Payment Dashboard - Test{% endblock %}
+{% block header_subtitle %}Simple test version{% endblock %}
+
+{% block content %}
+<div style="background: yellow; padding: 20px; margin: 20px; border: 2px solid red;">
+    <h1 style="color: black;">🔥 DASHBOARD TEST 🔥</h1>
+    <p style="color: black;"><strong>Payments count:</strong> {{ payments|length }}</p>
+    <p style="color: black;"><strong>Payment stats:</strong> {{ payment_stats }}</p>
+    <p style="color: black;"><strong>Provider stats:</strong> {{ provider_stats|length }}</p>
+    
+    {% if payments %}
+        <h2 style="color: black;">Payments List:</h2>
+        <ul style="color: black;">
+        {% for payment in payments %}
+            <li>{{ payment.user.email }} - ${{ payment.amount_usd }} ({{ payment.status }})</li>
+        {% endfor %}
+        </ul>
+    {% else %}
+        <p style="color: red; font-size: 20px;">❌ NO PAYMENTS FOUND</p>
+    {% endif %}
+    
+    {% if payment_stats %}
+        <h2 style="color: black;">Stats:</h2>
+        <p style="color: black;">Total: {{ payment_stats.total_payments_count }}</p>
+        <p style="color: black;">Pending: {{ payment_stats.pending_payments_count }}</p>
+        <p style="color: black;">Volume: ${{ payment_stats.total_volume }}</p>
+    {% else %}
+        <p style="color: red; font-size: 20px;">❌ NO STATS FOUND</p>
+    {% endif %}
+</div>
+{% endblock %}