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

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

@@ -0,0 +1,500 @@
+{% 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 %}