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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. django_cfg/__init__.py +1 -1
  2. django_cfg/apps/payments/services/providers/cryptomus.py +2 -1
  3. django_cfg/apps/payments/static/payments/css/payments.css +340 -0
  4. django_cfg/apps/payments/static/payments/js/notifications.js +202 -0
  5. django_cfg/apps/payments/static/payments/js/payment-utils.js +318 -0
  6. django_cfg/apps/payments/static/payments/js/theme.js +86 -0
  7. django_cfg/apps/payments/templates/payments/base.html +182 -0
  8. django_cfg/apps/payments/templates/payments/components/payment_card.html +201 -0
  9. django_cfg/apps/payments/templates/payments/components/payment_qr_code.html +109 -0
  10. django_cfg/apps/payments/templates/payments/components/progress_bar.html +36 -0
  11. django_cfg/apps/payments/templates/payments/components/provider_stats.html +40 -0
  12. django_cfg/apps/payments/templates/payments/components/status_badge.html +27 -0
  13. django_cfg/apps/payments/templates/payments/components/status_overview.html +144 -0
  14. django_cfg/apps/payments/templates/payments/dashboard.html +346 -0
  15. django_cfg/apps/payments/templatetags/__init__.py +1 -0
  16. django_cfg/apps/payments/templatetags/payments_tags.py +315 -0
  17. django_cfg/apps/payments/urls_templates.py +52 -0
  18. django_cfg/apps/payments/views/templates/__init__.py +25 -0
  19. django_cfg/apps/payments/views/templates/ajax.py +312 -0
  20. django_cfg/apps/payments/views/templates/base.py +204 -0
  21. django_cfg/apps/payments/views/templates/dashboard.py +60 -0
  22. django_cfg/apps/payments/views/templates/payment_detail.py +102 -0
  23. django_cfg/apps/payments/views/templates/payment_management.py +164 -0
  24. django_cfg/apps/payments/views/templates/qr_code.py +174 -0
  25. django_cfg/apps/payments/views/templates/stats.py +240 -0
  26. django_cfg/apps/payments/views/templates/utils.py +181 -0
  27. django_cfg/apps/urls.py +3 -0
  28. django_cfg/registry/core.py +1 -0
  29. django_cfg/template_archive/.gitignore +1 -0
  30. django_cfg/template_archive/django_sample.zip +0 -0
  31. {django_cfg-1.2.27.dist-info → django_cfg-1.2.29.dist-info}/METADATA +12 -15
  32. {django_cfg-1.2.27.dist-info → django_cfg-1.2.29.dist-info}/RECORD +35 -10
  33. {django_cfg-1.2.27.dist-info → django_cfg-1.2.29.dist-info}/WHEEL +0 -0
  34. {django_cfg-1.2.27.dist-info → django_cfg-1.2.29.dist-info}/entry_points.txt +0 -0
  35. {django_cfg-1.2.27.dist-info → django_cfg-1.2.29.dist-info}/licenses/LICENSE +0 -0
@@ -0,0 +1,201 @@
1
+ {% load payments_tags %}
2
+ {% load humanize %}
3
+
4
+ <!-- Payment Card Component -->
5
+ <div class="payment-card bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 {% if compact %}compact{% endif %}"
6
+ data-payment-id="{{ payment.id }}">
7
+
8
+ <!-- Header -->
9
+ <div class="payment-card-header flex items-center justify-between mb-4">
10
+ <div class="payment-id">
11
+ <span class="text-sm text-gray-500 dark:text-gray-400">Payment</span>
12
+ <p class="text-lg font-semibold text-gray-900 dark:text-white">
13
+ #{{ payment.internal_payment_id|default:payment.id|truncatechars:8 }}
14
+ </p>
15
+ </div>
16
+ {% include 'payments/components/status_badge.html' %}
17
+ </div>
18
+
19
+ <!-- Amount -->
20
+ <div class="payment-amount mb-4">
21
+ <div class="flex items-baseline">
22
+ <span class="text-3xl font-bold text-gray-900 dark:text-white">
23
+ ${{ payment.amount_usd|floatformat:2 }}
24
+ </span>
25
+ <span class="ml-2 text-lg text-gray-500 dark:text-gray-400">USD</span>
26
+ </div>
27
+ {% if payment.currency_code != 'USD' and payment.pay_amount %}
28
+ <div class="text-sm text-gray-500 dark:text-gray-400">
29
+ {{ payment.pay_amount|format_crypto_amount:payment.currency_code }} {{ payment.currency_code }}
30
+ </div>
31
+ {% endif %}
32
+ </div>
33
+
34
+ <!-- Payment Details -->
35
+ <div class="payment-details space-y-2 mb-4">
36
+ <div class="flex justify-between">
37
+ <span class="text-sm text-gray-500 dark:text-gray-400">Provider</span>
38
+ <div class="flex items-center">
39
+ <span class="material-icons text-sm mr-1 {{ payment.provider|payment_method_icon }}">{{ payment.provider|payment_method_icon }}</span>
40
+ <span class="text-sm font-medium text-gray-900 dark:text-white">
41
+ {{ payment.provider|provider_display_name }}
42
+ </span>
43
+ </div>
44
+ </div>
45
+ <div class="flex justify-between">
46
+ <span class="text-sm text-gray-500 dark:text-gray-400">Created</span>
47
+ <span class="text-sm text-gray-900 dark:text-white">
48
+ {{ payment.created_at|naturaltime }}
49
+ </span>
50
+ </div>
51
+ {% if payment.completed_at %}
52
+ <div class="flex justify-between">
53
+ <span class="text-sm text-gray-500 dark:text-gray-400">Completed</span>
54
+ <span class="text-sm text-gray-900 dark:text-white">
55
+ {{ payment.completed_at|naturaltime }}
56
+ </span>
57
+ </div>
58
+ {% endif %}
59
+ {% if payment|is_crypto_payment and payment.pay_address %}
60
+ <div class="flex justify-between">
61
+ <span class="text-sm text-gray-500 dark:text-gray-400">Address</span>
62
+ <span class="text-sm font-mono text-gray-900 dark:text-white">
63
+ {{ payment.pay_address|truncatechars:16 }}
64
+ <button onclick="window.paymentUtils?.copyToClipboard('{{ payment.pay_address }}')"
65
+ class="ml-1 text-blue-500 hover:text-blue-700">
66
+ <span class="material-icons text-xs">content_copy</span>
67
+ </button>
68
+ </span>
69
+ </div>
70
+ {% endif %}
71
+ </div>
72
+
73
+ <!-- Progress Bar -->
74
+ {% include 'payments/components/progress_bar.html' %}
75
+
76
+ <!-- Actions -->
77
+ {% if show_actions %}
78
+ <div class="payment-actions mt-4 flex space-x-2">
79
+ <button class="btn btn-outline btn-sm flex-1"
80
+ onclick="showPaymentDetails('{{ payment.id }}')">
81
+ <span class="material-icons text-sm mr-1">visibility</span>
82
+ View Details
83
+ </button>
84
+ {% if payment|can_cancel_payment %}
85
+ <button class="btn btn-danger btn-sm"
86
+ onclick="cancelPayment('{{ payment.id }}')">
87
+ <span class="material-icons text-sm mr-1">cancel</span>
88
+ Cancel
89
+ </button>
90
+ {% endif %}
91
+ {% if payment|is_crypto_payment and payment.pay_address %}
92
+ <button class="btn btn-primary btn-sm"
93
+ onclick="showQRCode('{{ payment.id }}')">
94
+ <span class="material-icons text-sm mr-1">qr_code</span>
95
+ QR Code
96
+ </button>
97
+ {% endif %}
98
+ </div>
99
+ {% endif %}
100
+ </div>
101
+
102
+ <!-- Mobile version (hidden on desktop) -->
103
+ <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">
104
+ <div class="flex items-center justify-between mb-3">
105
+ <div class="payment-id">
106
+ <p class="text-sm font-medium text-gray-900 dark:text-white">
107
+ #{{ payment.internal_payment_id|default:payment.id|truncatechars:8 }}
108
+ </p>
109
+ <p class="text-xs text-gray-500 dark:text-gray-400">
110
+ {{ payment.created_at|naturaltime }}
111
+ </p>
112
+ </div>
113
+ {% include 'payments/components/status_badge.html' %}
114
+ </div>
115
+
116
+ <div class="payment-amount mb-3">
117
+ <div class="flex items-baseline">
118
+ <span class="text-xl font-bold text-gray-900 dark:text-white">
119
+ ${{ payment.amount_usd|floatformat:2 }}
120
+ </span>
121
+ {% if payment.currency_code != 'USD' %}
122
+ <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">
123
+ {{ payment.currency_code }}
124
+ </span>
125
+ {% endif %}
126
+ </div>
127
+ </div>
128
+
129
+ <div class="payment-progress mb-3">
130
+ <div class="progress-bar">
131
+ <div class="progress-fill" style="width: {{ payment|payment_progress_percentage }}%"></div>
132
+ </div>
133
+ </div>
134
+
135
+ {% if show_actions %}
136
+ <div class="flex space-x-2">
137
+ <button class="flex-1 btn btn-outline btn-sm" onclick="showPaymentDetails('{{ payment.id }}')">
138
+ Details
139
+ </button>
140
+ {% if payment|can_cancel_payment %}
141
+ <button class="btn btn-danger btn-sm" onclick="cancelPayment('{{ payment.id }}')">
142
+ Cancel
143
+ </button>
144
+ {% endif %}
145
+ </div>
146
+ {% endif %}
147
+ </div>
148
+
149
+ <script>
150
+ // Payment card JavaScript functions
151
+ function showPaymentDetails(paymentId) {
152
+ if (window.paymentModal) {
153
+ window.paymentModal.show(paymentId);
154
+ } else {
155
+ // Fallback to direct link
156
+ window.location.href = `/admin/payments/universalpayment/${paymentId}/change/`;
157
+ }
158
+ }
159
+
160
+ function cancelPayment(paymentId) {
161
+ if (window.paymentUtils) {
162
+ window.paymentUtils.showConfirmDialog(
163
+ 'Are you sure you want to cancel this payment?',
164
+ () => {
165
+ // Make API call to cancel payment
166
+ fetch(`/api/payments/${paymentId}/cancel/`, {
167
+ method: 'POST',
168
+ headers: {
169
+ 'Content-Type': 'application/json',
170
+ 'X-CSRFToken': getCsrfToken()
171
+ }
172
+ })
173
+ .then(response => response.json())
174
+ .then(data => {
175
+ if (data.success) {
176
+ window.notificationManager?.paymentCancelled(paymentId);
177
+ location.reload(); // Refresh to show updated status
178
+ } else {
179
+ window.notificationManager?.error(data.error || 'Failed to cancel payment');
180
+ }
181
+ })
182
+ .catch(error => {
183
+ console.error('Cancel payment error:', error);
184
+ window.notificationManager?.error('Failed to cancel payment');
185
+ });
186
+ }
187
+ );
188
+ }
189
+ }
190
+
191
+ function showQRCode(paymentId) {
192
+ // Implementation for QR code modal
193
+ if (window.qrModal) {
194
+ window.qrModal.show(paymentId);
195
+ }
196
+ }
197
+
198
+ function getCsrfToken() {
199
+ return document.querySelector('[name=csrfmiddlewaretoken]')?.value || '';
200
+ }
201
+ </script>
@@ -0,0 +1,109 @@
1
+ {% load payments_tags %}
2
+
3
+ <!-- Payment QR Code Component -->
4
+ <div class="qr-code-container">
5
+ {% if qr_data %}
6
+ <div class="qr-code" id="qr-code-{{ payment.id }}">
7
+ <!-- QR code will be generated here by JavaScript -->
8
+ <span class="material-icons text-gray-400 text-4xl">qr_code</span>
9
+ </div>
10
+
11
+ <div class="text-center space-y-2">
12
+ <p class="text-sm font-medium text-gray-900 dark:text-white">
13
+ Payment Address
14
+ </p>
15
+ <p class="text-xs font-mono text-gray-600 dark:text-gray-400 break-all">
16
+ {{ payment.pay_address }}
17
+ </p>
18
+ {% if payment.pay_amount %}
19
+ <p class="text-xs text-gray-500 dark:text-gray-500">
20
+ Amount: {{ payment.pay_amount|format_crypto_amount:payment.currency_code }} {{ payment.currency_code }}
21
+ </p>
22
+ {% endif %}
23
+
24
+ <!-- Action Buttons -->
25
+ <div class="flex space-x-2 pt-2">
26
+ <button class="btn btn-outline btn-sm flex-1"
27
+ onclick="copyToClipboard('{{ payment.pay_address }}', 'Address copied!')">
28
+ <span class="material-icons text-sm mr-1">content_copy</span>
29
+ Copy Address
30
+ </button>
31
+ {% if payment.pay_amount %}
32
+ <button class="btn btn-outline btn-sm flex-1"
33
+ onclick="copyToClipboard('{{ payment.pay_amount }}', 'Amount copied!')">
34
+ <span class="material-icons text-sm mr-1">content_copy</span>
35
+ Copy Amount
36
+ </button>
37
+ {% endif %}
38
+ </div>
39
+ </div>
40
+ {% else %}
41
+ <div class="text-center py-8">
42
+ <span class="material-icons text-gray-400 text-4xl mb-2">qr_code_off</span>
43
+ <p class="text-sm text-gray-500 dark:text-gray-400">
44
+ QR code not available for this payment
45
+ </p>
46
+ </div>
47
+ {% endif %}
48
+ </div>
49
+
50
+ <script>
51
+ // QR Code generation (placeholder implementation)
52
+ document.addEventListener('DOMContentLoaded', function() {
53
+ const qrContainer = document.getElementById('qr-code-{{ payment.id }}');
54
+ if (qrContainer && '{{ qr_data }}') {
55
+ // This would integrate with a QR code library like qrcode.js
56
+ // For now, we'll show a placeholder
57
+ qrContainer.innerHTML = `
58
+ <div class="w-32 h-32 bg-white border-2 border-gray-300 rounded flex items-center justify-center">
59
+ <div class="text-center">
60
+ <span class="material-icons text-gray-400 text-2xl">qr_code</span>
61
+ <p class="text-xs text-gray-500 mt-1">QR Code</p>
62
+ </div>
63
+ </div>
64
+ `;
65
+
66
+ // Example of how to integrate a real QR code library:
67
+ /*
68
+ if (typeof QRCode !== 'undefined') {
69
+ new QRCode(qrContainer, {
70
+ text: '{{ qr_data }}',
71
+ width: 128,
72
+ height: 128,
73
+ colorDark: '#000000',
74
+ colorLight: '#ffffff',
75
+ correctLevel: QRCode.CorrectLevel.M
76
+ });
77
+ }
78
+ */
79
+ }
80
+ });
81
+
82
+ function copyToClipboard(text, message) {
83
+ if (window.paymentUtils) {
84
+ window.paymentUtils.copyToClipboard(text).then(success => {
85
+ if (success && window.notificationManager) {
86
+ window.notificationManager.success(message || 'Copied to clipboard');
87
+ }
88
+ });
89
+ } else {
90
+ // Fallback for older browsers
91
+ const textArea = document.createElement('textarea');
92
+ textArea.value = text;
93
+ document.body.appendChild(textArea);
94
+ textArea.select();
95
+ try {
96
+ document.execCommand('copy');
97
+ if (window.notificationManager) {
98
+ window.notificationManager.success(message || 'Copied to clipboard');
99
+ }
100
+ } catch (err) {
101
+ console.error('Failed to copy to clipboard:', err);
102
+ if (window.notificationManager) {
103
+ window.notificationManager.error('Failed to copy to clipboard');
104
+ }
105
+ }
106
+ document.body.removeChild(textArea);
107
+ }
108
+ }
109
+ </script>
@@ -0,0 +1,36 @@
1
+ {% load payments_tags %}
2
+
3
+ <!-- Payment Progress Bar Component -->
4
+ <div class="payment-progress-container">
5
+ <!-- Progress Steps (Hidden on mobile) -->
6
+ <div class="progress-steps hidden md:flex">
7
+ {% for step in payment|payment_progress_steps %}
8
+ <div class="progress-step {% if step.completed %}completed{% endif %} {% if step.active %}active{% endif %}">
9
+ <div class="step-icon {% if step.completed %}completed{% elif step.active %}active{% endif %}">
10
+ {% if step.completed %}
11
+ <span class="material-icons text-sm">check</span>
12
+ {% elif step.active %}
13
+ <div class="w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
14
+ {% else %}
15
+ <div class="w-3 h-3 bg-gray-300 rounded-full"></div>
16
+ {% endif %}
17
+ </div>
18
+ <div class="step-label">{{ step.label }}</div>
19
+ </div>
20
+ {% endfor %}
21
+ </div>
22
+
23
+ <!-- Progress Bar -->
24
+ <div class="progress-bar mt-4 md:mt-0">
25
+ <div class="progress-fill {% if payment.status == 'completed' %}success{% elif payment.status == 'failed' %}danger{% elif payment.status == 'pending' %}warning{% endif %}"
26
+ style="width: {{ payment|payment_progress_percentage }}%"
27
+ data-percentage="{{ payment|payment_progress_percentage }}">
28
+ </div>
29
+ </div>
30
+
31
+ <!-- Progress Text -->
32
+ <div class="flex justify-between items-center mt-2 text-xs text-gray-500 dark:text-gray-400">
33
+ <span>{{ payment|payment_progress_percentage }}% Complete</span>
34
+ <span>{{ payment.get_status_display }}</span>
35
+ </div>
36
+ </div>
@@ -0,0 +1,40 @@
1
+ {% load payments_tags %}
2
+
3
+ <!-- Provider Statistics Component -->
4
+ <div class="provider-stats space-y-4">
5
+ {% for stat in provider_stats %}
6
+ <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
7
+ <div class="flex items-center space-x-3">
8
+ <div class="provider-icon {{ stat.provider }}">
9
+ <span class="material-icons text-white text-sm">{{ stat.provider|payment_method_icon }}</span>
10
+ </div>
11
+ <div>
12
+ <p class="text-sm font-medium text-gray-900 dark:text-white">
13
+ {{ stat.provider|provider_display_name }}
14
+ </p>
15
+ <p class="text-xs text-gray-500 dark:text-gray-400">
16
+ {{ stat.count }} payment{{ stat.count|pluralize }}
17
+ </p>
18
+ </div>
19
+ </div>
20
+ <div class="text-right">
21
+ <p class="text-sm font-medium text-gray-900 dark:text-white">
22
+ ${{ stat.volume|floatformat:2|default:"0.00" }}
23
+ </p>
24
+ <div class="flex items-center space-x-2">
25
+ <div class="w-16 bg-gray-200 dark:bg-gray-600 rounded-full h-1">
26
+ <div class="bg-blue-600 h-1 rounded-full" style="width: {{ stat.success_rate|floatformat:0 }}%"></div>
27
+ </div>
28
+ <span class="text-xs text-gray-500 dark:text-gray-400">
29
+ {{ stat.success_rate|floatformat:0 }}%
30
+ </span>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ {% empty %}
35
+ <div class="text-center py-6">
36
+ <span class="material-icons text-gray-400 text-4xl mb-2">bar_chart</span>
37
+ <p class="text-sm text-gray-500 dark:text-gray-400">No provider data available</p>
38
+ </div>
39
+ {% endfor %}
40
+ </div>
@@ -0,0 +1,27 @@
1
+ {% load payments_tags %}
2
+
3
+ <!-- Payment Status Badge Component -->
4
+ <span class="payment-status-badge payment-status-{{ payment.status|lower }} inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
5
+ data-status="{{ payment.status }}">
6
+ {% if payment.status == 'pending' %}
7
+ <span class="material-icons text-sm mr-1 animate-pulse">pending</span>
8
+ {% elif payment.status == 'confirming' %}
9
+ <span class="material-icons text-sm mr-1 animate-spin">sync</span>
10
+ {% elif payment.status == 'confirmed' %}
11
+ <span class="material-icons text-sm mr-1">check_circle</span>
12
+ {% elif payment.status == 'completed' %}
13
+ <span class="material-icons text-sm mr-1">verified</span>
14
+ {% elif payment.status == 'failed' %}
15
+ <span class="material-icons text-sm mr-1">error</span>
16
+ {% elif payment.status == 'expired' %}
17
+ <span class="material-icons text-sm mr-1">schedule</span>
18
+ {% elif payment.status == 'cancelled' %}
19
+ <span class="material-icons text-sm mr-1">cancel</span>
20
+ {% elif payment.status == 'refunded' %}
21
+ <span class="material-icons text-sm mr-1">undo</span>
22
+ {% else %}
23
+ <span class="material-icons text-sm mr-1">help</span>
24
+ {% endif %}
25
+
26
+ <span class="status-text">{{ payment.get_status_display }}</span>
27
+ </span>
@@ -0,0 +1,144 @@
1
+ {% load payments_tags %}
2
+
3
+ <!-- Status Overview Cards -->
4
+ {% get_payment_stats as stats %}
5
+
6
+ <div class="status-overview">
7
+ <!-- Total Payments -->
8
+ <div class="status-card">
9
+ <div class="flex items-center">
10
+ <div class="flex-shrink-0">
11
+ <span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">payments</span>
12
+ </div>
13
+ <div class="ml-4">
14
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Payments</p>
15
+ <p class="text-2xl font-bold text-gray-900 dark:text-white">
16
+ {{ stats.total_payments_count|default:0 }}
17
+ </p>
18
+ </div>
19
+ </div>
20
+ </div>
21
+
22
+ <!-- Pending Payments -->
23
+ <div class="status-card">
24
+ <div class="flex items-center">
25
+ <div class="flex-shrink-0">
26
+ <span class="material-icons text-yellow-600 dark:text-yellow-400 text-3xl">pending</span>
27
+ </div>
28
+ <div class="ml-4">
29
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Pending</p>
30
+ <p class="text-2xl font-bold text-gray-900 dark:text-white">
31
+ {{ stats.pending_payments_count|default:0 }}
32
+ </p>
33
+ {% if stats.confirming_payments_count %}
34
+ <p class="text-xs text-gray-500 dark:text-gray-400">
35
+ +{{ stats.confirming_payments_count }} confirming
36
+ </p>
37
+ {% endif %}
38
+ </div>
39
+ </div>
40
+ </div>
41
+
42
+ <!-- Completed Payments -->
43
+ <div class="status-card">
44
+ <div class="flex items-center">
45
+ <div class="flex-shrink-0">
46
+ <span class="material-icons text-green-600 dark:text-green-400 text-3xl">check_circle</span>
47
+ </div>
48
+ <div class="ml-4">
49
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Completed</p>
50
+ <p class="text-2xl font-bold text-gray-900 dark:text-white">
51
+ {{ stats.completed_payments_count|default:0 }}
52
+ </p>
53
+ {% if stats.total_payments_count > 0 %}
54
+ <p class="text-xs text-green-600 dark:text-green-400">
55
+ {{ stats.completed_payments_count|floatformat:0 }}/{{ stats.total_payments_count }} success
56
+ </p>
57
+ {% endif %}
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Total Volume -->
63
+ <div class="status-card">
64
+ <div class="flex items-center">
65
+ <div class="flex-shrink-0">
66
+ <span class="material-icons text-purple-600 dark:text-purple-400 text-3xl">account_balance</span>
67
+ </div>
68
+ <div class="ml-4">
69
+ <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Volume</p>
70
+ <p class="text-2xl font-bold text-gray-900 dark:text-white">
71
+ ${{ stats.total_volume|floatformat:2|default:"0.00" }}
72
+ </p>
73
+ {% if stats.failed_payments_count %}
74
+ <p class="text-xs text-red-500 dark:text-red-400">
75
+ {{ stats.failed_payments_count }} failed
76
+ </p>
77
+ {% endif %}
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Quick Actions Bar -->
84
+ <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4 mb-6">
85
+ <div class="flex items-center justify-between">
86
+ <div class="flex items-center space-x-4">
87
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Quick Actions:</span>
88
+ <div class="flex space-x-2">
89
+ <button class="btn btn-primary btn-sm" onclick="createNewPayment()">
90
+ <span class="material-icons text-sm mr-1">add</span>
91
+ New Payment
92
+ </button>
93
+ <button class="btn btn-outline btn-sm" onclick="refreshPayments()">
94
+ <span class="material-icons text-sm mr-1">refresh</span>
95
+ Refresh
96
+ </button>
97
+ <button class="btn btn-outline btn-sm" onclick="exportPayments()">
98
+ <span class="material-icons text-sm mr-1">download</span>
99
+ Export
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Live Status Indicator -->
105
+ <div class="flex items-center space-x-2">
106
+ <div class="payment-live-indicator">
107
+ Live Updates
108
+ </div>
109
+ <span class="text-xs text-gray-500 dark:text-gray-400">
110
+ Last update: <span id="stats-last-update">{% now "H:i:s" %}</span>
111
+ </span>
112
+ </div>
113
+ </div>
114
+ </div>
115
+
116
+ <script>
117
+ // Quick actions implementation
118
+ function createNewPayment() {
119
+ window.location.href = '{% url "payments_dashboard:create" %}';
120
+ }
121
+
122
+ function refreshPayments() {
123
+ location.reload();
124
+ }
125
+
126
+ function exportPayments() {
127
+ // Implement export functionality
128
+ if (window.notificationManager) {
129
+ window.notificationManager.info('Export functionality coming soon');
130
+ }
131
+ }
132
+
133
+ // Auto-refresh stats every 30 seconds
134
+ setInterval(() => {
135
+ updateStatsLastUpdate();
136
+ }, 30000);
137
+
138
+ function updateStatsLastUpdate() {
139
+ const element = document.getElementById('stats-last-update');
140
+ if (element) {
141
+ element.textContent = new Date().toLocaleTimeString();
142
+ }
143
+ }
144
+ </script>