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

django_cfg/apps/payments/admin_interface/old/payments/payment_status.html

@@ -1,500 +0,0 @@
-{% extends 'payments/base.html' %}
-{% load static %}
-
-{% block title %}Payment Status - Universal Payment System{% endblock %}
-
-{% block page_title %}Payment Status{% endblock %}
-{% block page_subtitle %}Track your payment progress in real-time{% endblock %}
-
-{% block extra_css %}
-<style>
-    .status-timeline {
-        position: relative;
-    }
-    
-    .status-timeline::before {
-        content: '';
-        position: absolute;
-        left: 16px;
-        top: 0;
-        bottom: 0;
-        width: 2px;
-        background: linear-gradient(to bottom, #3b82f6, #e5e7eb);
-    }
-    
-    .timeline-item {
-        position: relative;
-        padding-left: 48px;
-        padding-bottom: 24px;
-    }
-    
-    .timeline-item:last-child {
-        padding-bottom: 0;
-    }
-    
-    .timeline-icon {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1;
-    }
-    
-    .timeline-icon.completed {
-        background-color: #10b981;
-        color: white;
-    }
-    
-    .timeline-icon.current {
-        background-color: #3b82f6;
-        color: white;
-        animation: pulse 2s infinite;
-    }
-    
-    .timeline-icon.pending {
-        background-color: #e5e7eb;
-        color: #6b7280;
-    }
-    
-    @keyframes pulse {
-        0%, 100% { transform: scale(1); }
-        50% { transform: scale(1.1); }
-    }
-    
-    .payment-qr {
-        max-width: 200px;
-        margin: 0 auto;
-    }
-    
-    .countdown {
-        font-variant-numeric: tabular-nums;
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div x-data="paymentStatus('{{ payment.id }}')" x-init="init()" class="max-w-4xl mx-auto">
-    <!-- Payment Header -->
-    <div class="payment-card mb-8">
-        <div class="flex items-center justify-between">
-            <div class="flex items-center">
-                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-4">
-                    <span class="material-icons-outlined text-blue-600 dark:text-blue-400">receipt_long</span>
-                </div>
-                <div>
-                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Payment #{{ payment.external_id|default:payment.id|truncatechars:8 }}</h1>
-                    <p class="text-gray-600 dark:text-gray-400">Created {{ payment.created_at|date:"M d, Y H:i" }}</p>
-                </div>
-            </div>
-            
-            <div class="text-right">
-                <div class="text-2xl font-bold text-gray-900 dark:text-white">
-                    ${{ payment.amount_usd|floatformat:2 }}
-                </div>
-                <div class="text-sm text-gray-600 dark:text-gray-400">
-                    {{ payment.currency.code }}
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <!-- Status Timeline -->
-        <div class="lg:col-span-2">
-            <div class="payment-card">
-                <div class="payment-card-header">
-                    <h2 class="payment-card-title">
-                        <span class="material-icons-outlined">timeline</span>
-                        Payment Progress
-                    </h2>
-                    <div class="flex items-center">
-                        <span class="status-indicator" :class="getStatusIndicatorClass(payment.status)"></span>
-                        <span class="status-badge" :class="getStatusBadgeClass(payment.status)" x-text="payment.status_display"></span>
-                    </div>
-                </div>
-                
-                <div class="payment-card-content">
-                    <div class="status-timeline">
-                        <!-- Created -->
-                        <div class="timeline-item">
-                            <div class="timeline-icon completed">
-                                <span class="material-icons-outlined text-sm">add_circle</span>
-                            </div>
-                            <div>
-                                <h3 class="font-medium text-gray-900 dark:text-white">Payment Created</h3>
-                                <p class="text-sm text-gray-600 dark:text-gray-400">
-                                    Payment request initiated
-                                </p>
-                                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">
-                                    {{ payment.created_at|date:"M d, Y H:i:s" }}
-                                </p>
-                            </div>
-                        </div>
-
-                        <!-- Processing -->
-                        <div class="timeline-item">
-                            <div class="timeline-icon" :class="payment.status === 'pending' || payment.status === 'processing' ? 'current' : (payment.status === 'completed' || payment.status === 'confirmed' ? 'completed' : 'pending')">
-                                <span class="material-icons-outlined text-sm">sync</span>
-                            </div>
-                            <div>
-                                <h3 class="font-medium text-gray-900 dark:text-white">Processing</h3>
-                                <p class="text-sm text-gray-600 dark:text-gray-400">
-                                    <span x-show="payment.status === 'pending' || payment.status === 'processing'">
-                                        Payment is being processed by {{ payment.provider|title }}
-                                    </span>
-                                    <span x-show="payment.status === 'completed' || payment.status === 'confirmed'">
-                                        Payment processed successfully
-                                    </span>
-                                    <span x-show="payment.status === 'failed' || payment.status === 'cancelled'">
-                                        Payment processing failed
-                                    </span>
-                                </p>
-                                <p x-show="payment.updated_at" class="text-xs text-gray-500 dark:text-gray-500 mt-1" x-text="formatDate(payment.updated_at)"></p>
-                            </div>
-                        </div>
-
-                        <!-- Confirmation -->
-                        <div class="timeline-item">
-                            <div class="timeline-icon" :class="payment.status === 'completed' || payment.status === 'confirmed' ? 'completed' : 'pending'">
-                                <span class="material-icons-outlined text-sm">check_circle</span>
-                            </div>
-                            <div>
-                                <h3 class="font-medium text-gray-900 dark:text-white">Confirmation</h3>
-                                <p class="text-sm text-gray-600 dark:text-gray-400">
-                                    <span x-show="payment.status === 'completed' || payment.status === 'confirmed'">
-                                        Payment confirmed and completed
-                                    </span>
-                                    <span x-show="payment.status !== 'completed' && payment.status !== 'confirmed'">
-                                        Waiting for confirmation
-                                    </span>
-                                </p>
-                                <p x-show="payment.confirmed_at" class="text-xs text-gray-500 dark:text-gray-500 mt-1" x-text="formatDate(payment.confirmed_at)"></p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Transaction Details -->
-            <div class="payment-card mt-8">
-                <div class="payment-card-header">
-                    <h2 class="payment-card-title">
-                        <span class="material-icons-outlined">info</span>
-                        Transaction Details
-                    </h2>
-                </div>
-                
-                <div class="payment-card-content">
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <div>
-                            <h4 class="font-medium text-gray-900 dark:text-white mb-3">Payment Information</h4>
-                            <div class="space-y-2 text-sm">
-                                <div class="flex justify-between">
-                                    <span class="text-gray-600 dark:text-gray-400">Payment ID:</span>
-                                    <span class="font-mono" data-copy="{{ payment.id }}">{{ payment.id|truncatechars:12 }}</span>
-                                </div>
-                                <div class="flex justify-between">
-                                    <span class="text-gray-600 dark:text-gray-400">External ID:</span>
-                                    <span class="font-mono" x-text="payment.external_id || 'N/A'"></span>
-                                </div>
-                                <div class="flex justify-between">
-                                    <span class="text-gray-600 dark:text-gray-400">Provider:</span>
-                                    <span x-text="payment.provider"></span>
-                                </div>
-                                <div class="flex justify-between">
-                                    <span class="text-gray-600 dark:text-gray-400">Network:</span>
-                                    <span x-text="payment.network || 'N/A'"></span>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div>
-                            <h4 class="font-medium text-gray-900 dark:text-white mb-3">Amount Details</h4>
-                            <div class="space-y-2 text-sm">
-                                <div class="flex justify-between">
-                                    <span class="text-gray-600 dark:text-gray-400">USD Amount:</span>
-                                    <span class="font-medium">${{ payment.amount_usd|floatformat:2 }}</span>
-                                </div>
-                                <div class="flex justify-between">
-                                    <span class="text-gray-600 dark:text-gray-400">Crypto Amount:</span>
-                                    <span class="font-mono" x-text="payment.amount_crypto || 'N/A'"></span>
-                                </div>
-                                <div class="flex justify-between">
-                                    <span class="text-gray-600 dark:text-gray-400">Currency:</span>
-                                    <span x-text="payment.currency_code"></span>
-                                </div>
-                                <div class="flex justify-between">
-                                    <span class="text-gray-600 dark:text-gray-400">Exchange Rate:</span>
-                                    <span x-text="payment.exchange_rate || 'N/A'"></span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <!-- Payment Actions Sidebar -->
-        <div class="space-y-6">
-            <!-- Quick Actions -->
-            <div class="payment-card">
-                <div class="payment-card-header">
-                    <h3 class="payment-card-title">
-                        <span class="material-icons-outlined">bolt</span>
-                        Quick Actions
-                    </h3>
-                </div>
-                
-                <div class="payment-card-content space-y-3">
-                    <button @click="refreshPayment()" 
-                            :disabled="loading"
-                            class="btn-primary w-full">
-                        <span x-show="!loading" class="material-icons-outlined">refresh</span>
-                        <span x-show="loading" class="loading-spinner sm mr-2"></span>
-                        <span x-text="loading ? 'Refreshing...' : 'Refresh Status'"></span>
-                    </button>
-                    
-                    <button @click="copyPaymentUrl()" class="btn-outline w-full">
-                        <span class="material-icons-outlined">share</span>
-                        Share Payment
-                    </button>
-                    
-                    <button @click="downloadReceipt()" 
-                            x-show="payment.status === 'completed' || payment.status === 'confirmed'"
-                            class="btn-outline w-full">
-                        <span class="material-icons-outlined">download</span>
-                        Download Receipt
-                    </button>
-                </div>
-            </div>
-
-            <!-- Payment QR Code -->
-            <div x-show="payment.qr_code_url || payment.payment_url" class="payment-card">
-                <div class="payment-card-header">
-                    <h3 class="payment-card-title">
-                        <span class="material-icons-outlined">qr_code</span>
-                        Payment QR Code
-                    </h3>
-                </div>
-                
-                <div class="payment-card-content text-center">
-                    <div class="payment-qr mb-4">
-                        <div x-show="payment.qr_code_url" class="bg-white p-4 rounded-lg inline-block">
-                            <img :src="payment.qr_code_url" alt="Payment QR Code" class="w-full h-auto">
-                        </div>
-                        <div x-show="!payment.qr_code_url" class="bg-gray-100 dark:bg-gray-700 p-8 rounded-lg">
-                            <span class="material-icons-outlined text-gray-400 text-4xl">qr_code</span>
-                            <p class="text-sm text-gray-500 mt-2">QR Code not available</p>
-                        </div>
-                    </div>
-                    
-                    <button x-show="payment.payment_url" 
-                            @click="copyToClipboard(payment.payment_url)" 
-                            class="btn-outline w-full text-sm">
-                        <span class="material-icons-outlined">content_copy</span>
-                        Copy Payment URL
-                    </button>
-                </div>
-            </div>
-
-            <!-- Auto-refresh Settings -->
-            <div class="payment-card">
-                <div class="payment-card-header">
-                    <h3 class="payment-card-title">
-                        <span class="material-icons-outlined">settings</span>
-                        Auto-refresh
-                    </h3>
-                </div>
-                
-                <div class="payment-card-content">
-                    <div class="flex items-center justify-between">
-                        <span class="text-sm text-gray-600 dark:text-gray-400">Enable auto-refresh</span>
-                        <label class="relative inline-flex items-center cursor-pointer">
-                            <input type="checkbox" x-model="autoRefresh" @change="toggleAutoRefresh()" class="sr-only peer">
-                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                        </label>
-                    </div>
-                    
-                    <div x-show="autoRefresh" class="mt-3">
-                        <div class="flex items-center justify-between text-sm">
-                            <span class="text-gray-600 dark:text-gray-400">Next refresh in:</span>
-                            <span class="countdown font-mono" x-text="formatCountdown(refreshCountdown)"></span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-1 mt-2">
-                            <div class="bg-blue-600 h-1 rounded-full transition-all duration-1000" 
-                                 :style="`width: ${(refreshCountdown / refreshInterval) * 100}%`"></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Support -->
-            <div class="payment-card">
-                <div class="payment-card-header">
-                    <h3 class="payment-card-title">
-                        <span class="material-icons-outlined">support_agent</span>
-                        Need Help?
-                    </h3>
-                </div>
-                
-                <div class="payment-card-content space-y-3">
-                    <a href="#" class="flex items-center text-sm text-blue-600 hover:text-blue-800">
-                        <span class="material-icons-outlined mr-2 text-sm">help</span>
-                        Payment FAQ
-                    </a>
-                    <a href="#" class="flex items-center text-sm text-blue-600 hover:text-blue-800">
-                        <span class="material-icons-outlined mr-2 text-sm">chat</span>
-                        Contact Support
-                    </a>
-                    <a href="#" class="flex items-center text-sm text-blue-600 hover:text-blue-800">
-                        <span class="material-icons-outlined mr-2 text-sm">bug_report</span>
-                        Report Issue
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block extra_js %}
-<script>
-function paymentStatus(paymentId) {
-    return {
-        payment: {
-            id: '{{ payment.id }}',
-            external_id: '{{ payment.external_id|default:"" }}',
-            status: '{{ payment.status }}',
-            status_display: '{{ payment.get_status_display }}',
-            amount_usd: {{ payment.amount_usd }},
-            currency_code: '{{ payment.currency.code }}',
-            provider: '{{ payment.provider }}',
-            created_at: '{{ payment.created_at|date:"c" }}',
-            updated_at: '{{ payment.updated_at|date:"c" }}',
-            payment_url: '{{ payment.payment_url|default:"" }}',
-            qr_code_url: '{{ payment.qr_code_url|default:"" }}'
-        },
-        loading: false,
-        autoRefresh: false,
-        refreshInterval: 30000, // 30 seconds
-        refreshCountdown: 30,
-        refreshTimer: null,
-        countdownTimer: null,
-
-        async init() {
-            // Auto-enable refresh for pending payments
-            if (this.payment.status === 'pending' || this.payment.status === 'processing') {
-                this.autoRefresh = true;
-                this.toggleAutoRefresh();
-            }
-        },
-
-        async refreshPayment() {
-            this.loading = true;
-            try {
-                const response = await fetch(`/payments/api/payments/${this.payment.id}/`);
-                const data = await response.json();
-                
-                if (response.ok) {
-                    this.payment = { ...this.payment, ...data };
-                    PaymentSystem.Utils.showNotification('Payment status updated', 'success', 'refresh');
-                    
-                    // Disable auto-refresh if payment is completed
-                    if (this.payment.status === 'completed' || this.payment.status === 'failed') {
-                        this.autoRefresh = false;
-                        this.toggleAutoRefresh();
-                    }
-                } else {
-                    throw new Error(data.error || 'Failed to refresh payment');
-                }
-            } catch (error) {
-                console.error('Failed to refresh payment:', error);
-                PaymentSystem.Utils.showNotification('Failed to refresh payment status', 'error', 'error');
-            } finally {
-                this.loading = false;
-            }
-        },
-
-        toggleAutoRefresh() {
-            if (this.autoRefresh) {
-                this.startAutoRefresh();
-            } else {
-                this.stopAutoRefresh();
-            }
-        },
-
-        startAutoRefresh() {
-            this.refreshCountdown = this.refreshInterval / 1000;
-            
-            this.refreshTimer = setInterval(() => {
-                this.refreshPayment();
-                this.refreshCountdown = this.refreshInterval / 1000;
-            }, this.refreshInterval);
-            
-            this.countdownTimer = setInterval(() => {
-                this.refreshCountdown--;
-                if (this.refreshCountdown <= 0) {
-                    this.refreshCountdown = this.refreshInterval / 1000;
-                }
-            }, 1000);
-        },
-
-        stopAutoRefresh() {
-            if (this.refreshTimer) {
-                clearInterval(this.refreshTimer);
-                this.refreshTimer = null;
-            }
-            if (this.countdownTimer) {
-                clearInterval(this.countdownTimer);
-                this.countdownTimer = null;
-            }
-        },
-
-        copyPaymentUrl() {
-            const url = window.location.href;
-            PaymentSystem.Utils.copyToClipboard(url, 'Payment URL copied to clipboard!');
-        },
-
-        copyToClipboard(text) {
-            PaymentSystem.Utils.copyToClipboard(text);
-        },
-
-        downloadReceipt() {
-            // This would generate and download a PDF receipt
-            PaymentSystem.Utils.showNotification('Receipt download started', 'info', 'download');
-        },
-
-        getStatusIndicatorClass(status) {
-            const statusMap = {
-                'completed': 'status-active',
-                'confirmed': 'status-active',
-                'pending': 'status-warning',
-                'processing': 'status-warning',
-                'failed': 'status-inactive',
-                'cancelled': 'status-inactive'
-            };
-            return statusMap[status] || 'status-warning';
-        },
-
-        getStatusBadgeClass(status) {
-            return PaymentSystem.Utils.getStatusBadgeClass(status);
-        },
-
-        formatDate(dateString) {
-            return PaymentSystem.Utils.formatDate(dateString);
-        },
-
-        formatCountdown(seconds) {
-            const mins = Math.floor(seconds / 60);
-            const secs = seconds % 60;
-            return `${mins}:${secs.toString().padStart(2, '0')}`;
-        }
-    }
-}
-</script>
-{% endblock %}