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

django_cfg/apps/payments/templates/payments/components/payment_card.html

@@ -0,0 +1,201 @@
+{% load payments_tags %}
+{% load humanize %}
+
+<!-- Payment Card Component -->
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6"
+     data-payment-id="{{ payment.id }}">
+    
+    <!-- Header -->
+    <div class="payment-card-header flex items-center justify-between mb-4">
+        <div class="payment-id">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Payment</span>
+            <p class="text-lg font-semibold text-gray-900 dark:text-white">
+                #{{ payment.internal_payment_id|default:payment.id|truncatechars:8 }}
+            </p>
+        </div>
+        {% include 'payments/components/status_badge.html' %}
+    </div>
+    
+    <!-- Amount -->
+    <div class="payment-amount mb-4">
+        <div class="flex items-baseline">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">
+                ${{ payment.amount_usd|floatformat:2 }}
+            </span>
+            <span class="ml-2 text-lg text-gray-500 dark:text-gray-400">USD</span>
+        </div>
+        {% if payment.currency_code != 'USD' and payment.pay_amount %}
+            <div class="text-sm text-gray-500 dark:text-gray-400">
+                {{ payment.pay_amount|format_crypto_amount:payment.currency_code }} {{ payment.currency_code }}
+            </div>
+        {% endif %}
+    </div>
+    
+    <!-- Payment Details -->
+    <div class="payment-details space-y-2 mb-4">
+        <div class="flex justify-between">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Provider</span>
+            <div class="flex items-center">
+                <span class="material-icons text-sm mr-1 {{ payment.provider|payment_method_icon }}">{{ payment.provider|payment_method_icon }}</span>
+                <span class="text-sm font-medium text-gray-900 dark:text-white">
+                    {{ payment.provider|provider_display_name }}
+                </span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Created</span>
+            <span class="text-sm text-gray-900 dark:text-white">
+                {{ payment.created_at|naturaltime }}
+            </span>
+        </div>
+        {% if payment.completed_at %}
+            <div class="flex justify-between">
+                <span class="text-sm text-gray-500 dark:text-gray-400">Completed</span>
+                <span class="text-sm text-gray-900 dark:text-white">
+                    {{ payment.completed_at|naturaltime }}
+                </span>
+            </div>
+        {% endif %}
+        {% if payment|is_crypto_payment and payment.pay_address %}
+            <div class="flex justify-between">
+                <span class="text-sm text-gray-500 dark:text-gray-400">Address</span>
+                <span class="text-sm font-mono text-gray-900 dark:text-white">
+                    {{ payment.pay_address|truncatechars:16 }}
+                    <button onclick="window.paymentUtils?.copyToClipboard('{{ payment.pay_address }}')" 
+                            class="ml-1 text-blue-500 hover:text-blue-700">
+                        <span class="material-icons text-xs">content_copy</span>
+                    </button>
+                </span>
+            </div>
+        {% endif %}
+    </div>
+    
+    <!-- Progress Bar -->
+    {% include 'payments/components/progress_bar.html' %}
+    
+    <!-- Actions -->
+    {% if show_actions %}
+    <div class="payment-actions mt-4 flex space-x-2">
+        <button class="flex-1 px-3 py-1.5 text-xs 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 transition-colors duration-200" 
+                onclick="showPaymentDetails('{{ payment.id }}')">
+            <span class="material-icons text-sm mr-1">visibility</span>
+            View Details
+        </button>
+        {% if payment|can_cancel_payment %}
+            <button class="px-3 py-1.5 text-xs bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 rounded-md transition-colors duration-200" 
+                    onclick="cancelPayment('{{ payment.id }}')">
+                <span class="material-icons text-sm mr-1">cancel</span>
+                Cancel
+            </button>
+        {% endif %}
+        {% if payment|is_crypto_payment and payment.pay_address %}
+            <button class="px-3 py-1.5 text-xs bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded-md transition-colors duration-200" 
+                    onclick="showQRCode('{{ payment.id }}')">
+                <span class="material-icons text-sm mr-1">qr_code</span>
+                QR Code
+            </button>
+        {% endif %}
+    </div>
+    {% endif %}
+</div>
+
+<!-- Mobile version (hidden on desktop) -->
+<div class="mobile-payment-card lg:hidden bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 mb-4">
+    <div class="flex items-center justify-between mb-3">
+        <div class="payment-id">
+            <p class="text-sm font-medium text-gray-900 dark:text-white">
+                #{{ payment.internal_payment_id|default:payment.id|truncatechars:8 }}
+            </p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ payment.created_at|naturaltime }}
+            </p>
+        </div>
+        {% include 'payments/components/status_badge.html' %}
+    </div>
+    
+    <div class="payment-amount mb-3">
+        <div class="flex items-baseline">
+            <span class="text-xl font-bold text-gray-900 dark:text-white">
+                ${{ payment.amount_usd|floatformat:2 }}
+            </span>
+            {% if payment.currency_code != 'USD' %}
+                <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">
+                    {{ payment.currency_code }}
+                </span>
+            {% endif %}
+        </div>
+    </div>
+    
+    <div class="payment-progress mb-3">
+        <div class="progress-bar">
+            <div class="progress-fill" style="width: {{ payment|payment_progress_percentage }}%"></div>
+        </div>
+    </div>
+    
+    {% if show_actions %}
+    <div class="flex space-x-2">
+        <button class="flex-1 px-3 py-1.5 text-xs 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 transition-colors duration-200" onclick="showPaymentDetails('{{ payment.id }}')">
+            Details
+        </button>
+        {% if payment|can_cancel_payment %}
+            <button class="px-3 py-1.5 text-xs bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 rounded-md transition-colors duration-200" onclick="cancelPayment('{{ payment.id }}')">
+                Cancel
+            </button>
+        {% endif %}
+    </div>
+    {% endif %}
+</div>
+
+<script>
+// Payment card JavaScript functions
+function showPaymentDetails(paymentId) {
+    if (window.paymentModal) {
+        window.paymentModal.show(paymentId);
+    } else {
+        // Fallback to direct link
+        window.location.href = `/admin/payments/universalpayment/${paymentId}/change/`;
+    }
+}
+
+function cancelPayment(paymentId) {
+    if (window.paymentUtils) {
+        window.paymentUtils.showConfirmDialog(
+            'Are you sure you want to cancel this payment?',
+            () => {
+                // Make API call to cancel payment
+                fetch(`/api/payments/${paymentId}/cancel/`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': getCsrfToken()
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        window.notificationManager?.paymentCancelled(paymentId);
+                        location.reload(); // Refresh to show updated status
+                    } else {
+                        window.notificationManager?.error(data.error || 'Failed to cancel payment');
+                    }
+                })
+                .catch(error => {
+                    console.error('Cancel payment error:', error);
+                    window.notificationManager?.error('Failed to cancel payment');
+                });
+            }
+        );
+    }
+}
+
+function showQRCode(paymentId) {
+    // Implementation for QR code modal
+    if (window.qrModal) {
+        window.qrModal.show(paymentId);
+    }
+}
+
+function getCsrfToken() {
+    return document.querySelector('[name=csrfmiddlewaretoken]')?.value || '';
+}
+</script>

django_cfg/apps/payments/templates/payments/components/payment_qr_code.html

@@ -0,0 +1,109 @@
+{% load payments_tags %}
+
+<!-- Payment QR Code Component -->
+<div class="flex flex-col items-center space-y-2 p-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+    {% if qr_data %}
+        <div class="w-32 h-32 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center" id="qr-code-{{ payment.id }}">
+            <!-- QR code will be generated here by JavaScript -->
+            <span class="material-icons text-gray-400 text-4xl">qr_code</span>
+        </div>
+        
+        <div class="text-center space-y-2">
+            <p class="text-sm font-medium text-gray-900 dark:text-white">
+                Payment Address
+            </p>
+            <p class="text-xs font-mono text-gray-600 dark:text-gray-400 break-all">
+                {{ payment.pay_address }}
+            </p>
+            {% if payment.pay_amount %}
+            <p class="text-xs text-gray-500 dark:text-gray-500">
+                Amount: {{ payment.pay_amount|format_crypto_amount:payment.currency_code }} {{ payment.currency_code }}
+            </p>
+            {% endif %}
+            
+            <!-- Action Buttons -->
+            <div class="flex space-x-2 pt-2">
+                <button class="flex-1 px-3 py-1.5 text-xs 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 transition-colors duration-200" 
+                        onclick="copyToClipboard('{{ payment.pay_address }}', 'Address copied!')">
+                    <span class="material-icons text-sm mr-1">content_copy</span>
+                    Copy Address
+                </button>
+                {% if payment.pay_amount %}
+                <button class="flex-1 px-3 py-1.5 text-xs 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 transition-colors duration-200" 
+                        onclick="copyToClipboard('{{ payment.pay_amount }}', 'Amount copied!')">
+                    <span class="material-icons text-sm mr-1">content_copy</span>
+                    Copy Amount
+                </button>
+                {% endif %}
+            </div>
+        </div>
+    {% else %}
+        <div class="text-center py-8">
+            <span class="material-icons text-gray-400 text-4xl mb-2">qr_code_off</span>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+                QR code not available for this payment
+            </p>
+        </div>
+    {% endif %}
+</div>
+
+<script>
+// QR Code generation (placeholder implementation)
+document.addEventListener('DOMContentLoaded', function() {
+    const qrContainer = document.getElementById('qr-code-{{ payment.id }}');
+    if (qrContainer && '{{ qr_data }}') {
+        // This would integrate with a QR code library like qrcode.js
+        // For now, we'll show a placeholder
+        qrContainer.innerHTML = `
+            <div class="w-32 h-32 bg-white border-2 border-gray-300 rounded flex items-center justify-center">
+                <div class="text-center">
+                    <span class="material-icons text-gray-400 text-2xl">qr_code</span>
+                    <p class="text-xs text-gray-500 mt-1">QR Code</p>
+                </div>
+            </div>
+        `;
+        
+        // Example of how to integrate a real QR code library:
+        /*
+        if (typeof QRCode !== 'undefined') {
+            new QRCode(qrContainer, {
+                text: '{{ qr_data }}',
+                width: 128,
+                height: 128,
+                colorDark: '#000000',
+                colorLight: '#ffffff',
+                correctLevel: QRCode.CorrectLevel.M
+            });
+        }
+        */
+    }
+});
+
+function copyToClipboard(text, message) {
+    if (window.paymentUtils) {
+        window.paymentUtils.copyToClipboard(text).then(success => {
+            if (success && window.notificationManager) {
+                window.notificationManager.success(message || 'Copied to clipboard');
+            }
+        });
+    } else {
+        // Fallback for older browsers
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            document.execCommand('copy');
+            if (window.notificationManager) {
+                window.notificationManager.success(message || 'Copied to clipboard');
+            }
+        } catch (err) {
+            console.error('Failed to copy to clipboard:', err);
+            if (window.notificationManager) {
+                window.notificationManager.error('Failed to copy to clipboard');
+            }
+        }
+        document.body.removeChild(textArea);
+    }
+}
+</script>

django_cfg/apps/payments/templates/payments/components/progress_bar.html

@@ -0,0 +1,43 @@
+{% load payments_tags %}
+
+<!-- Payment Progress Bar Component -->
+<div>
+    <!-- Progress Steps (Hidden on mobile) -->
+    <div class="hidden md:flex justify-between items-center mb-4">
+        {% for step in payment|payment_progress_steps %}
+            <div class="flex flex-col items-center text-center">
+                <div class="w-8 h-8 flex items-center justify-center rounded-full border-2 mb-2
+                    {% if step.completed %}border-green-500 bg-green-500 text-white
+                    {% elif step.active %}border-blue-500 bg-blue-500 text-white
+                    {% else %}border-gray-300 dark:border-gray-600{% endif %}">
+                    {% if step.completed %}
+                        <span class="material-icons text-sm">check</span>
+                    {% elif step.active %}
+                        <div class="w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
+                    {% else %}
+                        <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
+                    {% endif %}
+                </div>
+                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ step.label }}</div>
+            </div>
+        {% endfor %}
+    </div>
+    
+    <!-- Progress Bar -->
+    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-4 md:mt-0">
+        <div class="h-2 rounded-full transition-all duration-500 ease-out
+            {% if payment.status == 'completed' %}bg-green-600
+            {% elif payment.status == 'failed' %}bg-red-600
+            {% elif payment.status == 'pending' %}bg-yellow-600
+            {% else %}bg-blue-600{% endif %}" 
+             style="width: {{ payment|payment_progress_percentage }}%"
+             data-percentage="{{ payment|payment_progress_percentage }}">
+        </div>
+    </div>
+    
+    <!-- Progress Text -->
+    <div class="flex justify-between items-center mt-2 text-xs text-gray-500 dark:text-gray-400">
+        <span>{{ payment|payment_progress_percentage }}% Complete</span>
+        <span>{{ payment.get_status_display }}</span>
+    </div>
+</div>

django_cfg/apps/payments/templates/payments/components/provider_stats.html

@@ -0,0 +1,40 @@
+{% load payments_tags %}
+
+<!-- Provider Statistics Component -->
+<div class="space-y-4">
+    {% for stat in provider_stats %}
+    <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
+        <div class="flex items-center space-x-3">
+            <div class="w-6 h-6 rounded {% if stat.provider == 'nowpayments' %}bg-orange-500{% elif stat.provider == 'cryptapi' %}bg-blue-500{% elif stat.provider == 'cryptomus' %}bg-purple-500{% elif stat.provider == 'stripe' %}bg-indigo-500{% else %}bg-gray-500{% endif %} flex items-center justify-center">
+                <span class="material-icons text-white text-sm">{{ stat.provider|payment_method_icon }}</span>
+            </div>
+            <div>
+                <p class="text-sm font-medium text-gray-900 dark:text-white">
+                    {{ stat.provider|provider_display_name }}
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                    {{ stat.count }} payment{{ stat.count|pluralize }}
+                </p>
+            </div>
+        </div>
+        <div class="text-right">
+            <p class="text-sm font-medium text-gray-900 dark:text-white">
+                ${{ stat.volume|floatformat:2|default:"0.00" }}
+            </p>
+            <div class="flex items-center space-x-2">
+                <div class="w-16 bg-gray-200 dark:bg-gray-600 rounded-full h-1">
+                    <div class="bg-blue-600 h-1 rounded-full" style="width: {{ stat.success_rate|floatformat:0 }}%"></div>
+                </div>
+                <span class="text-xs text-gray-500 dark:text-gray-400">
+                    {{ stat.success_rate|floatformat:0 }}%
+                </span>
+            </div>
+        </div>
+    </div>
+    {% empty %}
+    <div class="text-center py-6">
+        <span class="material-icons text-gray-400 text-4xl mb-2">bar_chart</span>
+        <p class="text-sm text-gray-500 dark:text-gray-400">No provider data available</p>
+    </div>
+    {% endfor %}
+</div>

django_cfg/apps/payments/templates/payments/components/status_badge.html

@@ -0,0 +1,34 @@
+{% load payments_tags %}
+
+<!-- Payment Status Badge Component -->
+<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+    {% if payment.status == 'pending' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
+    {% elif payment.status == 'confirming' %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
+    {% elif payment.status == 'confirmed' or payment.status == 'completed' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
+    {% elif payment.status == 'failed' %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
+    {% elif payment.status == 'expired' or payment.status == 'cancelled' %}bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200
+    {% elif payment.status == 'refunded' %}bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200
+    {% else %}bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200{% endif %}"
+      data-status="{{ payment.status }}">
+    {% if payment.status == 'pending' %}
+        <span class="material-icons text-sm mr-1 animate-pulse">pending</span>
+    {% elif payment.status == 'confirming' %}
+        <span class="material-icons text-sm mr-1 animate-spin">sync</span>
+    {% elif payment.status == 'confirmed' %}
+        <span class="material-icons text-sm mr-1">check_circle</span>
+    {% elif payment.status == 'completed' %}
+        <span class="material-icons text-sm mr-1">verified</span>
+    {% elif payment.status == 'failed' %}
+        <span class="material-icons text-sm mr-1">error</span>
+    {% elif payment.status == 'expired' %}
+        <span class="material-icons text-sm mr-1">schedule</span>
+    {% elif payment.status == 'cancelled' %}
+        <span class="material-icons text-sm mr-1">cancel</span>
+    {% elif payment.status == 'refunded' %}
+        <span class="material-icons text-sm mr-1">undo</span>
+    {% else %}
+        <span class="material-icons text-sm mr-1">help</span>
+    {% endif %}
+    
+    <span class="status-text">{{ payment.get_status_display }}</span>
+</span>

django_cfg/apps/payments/templates/payments/components/status_overview.html

@@ -0,0 +1,148 @@
+{% load payments_tags %}
+
+<!-- Status Overview Cards -->
+{% if not payment_stats %}
+    {% get_payment_stats as payment_stats %}
+{% endif %}
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <!-- Total Payments -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+        <div class="flex items-center">
+            <div class="flex-shrink-0">
+                <span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">payments</span>
+            </div>
+            <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Payments</p>
+                <p class="text-2xl font-bold text-gray-900 dark:text-white">
+                    {{ payment_payment_stats.total_payments_count|default:0 }}
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Pending Payments -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+        <div class="flex items-center">
+            <div class="flex-shrink-0">
+                <span class="material-icons text-yellow-600 dark:text-yellow-400 text-3xl">pending</span>
+            </div>
+            <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Pending</p>
+                <p class="text-2xl font-bold text-gray-900 dark:text-white">
+                    {{ payment_payment_stats.pending_payments_count|default:0 }}
+                </p>
+                {% if payment_payment_stats.confirming_payments_count %}
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                    +{{ payment_payment_stats.confirming_payments_count }} confirming
+                </p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    
+    <!-- Completed Payments -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+        <div class="flex items-center">
+            <div class="flex-shrink-0">
+                <span class="material-icons text-green-600 dark:text-green-400 text-3xl">check_circle</span>
+            </div>
+            <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Completed</p>
+                <p class="text-2xl font-bold text-gray-900 dark:text-white">
+                    {{ payment_stats.completed_payments_count|default:0 }}
+                </p>
+                {% if payment_stats.total_payments_count > 0 %}
+                <p class="text-xs text-green-600 dark:text-green-400">
+                    {{ payment_stats.completed_payments_count|floatformat:0 }}/{{ payment_stats.total_payments_count }} success
+                </p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    
+    <!-- Total Volume -->
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
+        <div class="flex items-center">
+            <div class="flex-shrink-0">
+                <span class="material-icons text-purple-600 dark:text-purple-400 text-3xl">account_balance</span>
+            </div>
+            <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Volume</p>
+                <p class="text-2xl font-bold text-gray-900 dark:text-white">
+                    ${{ payment_stats.total_volume|floatformat:2|default:"0.00" }}
+                </p>
+                {% if payment_stats.failed_payments_count %}
+                <p class="text-xs text-red-500 dark:text-red-400">
+                    {{ payment_stats.failed_payments_count }} failed
+                </p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Quick Actions Bar -->
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 mb-6">
+    <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Quick Actions:</span>
+            <div class="flex space-x-2">
+                       <button class="px-3 py-1.5 text-xs bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded-md transition-colors duration-200" onclick="createNewPayment()">
+                           <span class="material-icons text-sm mr-1">add</span>
+                           New Payment
+                       </button>
+                       <button class="px-3 py-1.5 text-xs 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 transition-colors duration-200" onclick="refreshPayments()">
+                           <span class="material-icons text-sm mr-1">refresh</span>
+                           Refresh
+                       </button>
+                       <button class="px-3 py-1.5 text-xs 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 transition-colors duration-200" onclick="exportPayments()">
+                           <span class="material-icons text-sm mr-1">download</span>
+                           Export
+                       </button>
+            </div>
+        </div>
+        
+        <!-- Live Status Indicator -->
+        <div class="flex items-center space-x-2">
+            <div 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">
+                <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
+                Live Updates
+            </div>
+            <span class="text-xs text-gray-500 dark:text-gray-400">
+                Last update: <span id="stats-last-update">{% now "H:i:s" %}</span>
+            </span>
+        </div>
+    </div>
+</div>
+
+<script>
+// Quick actions implementation
+function createNewPayment() {
+    window.location.href = '{% url "payments_dashboard:create" %}';
+}
+
+function refreshPayments() {
+    location.reload();
+}
+
+function exportPayments() {
+    // Implement export functionality
+    if (window.notificationManager) {
+        window.notificationManager.info('Export functionality coming soon');
+    }
+}
+
+// Auto-refresh stats every 30 seconds
+setInterval(() => {
+    updateStatsLastUpdate();
+}, 30000);
+
+function updateStatsLastUpdate() {
+    const element = document.getElementById('stats-last-update');
+    if (element) {
+        element.textContent = new Date().toLocaleTimeString();
+    }
+}
+</script>
+