django-cfg 1.3.3__py3-none-any.whl → 1.3.7__py3-none-any.whl

django_cfg/apps/payments/admin_interface/templates/payments/payment_list.html

@@ -1,382 +1,179 @@
 {% extends 'payments/base.html' %}
 {% load static %}
-{% load payment_tags %}
 
-{% block page_title %}{{ page_title }}{% endblock %}
-{% block page_subtitle %}{{ page_subtitle }}{% endblock %}
+{% block title %}Payments - Payment Admin{% endblock %}
+
+{% block page_title %}Payments{% endblock %}
+{% block page_subtitle %}Manage and monitor payment transactions{% endblock %}
 
 {% block content %}
 <div x-data="paymentList()" x-init="init()">
-    <!-- Filters and Search -->
-    <div class="payment-card mb-6">
-        <div class="payment-card-header">
-            <h3 class="font-medium text-gray-900 dark:text-white flex items-center">
-                <span class="material-icons-outlined mr-2">filter_list</span>
-                Filters & Search
-            </h3>
-            <button @click="resetFilters()" 
-                    class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
-                Reset
+    <!-- Actions Bar -->
+    <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
+        <div class="flex items-center space-x-4">
+            <a href="{% url 'cfg_payments_admin:payment-form' %}" 
+               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700">
+                <span class="material-icons-outlined mr-2">add</span>
+                Create Payment
+            </a>
+            <button @click="refreshPayments()" 
+                    class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-md hover:bg-gray-50 dark:hover:bg-gray-700">
+                <span class="material-icons-outlined mr-2" :class="{ 'animate-spin': loading }">refresh</span>
+                Refresh
             </button>
         </div>
-        <div class="payment-card-content">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                <!-- Search -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search</label>
-                    <input type="text" 
-                           x-model="filters.search"
-                           @input.debounce.300ms="applyFilters()"
-                           placeholder="Payment ID, Amount..."
-                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
-                </div>
-
-                <!-- Status Filter -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
-                    <select x-model="filters.status" @change="applyFilters()"
-                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
-                        <option value="">All Statuses</option>
-                        <option value="pending">Pending</option>
-                        <option value="processing">Processing</option>
-                        <option value="completed">Completed</option>
-                        <option value="failed">Failed</option>
-                        <option value="cancelled">Cancelled</option>
-                    </select>
-                </div>
-
-                <!-- Provider Filter -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Provider</label>
-                    <select x-model="filters.provider" @change="applyFilters()"
-                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
-                        <option value="">All Providers</option>
-                        <option value="nowpayments">NowPayments</option>
-                        <option value="stripe">Stripe</option>
-                        <option value="cryptapi">CryptAPI</option>
-                    </select>
-                </div>
-
-                <!-- Date Range -->
-                <div>
-                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Date Range</label>
-                    <select x-model="filters.dateRange" @change="applyFilters()"
-                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
-                        <option value="">All Time</option>
-                        <option value="today">Today</option>
-                        <option value="week">This Week</option>
-                        <option value="month">This Month</option>
-                        <option value="quarter">This Quarter</option>
-                    </select>
+        
+        <!-- Search and Filters -->
+        <div class="mt-4 sm:mt-0 flex items-center space-x-4">
+            <div class="relative">
+                <input type="text" 
+                       x-model="filters.search"
+                       @input.debounce.300ms="applyFilters()"
+                       placeholder="Search payments..."
+                       class="block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
+                    <span class="material-icons-outlined text-gray-400 text-sm">search</span>
                 </div>
             </div>
-        </div>
-    </div>
-
-    <!-- Results Summary -->
-    <div class="flex items-center justify-between mb-6">
-        <div class="text-sm text-gray-600 dark:text-gray-400">
-            Showing <span x-text="payments.length"></span> payments
-            <span x-show="totalCount > payments.length" x-text="`of ${totalCount}`"></span>
-        </div>
-        <div class="flex items-center space-x-2">
-            <button @click="exportPayments()" 
-                    class="btn btn-outline text-sm">
-                <span class="material-icons-outlined mr-1 text-sm">download</span>
-                Export
-            </button>
-            <a href="{% url 'cfg_payments_admin:payment-create' %}" 
-               class="btn btn-primary text-sm">
-                <span class="material-icons-outlined mr-1 text-sm">add</span>
-                New Payment
-            </a>
+            
+            <select x-model="filters.status" 
+                    @change="applyFilters()"
+                    class="block px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
+                <option value="">All Status</option>
+                <option value="pending">Pending</option>
+                <option value="completed">Completed</option>
+                <option value="failed">Failed</option>
+                <option value="cancelled">Cancelled</option>
+            </select>
         </div>
     </div>
 
     <!-- Payments Table -->
-    <div class="payment-card">
-        <div class="payment-card-content p-0">
-            <div class="overflow-x-auto">
-                <table class="w-full">
-                    <thead class="bg-gray-50 dark:bg-gray-700">
-                        <tr>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                                Payment
-                            </th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                                Amount
-                            </th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                                Status
-                            </th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                                Provider
-                            </th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                                Date
-                            </th>
-                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                                Actions
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-                        <template x-for="payment in payments" :key="payment.id">
-                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex items-center">
-                                        <div class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
-                                             :class="{
-                                                 'bg-green-100 dark:bg-green-900': payment.status === 'completed',
-                                                 'bg-yellow-100 dark:bg-yellow-900': payment.status === 'pending',
-                                                 'bg-blue-100 dark:bg-blue-900': payment.status === 'processing',
-                                                 'bg-red-100 dark:bg-red-900': ['failed', 'cancelled'].includes(payment.status)
-                                             }">
-                                            <span class="material-icons-outlined text-sm"
-                                                  :class="{
-                                                      'text-green-600 dark:text-green-400': payment.status === 'completed',
-                                                      'text-yellow-600 dark:text-yellow-400': payment.status === 'pending',
-                                                      'text-blue-600 dark:text-blue-400': payment.status === 'processing',
-                                                      'text-red-600 dark:text-red-400': ['failed', 'cancelled'].includes(payment.status)
-                                                  }"
-                                                  x-text="getStatusIcon(payment.status)">
-                                            </span>
-                                        </div>
-                                        <div>
-                                            <div class="text-sm font-medium text-gray-900 dark:text-white" x-text="payment.external_id || payment.id.substring(0, 8)"></div>
-                                            <div class="text-sm text-gray-500 dark:text-gray-400" x-text="payment.currency_code"></div>
-                                        </div>
+    <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
+        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-medium text-gray-900 dark:text-white">
+                Recent Payments
+                <span class="ml-2 text-sm font-normal text-gray-500 dark:text-gray-400" x-text="`(${filteredPayments.length})`"></span>
+            </h3>
+        </div>
+        
+        <div class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead class="bg-gray-50 dark:bg-gray-700">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                            Payment
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                            Amount
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                            Status
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                            Provider
+                        </th>
+                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                            Created
+                        </th>
+                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
+                            Actions
+                        </th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+                    <template x-for="payment in paginatedPayments" :key="payment.id">
+                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="flex items-center">
+                                    <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-3">
+                                        <span class="material-icons-outlined text-blue-600 dark:text-blue-400">payment</span>
                                     </div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-sm font-medium text-gray-900 dark:text-white" x-text="`$${payment.amount_usd.toFixed(2)}`"></div>
-                                    <div class="text-sm text-gray-500 dark:text-gray-400" x-show="payment.amount_crypto" x-text="payment.amount_crypto + ' ' + payment.currency_code"></div>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
-                                          :class="{
-                                              'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200': payment.status === 'completed',
-                                              'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200': payment.status === 'pending',
-                                              'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200': payment.status === 'processing',
-                                              'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200': ['failed', 'cancelled'].includes(payment.status)
-                                          }"
-                                          x-text="payment.status.charAt(0).toUpperCase() + payment.status.slice(1)">
-                                    </span>
-                                </td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white" x-text="payment.provider.charAt(0).toUpperCase() + payment.provider.slice(1)"></td>
-                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400" x-text="formatDate(payment.created_at)"></td>
-                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                    <div class="flex items-center justify-end space-x-2">
-                                        <a :href="`{% url 'cfg_payments_admin:payment-detail' '00000000-0000-0000-0000-000000000000' %}`.replace('00000000-0000-0000-0000-000000000000', payment.id)"
-                                           class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
-                                            <span class="material-icons-outlined text-sm">visibility</span>
-                                        </a>
-                                        <button @click="copyPaymentId(payment.id)" 
-                                                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
-                                            <span class="material-icons-outlined text-sm">content_copy</span>
-                                        </button>
+                                    <div>
+                                        <div class="text-sm font-medium text-gray-900 dark:text-white" x-text="payment.id.substring(0, 8)"></div>
+                                        <div class="text-sm text-gray-500 dark:text-gray-400" x-text="payment.external_id || 'No external ID'"></div>
                                     </div>
-                                </td>
-                            </tr>
-                        </template>
-                    </tbody>
-                </table>
-
-                <!-- Empty State -->
-                <div x-show="payments.length === 0 && !loading" class="text-center py-12">
-                    <span class="material-icons-outlined text-gray-400 text-6xl mb-4">payments</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">
-                        <span x-show="hasActiveFilters()">Try adjusting your filters or</span>
-                        <span x-show="!hasActiveFilters()">Get started by</span>
-                        creating your first payment.
-                    </p>
-                    <a href="{% url 'cfg_payments_admin:payment-create' %}" 
-                       class="btn btn-primary">
-                        <span class="material-icons-outlined mr-2">add</span>
-                        Create Payment
-                    </a>
-                </div>
-            </div>
+                                </div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <div class="text-sm font-medium text-gray-900 dark:text-white" x-text="`$${payment.amount_usd}`"></div>
+                                <div class="text-sm text-gray-500 dark:text-gray-400" x-text="payment.currency_code"></div>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap">
+                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
+                                      :class="{
+                                          'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400': payment.status === 'completed',
+                                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400': payment.status === 'pending',
+                                          'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400': payment.status === 'failed',
+                                          'bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400': payment.status === 'cancelled'
+                                      }"
+                                      x-text="payment.status">
+                                </span>
+                            </td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white" x-text="payment.provider"></td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400" x-text="formatDate(payment.created_at)"></td>
+                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                                <div class="flex items-center justify-end space-x-2">
+                                    <a :href="`/cfg/admin/django_cfg_payments/admin/payments/${payment.id}/`" 
+                                       class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">
+                                        <span class="material-icons-outlined text-sm">visibility</span>
+                                    </a>
+                                    <button @click="refreshPayment(payment.id)" 
+                                            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
+                                        <span class="material-icons-outlined text-sm">refresh</span>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </div>
-    </div>
 
-    <!-- Pagination -->
-    <div x-show="totalPages > 1" class="flex items-center justify-between mt-6">
-        <div class="text-sm text-gray-600 dark:text-gray-400">
-            Page <span x-text="currentPage"></span> of <span x-text="totalPages"></span>
-        </div>
-        <div class="flex items-center space-x-2">
-            <button @click="goToPage(currentPage - 1)" 
-                    :disabled="currentPage <= 1"
-                    class="btn btn-outline text-sm" 
-                    :class="{ 'opacity-50 cursor-not-allowed': currentPage <= 1 }">
-                <span class="material-icons-outlined text-sm">chevron_left</span>
-                Previous
-            </button>
-            <button @click="goToPage(currentPage + 1)" 
-                    :disabled="currentPage >= totalPages"
-                    class="btn btn-outline text-sm"
-                    :class="{ 'opacity-50 cursor-not-allowed': currentPage >= totalPages }">
-                Next
-                <span class="material-icons-outlined text-sm">chevron_right</span>
-            </button>
+        <!-- Empty State -->
+        <div x-show="filteredPayments.length === 0 && !loading" class="text-center py-12">
+            <span class="material-icons-outlined 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>
+            <a href="{% url 'cfg_payments_admin:payment-form' %}" 
+               class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700">
+                <span class="material-icons-outlined mr-2">add</span>
+                Create Payment
+            </a>
         </div>
-    </div>
 
-    <!-- Loading Spinner -->
-    <div x-show="loading" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        {% include 'payments/components/loading_spinner.html' %}
-    </div>
+        <!-- Loading State -->
+        <div x-show="loading" class="text-center py-12">
+            <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Loading payments...</p>
+        </div>
 
-    <!-- Notifications -->
-    <div x-show="notification.show" x-cloak 
-         class="fixed top-4 right-4 z-50"
-         x-transition:enter="transition ease-out duration-300"
-         x-transition:enter-start="opacity-0 transform translate-x-full"
-         x-transition:enter-end="opacity-100 transform translate-x-0"
-         x-transition:leave="transition ease-in duration-200"
-         x-transition:leave-start="opacity-100 transform translate-x-0"
-         x-transition:leave-end="opacity-0 transform translate-x-full">
-        {% include 'payments/components/notification.html' with type="notification.type" message="notification.message" %}
+        <!-- Pagination -->
+        <div x-show="filteredPayments.length > pageSize" class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+            <div class="flex items-center justify-between">
+                <div class="text-sm text-gray-700 dark:text-gray-300">
+                    Showing <span x-text="((currentPage - 1) * pageSize) + 1"></span> to 
+                    <span x-text="Math.min(currentPage * pageSize, filteredPayments.length)"></span> of 
+                    <span x-text="filteredPayments.length"></span> results
+                </div>
+                <div class="flex space-x-2">
+                    <button @click="currentPage--" 
+                            :disabled="currentPage === 1"
+                            class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md disabled:opacity-50">
+                        Previous
+                    </button>
+                    <button @click="currentPage++" 
+                            :disabled="currentPage * pageSize >= filteredPayments.length"
+                            class="px-3 py-1 text-sm bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md disabled:opacity-50">
+                        Next
+                    </button>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 {% endblock %}
 
 {% block extra_js %}
-<script>
-function paymentList() {
-    return {
-        loading: false,
-        payments: [],
-        totalCount: 0,
-        currentPage: 1,
-        totalPages: 1,
-        filters: {
-            search: '',
-            status: '',
-            provider: '',
-            dateRange: ''
-        },
-        notification: {
-            show: false,
-            type: 'info',
-            message: ''
-        },
-
-        init() {
-            this.loadPayments();
-        },
-
-        async loadPayments() {
-            this.loading = true;
-            try {
-                // Simulate API call - replace with actual endpoint
-                await new Promise(resolve => setTimeout(resolve, 500));
-                
-                // Mock data - replace with actual API response
-                this.payments = [
-                    {
-                        id: '123e4567-e89b-12d3-a456-426614174000',
-                        external_id: 'PAY_001',
-                        amount_usd: 100.00,
-                        amount_crypto: '0.00234',
-                        currency_code: 'BTC',
-                        status: 'completed',
-                        provider: 'nowpayments',
-                        created_at: new Date().toISOString()
-                    },
-                    {
-                        id: '123e4567-e89b-12d3-a456-426614174001',
-                        external_id: 'PAY_002',
-                        amount_usd: 50.00,
-                        amount_crypto: null,
-                        currency_code: 'USD',
-                        status: 'pending',
-                        provider: 'stripe',
-                        created_at: new Date(Date.now() - 86400000).toISOString()
-                    }
-                ];
-                this.totalCount = this.payments.length;
-                this.totalPages = Math.ceil(this.totalCount / 20);
-            } catch (error) {
-                this.showNotification('error', 'Failed to load payments');
-            } finally {
-                this.loading = false;
-            }
-        },
-
-        async applyFilters() {
-            this.currentPage = 1;
-            await this.loadPayments();
-        },
-
-        resetFilters() {
-            this.filters = {
-                search: '',
-                status: '',
-                provider: '',
-                dateRange: ''
-            };
-            this.applyFilters();
-        },
-
-        hasActiveFilters() {
-            return Object.values(this.filters).some(value => value !== '');
-        },
-
-        async goToPage(page) {
-            if (page >= 1 && page <= this.totalPages) {
-                this.currentPage = page;
-                await this.loadPayments();
-            }
-        },
-
-        getStatusIcon(status) {
-            const icons = {
-                completed: 'check_circle',
-                pending: 'schedule',
-                processing: 'sync',
-                failed: 'error',
-                cancelled: 'cancel'
-            };
-            return icons[status] || 'help';
-        },
-
-        formatDate(dateString) {
-            const date = new Date(dateString);
-            return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-        },
-
-        async copyPaymentId(paymentId) {
-            try {
-                await navigator.clipboard.writeText(paymentId);
-                this.showNotification('success', 'Payment ID copied to clipboard');
-            } catch (error) {
-                this.showNotification('error', 'Failed to copy payment ID');
-            }
-        },
-
-        async exportPayments() {
-            this.loading = true;
-            try {
-                // Simulate export - replace with actual implementation
-                await new Promise(resolve => setTimeout(resolve, 1000));
-                this.showNotification('success', 'Payments exported successfully');
-            } catch (error) {
-                this.showNotification('error', 'Failed to export payments');
-            } finally {
-                this.loading = false;
-            }
-        },
-
-        showNotification(type, message) {
-            this.notification = { show: true, type, message };
-            setTimeout(() => {
-                this.notification.show = false;
-            }, 5000);
-        }
-    };
-}
-</script>
+<script src="{% static 'payments/js/payment-list.js' %}"></script>
 {% endblock %}