django-cfg 1.2.6__py3-none-any.whl → 1.2.8__py3-none-any.whl

django_cfg/templates/admin/components/stat_item.html

@@ -0,0 +1,32 @@
+{% load unfold %}
+
+<!-- Stat Item Component -->
+<div class="flex items-center justify-between p-3 bg-base-50 dark:bg-base-800 rounded-lg hover:bg-base-100 dark:hover:bg-base-700 transition-colors duration-150 group">
+    <div class="flex items-center">
+        {% if icon %}
+            <div class="w-8 h-8 rounded-lg flex items-center justify-center mr-3 bg-{{ color|default:'primary' }}-100 dark:bg-{{ color|default:'primary' }}-900/20">
+                <span class="material-icons text-xs text-{{ color|default:'primary' }}-600 dark:text-{{ color|default:'primary' }}-400">{{ icon }}</span>
+            </div>
+        {% endif %}
+        <div>
+            <div class="text-sm font-medium text-font-default-light dark:text-font-default-dark">{{ title }}</div>
+            {% if description %}
+                <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark">{{ description }}</div>
+            {% endif %}
+        </div>
+    </div>
+    
+    <div class="flex items-center gap-3">
+        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-{{ color|default:'primary' }}-100 dark:bg-{{ color|default:'primary' }}-900/20 text-{{ color|default:'primary' }}-600 dark:text-{{ color|default:'primary' }}-400">
+            {{ count|default:0 }}
+        </span>
+        
+        {% if url %}
+        <a href="{{ url }}" 
+           class="inline-flex items-center gap-1 px-3 py-1 bg-primary-600 hover:bg-primary-700 dark:bg-primary-500 dark:hover:bg-primary-600 text-white rounded-lg text-xs font-medium transition-colors duration-150 group-hover:shadow-sm">
+            <span class="material-icons text-xs">visibility</span>
+            <span>View</span>
+        </a>
+        {% endif %}
+    </div>
+</div>

django_cfg/templates/admin/components/stats_grid.html

@@ -0,0 +1,72 @@
+{% load unfold %}
+
+<!-- Statistics Grid Component -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-{{ cols|default:'4' }} gap-{{ gap|default:'4' }} {% if class %}{{ class }}{% endif %}">
+    {% for stat in stats %}
+    <div class="bg-white dark:bg-base-900 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 border border-base-200 dark:border-base-700 overflow-hidden group">
+        <div class="p-5">
+            <div class="flex items-start justify-between">
+                <div class="flex-1">
+                    <!-- Title -->
+                    <div class="text-xs font-semibold text-font-subtle-light dark:text-font-subtle-dark uppercase tracking-wider mb-2">
+                        {{ stat.title }}
+                    </div>
+                    
+                    <!-- Value -->
+                    <div class="text-2xl font-bold text-font-important-light dark:text-font-important-dark mb-1">
+                        {{ stat.value }}
+                    </div>
+                    
+                    <!-- Change indicator -->
+                    {% if stat.change %}
+                    <div class="flex items-center">
+                        <div class="flex items-center px-2 py-1 rounded-full text-xs font-medium
+                            {% if stat.change_type == 'positive' %}bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400
+                            {% elif stat.change_type == 'negative' %}bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400
+                            {% else %}bg-base-100 dark:bg-base-800 text-font-default-light dark:text-font-default-dark{% endif %}">
+                            
+                            <span class="material-icons text-xs mr-1">
+                                {% if stat.change_type == 'positive' %}arrow_upward
+                                {% elif stat.change_type == 'negative' %}arrow_downward
+                                {% else %}remove{% endif %}
+                            </span>
+                            {{ stat.change }}
+                        </div>
+                    </div>
+                    {% endif %}
+                    
+                    <!-- Description -->
+                    {% if stat.description %}
+                    <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark mt-1">
+                        {{ stat.description }}
+                    </div>
+                    {% endif %}
+                </div>
+                
+                <!-- Icon -->
+                {% if stat.icon %}
+                <div class="flex-shrink-0 ml-3">
+                    <div class="w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                        <span class="material-icons text-2xl
+                            {% if stat.change_type == 'positive' %}text-green-600 dark:text-green-400
+                            {% elif stat.change_type == 'negative' %}text-red-600 dark:text-red-400
+                            {% else %}text-primary-600 dark:text-primary-400{% endif %}">
+                            {{ stat.icon }}
+                        </span>
+                    </div>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        
+        <!-- Accent bar -->
+        {% if stat.show_accent %}
+        <div class="h-1 w-full
+            {% if stat.change_type == 'positive' %}bg-gradient-to-r from-green-400 to-green-600
+            {% elif stat.change_type == 'negative' %}bg-gradient-to-r from-red-400 to-red-600
+            {% else %}bg-gradient-to-r from-primary-400 to-primary-600{% endif %}">
+        </div>
+        {% endif %}
+    </div>
+    {% endfor %}
+</div>

django_cfg/templates/admin/components/status_badge.html

@@ -0,0 +1,28 @@
+{% load unfold %}
+
+<!-- Status Badge Component -->
+<span class="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 %}">
+    
+    {% if icon %}
+    <span class="material-icons text-xs mr-1">{{ icon }}</span>
+    {% else %}
+        {% if status == 'active' or status == 'healthy' or status == 'success' %}
+        <span class="material-icons text-xs mr-1">check_circle</span>
+        {% elif status == 'warning' or status == 'pending' %}
+        <span class="material-icons text-xs mr-1">warning</span>
+        {% elif status == 'error' or status == 'failed' %}
+        <span class="material-icons text-xs mr-1">error</span>
+        {% elif status == 'inactive' %}
+        <span class="material-icons text-xs mr-1">cancel</span>
+        {% elif status == 'info' or status == 'processing' %}
+        <span class="material-icons text-xs mr-1">info</span>
+        {% endif %}
+    {% endif %}
+    
+    {{ text|default:status|title }}
+</span>

django_cfg/templates/admin/components/user_avatar.html

@@ -0,0 +1,27 @@
+{% load unfold %}
+
+<!-- User Avatar Component -->
+<div class="flex items-center">
+    <div class="h-{{ size|default:'8' }} w-{{ size|default:'8' }} bg-{{ color|default:'primary' }}-100 dark:bg-{{ color|default:'primary' }}-900/20 rounded-full flex items-center justify-center mr-3">
+        {% if image %}
+            <img src="{{ image }}" alt="{{ name }}" class="h-{{ size|default:'8' }} w-{{ size|default:'8' }} rounded-full object-cover">
+        {% else %}
+            <span class="text-sm font-medium text-{{ color|default:'primary' }}-600 dark:text-{{ color|default:'primary' }}-400">
+                {% if name %}{{ name|slice:":1"|upper }}{% elif email %}{{ email|slice:":1"|upper }}{% else %}?{% endif %}
+            </span>
+        {% endif %}
+    </div>
+    
+    {% if show_details %}
+    <div>
+        <div class="text-sm font-medium text-font-default-light dark:text-font-default-dark">
+            {% if name %}{{ name|truncatechars:20 }}{% elif email %}{{ email|truncatechars:20 }}{% else %}Unknown User{% endif %}
+        </div>
+        {% if email and name %}
+            <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark">
+                {{ email|truncatechars:30 }}
+            </div>
+        {% endif %}
+    </div>
+    {% endif %}
+</div>

django_cfg/templates/admin/layouts/dashboard_with_tabs.html

@@ -246,13 +246,13 @@
     }
 
     function scrollToBottom(element) {
-        // Now the element itself has overflow-y-auto
-        if (element) {
-            // Small delay for DOM update
-            setTimeout(() => {
-                element.scrollTop = element.scrollHeight;
-            }, 10);
-        }
+        if (!element) return;
+        
+        // Принудительно скроллим элемент
+        setTimeout(() => {
+            element.scrollTop = element.scrollHeight;
+            console.log('Scrolled to bottom:', element.scrollTop, element.scrollHeight);
+        }, 50);
     }
 
     window.closeCommandModal = function() {

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

@@ -1,17 +1,54 @@
 {% load unfold %}
 
-<!-- Activity Tracker -->
+<!-- Activity Tracker using reusable components -->
 <div class="mt-8 w-full">
-    <div class="flex items-center mb-6">
-        <div class="flex items-center justify-center w-8 h-8 bg-primary-100 dark:bg-primary-900/20 rounded-lg mr-3">
-            <span class="material-icons text-primary-600 dark:text-primary-500 text-lg">timeline</span>
+    {% include 'admin/components/section_header.html' with title='Activity Tracker' icon='timeline' icon_color='primary' %}
+    
+    {% component "unfold/components/card.html" with title="User Activity Heatmap" subtitle="Last 52 weeks of user activity" %}
+        <div class="space-y-4">
+            <!-- Legend -->
+            <div class="flex items-center justify-between text-sm text-font-subtle-light dark:text-font-subtle-dark">
+                <span>Less</span>
+                <div class="flex items-center space-x-1">
+                    <div class="w-3 h-3 bg-base-200 dark:bg-base-700 rounded-sm"></div>
+                    <div class="w-3 h-3 bg-green-200 dark:bg-green-800 rounded-sm"></div>
+                    <div class="w-3 h-3 bg-green-400 dark:bg-green-600 rounded-sm"></div>
+                    <div class="w-3 h-3 bg-green-600 dark:bg-green-500 rounded-sm"></div>
+                    <div class="w-3 h-3 bg-green-800 dark:bg-green-400 rounded-sm"></div>
+                </div>
+                <span>More</span>
+            </div>
+            
+            <!-- Activity Tracker Grid -->
+            <div class="overflow-x-auto">
+                {% if activity_tracker %}
+                    {% component "unfold/components/tracker.html" with data=activity_tracker %}
+                    {% endcomponent %}
+                {% else %}
+                    <div class="flex items-center justify-center p-8 bg-base-50 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700">
+                        <div class="text-center">
+                            <span class="material-icons text-4xl text-base-400 dark:text-base-500 mb-2">timeline</span>
+                            <p class="text-font-subtle-light dark:text-font-subtle-dark">No activity data available</p>
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+            
+            <!-- Summary Stats -->
+            <div class="grid grid-cols-3 gap-4 pt-4 border-t border-base-200 dark:border-base-700">
+                <div class="text-center">
+                    <div class="text-lg font-semibold text-font-default-light dark:text-font-default-dark">365</div>
+                    <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark">Days tracked</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-lg font-semibold text-green-600 dark:text-green-400">52</div>
+                    <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark">Weeks</div>
+                </div>
+                <div class="text-center">
+                    <div class="text-lg font-semibold text-primary-600 dark:text-primary-400">{{ activity_tracker|length|default:"0" }}</div>
+                    <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark">Data points</div>
+                </div>
+            </div>
         </div>
-        <h2 class="text-xl font-semibold text-font-important-light dark:text-font-important-dark">
-            Activity Tracker
-        </h2>
-    </div>
-    {% component "unfold/components/card.html" %}
-        {% component "unfold/components/tracker.html" with data=activity_tracker %}
-        {% endcomponent %}
     {% endcomponent %}
 </div> 

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

@@ -1,16 +1,11 @@
 {% load unfold %}
 
-<!-- Charts Section -->
+<!-- Charts Section using reusable components -->
 <div class="mb-8 w-full">
-    <div class="flex items-center mb-6">
-        <div class="flex items-center justify-center w-8 h-8 bg-blue-100 dark:bg-blue-900/20 rounded-lg mr-3">
-            <span class="material-icons text-blue-600 dark:text-blue-400 text-lg">analytics</span>
-        </div>
-        <h2 class="text-xl font-semibold text-font-important-light dark:text-font-important-dark">
-            Analytics Overview
-        </h2>
-    </div>
+    {% include 'admin/components/section_header.html' with title='Analytics Overview' icon='analytics' icon_color='blue' %}
     
+    
+    {% if charts %}
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <!-- User Registration Chart -->
         <div class="group">
@@ -19,8 +14,32 @@
                     <span class="material-icons text-primary-600 dark:text-primary-500 mr-2">trending_up</span>
                     <span class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Growth Trends</span>
                 </div>
-                {% component "unfold/components/chart/line.html" with data=charts.user_registrations height=300 %}
-                {% endcomponent %}
+                {% if charts.user_registrations %}
+                    {% component "unfold/components/chart/line.html" with data=charts.user_registrations_json height=300 %}
+                    {% endcomponent %}
+                    
+                    <!-- Fallback data table if chart doesn't render -->
+                    <div class="mt-4 text-xs text-font-subtle-light dark:text-font-subtle-dark">
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="font-medium">Data Preview:</span>
+                            <span>{{ charts.user_registrations.datasets.0.label }}</span>
+                        </div>
+                        <div class="grid grid-cols-7 gap-1 text-center">
+                            {% for label in charts.user_registrations.labels %}
+                                <div class="bg-base-100 dark:bg-base-700 p-1 rounded text-xs">{{ label }}</div>
+                            {% endfor %}
+                        </div>
+                        <div class="grid grid-cols-7 gap-1 text-center mt-1">
+                            {% for value in charts.user_registrations.datasets.0.data %}
+                                <div class="bg-primary-50 dark:bg-primary-900/20 p-1 rounded text-xs font-medium">{{ value }}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% else %}
+                    <div class="h-[300px] flex items-center justify-center bg-base-50 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700">
+                        <p class="text-font-subtle-light dark:text-font-subtle-dark">No registration data available</p>
+                    </div>
+                {% endif %}
             {% endcomponent %}
         </div>
 
@@ -31,9 +50,40 @@
                     <span class="material-icons text-green-600 dark:text-green-400 mr-2">bar_chart</span>
                     <span class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Activity Levels</span>
                 </div>
-                {% component "unfold/components/chart/bar.html" with data=charts.user_activity height=300 %}
-                {% endcomponent %}
+                {% if charts.user_activity %}
+                    {% component "unfold/components/chart/bar.html" with data=charts.user_activity_json height=300 %}
+                    {% endcomponent %}
+                    
+                    <!-- Fallback data table if chart doesn't render -->
+                    <div class="mt-4 text-xs text-font-subtle-light dark:text-font-subtle-dark">
+                        <div class="flex justify-between items-center mb-2">
+                            <span class="font-medium">Data Preview:</span>
+                            <span>{{ charts.user_activity.datasets.0.label }}</span>
+                        </div>
+                        <div class="grid grid-cols-7 gap-1 text-center">
+                            {% for label in charts.user_activity.labels %}
+                                <div class="bg-base-100 dark:bg-base-700 p-1 rounded text-xs">{{ label }}</div>
+                            {% endfor %}
+                        </div>
+                        <div class="grid grid-cols-7 gap-1 text-center mt-1">
+                            {% for value in charts.user_activity.datasets.0.data %}
+                                <div class="bg-green-50 dark:bg-green-900/20 p-1 rounded text-xs font-medium">{{ value }}</div>
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% else %}
+                    <div class="h-[300px] flex items-center justify-center bg-base-50 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700">
+                        <p class="text-font-subtle-light dark:text-font-subtle-dark">No activity data available</p>
+                    </div>
+                {% endif %}
             {% endcomponent %}
         </div>
     </div>
+    {% else %}
+    <div class="bg-base-50 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 p-8 text-center">
+        <span class="material-icons text-4xl text-base-400 dark:text-base-500 mb-4">analytics</span>
+        <h3 class="text-lg font-medium text-font-default-light dark:text-font-default-dark mb-2">No Chart Data</h3>
+        <p class="text-font-subtle-light dark:text-font-subtle-dark">Charts data is not available in the context</p>
+    </div>
+    {% endif %}
 </div> 

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

@@ -19,7 +19,7 @@
         <!-- Commands by Category -->
         <div class="space-y-4">
             {% for category, commands in django_commands.categorized.items %}
-                <div class="bg-white dark:bg-base-900 rounded-default border border-base-200 dark:border-base-700 overflow-hidden shadow-sm mb-4">
+                <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 overflow-hidden shadow-sm mb-4">
                     <!-- Category Header -->
                     <button 
                         onclick="toggleCategory('{{ category }}')"
@@ -30,7 +30,7 @@
                             <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark capitalize">
                                 {{ category|title }}
                             </h3>
-                            <span class="ml-3 text-sm text-font-subtle-light dark:text-font-subtle-dark bg-base-100 dark:bg-base-700 px-2 py-1 rounded-default">
+                            <span class="ml-3 text-sm text-font-subtle-light dark:text-font-subtle-dark bg-base-100 dark:bg-base-700 px-2 py-1 rounded-lg">
                                 {{ commands|length }} commands
                             </span>
                         </div>
@@ -44,21 +44,21 @@
                         <div class="p-4">
                             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                 {% for command in commands %}
-                                    <div class="bg-white dark:bg-base-900 rounded-default border border-base-200 dark:border-base-700 hover:shadow-lg dark:hover:shadow-base-900/50 transition-all duration-200 overflow-hidden">
+                                    <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 hover:shadow-lg dark:hover:shadow-base-900/50 transition-all duration-200 overflow-hidden">
                                         <!-- Card Header -->
                                         <div class="p-4 border-b border-base-100 dark:border-base-700">
                                             <div class="flex items-center justify-between mb-2">
-                                                <code class="text-sm font-mono bg-base-100 dark:bg-base-700 px-2 py-1 rounded-default text-font-default-light dark:text-font-default-dark">
+                                                <code class="text-sm font-mono bg-base-100 dark:bg-base-700 px-2 py-1 rounded-lg text-font-default-light dark:text-font-default-dark">
                                                     {{ command.name }}
                                                 </code>
                                                 <div class="flex items-center space-x-1">
                                                     {% if command.is_core %}
-                                                        <span class="text-xs bg-primary-100 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 px-2 py-1 rounded-default">
+                                                        <span class="text-xs bg-primary-100 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 px-2 py-1 rounded-lg">
                                                             Core
                                                         </span>
                                                     {% endif %}
                                                     {% if command.is_custom %}
-                                                        <span class="text-xs bg-indigo-100 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 px-2 py-1 rounded-default">
+                                                        <span class="text-xs bg-indigo-100 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 px-2 py-1 rounded-lg">
                                                             Custom
                                                         </span>
                                                     {% endif %}
@@ -83,7 +83,7 @@
                                             {% if command.usage %}
                                                 <div class="mb-3">
                                                     <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark font-medium">Usage:</span>
-                                                    <code class="block text-xs font-mono bg-base-50 dark:bg-base-700 px-2 py-1 rounded-default mt-1 text-font-default-light dark:text-font-default-dark">
+                                                    <code class="block text-xs font-mono bg-base-50 dark:bg-base-700 px-2 py-1 rounded-lg mt-1 text-font-default-light dark:text-font-default-dark">
                                                         {{ command.usage }}
                                                     </code>
                                                 </div>
@@ -103,14 +103,14 @@
                                             <div class="flex gap-2">
                                                 <button 
                                                     onclick="copyToClipboard('python manage.py {{ command.name }}')"
-                                                    class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-base-100 dark:bg-base-700 hover:bg-base-200 dark:hover:bg-base-600 text-font-default-light dark:text-font-default-dark rounded-default text-xs font-medium transition-colors"
+                                                    class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-base-100 dark:bg-base-700 hover:bg-base-200 dark:hover:bg-base-600 text-font-default-light dark:text-font-default-dark rounded-lg text-xs font-medium transition-colors"
                                                     title="Copy command to clipboard">
                                                     <span class="material-icons text-xs mr-1">content_copy</span>
                                                     Copy
                                                 </button>
                                                 <button 
                                                     onclick="executeCommand('{{ command.name }}')"
-                                                    class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white rounded-default text-xs font-medium transition-colors"
+                                                    class="flex-1 inline-flex items-center justify-center px-3 py-2 bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 text-white rounded-lg text-xs font-medium transition-colors"
                                                     title="Execute command">
                                                     <span class="material-icons text-xs mr-1">play_arrow</span>
                                                     Run
@@ -186,13 +186,13 @@
 </div>
 
 <!-- Command Execution Modal -->
-<div id="commandModal" class="fixed inset-0 bg-base-900/80 backdrop-blur-sm hidden z-50">
+<div id="commandModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden z-50">
     <div class="flex items-center justify-center min-h-screen p-4">
-        <div class="bg-white dark:bg-base-900 rounded-default shadow-2xl max-w-4xl w-full h-[80vh] flex flex-col border border-base-200 dark:border-base-700">
+        <div class="bg-white dark:bg-base-900 rounded-lg shadow-2xl max-w-4xl w-full max-h-[80vh] flex flex-col border border-base-200 dark:border-base-700">
             <!-- Modal Header -->
-            <div class="flex items-center justify-between p-4 border-b border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800 flex-shrink-0">
+            <div class="flex items-center justify-between p-4 border-b border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
                 <div class="flex items-center space-x-3">
-                    <div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/20 rounded-default">
+                    <div class="flex items-center justify-center w-10 h-10 bg-primary-100 dark:bg-primary-900/20 rounded-lg">
                         <span class="material-icons text-primary-600 dark:text-primary-400">terminal</span>
                     </div>
                     <div>
@@ -204,25 +204,25 @@
                         </p>
                     </div>
                 </div>
-                <button onclick="closeCommandModal()" class="p-2 text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-default transition-colors">
+                <button onclick="closeCommandModal()" class="p-2 text-font-subtle-light dark:text-font-subtle-dark hover:text-font-default-light dark:hover:text-font-default-dark hover:bg-base-100 dark:hover:bg-base-700 rounded-lg transition-colors">
                     <span class="material-icons">close</span>
                 </button>
             </div>
             
             <!-- Modal Body -->
-            <div class="flex-1 min-h-0 p-4">
-                <div id="commandOutput" class="bg-base-100 dark:bg-base-800 rounded-default border border-base-200 dark:border-base-700 min-h-[200px] max-h-[60vh] overflow-y-auto p-4 text-sm font-mono text-font-default-light dark:text-font-default-dark whitespace-pre-wrap leading-relaxed break-words overflow-wrap-anywhere" style="max-height: 60vh;"></div>
+            <div class="flex-1 p-4" style="min-height: 0;">
+                <div id="commandOutput" class="bg-base-100 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 overflow-y-auto p-4 text-sm font-mono text-font-default-light dark:text-font-default-dark whitespace-pre-wrap leading-relaxed break-words" style="height: calc(80vh - 200px); max-height: 60vh;"></div>
             </div>
             
             <!-- Modal Footer -->
-            <div class="flex items-center justify-between p-4 border-t border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800 flex-shrink-0">
+            <div class="flex items-center justify-between p-4 border-t border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
                 <div class="flex items-center space-x-3">
                     <div id="commandStatus" class="flex items-center">
                         <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>
                     </div>
                 </div>
-                <button onclick="closeCommandModal()" class="px-4 py-2 bg-base-100 dark:bg-base-700 hover:bg-base-200 dark:hover:bg-base-600 text-font-default-light dark:text-font-default-dark rounded-default transition-colors font-medium">
+                <button onclick="closeCommandModal()" class="px-4 py-2 bg-base-100 dark:bg-base-700 hover:bg-base-200 dark:hover:bg-base-600 text-font-default-light dark:text-font-default-dark rounded-lg transition-colors font-medium">
                     Close
                 </button>
             </div>

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

@@ -1,55 +1,11 @@
 {% load unfold %}
 
-<!-- Quick Actions Section with semantic colors -->
+<!-- Quick Actions Section using reusable components -->
 {% if quick_actions %}
     <div class="mt-8 w-full">
-        <div class="flex items-center mb-6">
-            <div class="flex items-center justify-center w-8 h-8 bg-amber-100 dark:bg-amber-900/20 rounded-lg mr-3">
-                <span class="material-icons text-amber-600 dark:text-amber-400 text-lg">flash_on</span>
-            </div>
-            <h2 class="text-xl font-semibold text-font-important-light dark:text-font-important-dark">
-                Quick Actions
-            </h2>
-        </div>
+        {% include 'admin/components/section_header.html' with title='Quick Actions' icon='flash_on' icon_color='amber' %}
         
-        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
-            {% for action in quick_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">
-                    <div class="flex-shrink-0 mr-4">
-                        <div class="p-2 rounded-lg "                                    {% if action.color == 'primary' %}bg-primary-100 dark:bg-primary-900/20 group-hover:bg-primary-200 dark:group-hover:bg-primary-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 %}
-                                    transition-colors duration-200">
-                            <span class="material-icons text-lg "                                        {% if action.color == 'primary' %}text-primary-600 dark:text-primary-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 %}">
-                                {{ action.icon }}
-                            </span>
-                        </div>
-                    </div>
-                    <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">
-                            {{ action.title }}
-                        </h3>
-                        {% if action.description %}
-                            <p class="text-xs text-font-subtle-light dark:text-font-subtle-dark mt-1 line-clamp-2">
-                                {{ action.description }}
-                            </p>
-                        {% endif %}
-                    </div>
-                    <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">
-                            arrow_forward
-                        </span>
-                    </div>
-                </a>
-            {% endfor %}
-        </div>
+        {% include 'admin/components/action_grid.html' with actions=quick_actions cols=3 xl_cols=4 %}
         
         <!-- Additional Action Categories -->
         {% if admin_actions or user_actions or system_actions %}

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

@@ -1,45 +1,35 @@
 {% load unfold %}
 
-<!-- Recent Activity Section -->
-{% if recent_activity.recent_users %}
-    <div class="mt-8 w-full">
-        <h2 class="text-xl font-semibold text-font-important-light dark:text-font-important-dark mb-4">
-            Recent Activity
-        </h2>
-        <div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 w-full shadow-xs">
-            <div class="p-4">
-                <h3 class="text-lg font-medium text-font-default-light dark:text-font-default-dark mb-3">
-                    Recent User Registrations
-                </h3>
-                <div class="space-y-3">
-                    {% for user in recent_activity.recent_users %}
-                        <div class="flex items-center justify-between p-3 bg-base-50 dark:bg-base-800 rounded-lg">
-                            <div class="flex items-center space-x-3">
-                                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900/20 rounded-full flex items-center justify-center">
-                                    <span class="text-sm font-medium text-blue-600 dark:text-blue-400">                                        {{ user.username|first|upper }}
-                                    </span>
-                                </div>
-                                <div>
-                                    <p class="text-sm font-medium text-font-default-light dark:text-font-default-dark">
-                                        {{ user.username }}
-                                    </p>
-                                    <p class="text-xs text-font-subtle-light dark:text-font-subtle-dark">
-                                        {{ user.email }}
-                                    </p>
-                                </div>
-                            </div>
-                            <div class="flex items-center space-x-2">
-                                <span class="px-2 py-1 text-xs font-medium rounded-full "                                           {% if user.is_active %}bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-400{% else %}bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400{% endif %}">
-                                    {% if user.is_active %}Active{% else %}Inactive{% endif %}
-                                </span>
-                                <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark">
-                                    {{ user.date_joined|date:"M d, Y" }}
-                                </span>
-                            </div>
-                        </div>
-                    {% endfor %}
+<!-- Recent Activity Content -->
+{% if recent_users %}
+    <div class="space-y-3">
+        {% for user in recent_users %}
+            <div class="flex items-center justify-between p-3 bg-base-50 dark:bg-base-800 rounded-lg">
+                <div class="flex items-center space-x-3">
+                    {% include 'admin/components/user_avatar.html' with name=user.username color='blue' size='8' %}
+                    <div>
+                        <p class="text-sm font-medium text-font-default-light dark:text-font-default-dark">
+                            {{ user.username }}
+                        </p>
+                        <p class="text-xs text-font-subtle-light dark:text-font-subtle-dark">
+                            {{ user.email }}
+                        </p>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-2">
+                    {% include 'admin/components/status_badge.html' with status=user.is_active|yesno:'active,inactive' %}
+                    <span class="text-xs text-font-subtle-light dark:text-font-subtle-dark">
+                        {{ user.date_joined|date:"M d, Y" }}
+                    </span>
                 </div>
             </div>
+        {% endfor %}
+    </div>
+{% else %}
+    <div class="flex items-center justify-center p-8 bg-base-50 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700">
+        <div class="text-center">
+            <span class="material-icons text-4xl text-base-400 dark:text-base-500 mb-2">history</span>
+            <p class="text-font-subtle-light dark:text-font-subtle-dark">No recent activity available</p>
         </div>
     </div>
 {% endif %}