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

django_cfg/modules/django_unfold/dashboard.py

@@ -145,7 +145,7 @@ class DashboardManager(BaseCfgModule):
                 collapsible=True,
                 items=[
                     NavigationItem(title="Task Queue", icon=Icons.QUEUE, link="/admin/django_dramatiq/task/"),
-                    NavigationItem(title="Task Dashboard", icon=Icons.SETTINGS_APPLICATIONS, link="/cfg/tasks/dashboard/"),
+                    NavigationItem(title="Task Dashboard", icon=Icons.SETTINGS_APPLICATIONS, link="/cfg/admin/django_cfg_tasks/admin/dashboard/"),
                 ]
             ))
         
@@ -170,13 +170,18 @@ class DashboardManager(BaseCfgModule):
                 separator=True,
                 collapsible=True,
                 items=[
+                    NavigationItem(title="Payment Dashboard", icon=Icons.DASHBOARD, link="/cfg/admin/django_cfg_payments/admin/"),
+                    NavigationItem(title="Payment List", icon=Icons.LIST, link="/cfg/admin/django_cfg_payments/admin/list/"),
+                    NavigationItem(title="Create Payment", icon=Icons.ADD, link="/cfg/admin/django_cfg_payments/admin/create/"),
+                    NavigationItem(title="Payment Analytics", icon=Icons.ANALYTICS, link="/cfg/admin/django_cfg_payments/admin/stats/"),
+                    NavigationItem(title="Payment Testing", icon=Icons.SETTINGS, link="/cfg/admin/django_cfg_payments/admin/test/"),
                     NavigationItem(title="Payments", icon=Icons.ACCOUNT_BALANCE, link="/admin/django_cfg_payments/universalpayment/"),
                     NavigationItem(title="Subscriptions", icon=Icons.PERSON_ADD, link="/admin/django_cfg_payments/subscription/"),
                     NavigationItem(title="API Keys", icon=Icons.KEY, link="/admin/django_cfg_payments/apikey/"),
                     NavigationItem(title="Balances", icon=Icons.ACCOUNT_BALANCE_WALLET, link="/admin/django_cfg_payments/userbalance/"),
                     NavigationItem(title="Transactions", icon=Icons.DESCRIPTION, link="/admin/django_cfg_payments/transaction/"),
                     NavigationItem(title="Currencies", icon=Icons.ACCOUNT_CIRCLE, link="/admin/django_cfg_payments/currency/"),
-                    NavigationItem(title="Currency Networks", icon=Icons.LINK, link="/admin/django_cfg_payments/currencynetwork/"),
+                    NavigationItem(title="Currency Networks", icon=Icons.LINK, link="/admin/django_cfg_payments/network/"),
                     NavigationItem(title="Endpoint Groups", icon=Icons.GROUP, link="/admin/django_cfg_payments/endpointgroup/"),
                     NavigationItem(title="Tariffs", icon=Icons.SETTINGS, link="/admin/django_cfg_payments/tariff/"),
                 ]

django_cfg/templates/admin/components/action_grid.html

@@ -1,26 +1,26 @@
 {% load unfold %}
 
 <!-- Action Grid Component -->
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-{{ cols|default:'3' }} xl:grid-cols-{{ xl_cols|default:'4' }} gap-4">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
     {% for action in actions %}
         <a href="{{ action.link }}" 
-           class="group flex items-center p-4 bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 hover:border-primary-600 dark:hover:border-primary-500 hover:shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
+           class="group flex items-center p-4 theme-card rounded-lg border theme-border hover:border-blue-600 dark:hover:border-blue-500 hover:shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
             
             <!-- Icon -->
             <div class="flex-shrink-0 mr-4">
                 <div class="p-2 rounded-lg transition-colors duration-200
-                    {% if action.color == 'primary' %}bg-primary-100 dark:bg-primary-900/20 group-hover:bg-primary-200 dark:group-hover:bg-primary-800/30
+                    {% if action.color == 'primary' %}bg-blue-100 dark:bg-blue-900/20 group-hover:bg-blue-200 dark:group-hover:bg-blue-800/30
                     {% elif action.color == 'success' %}bg-green-100 dark:bg-green-900/20 group-hover:bg-green-200 dark:group-hover:bg-green-800/30
                     {% elif action.color == 'warning' %}bg-amber-100 dark:bg-amber-900/20 group-hover:bg-amber-200 dark:group-hover:bg-amber-800/30
                     {% elif action.color == 'danger' %}bg-red-100 dark:bg-red-900/20 group-hover:bg-red-200 dark:group-hover:bg-red-800/30
-                    {% else %}bg-base-100 dark:bg-base-800 group-hover:bg-base-200 dark:group-hover:bg-base-700{% endif %}">
+                    {% else %}bg-gray-100 dark:bg-gray-800 group-hover:bg-gray-200 dark:group-hover:bg-gray-700{% endif %}">
                     
                     <span class="material-icons text-lg
-                        {% if action.color == 'primary' %}text-primary-600 dark:text-primary-400
+                        {% if action.color == 'primary' %}text-blue-600 dark:text-blue-400
                         {% elif action.color == 'success' %}text-green-600 dark:text-green-400
                         {% elif action.color == 'warning' %}text-amber-600 dark:text-amber-400
                         {% elif action.color == 'danger' %}text-red-600 dark:text-red-400
-                        {% else %}text-font-subtle-light dark:text-font-subtle-dark{% endif %}">
+                        {% else %}text-gray-600 dark:text-gray-400{% endif %}">
                         {{ action.icon }}
                     </span>
                 </div>
@@ -28,11 +28,11 @@
             
             <!-- Content -->
             <div class="flex-1 min-w-0">
-                <h3 class="text-sm font-medium text-font-default-light dark:text-font-default-dark group-hover:text-primary-600 dark:group-hover:text-primary-500 transition-colors duration-200">
+                <h3 class="text-sm font-medium theme-text group-hover:text-blue-600 dark:group-hover:text-blue-500 transition-colors duration-200">
                     {{ action.title }}
                 </h3>
                 {% if action.description %}
-                    <p class="text-xs text-font-subtle-light dark:text-font-subtle-dark mt-1 line-clamp-2">
+                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
                         {{ action.description }}
                     </p>
                 {% endif %}
@@ -40,7 +40,7 @@
             
             <!-- Arrow -->
             <div class="flex-shrink-0 ml-2">
-                <span class="material-icons text-base-400 dark:text-base-500 group-hover:text-primary-600 dark:group-hover:text-primary-500 transition-colors duration-200">
+                <span class="material-icons text-gray-400 dark:text-gray-500 group-hover:text-blue-600 dark:group-hover:text-blue-500 transition-colors duration-200">
                     arrow_forward
                 </span>
             </div>

django_cfg/templates/admin/components/metric_card.html

@@ -1,7 +1,7 @@
 {% load unfold %}
 
 <!-- Metric Card Component -->
-<div class="bg-white dark:bg-base-900 rounded-lg p-5 border border-base-200 dark:border-base-700 hover:shadow-md transition-shadow duration-200">
+<div class="theme-card rounded-lg p-5 border theme-border hover:shadow-md transition-shadow duration-200">
     <div class="flex items-center justify-between">
         <div class="flex items-center space-x-3">
             <div class="flex-shrink-0">
@@ -10,16 +10,16 @@
                     {% elif status == 'warning' %}text-amber-600 dark:text-amber-400
                     {% elif status == 'error' or status == 'failed' %}text-red-600 dark:text-red-400
                     {% elif status == 'info' %}text-blue-600 dark:text-blue-400
-                    {% else %}text-primary-600 dark:text-primary-400{% endif %}">
+                    {% else %}text-blue-600 dark:text-blue-400{% endif %}">
                     {{ icon }}
                 </span>
             </div>
-            <div>
-                <div class="text-sm font-medium text-font-default-light dark:text-font-default-dark">
+            <div class="min-w-0 flex-1">
+                <div class="text-sm font-medium theme-text truncate">
                     {{ title }}
                 </div>
                 {% if description %}
-                <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark mt-1">
+                <div class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
                     {{ description }}
                 </div>
                 {% endif %}

django_cfg/templates/admin/components/status_badge.html

@@ -1,12 +1,12 @@
 {% load unfold %}
 
 <!-- Status Badge Component -->
-<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+<span class="status-badge inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
     {% if status == 'active' or status == 'healthy' or status == 'success' %}bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400
     {% elif status == 'warning' or status == 'pending' %}bg-amber-100 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400
     {% elif status == 'error' or status == 'failed' or status == 'inactive' %}bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400
     {% elif status == 'info' or status == 'processing' %}bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400
-    {% else %}bg-base-100 dark:bg-base-800 text-font-subtle-light dark:text-font-subtle-dark{% endif %}">
+    {% else %}bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400{% endif %}">
     
     {% if icon %}
     <span class="material-icons text-xs mr-1">{{ icon }}</span>

django_cfg/templates/admin/layouts/dashboard_with_tabs.html

@@ -5,6 +5,7 @@
 {% block extrahead %}
     {{ block.super }}
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <!-- Removed Tailwind CDN - using CSS-only solution -->
     
     <script>
     // Dashboard tabs functionality
@@ -22,12 +23,10 @@
             tabs.forEach((t, i) => {
                 if (i === idx) {
                     // Active tab
-                    t.classList.add('bg-primary-600', 'text-white', 'border-primary-600');
-                    t.classList.remove('bg-base-100', 'text-font-default-light', 'border-base-200', 'dark:bg-base-800', 'dark:text-font-default-dark', 'dark:border-base-700');
+                    t.classList.add('active');
                 } else {
-                    // Inactive tab
-                    t.classList.remove('bg-primary-600', 'text-white', 'border-primary-600');
-                    t.classList.add('bg-base-100', 'text-font-default-light', 'border-base-200', 'dark:bg-base-800', 'dark:text-font-default-dark', 'dark:border-base-700');
+                    // Inactive tab  
+                    t.classList.remove('active');
                 }
             });
             
@@ -92,19 +91,21 @@
             const button = event.target.closest('button');
             const originalText = button.innerHTML;
             button.innerHTML = '<span class="material-icons text-xs mr-1">check</span>Copied';
-            button.classList.remove('bg-base-100', 'dark:bg-base-700', 'hover:bg-base-200', 'dark:hover:bg-base-600');
+            button.classList.remove('bg-gray-100', 'dark:bg-gray-700', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
             button.classList.add('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600', 'text-white');
             
             setTimeout(function() {
                 button.innerHTML = originalText;
                 button.classList.remove('bg-green-600', 'hover:bg-green-700', 'dark:bg-green-500', 'dark:hover:bg-green-600', 'text-white');
-                button.classList.add('bg-base-100', 'dark:bg-base-700', 'hover:bg-base-200', 'dark:hover:bg-base-600');
+                button.classList.add('bg-gray-100', 'dark:bg-gray-700', 'hover:bg-gray-200', 'dark:hover:bg-gray-600');
             }, 2000);
         }).catch(function(err) {
             console.error('Could not copy text: ', err);
         });
     };
 
+    // No JS needed - using pure CSS solution
+
     window.executeCommand = function(commandName) {
         const modal = document.getElementById('commandModal');
         const commandNameEl = document.getElementById('commandName');
@@ -118,7 +119,7 @@
 
         commandNameEl.textContent = commandName;
         commandOutput.textContent = '';
-        commandStatus.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-font-default-light dark:text-font-default-dark">Executing...</span>';
+        commandStatus.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Executing...</span>';
         modal.classList.remove('hidden');
         
         fetch('/cfg/commands/execute/', {
@@ -185,7 +186,7 @@
                 addLogLine(output, `🚀 Starting command: ${data.command}`, 'info');
                 addLogLine(output, `📝 Arguments: ${data.args.join(' ')}`, 'info');
                 addLogLine(output, '', 'spacer');
-                status.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-font-default-light dark:text-font-default-dark">Executing...</span>';
+                status.innerHTML = '<div class="w-3 h-3 bg-yellow-500 rounded-full mr-2 animate-pulse"></div><span class="text-sm font-medium text-gray-700 dark:text-gray-300">Executing...</span>';
                 break;
             case 'output':
                 addLogLine(output, data.line, 'output');
@@ -232,7 +233,7 @@
                 line.className += ' h-2';
                 break;
             default:
-                line.className += ' text-font-default-light dark:text-font-default-dark';
+                line.className += ' text-gray-700 dark:text-gray-300';
         }
         
         // Set content
@@ -296,6 +297,133 @@
         from { opacity: 0; transform: translateY(10px); }
         to { opacity: 1; transform: translateY(0); }
     }
+    
+    /* 🎨 Theme classes - cross-theme compatible cards */
+    .theme-card {
+        background-color: rgba(255, 255, 255, 0.2) !important;
+        backdrop-filter: blur(10px) !important;
+        color: #111827 !important;
+        border-color: rgba(229, 231, 235, 0.6) !important;
+        border-radius: 10px !important;
+        transition: all 0.2s ease;
+    }
+    
+    html.dark .theme-card {
+        background-color: rgba(31, 41, 55, 0.2) !important;
+        backdrop-filter: blur(10px) !important;
+        color: white !important;
+        border-color: rgba(55, 65, 81, 0.6) !important;
+        border-radius: 10px !important;
+    }
+    
+    .theme-text {
+        color: #111827 !important;
+    }
+    
+    html.dark .theme-text {
+        color: white !important;
+    }
+    
+    .theme-border {
+        border-color: rgba(229, 231, 235, 0.6) !important;
+    }
+    
+    html.dark .theme-border {
+        border-color: rgba(55, 65, 81, 0.6) !important;
+    }
+
+    /* Fix grid layout */
+    .overview-grid {
+        display: grid !important;
+        grid-template-columns: 1fr !important;
+    }
+    
+    @media (min-width: 1280px) {
+        .overview-grid {
+            grid-template-columns: 2fr 1fr !important;
+        }
+    }
+
+    /* 🎯 Tab styling */
+    #dashboard-tabs {
+        border-bottom: 2px solid #e5e7eb !important;
+    }
+    
+    html.dark #dashboard-tabs {
+        border-bottom-color: #374151 !important;
+    }
+    
+    #dashboard-tabs button {
+        background-color: #f3f4f6 !important;
+        color: #6b7280 !important;
+        border-bottom: 2px solid transparent !important;
+        transition: all 0.2s ease !important;
+    }
+    
+    html.dark #dashboard-tabs button {
+        background-color: #374151 !important;
+        color: #9ca3af !important;
+    }
+    
+    #dashboard-tabs button:hover {
+        background-color: #e5e7eb !important;
+        color: #374151 !important;
+    }
+    
+    html.dark #dashboard-tabs button:hover {
+        background-color: #4b5563 !important;
+        color: #d1d5db !important;
+    }
+    
+    /* Active tab */
+    #dashboard-tabs button.active,
+    #dashboard-tabs button[class*="bg-blue"] {
+        background-color: #2563eb !important;
+        color: white !important;
+        border-bottom-color: #2563eb !important;
+    }
+    
+    html.dark #dashboard-tabs button.active,
+    html.dark #dashboard-tabs button[class*="bg-blue"] {
+        background-color: #3b82f6 !important;
+        color: white !important;
+        border-bottom-color: #3b82f6 !important;
+    }
+
+    /* 🎯 Universal card borders - transparent cross-theme */
+    .card-border,
+    .border-base-200,
+    [class*="border-base-200"],
+    [class*="dark:border-base-700"] {
+        border-color: rgba(229, 231, 235, 0.6) !important;
+    }
+    
+    html.dark .card-border,
+    html.dark .border-base-200,
+    html.dark [class*="border-base-200"],
+    html.dark [class*="dark:border-base-700"] {
+        border-color: rgba(55, 65, 81, 0.6) !important;
+    }
+
+    /* 🎯 Icon spacing defaults - more specific targeting */
+    .theme-card .material-icons:not(.no-margin) {
+        margin-right: 0.75rem !important; /* 12px default spacing */
+    }
+    
+    /* Override for specific contexts */
+    .theme-card .flex.items-center .material-icons {
+        margin-right: 0.75rem !important;
+    }
+    
+    .theme-card .status-badge .material-icons {
+        margin-right: 0.25rem !important; /* 4px for badges */
+    }
+    
+    /* Fix for buttons and interactive elements */
+    .theme-card button .material-icons,
+    .theme-card a .material-icons {
+        margin-right: 0.5rem !important;
+    }
     </style>
 {% endblock %}
 
@@ -315,10 +443,10 @@
 {% block content %}
     <!-- Dashboard Header -->
     <div class="mb-8">
-        <h1 class="text-3xl font-bold text-font-important-light dark:text-font-important-dark">
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
             {{ dashboard_title|default:"Dashboard" }}
         </h1>
-        <p class="mt-2 text-font-default-light dark:text-font-default-dark">
+        <p class="mt-2 text-gray-700 dark:text-gray-300">
             Welcome to the administration dashboard
         </p>
     </div>
@@ -335,11 +463,11 @@
         </div>
 
         <!-- Tabs Navigation -->
-        <div class="flex gap-1 mb-6 border-b border-base-200 dark:border-base-700" id="dashboard-tabs">
+        <div class="flex gap-1 mb-6" id="dashboard-tabs">
             <button 
                 type="button" 
                 data-tab="0"
-                class="px-4 py-3 transition-all rounded-t-lg focus:outline-none font-semibold border-b-2 bg-primary-600 text-white border-primary-600"
+                class="px-4 py-3 rounded-t-lg focus:outline-none font-semibold active"
             >
                 <span class="material-icons mr-2 align-middle text-sm">dashboard</span>
                 Overview
@@ -347,7 +475,7 @@
             <button 
                 type="button" 
                 data-tab="1"
-                class="px-4 py-3 transition-all rounded-t-lg focus:outline-none bg-base-100 text-font-default-light border-b-2 border-base-200 dark:bg-base-800 dark:text-font-default-dark dark:border-base-700"
+                class="px-4 py-3 rounded-t-lg focus:outline-none"
             >
                 <span class="material-icons mr-2 align-middle text-sm">public</span>
                 API Zones
@@ -355,7 +483,7 @@
             <button 
                 type="button" 
                 data-tab="2"
-                class="px-4 py-3 transition-all rounded-t-lg focus:outline-none bg-base-100 text-font-default-light border-b-2 border-base-200 dark:bg-base-800 dark:text-font-default-dark dark:border-base-700"
+                class="px-4 py-3 rounded-t-lg focus:outline-none"
             >
                 <span class="material-icons mr-2 align-middle text-sm">people</span>
                 Users
@@ -363,7 +491,7 @@
             <button 
                 type="button" 
                 data-tab="3"
-                class="px-4 py-3 transition-all rounded-t-lg focus:outline-none bg-base-100 text-font-default-light border-b-2 border-base-200 dark:bg-base-800 dark:text-font-default-dark dark:border-base-700"
+                class="px-4 py-3 rounded-t-lg focus:outline-none"
             >
                 <span class="material-icons mr-2 align-middle text-sm">settings</span>
                 System
@@ -371,7 +499,7 @@
             <button 
                 type="button" 
                 data-tab="4"
-                class="px-4 py-3 transition-all rounded-t-lg focus:outline-none bg-base-100 text-font-default-light border-b-2 border-base-200 dark:bg-base-800 dark:text-font-default-dark dark:border-base-700"
+                class="px-4 py-3 rounded-t-lg focus:outline-none"
             >
                 <span class="material-icons mr-2 align-middle text-sm">analytics</span>
                 Statistics
@@ -379,7 +507,7 @@
             <button 
                 type="button" 
                 data-tab="5"
-                class="px-4 py-3 transition-all rounded-t-lg focus:outline-none bg-base-100 text-font-default-light border-b-2 border-base-200 dark:bg-base-800 dark:text-font-default-dark dark:border-base-700"
+                class="px-4 py-3 rounded-t-lg focus:outline-none"
             >
                 <span class="material-icons mr-2 align-middle text-sm">apps</span>
                 App Stats
@@ -387,7 +515,7 @@
             <button 
                 type="button" 
                 data-tab="6"
-                class="px-4 py-3 transition-all rounded-t-lg focus:outline-none bg-base-100 text-font-default-light border-b-2 border-base-200 dark:bg-base-800 dark:text-font-default-dark dark:border-base-700"
+                class="px-4 py-3 rounded-t-lg focus:outline-none"
             >
                 <span class="material-icons mr-2 align-middle text-sm">terminal</span>
                 Commands
@@ -427,14 +555,14 @@
         </div>
 
         <!-- Footer Section -->
-        <div class="text-center py-8 border-t border-base-200 dark:border-base-700 mt-5">
-            <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
+        <div class="text-center py-8 border-t theme-border mt-5">
+            <p class="text-sm text-gray-500 dark:text-gray-400">
                 {% load django_cfg %}
-                <a href="{% lib_site_url %}" class="text-primary-600 hover:text-primary-700 font-medium">
+                <a href="{% lib_site_url %}" class="text-blue-600 hover:text-blue-700 font-medium">
                     {% lib_name %}
                 </a>
                 <span class="mx-2">•</span>
-                <a href="{% lib_health_url %}" class="text-primary-600 hover:text-primary-700">
+                <a href="{% lib_health_url %}" class="text-blue-600 hover:text-blue-700">
                     System Health
                 </a>
             </p>

django_cfg/templates/admin/snippets/components/quick_actions.html

@@ -12,7 +12,7 @@
             <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-6">
                 {% if admin_actions %}
                     <div class="bg-base-50 dark:bg-base-800 rounded-lg p-6 border border-base-200 dark:border-base-700">
-                        <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark mb-4 flex items-center">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                             <span class="material-icons text-primary-600 mr-2">admin_panel_settings</span>
                             Admin Actions
                         </h3>
@@ -29,7 +29,7 @@
                 
                 {% if user_actions %}
                     <div class="bg-base-50 dark:bg-base-800 rounded-lg p-6 border border-base-200 dark:border-base-700">
-                        <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark mb-4 flex items-center">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                             <span class="material-icons text-green-600 dark:text-green-400 mr-2">people</span>
                             User Management
                         </h3>
@@ -46,7 +46,7 @@
                 
                 {% if system_actions %}
                     <div class="bg-base-50 dark:bg-base-800 rounded-lg p-6 border border-base-200 dark:border-base-700">
-                        <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark mb-4 flex items-center">
+                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                             <span class="material-icons text-amber-600 dark:text-amber-400 mr-2">settings</span>
                             System Tools
                         </h3>

django_cfg/templates/admin/snippets/components/system_health.html

@@ -4,7 +4,7 @@
 <div class="mt-8 w-full">
     {% include 'admin/components/section_header.html' with title='System Health' icon='health_and_safety' icon_color='green' %}
     
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 w-full">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
         {% for key, value in system_health.items %}
             {% if key == "database_status" %}
                 {% include 'admin/components/metric_card.html' with title='Database' description='Connection & queries' icon='storage' status=value|yesno:'healthy,error' status_text=value|title %}

django_cfg/templates/admin/snippets/tabs/overview_tab.html

@@ -6,12 +6,12 @@
   <div>
     <div class="flex items-center justify-between mb-6">
       <div>
-        <h1 class="text-2xl font-bold text-font-important-light dark:text-font-important-dark">System Overview</h1>
-        <p class="text-font-default-light dark:text-font-default-dark mt-2">
+        <h1 class="text-2xl font-bold theme-text">System Overview</h1>
+        <p class="text-gray-600 dark:text-gray-300 mt-2">
           Real-time monitoring and key performance indicators
         </p>
       </div>
-      <div class="flex items-center space-x-2 text-sm text-font-subtle-light dark:text-font-subtle-dark">
+      <div class="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
         <span class="material-icons text-green-500">fiber_manual_record</span>
         <span>Live data</span>
       </div>
@@ -21,60 +21,57 @@
     {% include 'admin/snippets/components/stats_cards.html' %}
   </div>
 
-  <!-- Primary Dashboard Row -->
-  <div class="grid grid-cols-1 xl:grid-cols-3" style="gap: 2rem;">
-    <!-- Main Content Area -->
-    <div class="xl:col-span-2 space-y-8">
-      <!-- Charts Section -->
-      {% include 'admin/snippets/components/charts_section.html' %}
-
-      <!-- Recent Activity Stream -->
-      <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 shadow-xs">
-        <div class="p-6 border-b border-base-200 dark:border-base-700">
-          <div class="flex items-center justify-between">
-            <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark flex items-center">
-              <span class="material-icons text-primary-600 mr-2">timeline</span>
-              Recent Activity
-            </h3>
-            <a
-              href="#"
-              class="text-sm text-primary-600 hover:text-primary-700 flex items-center"
-            >
-              View all
-              <span class="material-icons text-xs ml-1">arrow_forward</span>
-            </a>
-          </div>
-        </div>
-        <div class="p-6">
-          {% include 'admin/snippets/components/recent_activity.html' %}
-        </div>
+  <!-- System Health & Quick Actions - Full Width Row -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+    <!-- System Health Card -->
+    <div class="theme-card rounded-lg shadow-sm border">
+      <div class="p-6">
+        {% include 'admin/snippets/components/system_health.html' %}
       </div>
     </div>
 
-    <!-- Sidebar Content -->
-    <div class="space-y-8">
-      <!-- System Health Card -->
-      <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 shadow-xs">
-        <div class="p-6">
-          {% include 'admin/snippets/components/system_health.html' %}
-        </div>
+    <!-- Quick Actions Card -->
+    <div class="theme-card rounded-lg border theme-border shadow-sm">
+      <div class="p-6">
+        {% include 'admin/snippets/components/quick_actions.html' %}
       </div>
+    </div>
+  </div>
+
+  <!-- Charts & Recent Activity - Full Width -->
+  <div class="space-y-8">
+    <!-- Charts Section -->
+    {% include 'admin/snippets/components/charts_section.html' %}
 
-      <!-- Quick Actions Card -->
-      <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 shadow-xs">
-        <div class="p-6">
-          {% include 'admin/snippets/components/quick_actions.html' %}
+    <!-- Recent Activity Stream -->
+    <div class="theme-card rounded-lg shadow-sm border">
+      <div class="p-6 border-b theme-border">
+        <div class="flex items-center justify-between">
+          <h3 class="text-lg font-semibold theme-text flex items-center">
+            <span class="material-icons text-blue-600 mr-2">timeline</span>
+            Recent Activity
+          </h3>
+          <a
+            href="#"
+            class="text-sm text-blue-600 hover:text-blue-700 flex items-center"
+          >
+            View all
+            <span class="material-icons text-xs ml-1">arrow_forward</span>
+          </a>
         </div>
       </div>
+      <div class="p-6">
+        {% include 'admin/snippets/components/recent_activity.html' %}
+      </div>
     </div>
   </div>
 
   <!-- Secondary Metrics Row -->
-  <div class="grid grid-cols-1 lg:grid-cols-2 ье" style="gap: 2rem;">
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
     <!-- System Metrics -->
-    <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 shadow-xs">
-      <div class="p-6 border-b border-base-200 dark:border-base-700">
-        <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark flex items-center">
+    <div class="theme-card rounded-lg border theme-border shadow-sm">
+      <div class="p-6 border-b theme-border">
+        <h3 class="text-lg font-semibold theme-text flex items-center">
           <span class="material-icons text-blue-500 mr-2">memory</span>
           System Metrics
         </h3>
@@ -85,10 +82,10 @@
     </div>
 
     <!-- Activity Tracker -->
-    <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 shadow-xs">
-      <div class="p-6 border-b border-base-200 dark:border-base-700">
-        <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark flex items-center">
-          <span class="material-icons text-primary-600 mr-2">track_changes</span>
+    <div class="theme-card rounded-lg border theme-border shadow-sm">
+      <div class="p-6 border-b theme-border">
+        <h3 class="text-lg font-semibold theme-text flex items-center">
+          <span class="material-icons text-blue-600 mr-2">track_changes</span>
           Activity Tracker
         </h3>
       </div>
@@ -100,14 +97,14 @@
 
   <!-- Application Statistics (if available) -->
   {% if stats_groups %}
-  <div class="bg-base-50 dark:bg-base-800 rounded-xl p-8 border border-base-200 dark:border-base-700">
+  <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-8 border theme-border">
     <div class="flex items-center mb-6">
       <span class="material-icons text-green-500 mr-3">apps</span>
       <div>
-        <h2 class="text-xl font-semibold text-font-important-light dark:text-font-important-dark">
+        <h2 class="text-xl font-semibold theme-text">
           Application Statistics
         </h2>
-        <p class="text-font-default-light dark:text-font-default-dark text-sm mt-1">
+        <p class="text-gray-600 dark:text-gray-300 text-sm mt-1">
           Detailed metrics for each application module
         </p>
       </div>