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

django_cfg/templates/admin/components/action_grid.html

@@ -0,0 +1,49 @@
+{% 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">
+    {% 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">
+            
+            <!-- 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
+                    {% 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 %}">
+                    
+                    <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>
+            
+            <!-- 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">
+                    {{ 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>
+            
+            <!-- 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">
+                    arrow_forward
+                </span>
+            </div>
+        </a>
+    {% endfor %}
+</div>

django_cfg/templates/admin/components/card.html

@@ -0,0 +1,50 @@
+{% load unfold %}
+
+<!-- Enhanced Card Component following Unfold patterns -->
+<div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 shadow-xs overflow-hidden {% if hover %}hover:shadow-md hover:border-base-300 dark:hover:border-base-600 transition-all duration-200{% endif %}{% if class %} {{ class }}{% endif %}">
+    
+    <!-- Card Header -->
+    {% if title or header_actions %}
+    <div class="p-6 border-b border-base-200 dark:border-base-700 {% if header_bg %}{{ header_bg }}{% else %}bg-base-50 dark:bg-base-800{% endif %}">
+        <div class="flex items-center justify-between">
+            {% if title %}
+            <div class="flex items-center space-x-3">
+                {% if icon %}
+                <div class="flex items-center justify-center w-8 h-8 bg-{{ icon_color|default:'primary' }}-100 dark:bg-{{ icon_color|default:'primary' }}-900/20 rounded-lg">
+                    <span class="material-icons text-{{ icon_color|default:'primary' }}-600 dark:text-{{ icon_color|default:'primary' }}-400 text-lg">{{ icon }}</span>
+                </div>
+                {% endif %}
+                <div>
+                    <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">
+                        {{ title }}
+                    </h3>
+                    {% if subtitle %}
+                    <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark mt-1">
+                        {{ subtitle }}
+                    </p>
+                    {% endif %}
+                </div>
+            </div>
+            {% endif %}
+            
+            {% if header_actions %}
+            <div class="flex items-center space-x-2">
+                {{ header_actions }}
+            </div>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+    
+    <!-- Card Body -->
+    <div class="p-6{% if compact %} p-4{% endif %}">
+        {{ content }}
+    </div>
+    
+    <!-- Card Footer -->
+    {% if footer %}
+    <div class="px-6 py-4 border-t border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
+        {{ footer }}
+    </div>
+    {% endif %}
+</div>

django_cfg/templates/admin/components/data_table.html

@@ -0,0 +1,67 @@
+{% load unfold %}
+
+<!-- Data Table Component -->
+<div class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 overflow-hidden shadow-xs">
+    
+    <!-- Table Header -->
+    {% if title or actions %}
+    <div class="px-6 py-4 border-b border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-800">
+        <div class="flex items-center justify-between">
+            {% if title %}
+            <div class="flex items-center">
+                {% if icon %}
+                <span class="material-icons text-primary-600 mr-2">{{ icon }}</span>
+                {% endif %}
+                <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">{{ title }}</h3>
+            </div>
+            {% endif %}
+            
+            {% if actions %}
+            <div class="flex items-center space-x-2">
+                {{ actions }}
+            </div>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+    
+    <!-- Table Content -->
+    <div class="overflow-x-auto">
+        <table class="w-full">
+            {% if headers %}
+            <thead class="bg-base-50 dark:bg-base-800">
+                <tr>
+                    {% for header in headers %}
+                    <th class="px-6 py-3 text-left text-xs font-medium text-font-subtle-light dark:text-font-subtle-dark uppercase tracking-wider">
+                        {{ header }}
+                    </th>
+                    {% endfor %}
+                </tr>
+            </thead>
+            {% endif %}
+            
+            <tbody class="bg-white dark:bg-base-900 divide-y divide-base-200 dark:divide-base-700">
+                {% if rows %}
+                    {% for row in rows %}
+                    <tr class="hover:bg-base-100 dark:hover:bg-base-800 transition-colors duration-150">
+                        {% for cell in row %}
+                        <td class="px-6 py-4 whitespace-nowrap">
+                            {{ cell }}
+                        </td>
+                        {% endfor %}
+                    </tr>
+                    {% endfor %}
+                {% else %}
+                    <tr>
+                        <td colspan="{{ headers|length|default:'5' }}" class="px-6 py-8 text-center">
+                            <div class="flex flex-col items-center">
+                                <span class="material-icons text-4xl text-base-400 dark:text-base-500 mb-2">{{ empty_icon|default:'inbox' }}</span>
+                                <p class="text-font-subtle-light dark:text-font-subtle-dark">{{ empty_message|default:'No data available' }}</p>
+                            </div>
+                        </td>
+                    </tr>
+                {% endif %}
+            </tbody>
+        </table>
+    </div>
+</div>

django_cfg/templates/admin/components/metric_card.html

@@ -0,0 +1,39 @@
+{% 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="flex items-center justify-between">
+        <div class="flex items-center space-x-3">
+            <div class="flex-shrink-0">
+                <span class="material-icons 
+                    {% if status == 'healthy' or status == 'success' %}text-green-600 dark:text-green-400
+                    {% 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 %}">
+                    {{ icon }}
+                </span>
+            </div>
+            <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 mt-1">
+                    {{ description }}
+                </div>
+                {% endif %}
+            </div>
+        </div>
+        
+        <div class="flex-shrink-0">
+            {% include 'admin/components/status_badge.html' with status=status text=status_text %}
+        </div>
+    </div>
+    
+    {% if progress %}
+    <div class="mt-4">
+        {% include 'admin/components/progress_bar.html' with value=progress title=progress_title description=progress_description %}
+    </div>
+    {% endif %}
+</div>

django_cfg/templates/admin/components/modal.html

@@ -0,0 +1,58 @@
+{% load unfold %}
+
+<!-- Reusable Modal Component based on Unfold patterns -->
+<div id="{{ modal_id|default:'modal' }}" 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-lg shadow-2xl max-w-{{ max_width|default:'4xl' }} w-full max-h-[80vh] flex flex-col border border-base-200 dark:border-base-700">
+            
+            <!-- Modal Header -->
+            {% if title or closable %}
+            <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">
+                {% if title %}
+                <div class="flex items-center space-x-3">
+                    {% if icon %}
+                    <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">{{ icon }}</span>
+                    </div>
+                    {% endif %}
+                    <div>
+                        <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">
+                            {{ title }}
+                        </h3>
+                        {% if subtitle %}
+                        <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
+                            {{ subtitle }}
+                        </p>
+                        {% endif %}
+                    </div>
+                </div>
+                {% endif %}
+                
+                {% if closable %}
+                <button onclick="{{ close_function|default:'closeModal()' }}" 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>
+                {% endif %}
+            </div>
+            {% endif %}
+            
+            <!-- Modal Body -->
+            <div class="flex-1 overflow-hidden p-4">
+                {% if scrollable %}
+                <div class="bg-base-100 dark:bg-base-800 rounded-lg border border-base-200 dark:border-base-700 h-full overflow-y-auto p-4">
+                    {{ content }}
+                </div>
+                {% else %}
+                {{ content }}
+                {% endif %}
+            </div>
+            
+            <!-- Modal Footer -->
+            {% if 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">
+                {{ footer }}
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>

django_cfg/templates/admin/components/progress_bar.html

@@ -0,0 +1,25 @@
+{% load unfold %}
+
+<!-- Progress Bar Component -->
+<div class="w-full">
+    {% if title %}
+    <div class="flex items-center justify-between mb-2">
+        <span class="text-sm font-medium text-font-default-light dark:text-font-default-dark">{{ title }}</span>
+        <span class="text-sm text-font-subtle-light dark:text-font-subtle-dark">{{ value }}%</span>
+    </div>
+    {% endif %}
+    
+    <div class="w-full bg-base-200 dark:bg-base-700 rounded-full h-2">
+        <div class="h-2 rounded-full transition-all duration-300
+            {% if value >= 80 %}bg-green-500
+            {% elif value >= 60 %}bg-amber-500
+            {% elif value >= 40 %}bg-orange-500
+            {% else %}bg-red-500{% endif %}"
+            style="width: {{ value|default:0 }}%">
+        </div>
+    </div>
+    
+    {% if description %}
+    <p class="text-xs text-font-subtle-light dark:text-font-subtle-dark mt-1">{{ description }}</p>
+    {% endif %}
+</div>

django_cfg/templates/admin/components/section_header.html

@@ -0,0 +1,26 @@
+{% load unfold %}
+
+<!-- Section Header Component -->
+<div class="flex items-center mb-6">
+    {% if icon %}
+    <div class="flex items-center justify-center w-8 h-8 bg-{{ icon_color|default:'primary' }}-100 dark:bg-{{ icon_color|default:'primary' }}-900/20 rounded-lg mr-3">
+        <span class="material-icons text-{{ icon_color|default:'primary' }}-600 dark:text-{{ icon_color|default:'primary' }}-400 text-lg">{{ icon }}</span>
+    </div>
+    {% endif %}
+    
+    <h2 class="text-xl font-semibold text-font-important-light dark:text-font-important-dark">
+        {{ title }}
+    </h2>
+    
+    {% if badge %}
+    <span class="ml-auto text-xs text-font-subtle-light dark:text-font-subtle-dark bg-base-100 dark:bg-base-800 px-2 py-1 rounded-full">
+        {{ badge }}
+    </span>
+    {% endif %}
+    
+    {% if actions %}
+    <div class="ml-auto flex items-center space-x-2">
+        {{ actions }}
+    </div>
+    {% endif %}
+</div>

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>