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

django_cfg/__init__.py

@@ -32,7 +32,7 @@ Example:
 default_app_config = "django_cfg.apps.DjangoCfgConfig"
 
 # Version information
-__version__ = "1.3.9"
+__version__ = "1.3.11"
 __license__ = "MIT"
 
 # Import registry for organized lazy loading

django_cfg/apps/payments/admin/networks_admin.py

@@ -143,6 +143,7 @@ class ProviderCurrencyAdmin(OptimizedModelAdmin, DisplayMixin, ModelAdmin):
     # List configuration
     list_display = [
         'currency_display',
+        'provider_currency_code_display',
         'network_display',
         'provider_display',
         'fees_display',
@@ -163,7 +164,8 @@ class ProviderCurrencyAdmin(OptimizedModelAdmin, DisplayMixin, ModelAdmin):
         'currency__name',
         'currency__symbol',
         'network__name',
-        'provider'
+        'provider',
+        'provider_currency_code'
     ]
     
     readonly_fields = [
@@ -181,6 +183,15 @@ class ProviderCurrencyAdmin(OptimizedModelAdmin, DisplayMixin, ModelAdmin):
             icon=Icons.CURRENCY_BITCOIN
         )
     
+    @display(description="Provider Code")
+    def provider_currency_code_display(self, obj: ProviderCurrency):
+        """Provider currency code display."""
+        return StatusBadge.create(
+            text=obj.provider_currency_code,
+            variant="warning",
+            icon=Icons.CODE
+        )
+    
     @display(description="Network")
     def network_display(self, obj: ProviderCurrency):
         """Network display."""

django_cfg/apps/payments/admin/payments_admin.py

@@ -56,6 +56,7 @@ class UniversalPaymentAdmin(OptimizedModelAdmin, DisplayMixin, ModelAdmin):
         'amount_display',
         'status_display',
         'provider_display',
+        'status_changed_display',
         'created_display'
     ]
     
@@ -78,6 +79,7 @@ class UniversalPaymentAdmin(OptimizedModelAdmin, DisplayMixin, ModelAdmin):
         'internal_payment_id',
         'created_at',
         'updated_at',
+        'status_changed_at',
         'payment_details_display'
     ]
     
@@ -168,6 +170,17 @@ class UniversalPaymentAdmin(OptimizedModelAdmin, DisplayMixin, ModelAdmin):
             DateTimeDisplayConfig(show_relative=True, show_seconds=False)
         )
     
+    @display(description="Status Changed")
+    def status_changed_display(self, obj):
+        """Status changed time display."""
+        if not obj.status_changed_at:
+            return "-"
+        return self.display_datetime_relative(
+            obj,
+            'status_changed_at',
+            DateTimeDisplayConfig(show_relative=True, show_seconds=False)
+        )
+    
     # Readonly field displays
     def payment_details_display(self, obj):
         """Detailed payment information for detail view."""

django_cfg/apps/payments/admin_interface/serializers/payment_serializers.py

@@ -6,6 +6,8 @@ DRF serializers for payment management in admin dashboard.
 
 from rest_framework import serializers
 from django.contrib.auth import get_user_model
+from django.contrib.humanize.templatetags.humanize import naturaltime
+
 from ...models import UniversalPayment
 
 User = get_user_model()
@@ -90,6 +92,7 @@ class AdminPaymentDetailSerializer(serializers.Serializer):
     security_nonce = serializers.CharField(read_only=True)
     expires_at = serializers.DateTimeField(read_only=True)
     completed_at = serializers.DateTimeField(read_only=True)
+    status_changed_at = serializers.DateTimeField(read_only=True)
     description = serializers.CharField(read_only=True)
     callback_url = serializers.URLField(read_only=True)
     cancel_url = serializers.URLField(read_only=True)
@@ -117,7 +120,6 @@ class AdminPaymentDetailSerializer(serializers.Serializer):
     
     def get_age(self, obj):
         """Get human-readable age of payment."""
-        from django.contrib.humanize.templatetags.humanize import naturaltime
         return naturaltime(obj.created_at)
 
 
@@ -128,7 +130,7 @@ class AdminPaymentCreateSerializer(serializers.Serializer):
     """
     user = serializers.PrimaryKeyRelatedField(queryset=User.objects.all())
     amount_usd = serializers.FloatField(min_value=1.0, max_value=100000.0)
-    currency_code = serializers.CharField(max_length=10, help_text="Currency code (e.g., BTC, ETH)")
+    currency_code = serializers.CharField(max_length=20, help_text="Provider currency code (e.g., BTC, ZROERC20)", write_only=True)
     provider = serializers.CharField(max_length=50)
     description = serializers.CharField(required=False, allow_blank=True)
     callback_url = serializers.URLField(required=False, allow_blank=True)
@@ -143,22 +145,67 @@ class AdminPaymentCreateSerializer(serializers.Serializer):
         return value
     
     def create(self, validated_data):
-        """Create payment with currency lookup."""
-        from django_cfg.apps.payments.models.currencies import Currency
-        import uuid
+        """Create payment using PaymentService for proper provider integration."""
+        from django_cfg.apps.payments.services.core.payment_service import PaymentService
+        from django_cfg.apps.payments.services.types.requests import PaymentCreateRequest
+        from django_cfg.apps.payments.models import ProviderCurrency
+        
+        # Extract provider_currency_code and find original currency
+        provider_currency_code = validated_data.pop('currency_code')
         
-        # Extract currency_code and find Currency object
-        currency_code = validated_data.pop('currency_code')
+        # Find the ProviderCurrency to get original currency code
         try:
-            currency = Currency.objects.get(code=currency_code)
-        except Currency.DoesNotExist:
-            raise serializers.ValidationError(f"Currency {currency_code} not found")
+            provider_currency = ProviderCurrency.objects.select_related('currency').get(
+                provider_currency_code=provider_currency_code,
+                provider=validated_data['provider'],
+                is_enabled=True
+            )
+            original_currency_code = provider_currency.currency.code
+        except ProviderCurrency.DoesNotExist:
+            raise serializers.ValidationError(f"Provider currency {provider_currency_code} not found for {validated_data['provider']}")
         
-        # Generate internal payment ID and create payment
-        validated_data['currency'] = currency
-        validated_data['internal_payment_id'] = f"PAY-{uuid.uuid4().hex[:12].upper()}"
+        # Create PaymentCreateRequest for the service
+        payment_request = PaymentCreateRequest(
+            user_id=validated_data['user'].id,
+            amount_usd=validated_data['amount_usd'],
+            currency_code=original_currency_code,  # Use original currency code
+            provider=validated_data['provider'],
+            description=validated_data.get('description', ''),
+            callback_url=validated_data.get('callback_url', ''),
+            cancel_url=validated_data.get('cancel_url', ''),
+            metadata={'provider_currency_code': provider_currency_code}  # Store provider code in metadata
+        )
         
-        return UniversalPayment.objects.create(**validated_data)
+        # Use PaymentService to create payment with provider integration
+        payment_service = PaymentService()
+        result = payment_service.create_payment(payment_request)
+        
+        if result.success:
+            # Get the created payment object from database using payment_id
+            from django_cfg.apps.payments.models import UniversalPayment
+            payment = UniversalPayment.objects.get(id=result.payment_id)
+            return payment
+        else:
+            raise serializers.ValidationError(f"Payment creation failed: {result.message}")
+    
+    def to_representation(self, instance):
+        """Return created payment with ID and currency info."""
+        if instance:
+            return {
+                'id': str(instance.id),
+                'user': instance.user.id,
+                'amount_usd': instance.amount_usd,
+                'currency_code': instance.currency.code if instance.currency else None,
+                'currency_name': instance.currency.name if instance.currency else None,
+                'provider': instance.provider,
+                'description': instance.description,
+                'callback_url': instance.callback_url,
+                'cancel_url': instance.cancel_url,
+                'internal_payment_id': instance.internal_payment_id,
+                'status': instance.status,
+                'created_at': instance.created_at.isoformat() if instance.created_at else None
+            }
+        return super().to_representation(instance)
 
 
 class AdminPaymentUpdateSerializer(serializers.ModelSerializer):
@@ -178,6 +225,7 @@ class AdminPaymentUpdateSerializer(serializers.ModelSerializer):
             if value != UniversalPayment.PaymentStatus.COMPLETED:
                 raise serializers.ValidationError("Cannot change status of completed payment")
         return value
+    
 
 
 class AdminPaymentStatsSerializer(serializers.Serializer):

django_cfg/apps/payments/admin_interface/templates/payments/components/payment_card.html

@@ -0,0 +1,121 @@
+{% comment %}
+Payment Card Component
+
+Usage:
+{% include 'payments/components/payment_card.html' with payment=payment show_actions=True %}
+
+Parameters:
+- payment: UniversalPayment object
+- show_actions: Boolean to show/hide action buttons (default: False)
+{% endcomment %}
+
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6"
+     data-payment-id="{{ payment.id }}">
+    
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-4">
+        <div class="payment-id">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Payment</span>
+            <p class="text-lg font-semibold text-gray-900 dark:text-white">
+                #{{ payment.internal_payment_id|default:payment.id|truncatechars:8 }}
+            </p>
+        </div>
+        {% include 'payments/components/status_badge.html' with payment=payment %}
+    </div>
+    
+    <!-- Amount -->
+    <div class="payment-amount mb-4">
+        <div class="flex items-baseline">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">
+                ${{ payment.amount_usd|floatformat:2 }}
+            </span>
+            <span class="ml-2 text-lg text-gray-500 dark:text-gray-400">USD</span>
+        </div>
+        {% if payment.currency.code != 'USD' and payment.pay_amount %}
+            <div class="text-sm text-gray-500 dark:text-gray-400">
+                {{ payment.pay_amount|floatformat:8 }} {{ payment.currency.code }}
+            </div>
+        {% endif %}
+    </div>
+    
+    <!-- Payment Details -->
+    <div class="payment-details space-y-2 mb-4">
+        <div class="flex justify-between">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Provider</span>
+            <div class="flex items-center">
+                <div class="w-2 h-2 rounded-full mr-2 
+                    {% if payment.provider == 'cryptapi' %}bg-orange-500
+                    {% elif payment.provider == 'cryptomus' %}bg-blue-500
+                    {% elif payment.provider == 'stripe' %}bg-purple-500
+                    {% elif payment.provider == 'nowpayments' %}bg-green-500
+                    {% else %}bg-gray-500{% endif %}">
+                </div>
+                <span class="text-sm font-medium text-gray-900 dark:text-white capitalize">
+                    {{ payment.provider }}
+                </span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <span class="text-sm text-gray-500 dark:text-gray-400">Created</span>
+            <span class="text-sm text-gray-900 dark:text-white">
+                {{ payment.created_at|date:"M d, H:i" }}
+            </span>
+        </div>
+        {% if payment.status_changed_at %}
+            <div class="flex justify-between">
+                <span class="text-sm text-gray-500 dark:text-gray-400">Status Changed</span>
+                <span class="text-sm text-gray-900 dark:text-white">
+                    {{ payment.status_changed_at|date:"M d, H:i" }}
+                </span>
+            </div>
+        {% endif %}
+        {% if payment.processed_at %}
+            <div class="flex justify-between">
+                <span class="text-sm text-gray-500 dark:text-gray-400">Processed</span>
+                <span class="text-sm text-gray-900 dark:text-white">
+                    {{ payment.processed_at|date:"M d, H:i" }}
+                </span>
+            </div>
+        {% endif %}
+        {% if payment.pay_address %}
+            <div class="flex justify-between">
+                <span class="text-sm text-gray-500 dark:text-gray-400">Address</span>
+                <span class="text-sm font-mono text-gray-900 dark:text-white">
+                    {{ payment.pay_address|truncatechars:16 }}
+                    <button onclick="navigator.clipboard.writeText('{{ payment.pay_address }}')" 
+                            class="ml-1 text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
+                        <span class="material-icons-outlined text-xs">content_copy</span>
+                    </button>
+                </span>
+            </div>
+        {% endif %}
+    </div>
+    
+    <!-- Progress Bar -->
+    {% include 'payments/components/progress_bar.html' with payment=payment %}
+    
+    <!-- Actions -->
+    {% if show_actions %}
+    <div class="payment-actions mt-4 flex space-x-2">
+        <a href="{% url 'cfg_payments_admin:payment-detail' payment.id %}" 
+           class="flex-1 px-3 py-1.5 text-xs border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 rounded-md transition-colors duration-200 text-center">
+            <span class="material-icons-outlined text-sm mr-1">visibility</span>
+            View Details
+        </a>
+        {% if payment.status == 'pending' or payment.status == 'confirming' %}
+            <button class="px-3 py-1.5 text-xs bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 rounded-md transition-colors duration-200" 
+                    onclick="cancelPayment('{{ payment.id }}')">
+                <span class="material-icons-outlined text-sm mr-1">cancel</span>
+                Cancel
+            </button>
+        {% endif %}
+        {% if payment.pay_address %}
+            <button class="px-3 py-1.5 text-xs bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded-md transition-colors duration-200" 
+                    onclick="showQRCode('{{ payment.id }}')">
+                <span class="material-icons-outlined text-sm mr-1">qr_code</span>
+                QR Code
+            </button>
+        {% endif %}
+    </div>
+    {% endif %}
+</div>

django_cfg/apps/payments/admin_interface/templates/payments/components/payment_qr_code.html

@@ -0,0 +1,95 @@
+{% load payment_tags %}
+
+<!-- Payment QR Code Component -->
+<div class="flex flex-col items-center space-y-4 p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+    {% if payment.pay_address %}
+        <!-- QR Code Image -->
+        <div class="w-48 h-48 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center">
+            {% if payment.get_qr_code_url %}
+                    <img src="{{ payment.get_qr_code_url }}"
+                     alt="QR Code for {{ payment.pay_address }}" 
+                     class="w-48 h-48 rounded"
+                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+                <div class="hidden w-48 h-48 items-center justify-center">
+                    <span class="material-icons text-gray-400 text-4xl">qr_code_off</span>
+                </div>
+            {% else %}
+                <span class="material-icons text-gray-400 text-4xl">qr_code_off</span>
+            {% endif %}
+        </div>
+        
+        <!-- Payment Details -->
+        <div class="text-center space-y-2">
+            <p class="text-sm font-medium text-gray-900 dark:text-white">
+                Payment Address
+            </p>
+            <p class="text-xs font-mono text-gray-600 dark:text-gray-400 break-all max-w-xs">
+                {{ payment.pay_address }}
+            </p>
+            {% if payment.pay_amount %}
+            <p class="text-xs text-gray-500 dark:text-gray-500">
+                Amount: {{ payment.formatted_pay_amount }} {{ payment.currency.code }}
+            </p>
+            {% endif %}
+            
+            <!-- QR Data Preview -->
+            {% if payment.qr_data != payment.pay_address %}
+            <p class="text-xs text-blue-600 dark:text-blue-400">
+                QR contains: {{ payment.qr_data|truncatechars:50 }}
+            </p>
+            {% endif %}
+        </div>
+        
+        <!-- Action Buttons -->
+        <div class="flex space-x-2 pt-2">
+            <button class="flex-1 px-3 py-1.5 text-xs border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 rounded-md transition-colors duration-200" 
+                    onclick="copyToClipboard('{{ payment.pay_address }}', 'Address copied!')">
+                <span class="material-icons text-sm mr-1">content_copy</span>
+                Copy Address
+            </button>
+            {% if payment.pay_amount %}
+            <button class="flex-1 px-3 py-1.5 text-xs border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 rounded-md transition-colors duration-200" 
+                    onclick="copyToClipboard('{{ payment.pay_amount }}', 'Amount copied!')">
+                <span class="material-icons text-sm mr-1">content_copy</span>
+                Copy Amount
+            </button>
+            {% endif %}
+            {% if payment.qr_data %}
+            <button class="flex-1 px-3 py-1.5 text-xs border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 rounded-md transition-colors duration-200" 
+                    onclick="copyToClipboard('{{ payment.qr_data }}', 'QR data copied!')">
+                <span class="material-icons text-sm mr-1">qr_code</span>
+                Copy QR Data
+            </button>
+            {% endif %}
+        </div>
+        
+        
+    {% else %}
+        <div class="text-center py-8">
+            <span class="material-icons text-gray-400 text-4xl mb-2">qr_code_off</span>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+                QR code not available for this payment
+            </p>
+        </div>
+    {% endif %}
+</div>
+
+<!-- Copy to clipboard utility -->
+<script>
+function copyToClipboard(text, message) {
+    navigator.clipboard.writeText(text).then(function() {
+        // Show success message (you can customize this)
+        const toast = document.createElement('div');
+        toast.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded shadow-lg z-50';
+        toast.textContent = message || 'Copied to clipboard!';
+        document.body.appendChild(toast);
+        
+        setTimeout(() => {
+            document.body.removeChild(toast);
+        }, 2000);
+    }).catch(function(err) {
+        console.error('Failed to copy: ', err);
+        alert('Failed to copy to clipboard');
+    });
+}
+</script>

django_cfg/apps/payments/admin_interface/templates/payments/components/progress_bar.html

@@ -0,0 +1,37 @@
+{% comment %}
+Payment Progress Bar Component
+
+Usage:
+{% include 'payments/components/progress_bar.html' with payment=payment %}
+
+Parameters:
+- payment: UniversalPayment object
+{% endcomment %}
+
+<div class="payment-progress">
+    <!-- Progress Bar -->
+    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+        <div class="h-2 rounded-full transition-all duration-500 ease-out
+            {% if payment.status == 'completed' %}bg-green-600
+            {% elif payment.status == 'failed' %}bg-red-600
+            {% elif payment.status == 'pending' %}bg-yellow-600
+            {% elif payment.status == 'confirming' %}bg-blue-600
+            {% elif payment.status == 'cancelled' %}bg-gray-600
+            {% else %}bg-blue-600{% endif %}" 
+             style="width: {% if payment.status == 'completed' %}100{% elif payment.status == 'failed' or payment.status == 'cancelled' %}100{% elif payment.status == 'confirming' %}75{% elif payment.status == 'pending' %}25{% else %}0{% endif %}%">
+        </div>
+    </div>
+    
+    <!-- Progress Text -->
+    <div class="flex justify-between items-center mt-2 text-xs text-gray-500 dark:text-gray-400">
+        <span>
+            {% if payment.status == 'completed' %}100% Complete
+            {% elif payment.status == 'failed' %}Failed
+            {% elif payment.status == 'cancelled' %}Cancelled
+            {% elif payment.status == 'confirming' %}75% Confirming
+            {% elif payment.status == 'pending' %}25% Pending
+            {% else %}0% Initiated{% endif %}
+        </span>
+        <span>{{ payment.get_status_display }}</span>
+    </div>
+</div>

django_cfg/apps/payments/admin_interface/templates/payments/components/provider_stats.html

@@ -0,0 +1,60 @@
+{% comment %}
+Provider Statistics Component
+
+Usage:
+{% include 'payments/components/provider_stats.html' with provider_stats=provider_stats %}
+
+Parameters:
+- provider_stats: List of provider statistics objects
+{% endcomment %}
+
+<div class="space-y-4">
+    {% for stat in provider_stats %}
+    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+        <div class="flex items-center space-x-3">
+            <!-- Provider Icon -->
+            <div class="w-8 h-8 rounded-full flex items-center justify-center
+                {% if stat.provider == 'cryptapi' %}bg-orange-500
+                {% elif stat.provider == 'cryptomus' %}bg-blue-500
+                {% elif stat.provider == 'stripe' %}bg-purple-500
+                {% elif stat.provider == 'nowpayments' %}bg-green-500
+                {% else %}bg-gray-500{% endif %}">
+                <span class="material-icons-outlined text-white text-sm">payment</span>
+            </div>
+            
+            <!-- Provider Info -->
+            <div>
+                <p class="text-sm font-medium text-gray-900 dark:text-white capitalize">
+                    {{ stat.provider }}
+                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                    {{ stat.count }} payment{{ stat.count|pluralize }}
+                </p>
+            </div>
+        </div>
+        
+        <!-- Statistics -->
+        <div class="text-right">
+            <p class="text-sm font-medium text-gray-900 dark:text-white">
+                ${{ stat.volume|floatformat:2|default:"0.00" }}
+            </p>
+            <div class="flex items-center space-x-2 mt-1">
+                <!-- Success Rate Bar -->
+                <div class="w-16 bg-gray-200 dark:bg-gray-600 rounded-full h-1.5">
+                    <div class="bg-green-600 h-1.5 rounded-full transition-all duration-300" 
+                         style="width: {{ stat.success_rate|floatformat:0 }}%"></div>
+                </div>
+                <span class="text-xs text-gray-500 dark:text-gray-400">
+                    {{ stat.success_rate|floatformat:0 }}%
+                </span>
+            </div>
+        </div>
+    </div>
+    {% empty %}
+    <div class="text-center py-8">
+        <span class="material-icons-outlined text-gray-400 text-4xl mb-2">bar_chart</span>
+        <p class="text-sm font-medium text-gray-900 dark:text-white mb-1">No Provider Data</p>
+        <p class="text-xs text-gray-500 dark:text-gray-400">Provider statistics will appear here once payments are processed</p>
+    </div>
+    {% endfor %}
+</div>

django_cfg/apps/payments/admin_interface/templates/payments/components/status_badge.html

@@ -0,0 +1,41 @@
+{% comment %}
+Payment Status Badge Component
+
+Usage:
+{% include 'payments/components/status_badge.html' with payment=payment %}
+
+Parameters:
+- payment: UniversalPayment object
+{% endcomment %}
+
+<span class="payment-status-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+    {% if payment.status == 'pending' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400
+    {% elif payment.status == 'confirming' %}bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400
+    {% elif payment.status == 'confirmed' or payment.status == 'completed' %}bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400
+    {% elif payment.status == 'failed' %}bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400
+    {% elif payment.status == 'expired' or payment.status == 'cancelled' %}bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400
+    {% elif payment.status == 'refunded' %}bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400
+    {% else %}bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400{% endif %}"
+      data-status="{{ payment.status }}">
+    {% if payment.status == 'pending' %}
+        <span class="material-icons-outlined text-sm mr-1 animate-pulse">pending</span>
+    {% elif payment.status == 'confirming' %}
+        <span class="material-icons-outlined text-sm mr-1 animate-spin">sync</span>
+    {% elif payment.status == 'confirmed' %}
+        <span class="material-icons-outlined text-sm mr-1">check_circle</span>
+    {% elif payment.status == 'completed' %}
+        <span class="material-icons-outlined text-sm mr-1">verified</span>
+    {% elif payment.status == 'failed' %}
+        <span class="material-icons-outlined text-sm mr-1">error</span>
+    {% elif payment.status == 'expired' %}
+        <span class="material-icons-outlined text-sm mr-1">schedule</span>
+    {% elif payment.status == 'cancelled' %}
+        <span class="material-icons-outlined text-sm mr-1">cancel</span>
+    {% elif payment.status == 'refunded' %}
+        <span class="material-icons-outlined text-sm mr-1">undo</span>
+    {% else %}
+        <span class="material-icons-outlined text-sm mr-1">help</span>
+    {% endif %}
+    
+    <span class="status-text">{{ payment.get_status_display }}</span>
+</span>

django_cfg/apps/payments/admin_interface/templates/payments/components/status_overview.html

@@ -0,0 +1,83 @@
+{% comment %}
+Status Overview Component
+
+Usage:
+{% include 'payments/components/status_overview.html' with payment_stats=payment_stats %}
+
+Parameters:
+- payment_stats: Payment statistics object with counts and totals
+{% endcomment %}
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+    <!-- Total Payments -->
+    {% include 'payments/components/status_card.html' with title="Total Payments" value=payment_stats.total_payments_count|default:0 icon="payments" status="info" %}
+    
+    <!-- Pending Payments -->
+    {% include 'payments/components/status_card.html' with title="Pending" value=payment_stats.pending_payments_count|default:0 icon="pending" status="warning" description=payment_stats.confirming_payments_count|add:" confirming"|default:"" %}
+    
+    <!-- Completed Payments -->
+    {% include 'payments/components/status_card.html' with title="Completed" value=payment_stats.completed_payments_count|default:0 icon="check_circle" status="success" description=payment_stats.success_rate|floatformat:1|add:"% success rate"|default:"" %}
+    
+    <!-- Total Volume -->
+    {% include 'payments/components/status_card.html' with title="Total Volume" value="$"|add:payment_stats.total_volume|floatformat:2|default:"0.00" icon="account_balance" status="info" description=payment_stats.failed_payments_count|add:" failed"|default:"" %}
+</div>
+
+<!-- Quick Actions Bar -->
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow border border-gray-200 dark:border-gray-700 p-4 mt-6">
+    <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Quick Actions:</span>
+            <div class="flex space-x-2">
+                <a href="{% url 'cfg_payments_admin:payment-form' %}" 
+                   class="inline-flex items-center px-3 py-1.5 text-xs bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded-md transition-colors">
+                    <span class="material-icons-outlined text-sm mr-1">add</span>
+                    New Payment
+                </a>
+                <button onclick="window.location.reload()" 
+                        class="inline-flex items-center px-3 py-1.5 text-xs border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 rounded-md transition-colors">
+                    <span class="material-icons-outlined text-sm mr-1">refresh</span>
+                    Refresh
+                </button>
+                <button onclick="exportPayments()" 
+                        class="inline-flex items-center px-3 py-1.5 text-xs border border-gray-300 dark:border-gray-500 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 rounded-md transition-colors">
+                    <span class="material-icons-outlined text-sm mr-1">download</span>
+                    Export
+                </button>
+            </div>
+        </div>
+        
+        <!-- Live Status Indicator -->
+        <div class="flex items-center space-x-2">
+            <div class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
+                <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
+                Live Updates
+            </div>
+            <span class="text-xs text-gray-500 dark:text-gray-400">
+                Last update: <span id="stats-last-update">{% now "H:i:s" %}</span>
+            </span>
+        </div>
+    </div>
+</div>
+
+<script>
+// Export payments functionality
+function exportPayments() {
+    // TODO: Implement export functionality
+    alert('Export functionality not implemented yet');
+}
+
+// Update timestamp every minute
+setInterval(function() {
+    const now = new Date();
+    const timeString = now.toLocaleTimeString('en-US', { 
+        hour12: false, 
+        hour: '2-digit', 
+        minute: '2-digit', 
+        second: '2-digit' 
+    });
+    const element = document.getElementById('stats-last-update');
+    if (element) {
+        element.textContent = timeString;
+    }
+}, 60000);
+</script>