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

django_cfg/apps/payments/static/payments/js/payment-utils.js

@@ -0,0 +1,318 @@
+/**
+ * Payment Utility Functions
+ * Common utilities for payment dashboard functionality
+ */
+
+class PaymentUtils {
+    constructor() {
+        this.formatters = {
+            currency: new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD',
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 8
+            }),
+            number: new Intl.NumberFormat('en-US'),
+            date: new Intl.DateTimeFormat('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            })
+        };
+    }
+
+    // Format currency with proper decimals based on currency type
+    formatCurrency(amount, currencyCode = 'USD') {
+        const numAmount = parseFloat(amount) || 0;
+        
+        // Crypto currencies need more decimal places
+        const cryptoDecimals = {
+            'BTC': 8,
+            'ETH': 6,
+            'LTC': 8,
+            'USDT': 6,
+            'USDC': 6
+        };
+
+        if (cryptoDecimals[currencyCode]) {
+            return `${numAmount.toFixed(cryptoDecimals[currencyCode])} ${currencyCode}`;
+        }
+
+        // Fiat currencies
+        if (currencyCode === 'USD') {
+            return this.formatters.currency.format(numAmount);
+        }
+
+        return `${numAmount.toFixed(2)} ${currencyCode}`;
+    }
+
+    // Format payment status with proper display text
+    formatStatus(status) {
+        const statusMap = {
+            'pending': 'Pending',
+            'confirming': 'Confirming',
+            'confirmed': 'Confirmed',
+            'completed': 'Completed',
+            'failed': 'Failed',
+            'expired': 'Expired',
+            'cancelled': 'Cancelled',
+            'refunded': 'Refunded'
+        };
+        return statusMap[status] || status;
+    }
+
+    // Get status color class
+    getStatusColor(status) {
+        const colorMap = {
+            'pending': 'yellow',
+            'confirming': 'blue',
+            'confirmed': 'green',
+            'completed': 'green',
+            'failed': 'red',
+            'expired': 'gray',
+            'cancelled': 'gray',
+            'refunded': 'purple'
+        };
+        return colorMap[status] || 'gray';
+    }
+
+    // Get provider display name
+    getProviderName(provider) {
+        const providerMap = {
+            'nowpayments': 'NowPayments',
+            'cryptapi': 'CryptAPI',
+            'cryptomus': 'Cryptomus',
+            'stripe': 'Stripe',
+            'internal': 'Internal'
+        };
+        return providerMap[provider] || provider;
+    }
+
+    // Get provider icon
+    getProviderIcon(provider) {
+        const iconMap = {
+            'nowpayments': 'currency_bitcoin',
+            'cryptapi': 'currency_bitcoin',
+            'cryptomus': 'currency_bitcoin',
+            'stripe': 'credit_card',
+            'internal': 'account_balance'
+        };
+        return iconMap[provider] || 'payment';
+    }
+
+    // Calculate time ago
+    timeAgo(dateString) {
+        const date = new Date(dateString);
+        const now = new Date();
+        const diffMs = now - date;
+        const diffSecs = Math.floor(diffMs / 1000);
+        const diffMins = Math.floor(diffSecs / 60);
+        const diffHours = Math.floor(diffMins / 60);
+        const diffDays = Math.floor(diffHours / 24);
+
+        if (diffSecs < 60) {
+            return 'Just now';
+        } else if (diffMins < 60) {
+            return `${diffMins}m ago`;
+        } else if (diffHours < 24) {
+            return `${diffHours}h ago`;
+        } else if (diffDays < 7) {
+            return `${diffDays}d ago`;
+        } else {
+            return this.formatters.date.format(date);
+        }
+    }
+
+    // Validate payment ID format
+    isValidPaymentId(id) {
+        // UUID v4 format
+        const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+        return uuidRegex.test(id);
+    }
+
+    // Copy text to clipboard
+    async copyToClipboard(text) {
+        try {
+            await navigator.clipboard.writeText(text);
+            if (window.notificationManager) {
+                window.notificationManager.success('Copied to clipboard');
+            }
+            return true;
+        } catch (err) {
+            console.error('Failed to copy to clipboard:', err);
+            if (window.notificationManager) {
+                window.notificationManager.error('Failed to copy to clipboard');
+            }
+            return false;
+        }
+    }
+
+    // Generate QR code data URL (placeholder - requires QR library)
+    generateQRCodeDataUrl(data, size = 128) {
+        // This would integrate with a QR code library like qrcode.js
+        // For now, return a placeholder
+        return `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"><rect width="100%" height="100%" fill="%23f3f4f6"/><text x="50%" y="50%" text-anchor="middle" dy="0.3em" font-family="sans-serif" font-size="12" fill="%236b7280">QR Code</text></svg>`;
+    }
+
+    // Debounce function for search/filter inputs
+    debounce(func, wait) {
+        let timeout;
+        return function executedFunction(...args) {
+            const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+            };
+            clearTimeout(timeout);
+            timeout = setTimeout(later, wait);
+        };
+    }
+
+    // Throttle function for scroll events
+    throttle(func, limit) {
+        let inThrottle;
+        return function() {
+            const args = arguments;
+            const context = this;
+            if (!inThrottle) {
+                func.apply(context, args);
+                inThrottle = true;
+                setTimeout(() => inThrottle = false, limit);
+            }
+        };
+    }
+
+    // Update URL parameters without page reload
+    updateUrlParams(params) {
+        const url = new URL(window.location);
+        Object.keys(params).forEach(key => {
+            if (params[key] !== null && params[key] !== '') {
+                url.searchParams.set(key, params[key]);
+            } else {
+                url.searchParams.delete(key);
+            }
+        });
+        window.history.replaceState({}, '', url);
+    }
+
+    // Get URL parameter value
+    getUrlParam(param) {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get(param);
+    }
+
+    // Format large numbers (e.g., 1000000 -> 1M)
+    formatLargeNumber(num) {
+        const numValue = parseFloat(num) || 0;
+        if (numValue >= 1000000000) {
+            return (numValue / 1000000000).toFixed(1) + 'B';
+        } else if (numValue >= 1000000) {
+            return (numValue / 1000000).toFixed(1) + 'M';
+        } else if (numValue >= 1000) {
+            return (numValue / 1000).toFixed(1) + 'K';
+        }
+        return this.formatters.number.format(numValue);
+    }
+
+    // Show confirmation dialog
+    showConfirmDialog(message, onConfirm, onCancel = null) {
+        const modal = document.createElement('div');
+        modal.className = 'modal-overlay';
+        modal.innerHTML = `
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Confirm Action</h3>
+                </div>
+                <div class="modal-body">
+                    <p class="text-sm text-gray-500 dark:text-gray-400">${this.escapeHtml(message)}</p>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-outline" id="cancel-btn">Cancel</button>
+                    <button class="btn btn-danger" id="confirm-btn">Confirm</button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(modal);
+
+        const confirmBtn = modal.querySelector('#confirm-btn');
+        const cancelBtn = modal.querySelector('#cancel-btn');
+
+        const cleanup = () => {
+            if (modal.parentNode) {
+                modal.parentNode.removeChild(modal);
+            }
+        };
+
+        confirmBtn.addEventListener('click', () => {
+            cleanup();
+            if (onConfirm) onConfirm();
+        });
+
+        cancelBtn.addEventListener('click', () => {
+            cleanup();
+            if (onCancel) onCancel();
+        });
+
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                cleanup();
+                if (onCancel) onCancel();
+            }
+        });
+    }
+
+    // Escape HTML to prevent XSS
+    escapeHtml(text) {
+        const map = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#039;'
+        };
+        return text.replace(/[&<>"']/g, (m) => map[m]);
+    }
+
+    // Local storage helpers with error handling
+    setStorage(key, value) {
+        try {
+            localStorage.setItem(key, JSON.stringify(value));
+            return true;
+        } catch (e) {
+            console.error('Failed to save to localStorage:', e);
+            return false;
+        }
+    }
+
+    getStorage(key, defaultValue = null) {
+        try {
+            const item = localStorage.getItem(key);
+            return item ? JSON.parse(item) : defaultValue;
+        } catch (e) {
+            console.error('Failed to read from localStorage:', e);
+            return defaultValue;
+        }
+    }
+
+    removeStorage(key) {
+        try {
+            localStorage.removeItem(key);
+            return true;
+        } catch (e) {
+            console.error('Failed to remove from localStorage:', e);
+            return false;
+        }
+    }
+}
+
+// Initialize utils when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.paymentUtils = new PaymentUtils();
+});
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = PaymentUtils;
+}

django_cfg/apps/payments/static/payments/js/theme.js

@@ -0,0 +1,86 @@
+/**
+ * Theme Management for Payment Dashboard
+ * Handles light/dark mode switching with persistence
+ */
+
+class ThemeManager {
+    constructor() {
+        this.initTheme();
+        this.bindEvents();
+    }
+
+    initTheme() {
+        // Check for saved theme preference or default to system preference
+        const savedTheme = localStorage.getItem('theme');
+        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        
+        if (savedTheme) {
+            this.setTheme(savedTheme);
+        } else if (systemPrefersDark) {
+            this.setTheme('dark');
+        } else {
+            this.setTheme('light');
+        }
+    }
+
+    setTheme(theme) {
+        const html = document.documentElement;
+        const toggleBtn = document.getElementById('theme-toggle');
+        const icon = toggleBtn?.querySelector('.material-icons');
+
+        if (theme === 'dark') {
+            html.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+            if (icon) {
+                icon.textContent = 'dark_mode';
+                icon.classList.add('text-yellow-400');
+                icon.classList.remove('text-gray-600');
+            }
+        } else {
+            html.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+            if (icon) {
+                icon.textContent = 'light_mode';
+                icon.classList.add('text-gray-600');
+                icon.classList.remove('text-yellow-400');
+            }
+        }
+
+        // Dispatch theme change event
+        window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme } }));
+    }
+
+    toggle() {
+        const currentTheme = localStorage.getItem('theme') || 'light';
+        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        this.setTheme(newTheme);
+    }
+
+    bindEvents() {
+        const toggleBtn = document.getElementById('theme-toggle');
+        if (toggleBtn) {
+            toggleBtn.addEventListener('click', () => this.toggle());
+        }
+
+        // Listen for system theme changes
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+            if (!localStorage.getItem('theme')) {
+                this.setTheme(e.matches ? 'dark' : 'light');
+            }
+        });
+    }
+
+    getCurrentTheme() {
+        return localStorage.getItem('theme') || 'light';
+    }
+}
+
+// Initialize theme manager when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.themeManager = new ThemeManager();
+});
+
+// Export for use in other modules
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = ThemeManager;
+}

django_cfg/apps/payments/templates/payments/base.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Payment Dashboard{% endblock %}</title>
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#eff6ff',
+                            100: '#dbeafe',
+                            200: '#bfdbfe',
+                            300: '#93c5fd',
+                            400: '#60a5fa',
+                            500: '#3b82f6',
+                            600: '#2563eb',
+                            700: '#1d4ed8',
+                            800: '#1e40af',
+                            900: '#1e3a8a',
+                        },
+                        success: {
+                            50: '#f0fdf4',
+                            100: '#dcfce7',
+                            500: '#22c55e',
+                            600: '#16a34a',
+                        },
+                        warning: {
+                            50: '#fffbeb',
+                            100: '#fef3c7',
+                            500: '#f59e0b',
+                            600: '#d97706',
+                        },
+                        danger: {
+                            50: '#fef2f2',
+                            100: '#fee2e2',
+                            500: '#ef4444',
+                            600: '#dc2626',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <!-- Material Icons -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'payments/css/payments.css' %}">
+    
+    {% block extra_head %}{% endblock %}
+</head>
+<body class="h-full bg-gray-50 dark:bg-gray-900">
+    <div class="min-h-full">
+        <!-- Header -->
+        <header class="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex items-center justify-between h-16">
+                    <div class="flex items-center space-x-3">
+                        <div class="flex-shrink-0">
+                            <span class="material-icons text-primary-600 dark:text-primary-400 text-3xl">payments</span>
+                        </div>
+                        <div>
+                            <h1 class="text-xl font-bold text-gray-900 dark:text-white">
+                                {% block header_title %}Payment Dashboard{% endblock %}
+                            </h1>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                                {% block header_subtitle %}Monitor and manage payment transactions{% endblock %}
+                            </p>
+                        </div>
+                    </div>
+                    <div class="flex items-center space-x-3">
+                        {% block header_actions %}
+                        <a href="{% url 'payments_dashboard:list' %}" 
+                           class="inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200">
+                            <span class="material-icons text-sm mr-2">history</span>
+                            Payment History
+                        </a>
+                        <a href="{% url 'payments_dashboard:create' %}" 
+                           class="inline-flex items-center px-3 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md text-sm font-medium transition-colors duration-200">
+                            <span class="material-icons text-sm mr-2">add</span>
+                            New Payment
+                        </a>
+                        <button id="theme-toggle" 
+                                class="group inline-flex items-center justify-center px-3 py-2 rounded-md bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
+                            <span class="material-icons text-gray-600 dark:text-yellow-400 group-hover:text-primary-600 dark:group-hover:text-yellow-300 transition-colors duration-200">light_mode</span>
+                        </button>
+                        {% endblock %}
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Live Status Indicator -->
+        <div id="live-status" class="bg-success-50 border-b border-success-200 px-4 py-2 hidden">
+            <div class="max-w-7xl mx-auto">
+                <div class="flex items-center justify-center">
+                    <div class="flex items-center">
+                        <div class="w-2 h-2 bg-success-500 rounded-full mr-2 animate-pulse"></div>
+                        <span class="text-sm text-success-700 font-medium">Real-time updates active</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main content -->
+        <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+            {% block content %}{% endblock %}
+        </main>
+
+        <!-- Footer -->
+        <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-12">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                <div class="flex items-center justify-between">
+                    <div class="text-sm text-gray-500 dark:text-gray-400">
+                        {% block footer_text %}
+                        Django-CFG Payment System • 
+                        <span id="connection-status" class="text-success-600">Connected</span>
+                        {% endblock %}
+                    </div>
+                    <div class="flex items-center space-x-4 text-sm text-gray-500 dark:text-gray-400">
+                        <span>Last update: <span id="last-update">{% now "H:i:s" %}</span></span>
+                        <span class="material-icons text-sm">schedule</span>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+
+    <!-- Notification Container -->
+    <div id="notification-container" class="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 space-y-2"></div>
+
+    <!-- Modal Container -->
+    <div id="modal-container"></div>
+
+    <!-- JavaScript -->
+    <script src="{% static 'payments/js/theme.js' %}"></script>
+    <script src="{% static 'payments/js/notifications.js' %}"></script>
+    <script src="{% static 'payments/js/payment-utils.js' %}"></script>
+    {% block extra_js %}{% endblock %}
+    
+    <!-- Real-time updates -->
+    <script>
+        // Global payment system initialization
+        document.addEventListener('DOMContentLoaded', function() {
+            // Update connection status
+            const updateConnectionStatus = () => {
+                const statusEl = document.getElementById('connection-status');
+                const lastUpdateEl = document.getElementById('last-update');
+                const liveStatusEl = document.getElementById('live-status');
+                
+                if (statusEl) {
+                    statusEl.textContent = 'Connected';
+                    statusEl.className = 'text-success-600';
+                }
+                
+                if (lastUpdateEl) {
+                    lastUpdateEl.textContent = new Date().toLocaleTimeString();
+                }
+                
+                if (liveStatusEl) {
+                    liveStatusEl.classList.remove('hidden');
+                }
+            };
+            
+            // Initial status update
+            updateConnectionStatus();
+            
+            // Periodic status update
+            setInterval(updateConnectionStatus, 30000); // Every 30 seconds
+        });
+    </script>
+</body>
+</html>