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

django_cfg/apps/tasks/tasks/demo_tasks.py

@@ -0,0 +1,133 @@
+"""
+Demo tasks for Tasks Dashboard demonstration.
+
+These tasks are used to generate test data for the dashboard
+and demonstrate different queue behaviors and execution times.
+"""
+
+import dramatiq
+import time
+import random
+import logging
+from datetime import datetime
+
+logger = logging.getLogger(__name__)
+
+
+@dramatiq.actor(queue_name='default')
+def quick_task(task_id: str, duration: int = 2):
+    """Quick processing task (2-3 seconds)."""
+    logger.info(f'🚀 Quick task {task_id} started at {datetime.now().strftime("%H:%M:%S")}')
+    time.sleep(duration)
+    logger.info(f'✅ Quick task {task_id} completed in {duration}s')
+    return f'Quick task {task_id} done in {duration}s'
+
+
+@dramatiq.actor(queue_name='background')
+def medium_task(task_id: str, duration: int = 5):
+    """Medium processing task (5-8 seconds)."""
+    logger.info(f'🔄 Medium task {task_id} started at {datetime.now().strftime("%H:%M:%S")}')
+    time.sleep(duration)
+    logger.info(f'✅ Medium task {task_id} completed in {duration}s')
+    return f'Medium task {task_id} done in {duration}s'
+
+
+@dramatiq.actor(queue_name='low')
+def slow_task(task_id: str, duration: int = 10):
+    """Slow processing task (10-15 seconds)."""
+    logger.info(f'🐌 Slow task {task_id} started at {datetime.now().strftime("%H:%M:%S")}')
+    time.sleep(duration)
+    logger.info(f'✅ Slow task {task_id} completed in {duration}s')
+    return f'Slow task {task_id} done in {duration}s'
+
+
+@dramatiq.actor(queue_name='critical')
+def critical_task(task_id: str, duration: int = 3):
+    """Critical processing task (2-4 seconds)."""
+    logger.info(f'🔥 Critical task {task_id} started at {datetime.now().strftime("%H:%M:%S")}')
+    time.sleep(duration)
+    logger.info(f'✅ Critical task {task_id} completed in {duration}s')
+    return f'Critical task {task_id} done in {duration}s'
+
+
+@dramatiq.actor(queue_name='payments')
+def payment_task(task_id: str, amount: float):
+    """Payment processing task (1-3 seconds)."""
+    duration = random.randint(1, 3)
+    logger.info(f'💳 Payment task {task_id} processing ${amount} at {datetime.now().strftime("%H:%M:%S")}')
+    time.sleep(duration)
+    logger.info(f'✅ Payment task {task_id} completed in {duration}s')
+    return f'Payment ${amount} processed in {duration}s'
+
+
+@dramatiq.actor(queue_name='agents')
+def agent_task(task_id: str, query: str):
+    """AI agent processing task (3-7 seconds)."""
+    duration = random.randint(3, 7)
+    logger.info(f'🤖 Agent task {task_id} processing query "{query}" at {datetime.now().strftime("%H:%M:%S")}')
+    time.sleep(duration)
+    logger.info(f'✅ Agent task {task_id} completed in {duration}s')
+    return f'Agent processed query "{query}" in {duration}s'
+
+
+@dramatiq.actor(queue_name='high')
+def priority_task(task_id: str, priority_level: str):
+    """High priority task (1-4 seconds)."""
+    duration = random.randint(1, 4)
+    logger.info(f'⚡ Priority task {task_id} ({priority_level}) started at {datetime.now().strftime("%H:%M:%S")}')
+    time.sleep(duration)
+    logger.info(f'✅ Priority task {task_id} completed in {duration}s')
+    return f'Priority task {task_id} ({priority_level}) done in {duration}s'
+
+
+def generate_demo_tasks() -> int:
+    """
+    Generate a variety of demo tasks for dashboard demonstration.
+    
+    Returns:
+        Number of tasks created
+    """
+    tasks_count = 0
+    
+    # Quick tasks (3-5 tasks)
+    for i in range(random.randint(3, 5)):
+        quick_task.send(f'quick_{i+1}', random.randint(2, 3))
+        tasks_count += 1
+    
+    # Medium tasks (2-4 tasks)
+    for i in range(random.randint(2, 4)):
+        medium_task.send(f'medium_{i+1}', random.randint(5, 8))
+        tasks_count += 1
+    
+    # Slow tasks (1-2 tasks)
+    for i in range(random.randint(1, 2)):
+        slow_task.send(f'slow_{i+1}', random.randint(10, 15))
+        tasks_count += 1
+    
+    # Critical tasks (2-3 tasks)
+    for i in range(random.randint(2, 3)):
+        critical_task.send(f'critical_{i+1}', random.randint(2, 4))
+        tasks_count += 1
+    
+    # Payment tasks (1-3 tasks)
+    for i in range(random.randint(1, 3)):
+        amount = round(random.uniform(10.0, 500.0), 2)
+        payment_task.send(f'payment_{i+1}', amount)
+        tasks_count += 1
+    
+    # Agent tasks (1-2 tasks)
+    for i in range(random.randint(1, 2)):
+        queries = ['analyze data', 'generate report', 'process document', 'classify content']
+        query = random.choice(queries)
+        agent_task.send(f'agent_{i+1}', query)
+        tasks_count += 1
+    
+    # Priority tasks (1-2 tasks)
+    for i in range(random.randint(1, 2)):
+        priority_levels = ['urgent', 'high', 'critical']
+        priority = random.choice(priority_levels)
+        priority_task.send(f'priority_{i+1}', priority)
+        tasks_count += 1
+    
+    logger.info(f"Generated {tasks_count} demo tasks across all queues")
+    return tasks_count

django_cfg/apps/tasks/templates/tasks/components/management_actions.html

@@ -1,51 +1,48 @@
 <!-- Management Actions -->
-<div class="mb-8">
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-            <div class="flex items-center">
-                <span class="material-icons text-lg mr-2 text-gray-600 dark:text-gray-400">settings</span>
-                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Management Actions</h3>
-            </div>
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+            <span class="material-icons text-primary-600 dark:text-primary-400 mr-2">settings</span>
+            Management Actions
+        </h2>
+    </div>
+    
+    <div class="p-4">
+        <!-- All Actions in One Row -->
+        <div class="flex flex-wrap gap-3">
+            <!-- Primary Actions -->
+            <button id="simulate-data-btn" 
+                    class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg border border-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">
+                <span class="material-icons text-sm mr-2">science</span>
+                Simulate Data
+            </button>
+            
+            <button id="clear-test-data-btn" 
+                    class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white text-sm rounded-lg border border-orange-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-1">
+                <span class="material-icons text-sm mr-2">clear_all</span>
+                Clear Data
+            </button>
+            
+            <!-- Secondary Actions -->
+            <button id="clear-all-queues-btn" 
+                    class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg border border-red-600 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1">
+                <span class="material-icons text-sm mr-2">delete_sweep</span>
+                Clear Queues
+            </button>
+            
+            <button id="purge-failed-tasks-btn" 
+                    class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm rounded-lg border border-purple-600 transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-1">
+                <span class="material-icons text-sm mr-2">cleaning_services</span>
+                Purge Failed
+            </button>
         </div>
         
-        <div class="p-6">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-                <!-- Task Monitor -->
-                <button onclick="showTaskMonitor()" 
-                        class="flex items-center justify-center px-4 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
-                    <span class="material-icons text-lg mr-2">analytics</span>
-                    <span class="font-medium">Task Monitor</span>
-                </button>
-                
-                <!-- Clear All Queues -->
-                <button id="clear-all-queues-btn" 
-                        class="flex items-center justify-center px-4 py-3 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
-                    <span class="material-icons text-lg mr-2">delete_sweep</span>
-                    <span class="font-medium">Clear All Queues</span>
-                </button>
-                
-                <!-- Purge Failed Tasks -->
-                <button id="purge-failed-tasks-btn" 
-                        class="flex items-center justify-center px-4 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
-                    <span class="material-icons text-lg mr-2">cleaning_services</span>
-                    <span class="font-medium">Purge Failed Tasks</span>
-                </button>
-                
-                <!-- Admin Settings -->
-                <a href="/admin/constance/config/" 
-                   class="flex items-center justify-center px-4 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 text-decoration-none">
-                    <span class="material-icons text-lg mr-2">admin_panel_settings</span>
-                    <span class="font-medium">Admin Settings</span>
-                </a>
-            </div>
-            
-            <!-- Action Status -->
-            <div id="management-action-status" class="mt-4 hidden">
-                <div class="p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
-                    <div class="flex items-center">
-                        <span class="material-icons text-blue-600 dark:text-blue-400 mr-2">info</span>
-                        <span id="management-action-message" class="text-sm text-blue-800 dark:text-blue-200"></span>
-                    </div>
+        <!-- Action Status -->
+        <div id="management-action-status" class="mt-4 hidden">
+            <div class="p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
+                <div class="flex items-center">
+                    <span class="material-icons text-blue-600 dark:text-blue-400 mr-2">info</span>
+                    <span id="management-action-message" class="text-sm text-blue-800 dark:text-blue-200"></span>
                 </div>
             </div>
         </div>

django_cfg/apps/tasks/templates/tasks/components/{status_cards.html → overview_content.html}

@@ -1,13 +1,14 @@
-<!-- Status Cards -->
-<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+<!-- Overview Content -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+    <!-- Status Cards -->
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
         <div class="flex items-center">
             <div class="flex-shrink-0">
-                <span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">queue</span>
+                <span class="material-icons text-2xl text-blue-600 dark:text-blue-400">queue</span>
             </div>
             <div class="ml-4">
                 <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Queues</p>
-                <p id="active-queues-count" class="text-2xl font-bold text-gray-900 dark:text-white">-</p>
+                <p id="active-queues-count" class="text-2xl font-semibold text-gray-900 dark:text-white">0</p>
             </div>
         </div>
     </div>
@@ -15,11 +16,11 @@
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
         <div class="flex items-center">
             <div class="flex-shrink-0">
-                <span class="material-icons text-green-600 dark:text-green-400 text-3xl">engineering</span>
+                <span class="material-icons text-2xl text-green-600 dark:text-green-400">engineering</span>
             </div>
             <div class="ml-4">
-                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Active Workers</p>
-                <p id="active-workers-count" class="text-2xl font-bold text-gray-900 dark:text-white">-</p>
+                <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Workers</p>
+                <p id="workers-count" class="text-2xl font-semibold text-gray-900 dark:text-white">0</p>
             </div>
         </div>
     </div>
@@ -27,11 +28,11 @@
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
         <div class="flex items-center">
             <div class="flex-shrink-0">
-                <span class="material-icons text-yellow-600 dark:text-yellow-400 text-3xl">pending</span>
+                <span class="material-icons text-2xl text-yellow-600 dark:text-yellow-400">schedule</span>
             </div>
             <div class="ml-4">
                 <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Pending Tasks</p>
-                <p id="pending-tasks-count" class="text-2xl font-bold text-gray-900 dark:text-white">-</p>
+                <p id="pending-tasks-count" class="text-2xl font-semibold text-gray-900 dark:text-white">0</p>
             </div>
         </div>
     </div>
@@ -39,11 +40,29 @@
     <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
         <div class="flex items-center">
             <div class="flex-shrink-0">
-                <span class="material-icons text-red-600 dark:text-red-400 text-3xl">error</span>
+                <span class="material-icons text-2xl text-red-600 dark:text-red-400">error</span>
             </div>
             <div class="ml-4">
                 <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Failed Tasks</p>
-                <p id="failed-tasks-count" class="text-2xl font-bold text-gray-900 dark:text-white">-</p>
+                <p id="failed-tasks-count" class="text-2xl font-semibold text-gray-900 dark:text-white">0</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- System Status -->
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+            <span class="material-icons text-primary-600 dark:text-primary-400 mr-2">monitor_heart</span>
+            System Status
+        </h2>
+    </div>
+    <div class="p-6">
+        <div id="system-status">
+            <div class="flex items-center justify-center py-12">
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+                <span class="ml-3 text-gray-600 dark:text-gray-400">Loading status...</span>
             </div>
         </div>
     </div>

django_cfg/apps/tasks/templates/tasks/components/queues_content.html

@@ -0,0 +1,19 @@
+<!-- Queues Content -->
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+            <span class="material-icons text-blue-600 dark:text-blue-400 mr-2">queue</span>
+            Queue Details
+        </h2>
+        <button id="refresh-queues-btn" 
+                class="inline-flex items-center px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition-colors">
+            <span class="material-icons text-sm">refresh</span>
+        </button>
+    </div>
+    <div class="p-6">
+        <div id="queues-container">
+            <!-- Queues will be loaded here by JavaScript -->
+            <p class="text-gray-600 dark:text-gray-400">Loading queues...</p>
+        </div>
+    </div>
+</div>

django_cfg/apps/tasks/templates/tasks/components/tab_navigation.html

@@ -1,26 +1,32 @@
 <!-- Tab Navigation -->
-<div class="mb-8">
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
     <div class="border-b border-gray-200 dark:border-gray-700">
-        <nav class="-mb-px flex space-x-8" aria-label="Tabs">
-            <button class="tab-button active border-primary-500 text-primary-600 dark:text-primary-400 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
-                    data-tab="overview">
+        <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
+            <button data-tab="overview" 
+                    class="tab-button active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-primary-500 text-primary-600 dark:text-primary-400">
                 <span class="material-icons text-sm mr-2">dashboard</span>
                 Overview
             </button>
-            <button class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
-                    data-tab="queues">
+            
+            <button data-tab="queues" 
+                    class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300">
                 <span class="material-icons text-sm mr-2">queue</span>
                 Queues
+                <span id="queues-count-badge" class="ml-2 px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">0</span>
             </button>
-            <button class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
-                    data-tab="workers">
+            
+            <button data-tab="workers" 
+                    class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300">
                 <span class="material-icons text-sm mr-2">engineering</span>
                 Workers
+                <span id="workers-count-badge" class="ml-2 px-2 py-1 text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">0</span>
             </button>
-            <button class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" 
-                    data-tab="tasks">
+            
+            <button data-tab="tasks" 
+                    class="tab-button whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300">
                 <span class="material-icons text-sm mr-2">list</span>
                 Tasks
+                <span id="tasks-count-badge" class="ml-2 px-2 py-1 text-xs bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full">0</span>
             </button>
         </nav>
     </div>

django_cfg/apps/tasks/templates/tasks/components/tasks_content.html

@@ -0,0 +1,51 @@
+<!-- Tasks Content -->
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
+    <!-- Header -->
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+        <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center">
+                <span class="material-icons text-purple-600 dark:text-purple-400 mr-2">list</span>
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Task Monitor</h2>
+                <span id="task-count-badge" class="ml-3 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded-full">0 tasks</span>
+            </div>
+            
+            <div class="flex items-center space-x-2">
+                <button id="tasks-auto-refresh-toggle" 
+                        class="px-3 py-1 text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-lg hover:bg-green-200 dark:hover:bg-green-800 transition-colors">
+                    <span class="material-icons text-sm mr-1">refresh</span>Auto: ON
+                </button>
+                <button id="refresh-tasks-btn" 
+                        class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors">
+                    <span class="material-icons text-sm">refresh</span>
+                </button>
+            </div>
+        </div>
+        
+        <!-- Filters -->
+        {% include 'tasks/widgets/task_filters.html' %}
+    </div>
+    
+    <!-- Content -->
+    <div class="p-6">
+        <!-- Loading State -->
+        <div id="tasks-loading" class="hidden flex items-center justify-center py-12">
+            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
+            <span class="ml-3 text-gray-600 dark:text-gray-400">Loading tasks...</span>
+        </div>
+        
+        <!-- Empty State -->
+        <div id="tasks-empty" class="hidden text-center py-12">
+            <span class="material-icons text-6xl text-gray-400 dark:text-gray-600 mb-4">inbox</span>
+            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">No tasks found</h3>
+            <p class="text-gray-500 dark:text-gray-400">Try adjusting your filters or run some tasks.</p>
+        </div>
+        
+        <!-- Task List -->
+        <div id="tasks-container">
+            {% include 'tasks/widgets/task_table.html' %}
+        </div>
+    </div>
+    
+    <!-- Footer -->
+    {% include 'tasks/widgets/task_footer.html' %}
+</div>

django_cfg/apps/tasks/templates/tasks/components/workers_content.html

@@ -0,0 +1,30 @@
+<!-- Workers Content -->
+<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700">
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
+            <span class="material-icons text-green-600 dark:text-green-400 mr-2">engineering</span>
+            Worker Management
+        </h2>
+        <div class="flex space-x-2">
+            <button id="start-workers-btn" 
+                    class="inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors">
+                <span class="material-icons text-sm mr-1">play_arrow</span>
+                Start
+            </button>
+            <button id="stop-workers-btn" 
+                    class="inline-flex items-center px-3 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg transition-colors">
+                <span class="material-icons text-sm mr-1">stop</span>
+                Stop
+            </button>
+        </div>
+    </div>
+    <div class="p-6">
+        <div id="workers-container">
+            <!-- Workers will be loaded here by JavaScript -->
+            <div class="flex items-center justify-center py-12">
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+                <span class="ml-3 text-gray-600 dark:text-gray-400">Loading workers...</span>
+            </div>
+        </div>
+    </div>
+</div>

django_cfg/apps/tasks/templates/tasks/layout/base.html

@@ -0,0 +1,117 @@
+<!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 %}Tasks Dashboard{% endblock %} - Django CFG</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',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <!-- Material Icons -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'tasks/css/dashboard.css' %}">
+    
+    {% block extra_css %}{% endblock %}
+</head>
+<body class="h-full bg-gray-50 dark:bg-gray-900">
+    <!-- Navigation -->
+    <nav 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 justify-between h-16">
+                <!-- Logo & Title -->
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <span class="material-icons text-2xl text-primary-600 dark:text-primary-400 mr-3">dashboard</span>
+                        <h1 class="text-xl font-semibold text-gray-900 dark:text-white">
+                            {% block page_title %}Tasks Dashboard{% endblock %}
+                        </h1>
+                    </div>
+                </div>
+                
+                <!-- Actions -->
+                <div class="flex items-center space-x-3">
+                    {% block header_actions %}
+                    <a href="/admin/django_dramatiq/task/" 
+                       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>
+                        Task History
+                    </a>
+                    <a href="/admin/constance/config/" 
+                       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">admin_panel_settings</span>
+                        Settings
+                    </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>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Scripts -->
+    <script>
+        // Theme toggle functionality
+        const themeToggle = document.getElementById('theme-toggle');
+        const themeIcon = themeToggle?.querySelector('.material-icons');
+        const html = document.documentElement;
+        
+        // Update theme icon
+        function updateThemeIcon(isDark) {
+            if (themeIcon) {
+                themeIcon.textContent = isDark ? 'dark_mode' : 'light_mode';
+            }
+        }
+        
+        // Check for saved theme or default to light
+        const currentTheme = localStorage.getItem('theme') || 'light';
+        const isDark = currentTheme === 'dark';
+        html.classList.toggle('dark', isDark);
+        updateThemeIcon(isDark);
+        
+        themeToggle?.addEventListener('click', () => {
+            const wasDark = html.classList.contains('dark');
+            html.classList.toggle('dark');
+            const nowDark = html.classList.contains('dark');
+            localStorage.setItem('theme', nowDark ? 'dark' : 'light');
+            updateThemeIcon(nowDark);
+        });
+    </script>
+    
+    {% block extra_js %}{% endblock %}
+</body>
+</html>