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

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

@@ -1,300 +1,173 @@
 {% extends 'payments/base.html' %}
 {% load static %}
-{% load payment_tags %}
 
-{% block page_title %}{{ page_title }}{% endblock %}
-{% block page_subtitle %}{{ page_subtitle }}{% endblock %}
+{% block title %}Dashboard - Payment Admin{% endblock %}
+
+{% block page_title %}Payment Dashboard{% endblock %}
+{% block page_subtitle %}Overview of payment system status and metrics{% endblock %}
 
 {% block content %}
 <div x-data="paymentDashboard()" x-init="init()">
-    <!-- Statistics Cards -->
+    <!-- Stats Cards -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
         <!-- Total Payments -->
-        {% include 'payments/components/status_card.html' with title="Total Payments" value=stats.total_payments icon="payments" color_class="text-blue-600" description="All payment transactions" icon_bg_color="blue" %}
+        {% include 'payments/components/status_card.html' with title="Total Payments" value="0" icon="payment" status="info" %}
         
-        <!-- Completed Payments -->
-        {% include 'payments/components/status_card.html' with title="Completed" value=stats.completed_payments icon="check_circle" color_class="text-green-600" description="Successfully processed" icon_bg_color="green" status_icon="check_circle" %}
+        <!-- Successful Payments -->
+        {% include 'payments/components/status_card.html' with title="Successful" value="0" icon="check_circle" status="success" %}
         
         <!-- Pending Payments -->
-        {% include 'payments/components/status_card.html' with title="Pending" value=stats.pending_payments icon="schedule" color_class="text-yellow-600" description="Awaiting confirmation" icon_bg_color="yellow" status_icon="schedule" %}
+        {% include 'payments/components/status_card.html' with title="Pending" value="0" icon="schedule" status="warning" %}
         
         <!-- Failed Payments -->
-        {% include 'payments/components/status_card.html' with title="Failed" value=stats.failed_payments icon="error" color_class="text-red-600" description="Processing failed" icon_bg_color="red" status_icon="error" %}
+        {% include 'payments/components/status_card.html' with title="Failed" value="0" icon="error" status="error" %}
     </div>
 
-    <!-- Total Amount Card -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
-        <div class="lg:col-span-1">
-            {% include 'payments/components/status_card.html' with title="Total Amount" value="$"|add:stats.total_amount icon="account_balance_wallet" color_class="text-purple-600" description="Total processed amount" icon_bg_color="purple" %}
-        </div>
-        
-        <!-- Quick Actions -->
-        <div class="lg:col-span-2">
-            <div class="payment-card">
-                <div class="payment-card-header">
-                    <h3 class="font-medium text-gray-900 dark:text-white flex items-center">
-                        <span class="material-icons-outlined mr-2">flash_on</span>
-                        Quick Actions
-                    </h3>
-                </div>
-                <div class="payment-card-content">
-                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                        <a href="{% url 'cfg_payments_admin:payment-create' %}" 
-                           class="flex flex-col items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
-                            <span class="material-icons-outlined text-blue-600 dark:text-blue-400 mb-2">add_circle</span>
-                            <span class="text-sm font-medium text-gray-900 dark:text-white">Create Payment</span>
-                        </a>
-                        
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <!-- Main Content -->
+        <div class="lg:col-span-2 space-y-8">
+            <!-- Recent Payments -->
+            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">Recent Payments</h3>
                         <a href="{% url 'cfg_payments_admin:payment-list' %}" 
-                           class="flex flex-col items-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors">
-                            <span class="material-icons-outlined text-green-600 dark:text-green-400 mb-2">list</span>
-                            <span class="text-sm font-medium text-gray-900 dark:text-white">View All</span>
-                        </a>
-                        
-                        <a href="{% url 'cfg_payments_admin:webhook-dashboard' %}" 
-                           class="flex flex-col items-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors">
-                            <span class="material-icons-outlined text-purple-600 dark:text-purple-400 mb-2">webhook</span>
-                            <span class="text-sm font-medium text-gray-900 dark:text-white">Webhooks</span>
-                        </a>
-                        
-                        <a href="{% url 'cfg_payments_admin:currency-converter' %}" 
-                           class="flex flex-col items-center p-4 bg-orange-50 dark:bg-orange-900/20 rounded-lg hover:bg-orange-100 dark:hover:bg-orange-900/30 transition-colors">
-                            <span class="material-icons-outlined text-orange-600 dark:text-orange-400 mb-2">currency_exchange</span>
-                            <span class="text-sm font-medium text-gray-900 dark:text-white">Converter</span>
+                           class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
+                            View all
                         </a>
                     </div>
                 </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Recent Payments -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <!-- Recent Payments List -->
-        <div class="payment-card">
-            <div class="payment-card-header">
-                <h3 class="font-medium text-gray-900 dark:text-white flex items-center">
-                    <span class="material-icons-outlined mr-2">history</span>
-                    Recent Payments
-                </h3>
-                <a href="{% url 'cfg_payments_admin:payment-list' %}" 
-                   class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 flex items-center">
-                    View All
-                    <span class="material-icons-outlined ml-1 text-sm">arrow_forward</span>
-                </a>
-            </div>
-            <div class="payment-card-content">
-                {% if stats.recent_payments %}
-                    <div class="space-y-3">
-                        {% for payment in stats.recent_payments %}
-                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
-                            <div class="flex items-center space-x-3">
-                                <div class="w-8 h-8 rounded-full flex items-center justify-center
-                                    {% if payment.status == 'completed' %}bg-green-100 dark:bg-green-900
-                                    {% elif payment.status == 'pending' %}bg-yellow-100 dark:bg-yellow-900
-                                    {% elif payment.status == 'processing' %}bg-blue-100 dark:bg-blue-900
-                                    {% else %}bg-red-100 dark:bg-red-900{% endif %}">
-                                    <span class="material-icons-outlined text-sm
-                                        {% if payment.status == 'completed' %}text-green-600 dark:text-green-400
-                                        {% elif payment.status == 'pending' %}text-yellow-600 dark:text-yellow-400
-                                        {% elif payment.status == 'processing' %}text-blue-600 dark:text-blue-400
-                                        {% else %}text-red-600 dark:text-red-400{% endif %}">
-                                        {% if payment.status == 'completed' %}check_circle
-                                        {% elif payment.status == 'pending' %}schedule
-                                        {% elif payment.status == 'processing' %}sync
-                                        {% else %}error{% endif %}
-                                    </span>
-                                </div>
-                                <div>
-                                    <div class="text-sm font-medium text-gray-900 dark:text-white">
-                                        ${{ payment.amount_usd|floatformat:2 }}
+                
+                <div class="p-6">
+                    <div x-show="recentPayments.length === 0 && !loading" class="text-center py-8">
+                        <span class="material-icons-outlined text-gray-400 text-4xl mb-2">payment</span>
+                        <p class="text-gray-500 dark:text-gray-400">No recent payments</p>
+                    </div>
+                    
+                    <div x-show="loading" class="text-center py-8">
+                        <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Loading...</p>
+                    </div>
+                    
+                    <div class="space-y-4">
+                        <template x-for="payment in recentPayments.slice(0, 5)" :key="payment.id">
+                            <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
+                                <div class="flex items-center">
+                                    <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-3">
+                                        <span class="material-icons-outlined text-blue-600 dark:text-blue-400 text-sm">payment</span>
                                     </div>
-                                    <div class="text-xs text-gray-500 dark:text-gray-400">
-                                        {{ payment.currency.code }} • {{ payment.provider|title }}
+                                    <div>
+                                        <div class="text-sm font-medium text-gray-900 dark:text-white" x-text="payment.id.substring(0, 8)"></div>
+                                        <div class="text-xs text-gray-500 dark:text-gray-400" x-text="payment.provider"></div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="text-right">
-                                <div class="text-xs text-gray-500 dark:text-gray-400">
-                                    {{ payment.created_at|timesince }} ago
+                                <div class="text-right">
+                                    <div class="text-sm font-medium text-gray-900 dark:text-white" x-text="`$${payment.amount_usd}`"></div>
+                                    <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
+                                          :class="{
+                                              'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400': payment.status === 'completed',
+                                              'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400': payment.status === 'pending',
+                                              'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400': payment.status === 'failed'
+                                          }"
+                                          x-text="payment.status">
+                                    </span>
                                 </div>
-                                <a href="{% url 'cfg_payments_admin:payment-detail' payment.id %}" 
-                                   class="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
-                                    View Details
-                                </a>
                             </div>
-                        </div>
-                        {% endfor %}
+                        </template>
                     </div>
-                {% else %}
-                    <div class="text-center py-8">
-                        <span class="material-icons-outlined text-gray-400 text-4xl mb-2">payments</span>
-                        <p class="text-gray-500 dark:text-gray-400">No payments yet</p>
-                        <a href="{% url 'cfg_payments_admin:payment-create' %}" 
-                           class="inline-flex items-center mt-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
-                            <span class="material-icons-outlined mr-1 text-sm">add</span>
-                            Create your first payment
+                </div>
+            </div>
+
+            <!-- Quick Actions -->
+            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Quick Actions</h3>
+                </div>
+                
+                <div class="p-6">
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <a href="{% url 'cfg_payments_admin:payment-form' %}" 
+                           class="flex items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
+                            <div class="w-10 h-10 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">add</span>
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium text-gray-900 dark:text-white">Create Payment</div>
+                                <div class="text-xs text-gray-500 dark:text-gray-400">Start a new payment</div>
+                            </div>
+                        </a>
+                        
+                        <a href="{% url 'cfg_payments_admin:webhook-dashboard' %}" 
+                           class="flex items-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors">
+                            <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4">
+                                <span class="material-icons-outlined text-green-600 dark:text-green-400">webhook</span>
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium text-gray-900 dark:text-white">Webhook Dashboard</div>
+                                <div class="text-xs text-gray-500 dark:text-gray-400">Monitor webhooks</div>
+                            </div>
                         </a>
                     </div>
-                {% endif %}
+                </div>
             </div>
         </div>
 
-        <!-- System Status -->
-        <div class="payment-card">
-            <div class="payment-card-header">
-                <h3 class="font-medium text-gray-900 dark:text-white flex items-center">
-                    <span class="material-icons-outlined mr-2">monitor_heart</span>
-                    System Status
-                </h3>
-                <button @click="refreshSystemStatus()" 
-                        class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 flex items-center">
-                    <span class="material-icons-outlined text-sm" :class="{ 'animate-spin': refreshing }">refresh</span>
-                </button>
-            </div>
-            <div class="payment-card-content">
-                <div class="space-y-4">
-                    <!-- Payment System Status -->
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center space-x-2">
-                            <span class="material-icons-outlined text-green-600 dark:text-green-400 text-sm">check_circle</span>
-                            <span class="text-sm text-gray-900 dark:text-white">Payment System</span>
-                        </div>
-                        <span class="text-xs text-green-600 dark:text-green-400 font-medium">Online</span>
-                    </div>
+        <!-- Sidebar -->
+        <div class="space-y-8">
+            <!-- Ngrok Status -->
+            {% include 'payments/components/ngrok_status.html' %}
 
-                    <!-- Provider Status -->
+            <!-- System Status -->
+            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">System Status</h3>
+                </div>
+                
+                <div class="p-6 space-y-4">
                     <div class="flex items-center justify-between">
-                        <div class="flex items-center space-x-2">
-                            <span class="material-icons-outlined text-green-600 dark:text-green-400 text-sm">account_balance</span>
-                            <span class="text-sm text-gray-900 dark:text-white">Payment Providers</span>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
+                            <span class="text-sm text-gray-900 dark:text-white">API Status</span>
                         </div>
-                        <span class="text-xs text-green-600 dark:text-green-400 font-medium" x-text="systemStatus.providers || 'Checking...'">Checking...</span>
+                        <span class="text-sm text-green-600 dark:text-green-400">Operational</span>
                     </div>
-
-                    <!-- Database Status -->
+                    
                     <div class="flex items-center justify-between">
-                        <div class="flex items-center space-x-2">
-                            <span class="material-icons-outlined text-green-600 dark:text-green-400 text-sm">storage</span>
+                        <div class="flex items-center">
+                            <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
                             <span class="text-sm text-gray-900 dark:text-white">Database</span>
                         </div>
-                        <span class="text-xs text-green-600 dark:text-green-400 font-medium">Connected</span>
-                    </div>
-
-                    <!-- Webhook Status -->
-                    <div class="flex items-center justify-between">
-                        <div class="flex items-center space-x-2">
-                            <span class="material-icons-outlined text-green-600 dark:text-green-400 text-sm">webhook</span>
-                            <span class="text-sm text-gray-900 dark:text-white">Webhooks</span>
-                        </div>
-                        <span class="text-xs text-green-600 dark:text-green-400 font-medium" x-text="systemStatus.webhooks || 'Active'">Active</span>
+                        <span class="text-sm text-green-600 dark:text-green-400">Connected</span>
                     </div>
+                    
                 </div>
+            </div>
 
-                <!-- System Actions -->
-                <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-600">
-                    <div class="flex space-x-2">
-                        <button @click="checkSystemHealth()" 
-                                class="flex-1 btn btn-outline text-xs py-2">
-                            <span class="material-icons-outlined mr-1 text-sm">health_and_safety</span>
-                            Health Check
-                        </button>
-                        <a href="{% url 'cfg_payments_admin:webhook-dashboard' %}" 
-                           class="flex-1 btn btn-outline text-xs py-2 text-center">
-                            <span class="material-icons-outlined mr-1 text-sm">settings</span>
-                            Configure
-                        </a>
+            <!-- Recent Activity -->
+            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
+                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">Recent Activity</h3>
+                </div>
+                
+                <div class="p-6">
+                    <div class="space-y-3">
+                        <template x-for="activity in recentActivity" :key="activity.id">
+                            <div class="flex items-start">
+                                <div class="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3"></div>
+                                <div class="flex-1">
+                                    <p class="text-sm text-gray-900 dark:text-white" x-text="activity.message"></p>
+                                    <p class="text-xs text-gray-500 dark:text-gray-400" x-text="activity.time"></p>
+                                </div>
+                            </div>
+                        </template>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-
-    <!-- Loading Spinner Component -->
-    <div x-show="loading" x-cloak class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-        {% include 'payments/components/loading_spinner.html' %}
-    </div>
-
-    <!-- Notifications -->
-    <div x-show="notification.show" x-cloak 
-         class="fixed top-4 right-4 z-50"
-         x-transition:enter="transition ease-out duration-300"
-         x-transition:enter-start="opacity-0 transform translate-x-full"
-         x-transition:enter-end="opacity-100 transform translate-x-0"
-         x-transition:leave="transition ease-in duration-200"
-         x-transition:leave-start="opacity-100 transform translate-x-0"
-         x-transition:leave-end="opacity-0 transform translate-x-full">
-        {% include 'payments/components/notification.html' with type="notification.type" message="notification.message" %}
-    </div>
 </div>
 {% endblock %}
 
 {% block extra_js %}
-<script>
-function paymentDashboard() {
-    return {
-        loading: false,
-        refreshing: false,
-        systemStatus: {
-            providers: 'Active',
-            webhooks: 'Active'
-        },
-        notification: {
-            show: false,
-            type: 'info',
-            message: ''
-        },
-
-        init() {
-            // Initialize dashboard
-            this.loadSystemStatus();
-        },
-
-        async loadSystemStatus() {
-            try {
-                // This would typically fetch from an API endpoint
-                // For now, we'll simulate the data
-                this.systemStatus = {
-                    providers: 'Active (1/1)',
-                    webhooks: 'Active'
-                };
-            } catch (error) {
-                console.error('Failed to load system status:', error);
-            }
-        },
-
-        async refreshSystemStatus() {
-            this.refreshing = true;
-            try {
-                await this.loadSystemStatus();
-                this.showNotification('success', 'System status refreshed');
-            } catch (error) {
-                this.showNotification('error', 'Failed to refresh system status');
-            } finally {
-                this.refreshing = false;
-            }
-        },
-
-        async checkSystemHealth() {
-            this.loading = true;
-            try {
-                // Simulate health check API call
-                await new Promise(resolve => setTimeout(resolve, 1500));
-                this.showNotification('success', 'System health check completed - All systems operational');
-            } catch (error) {
-                this.showNotification('error', 'Health check failed');
-            } finally {
-                this.loading = false;
-            }
-        },
-
-        showNotification(type, message) {
-            this.notification = { show: true, type, message };
-            setTimeout(() => {
-                this.notification.show = false;
-            }, 5000);
-        }
-    };
-}
-</script>
+<script src="{% static 'payments/js/payment-dashboard.js' %}"></script>
 {% endblock %}