django-cfg 1.4.21__py3-none-any.whl → 1.4.24__py3-none-any.whl

django_cfg/{modules/django_ipc_client/dashboard/static/django_ipc_dashboard/js/dashboard.js → apps/ipc/static/django_cfg_ipc/js/dashboard.mjs}

@@ -1,13 +1,17 @@
 /**
- * RPC Dashboard JavaScript
+ * RPC Dashboard JavaScript Module
+ *
+ * Uses generated MJS API client for all API calls
  *
  * Handles:
  * - Tab switching
  * - Auto-refresh
  * - Live data updates
- * - API communication
+ * - API communication via generated client
  */
 
+import { ipcAPI } from '/static/js/api/ipc/index.mjs';
+
 class RPCDashboard {
     constructor() {
         this.autoRefresh = true;
@@ -15,10 +19,8 @@ class RPCDashboard {
         this.intervalId = null;
         this.currentTab = 'overview';
 
-        // Get API base URL from data attribute (supports custom mounting)
-        this.apiBase = document.body.dataset.apiBase || '/admin/rpc/api';
-        // Clean up trailing slash if present
-        this.apiBase = this.apiBase.replace(/\/$/, '');
+        // Use the pre-instantiated API client
+        this.api = ipcAPI;
 
         this.init();
     }
@@ -56,11 +58,11 @@ class RPCDashboard {
         // Update buttons
         document.querySelectorAll('.tab-button').forEach(btn => {
             if (btn.dataset.tab === tabName) {
-                btn.classList.add('active', 'text-blue-400', 'border-blue-400');
-                btn.classList.remove('text-gray-400', 'border-transparent');
+                btn.classList.add('active', 'text-blue-600', 'dark:text-blue-400', 'border-blue-600', 'dark:border-blue-400');
+                btn.classList.remove('text-gray-600', 'dark:text-gray-400', 'border-transparent');
             } else {
-                btn.classList.remove('active', 'text-blue-400', 'border-blue-400');
-                btn.classList.add('text-gray-400', 'border-transparent');
+                btn.classList.remove('active', 'text-blue-600', 'dark:text-blue-400', 'border-blue-600', 'dark:border-blue-400');
+                btn.classList.add('text-gray-600', 'dark:text-gray-400', 'border-transparent');
             }
         });
 
@@ -119,8 +121,10 @@ class RPCDashboard {
 
     async loadAllData() {
         try {
-            await this.loadOverviewStats();
-            await this.loadHealthStatus();
+            await Promise.all([
+                this.loadOverviewStats(),
+                this.loadHealthStatus()
+            ]);
             await this.loadTabData(this.currentTab);
             this.updateLastUpdate();
         } catch (error) {
@@ -148,12 +152,9 @@ class RPCDashboard {
 
     async loadOverviewStats() {
         try {
-            const response = await fetch(`${this.apiBase}/overview/`);
-            const data = await response.json();
-
-            if (data.success) {
-                const stats = data.data;
+            const stats = await this.api.ipcAdminApiMonitorOverviewRetrieve();
 
+            if (stats) {
                 // Update stats cards
                 this.updateElement('total-requests', stats.total_requests_today || 0);
                 this.updateElement('active-methods-count', stats.active_methods?.length || 0);
@@ -165,7 +166,7 @@ class RPCDashboard {
                     const topMethodElement = document.getElementById('top-method');
                     if (topMethodElement) {
                         const code = document.createElement('code');
-                        code.className = 'bg-gray-700 px-2 py-1 rounded text-blue-300';
+                        code.className = 'bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-blue-600 dark:text-blue-300';
                         code.textContent = stats.top_method;  // Safe from XSS
                         topMethodElement.innerHTML = '';
                         topMethodElement.appendChild(code);
@@ -179,34 +180,79 @@ class RPCDashboard {
 
     async loadHealthStatus() {
         try {
-            const response = await fetch(`${this.apiBase}/health/`);
-            const data = await response.json();
-
-            if (data.success) {
-                const health = data.data;
+            const health = await this.api.ipcAdminApiMonitorHealthRetrieve();
 
+            if (health) {
                 // Update health indicator
                 const indicator = document.getElementById('health-indicator');
                 if (indicator) {
                     const isHealthy = health.redis_connected && health.stream_exists;
                     indicator.innerHTML = `
                         <span class="pulse-dot w-2 h-2 ${isHealthy ? 'bg-green-500' : 'bg-red-500'} rounded-full"></span>
-                        <span class="text-sm text-gray-300">${isHealthy ? 'Connected' : 'Disconnected'}</span>
+                        <span class="text-sm text-gray-700 dark:text-gray-300">${isHealthy ? 'Connected' : 'Disconnected'}</span>
                     `;
                 }
+
+                // Update system status section
+                this.updateSystemStatus(health);
             }
         } catch (error) {
             console.error('Error loading health status:', error);
         }
     }
 
+    updateSystemStatus(health) {
+        const statusContainer = document.getElementById('system-status');
+        if (!statusContainer) return;
+
+        statusContainer.innerHTML = `
+            <!-- Redis Status -->
+            <div class="flex items-start gap-3">
+                <span class="material-icons flex-shrink-0 text-2xl ${health.redis_connected ? 'text-green-500' : 'text-red-500'}">
+                    ${health.redis_connected ? 'check_circle' : 'cancel'}
+                </span>
+                <div class="min-w-0">
+                    <p class="text-sm font-medium text-gray-900 dark:text-white">Redis</p>
+                    <p class="text-xs text-gray-600 dark:text-gray-400">
+                        ${health.redis_connected ? 'Connected (DB 2)' : 'Disconnected'}
+                    </p>
+                </div>
+            </div>
+
+            <!-- Stream Status -->
+            <div class="flex items-start gap-3">
+                <span class="material-icons flex-shrink-0 text-2xl ${health.stream_exists ? 'text-green-500' : 'text-gray-500'}">
+                    ${health.stream_exists ? 'stream' : 'stream_off'}
+                </span>
+                <div class="min-w-0">
+                    <p class="text-sm font-medium text-gray-900 dark:text-white">Request Stream</p>
+                    <p class="text-xs text-gray-600 dark:text-gray-400">
+                        ${health.stream_exists ? `${health.stream_length} entries` : 'Not initialized'}
+                    </p>
+                </div>
+            </div>
+
+            <!-- Activity Status -->
+            <div class="flex items-start gap-3">
+                <span class="material-icons flex-shrink-0 text-2xl ${health.recent_activity ? 'text-green-500' : 'text-yellow-500'}">
+                    ${health.recent_activity ? 'notifications_active' : 'notifications_paused'}
+                </span>
+                <div class="min-w-0">
+                    <p class="text-sm font-medium text-gray-900 dark:text-white">Recent Activity</p>
+                    <p class="text-xs text-gray-600 dark:text-gray-400">
+                        ${health.recent_activity ? 'Active (last 5 min)' : 'No recent activity'}
+                    </p>
+                </div>
+            </div>
+        `;
+    }
+
     async loadRecentRequests() {
         try {
-            const response = await fetch(`${this.apiBase}/requests/?count=50`);
-            const data = await response.json();
+            const data = await this.api.ipcAdminApiMonitorRequestsRetrieve({ count: 50 });
 
-            if (data.success) {
-                const requests = data.data.requests || [];
+            if (data) {
+                const requests = data.requests || [];
                 this.renderRequestsTable(requests);
             }
         } catch (error) {
@@ -221,7 +267,7 @@ class RPCDashboard {
         if (requests.length === 0) {
             tbody.innerHTML = `
                 <tr>
-                    <td colspan="4" class="px-4 py-8 text-center text-gray-400">
+                    <td colspan="4" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                         No recent requests found
                     </td>
                 </tr>
@@ -230,20 +276,20 @@ class RPCDashboard {
         }
 
         tbody.innerHTML = requests.map(req => `
-            <tr class="hover:bg-gray-700">
-                <td class="px-4 py-3 text-sm text-gray-300">
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
+                <td class="px-4 py-3 text-sm">
                     ${this.formatTimestamp(req.timestamp)}
                 </td>
                 <td class="px-4 py-3">
-                    <code class="text-sm bg-gray-700 px-2 py-1 rounded text-blue-300">${req.method || 'unknown'}</code>
+                    <code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">${this.escapeHtml(req.method || 'unknown')}</code>
                 </td>
-                <td class="px-4 py-3 text-sm text-gray-400 font-mono">
-                    ${(req.correlation_id || '').substring(0, 8)}...
+                <td class="px-4 py-3 text-sm font-mono">
+                    ${this.escapeHtml((req.correlation_id || '').substring(0, 8))}...
                 </td>
-                <td class="px-4 py-3 text-sm text-gray-400">
+                <td class="px-4 py-3 text-sm">
                     <details class="cursor-pointer">
-                        <summary class="text-blue-400 hover:text-blue-300">View</summary>
-                        <pre class="mt-2 text-xs bg-gray-900 p-2 rounded overflow-auto max-h-40">${JSON.stringify(req.params || {}, null, 2)}</pre>
+                        <summary class="text-blue-600 dark:text-blue-400 hover:underline">View</summary>
+                        <pre class="mt-2 text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded overflow-auto max-h-40">${this.escapeHtml(JSON.stringify(req.params || {}, null, 2))}</pre>
                     </details>
                 </td>
             </tr>
@@ -252,11 +298,9 @@ class RPCDashboard {
 
     async loadNotificationStats() {
         try {
-            const response = await fetch(`${this.apiBase}/notifications/`);
-            const data = await response.json();
+            const stats = await this.api.ipcAdminApiMonitorNotificationsRetrieve();
 
-            if (data.success) {
-                const stats = data.data;
+            if (stats) {
                 this.renderNotificationStats(stats);
             }
         } catch (error) {
@@ -273,36 +317,51 @@ class RPCDashboard {
 
         container.innerHTML = `
             <div class="space-y-4">
-                <div class="flex items-center justify-between p-4 bg-gray-700 rounded">
-                    <span class="text-gray-300">Total Sent</span>
-                    <span class="text-2xl font-bold text-white">${total}</span>
+                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded">
+                    <span>Total Sent</span>
+                    <span class="text-2xl font-bold">${total}</span>
                 </div>
-                <div class="flex items-center justify-between p-4 bg-gray-700 rounded">
-                    <span class="text-gray-300">Delivery Rate</span>
-                    <span class="text-2xl font-bold text-green-400">${stats.delivery_rate || 0}%</span>
+                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded">
+                    <span>Delivery Rate</span>
+                    <span class="text-2xl font-bold text-green-600 dark:text-green-400">${stats.delivery_rate || 0}%</span>
                 </div>
                 <div>
-                    <h4 class="text-md font-semibold text-white mb-3">By Type</h4>
+                    <h4 class="text-md font-semibold mb-3">By Type</h4>
                     <div class="space-y-2">
                         ${Object.entries(byType).map(([type, count]) => `
-                            <div class="flex items-center justify-between p-3 bg-gray-700 rounded">
-                                <span class="text-gray-300">${type}</span>
-                                <span class="text-white font-medium">${count}</span>
+                            <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded">
+                                <span>${this.escapeHtml(type)}</span>
+                                <span class="font-medium">${count}</span>
                             </div>
-                        `).join('') || '<p class="text-gray-400">No data available</p>'}
+                        `).join('') || '<p class="text-gray-500 dark:text-gray-400">No data available</p>'}
                     </div>
                 </div>
+                ${stats.recent && stats.recent.length > 0 ? `
+                    <div>
+                        <h4 class="text-md font-semibold mb-3">Recent Notifications</h4>
+                        <div class="space-y-2">
+                            ${stats.recent.slice(0, 5).map(notif => `
+                                <div class="p-3 bg-gray-50 dark:bg-gray-700 rounded">
+                                    <div class="flex justify-between items-start">
+                                        <span class="text-sm">${this.escapeHtml(notif.type || 'unknown')}</span>
+                                        <span class="text-xs text-gray-500 dark:text-gray-400">${this.formatTimestamp(notif.timestamp)}</span>
+                                    </div>
+                                    ${notif.message ? `<p class="text-xs text-gray-600 dark:text-gray-400 mt-1">${this.escapeHtml(notif.message)}</p>` : ''}
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                ` : ''}
             </div>
         `;
     }
 
     async loadMethodStats() {
         try {
-            const response = await fetch(`${this.apiBase}/methods/`);
-            const data = await response.json();
+            const data = await this.api.ipcAdminApiMonitorMethodsRetrieve();
 
-            if (data.success) {
-                const methods = data.data.methods || [];
+            if (data) {
+                const methods = data.methods || [];
                 this.renderMethodsTable(methods);
             }
         } catch (error) {
@@ -317,7 +376,7 @@ class RPCDashboard {
         if (methods.length === 0) {
             tbody.innerHTML = `
                 <tr>
-                    <td colspan="4" class="px-4 py-8 text-center text-gray-400">
+                    <td colspan="4" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                         No method data available
                     </td>
                 </tr>
@@ -326,13 +385,13 @@ class RPCDashboard {
         }
 
         tbody.innerHTML = methods.map(method => `
-            <tr class="hover:bg-gray-700">
+            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                 <td class="px-4 py-3">
-                    <code class="text-sm bg-gray-700 px-2 py-1 rounded text-blue-300">${method.method}</code>
+                    <code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">${this.escapeHtml(method.method)}</code>
                 </td>
-                <td class="px-4 py-3 text-sm text-white font-medium">${method.count}</td>
-                <td class="px-4 py-3 text-sm text-gray-300">${method.percentage}%</td>
-                <td class="px-4 py-3 text-sm text-gray-300">${method.avg_time_ms}ms</td>
+                <td class="px-4 py-3 text-sm font-medium">${method.count}</td>
+                <td class="px-4 py-3 text-sm">${method.percentage}%</td>
+                <td class="px-4 py-3 text-sm">${method.avg_time_ms || method.avg_time || 0}ms</td>
             </tr>
         `).join('');
     }
@@ -353,6 +412,12 @@ class RPCDashboard {
         }
     }
 
+    escapeHtml(unsafe) {
+        const div = document.createElement('div');
+        div.textContent = unsafe;
+        return div.innerHTML;
+    }
+
     updateLastUpdate() {
         const element = document.getElementById('last-update');
         if (element) {
@@ -363,7 +428,7 @@ class RPCDashboard {
 
     showError(message) {
         console.error('Dashboard error:', message);
-        // TODO: Show error notification to user
+        // Could show a toast notification here
     }
 }
 
@@ -371,3 +436,6 @@ class RPCDashboard {
 document.addEventListener('DOMContentLoaded', () => {
     window.rpcDashboard = new RPCDashboard();
 });
+
+// Export for debugging
+export default RPCDashboard;

django_cfg/{modules/django_ipc_client/dashboard/templates/django_ipc_dashboard → apps/ipc/templates/django_cfg_ipc}/base.html

@@ -10,23 +10,23 @@
 {% endwith %}
 
 {# RPC-specific header info #}
-<div class="bg-gray-800 dark:bg-gray-900 border-b border-gray-700 dark:border-gray-800">
+<div class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
         <div class="flex items-center justify-between text-sm">
-            <p class="text-gray-400 dark:text-gray-500">Real-time WebSocket & RPC Activity</p>
+            <p class="text-gray-600 dark:text-gray-400">Real-time WebSocket & RPC Activity</p>
 
             <div class="flex items-center space-x-4">
                 <!-- Health indicator -->
                 <div id="health-indicator" class="flex items-center space-x-2">
                     <span class="pulse-dot w-2 h-2 bg-green-500 rounded-full"></span>
-                    <span class="text-gray-300 dark:text-gray-400">Connected</span>
+                    <span class="text-gray-700 dark:text-gray-300">Connected</span>
                 </div>
 
                 <!-- Auto-refresh toggle -->
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <span class="text-gray-300 dark:text-gray-400">Auto-refresh</span>
+                    <span class="text-gray-700 dark:text-gray-300">Auto-refresh</span>
                     <input type="checkbox" id="auto-refresh-toggle" checked
-                           class="toggle-checkbox rounded border-gray-600 text-blue-600 focus:ring-blue-500">
+                           class="toggle-checkbox rounded border-gray-400 dark:border-gray-600 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400">
                 </label>
             </div>
         </div>
@@ -68,9 +68,4 @@
 
 {% block body %}
 {{ block.super }}
-<script>
-    // Set API base URL for dashboard.js
-    // Must run before dashboard.js initializes
-    document.body.setAttribute('data-api-base', "{% url 'django_ipc_dashboard:api_overview' %}/..");
-</script>
 {% endblock %}

django_cfg/apps/ipc/templates/django_cfg_ipc/dashboard.html

@@ -0,0 +1,202 @@
+{% extends 'django_cfg_ipc/base.html' %}
+{% load static %}
+
+{% block title %}Dashboard{% endblock %}
+
+{% block content %}
+<!-- Overview Stats Cards -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+    <!-- Total Requests -->
+    <div class="stat-card bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+        <div class="flex items-center justify-between mb-4">
+            <span class="material-icons text-4xl text-blue-500 dark:text-blue-400">bar_chart</span>
+            <span class="text-xs text-gray-600 dark:text-gray-400">Today</span>
+        </div>
+        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-1" id="total-requests">
+            {{ overview_stats.total_requests_today|default:"0" }}
+        </h3>
+        <p class="text-sm text-gray-600 dark:text-gray-400">Total Requests</p>
+    </div>
+
+    <!-- Active Methods -->
+    <div class="stat-card bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+        <div class="flex items-center justify-between mb-4">
+            <span class="material-icons text-4xl text-green-500 dark:text-green-400">functions</span>
+            <span class="text-xs text-gray-600 dark:text-gray-400">Active</span>
+        </div>
+        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-1" id="active-methods-count">
+            {{ overview_stats.active_methods|length|default:"0" }}
+        </h3>
+        <p class="text-sm text-gray-600 dark:text-gray-400">Active Methods</p>
+    </div>
+
+    <!-- Avg Response Time -->
+    <div class="stat-card bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+        <div class="flex items-center justify-between mb-4">
+            <span class="material-icons text-4xl text-yellow-500 dark:text-yellow-400">timer</span>
+            <span class="text-xs text-gray-600 dark:text-gray-400">Average</span>
+        </div>
+        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-1" id="avg-response-time">
+            {{ overview_stats.avg_response_time_ms|default:"0" }}<span class="text-lg text-gray-600 dark:text-gray-400">ms</span>
+        </h3>
+        <p class="text-sm text-gray-600 dark:text-gray-400">Response Time</p>
+    </div>
+
+    <!-- Success Rate -->
+    <div class="stat-card bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+        <div class="flex items-center justify-between mb-4">
+            <span class="material-icons text-4xl text-purple-500 dark:text-purple-400">check_circle</span>
+            <span class="text-xs text-gray-600 dark:text-gray-400">Rate</span>
+        </div>
+        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-1" id="success-rate">
+            {{ overview_stats.success_rate|default:"0" }}<span class="text-lg text-gray-600 dark:text-gray-400">%</span>
+        </h3>
+        <p class="text-sm text-gray-600 dark:text-gray-400">Success Rate</p>
+    </div>
+</div>
+
+<!-- System Status -->
+<div class="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 mb-8">
+    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
+        <span class="material-icons mr-2">health_and_safety</span>
+        System Status
+    </h2>
+    <div id="system-status" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <!-- Redis Status -->
+        <div class="flex items-start gap-3">
+            <span class="material-icons flex-shrink-0 text-2xl {% if health.redis_connected %}text-green-500{% else %}text-red-500{% endif %}">
+                {% if health.redis_connected %}check_circle{% else %}cancel{% endif %}
+            </span>
+            <div class="min-w-0">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Redis</p>
+                <p class="text-xs text-gray-600 dark:text-gray-400">
+                    {% if health.redis_connected %}Connected (DB 2){% else %}Disconnected{% endif %}
+                </p>
+            </div>
+        </div>
+
+        <!-- Stream Status -->
+        <div class="flex items-start gap-3">
+            <span class="material-icons flex-shrink-0 text-2xl {% if health.stream_exists %}text-green-500{% else %}text-gray-500{% endif %}">
+                {% if health.stream_exists %}stream{% else %}stream_off{% endif %}
+            </span>
+            <div class="min-w-0">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Request Stream</p>
+                <p class="text-xs text-gray-600 dark:text-gray-400">
+                    {% if health.stream_exists %}{{ health.stream_length }} entries{% else %}Not initialized{% endif %}
+                </p>
+            </div>
+        </div>
+
+        <!-- Activity Status -->
+        <div class="flex items-start gap-3">
+            <span class="material-icons flex-shrink-0 text-2xl {% if health.recent_activity %}text-green-500{% else %}text-yellow-500{% endif %}">
+                {% if health.recent_activity %}notifications_active{% else %}notifications_paused{% endif %}
+            </span>
+            <div class="min-w-0">
+                <p class="text-sm font-medium text-gray-900 dark:text-white">Recent Activity</p>
+                <p class="text-xs text-gray-600 dark:text-gray-400">
+                    {% if health.recent_activity %}Active (last 5 min){% else %}No recent activity{% endif %}
+                </p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Tabs Navigation -->
+<div class="border-b border-gray-200 dark:border-gray-700 mb-6">
+    <nav class="flex space-x-4">
+        <button class="tab-button active px-4 py-2 text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400 font-medium" data-tab="overview">
+            Overview
+        </button>
+        <button class="tab-button px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 border-b-2 border-transparent font-medium" data-tab="requests">
+            Recent Requests
+        </button>
+        <button class="tab-button px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 border-b-2 border-transparent font-medium" data-tab="notifications">
+            Notifications
+        </button>
+        <button class="tab-button px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300 border-b-2 border-transparent font-medium" data-tab="methods">
+            Methods
+        </button>
+    </nav>
+</div>
+
+<!-- Tab Content -->
+<div class="tab-content">
+    <!-- Overview Tab (Active by default) -->
+    <div id="overview-tab" class="tab-panel">
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Top Method</h3>
+            <p class="text-gray-700 dark:text-gray-300" id="top-method">
+                {% if overview_stats.top_method %}
+                    <code class="bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-blue-600 dark:text-blue-300">{{ overview_stats.top_method }}</code>
+                {% else %}
+                    No data available
+                {% endif %}
+            </p>
+        </div>
+    </div>
+
+    <!-- Recent Requests Tab -->
+    <div id="requests-tab" class="tab-panel hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <table class="w-full">
+                <thead class="bg-gray-50 dark:bg-gray-900">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-400 uppercase">Time</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-400 uppercase">Method</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-400 uppercase">Correlation ID</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-400 uppercase">Params</th>
+                    </tr>
+                </thead>
+                <tbody id="requests-table-body" class="divide-y divide-gray-200 dark:divide-gray-700">
+                    <tr>
+                        <td colspan="4" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
+                            Loading...
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- Notifications Tab -->
+    <div id="notifications-tab" class="tab-panel hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
+            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Notification Statistics</h3>
+            <div id="notification-stats-content">
+                <p class="text-gray-600 dark:text-gray-400">Loading...</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Methods Tab -->
+    <div id="methods-tab" class="tab-panel hidden">
+        <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+            <table class="w-full">
+                <thead class="bg-gray-50 dark:bg-gray-900">
+                    <tr>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-400 uppercase">Method</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-400 uppercase">Count</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-400 uppercase">Percentage</th>
+                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-400 uppercase">Avg Time</th>
+                    </tr>
+                </thead>
+                <tbody id="methods-table-body" class="divide-y divide-gray-200 dark:divide-gray-700">
+                    <tr>
+                        <td colspan="4" class="px-4 py-8 text-center text-gray-600 dark:text-gray-400">
+                            Loading...
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{% load i18n %}
+{% now "U" as current_timestamp %}
+<script type="module" src="{% static 'django_cfg_ipc/js/dashboard.mjs' %}?v={{ current_timestamp }}"></script>
+{% endblock %}

django_cfg/apps/ipc/urls.py

@@ -0,0 +1,21 @@
+"""
+URL patterns for IPC/RPC module.
+
+Public API endpoints for RPC monitoring using DRF router.
+"""
+
+from django.urls import include, path
+from rest_framework import routers
+
+from .views.viewsets import RPCMonitorViewSet
+
+app_name = 'django_cfg_ipc'
+
+# Create router
+router = routers.DefaultRouter()
+router.register(r'monitor', RPCMonitorViewSet, basename='monitor')
+
+urlpatterns = [
+    # Include router URLs
+    path('', include(router.urls)),
+]

django_cfg/apps/ipc/urls_admin.py

@@ -0,0 +1,20 @@
+"""
+Admin URLs for IPC/RPC dashboard.
+
+Dashboard interface for monitoring RPC activity.
+"""
+
+from django.urls import include, path
+
+from .views import dashboard_view
+
+app_name = 'django_cfg_ipc_admin'
+
+
+urlpatterns = [
+    # Dashboard page
+    path('', dashboard_view, name='dashboard'),
+
+    # Include API endpoints for dashboard AJAX calls
+    path('api/', include('django_cfg.apps.ipc.urls')),
+]

django_cfg/apps/ipc/views/__init__.py

@@ -0,0 +1,8 @@
+"""
+Views for IPC/RPC module.
+"""
+
+from .dashboard import dashboard_view
+from .viewsets import RPCMonitorViewSet
+
+__all__ = ['RPCMonitorViewSet', 'dashboard_view']