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

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

@@ -1,54 +1,92 @@
 {% load unfold %}
 
-<!-- Activity Tracker using reusable components -->
-<div class="mt-8 w-full">
-    {% 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>
+<!-- Activity Tracker -->
+<div class="space-y-4">
+    <!-- Legend -->
+    <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
+        <span>Less</span>
+        <div class="flex items-center space-x-1">
+            <div class="w-3 h-3 bg-gray-200 dark:bg-gray-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 pb-2">
+        {% if activity_tracker %}
+            <!-- GitHub-style heatmap visualization -->
+            <div id="activity-heatmap" class="inline-flex gap-1"></div>
+
+            <script>
+            (function() {
+                const activityData = {{ activity_tracker }};
+                const heatmap = document.getElementById('activity-heatmap');
+
+                if (activityData && activityData.length > 0) {
+                    // Group days into weeks (7 days per column)
+                    const weeks = [];
+                    for (let i = 0; i < activityData.length; i += 7) {
+                        weeks.push(activityData.slice(i, i + 7));
+                    }
+
+                    // Create week columns
+                    weeks.forEach(week => {
+                        const weekColumn = document.createElement('div');
+                        weekColumn.className = 'flex flex-col gap-1';
+
+                        week.forEach(day => {
+                            const cell = document.createElement('div');
+                            cell.className = 'w-3 h-3 rounded-sm transition-all hover:ring-2 hover:ring-blue-400 cursor-pointer';
+
+                            // Color based on activity level
+                            if (day.count === 0) {
+                                cell.className += ' bg-gray-200 dark:bg-gray-700';
+                            } else if (day.count <= 2) {
+                                cell.className += ' bg-green-200 dark:bg-green-800';
+                            } else if (day.count <= 5) {
+                                cell.className += ' bg-green-400 dark:bg-green-600';
+                            } else if (day.count <= 10) {
+                                cell.className += ' bg-green-600 dark:bg-green-500';
+                            } else {
+                                cell.className += ' bg-green-800 dark:bg-green-400';
+                            }
+
+                            cell.title = `${day.date}: ${day.count} activities`;
+                            weekColumn.appendChild(cell);
+                        });
+
+                        heatmap.appendChild(weekColumn);
+                    });
+                }
+            })();
+            </script>
+        {% else %}
+            <div class="flex items-center justify-center p-8 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                 <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>
+                    <span class="material-icons text-4xl text-gray-400 dark:text-gray-500 mb-2">timeline</span>
+                    <p class="text-gray-600 dark:text-gray-400">No activity data available</p>
                 </div>
             </div>
+        {% endif %}
+    </div>
+
+    <!-- Summary Stats -->
+    <div class="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <div class="text-center">
+            <div class="text-lg font-semibold text-gray-900 dark:text-gray-100">365</div>
+            <div class="text-xs text-gray-600 dark:text-gray-400">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-gray-600 dark:text-gray-400">Weeks</div>
+        </div>
+        <div class="text-center">
+            <div class="text-lg font-semibold text-blue-600 dark:text-blue-400">{{ activity_tracker|length|default:"0" }}</div>
+            <div class="text-xs text-gray-600 dark:text-gray-400">Data points</div>
         </div>
-    {% endcomponent %}
+    </div>
 </div> 

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

@@ -1,82 +1,172 @@
 {% load unfold %}
 
-<!-- Charts Section using reusable components -->
+<!-- Charts Section -->
 <div class="mb-8 w-full">
     {% include 'admin/components/section_header.html' with title='Analytics Overview' icon='analytics' icon_color='blue' %}
-    
-    
+
+    <!-- Time Range Navigation -->
+    {% if navigation %}
+        <div class="mb-6 flex items-center space-x-2">
+            {% for nav_item in navigation %}
+                <a href="{{ nav_item.link }}"
+                   class="px-4 py-2 rounded-default {% if nav_item.active %}bg-primary-600 text-white{% else %}bg-base-100 dark:bg-base-800 text-font-default-light dark:text-font-default-dark hover:bg-base-200 dark:hover:bg-base-700{% endif %} transition-colors flex items-center">
+                    {% if nav_item.icon %}
+                        <span class="material-icons text-sm mr-2">{{ nav_item.icon }}</span>
+                    {% endif %}
+                    {{ nav_item.title }}
+                </a>
+            {% endfor %}
+        </div>
+    {% endif %}
+
     {% if charts %}
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <!-- User Registration Chart -->
-        <div class="group">
-            {% component "unfold/components/card.html" with title="User Registrations" subtitle="Last 7 days activity" %}
-                <div class="flex items-center mb-2">
-                    <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 class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 p-6 shadow-sm">
+            <div class="mb-4">
+                <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">User Registrations</h3>
+                <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Last 7 days activity</p>
+            </div>
+            <div class="flex items-center mb-4">
+                <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>
+            {% if charts.user_registrations %}
+                <div class="relative h-[300px]">
+                    <canvas id="userRegistrationsChart"></canvas>
                 </div>
-                {% 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>
+                <script>
+                    document.addEventListener('DOMContentLoaded', function() {
+                        const ctx = document.getElementById('userRegistrationsChart');
+                        const chartData = {{ charts.user_registrations_json|safe }};
+
+                        if (ctx && typeof Chart !== 'undefined') {
+                            try {
+                                new Chart(ctx, {
+                                    type: 'line',
+                                    data: chartData,
+                                    options: {
+                                        responsive: true,
+                                        maintainAspectRatio: false,
+                                        plugins: {
+                                            legend: {
+                                                display: true,
+                                                position: 'top'
+                                            }
+                                        },
+                                        scales: {
+                                            y: {
+                                                beginAtZero: true,
+                                                ticks: {
+                                                    precision: 0
+                                                }
+                                            }
+                                        }
+                                    }
+                                });
+                            } catch (error) {
+                                console.error('Error creating registration chart:', error);
+                            }
+                        }
+                    });
+                </script>
+
+                <!-- 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>
-                {% 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 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>
-                {% endif %}
-            {% endcomponent %}
+                </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 %}
         </div>
 
         <!-- User Activity Chart -->
-        <div class="group">
-            {% component "unfold/components/card.html" with title="User Activity" subtitle="Weekly engagement metrics" %}
-                <div class="flex items-center mb-2">
-                    <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 class="bg-white dark:bg-base-900 rounded-lg border border-base-200 dark:border-base-700 p-6 shadow-sm">
+            <div class="mb-4">
+                <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">User Activity</h3>
+                <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Weekly engagement metrics</p>
+            </div>
+            <div class="flex items-center mb-4">
+                <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>
+            {% if charts.user_activity %}
+                <div class="relative h-[300px]">
+                    <canvas id="userActivityChart"></canvas>
                 </div>
-                {% 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>
+                <script>
+                    document.addEventListener('DOMContentLoaded', function() {
+                        const ctx = document.getElementById('userActivityChart');
+                        const chartData = {{ charts.user_activity_json|safe }};
+
+                        if (ctx && typeof Chart !== 'undefined') {
+                            try {
+                                new Chart(ctx, {
+                                    type: 'bar',
+                                    data: chartData,
+                                    options: {
+                                        responsive: true,
+                                        maintainAspectRatio: false,
+                                        plugins: {
+                                            legend: {
+                                                display: true,
+                                                position: 'top'
+                                            }
+                                        },
+                                        scales: {
+                                            y: {
+                                                beginAtZero: true,
+                                                ticks: {
+                                                    precision: 0
+                                                }
+                                            }
+                                        }
+                                    }
+                                });
+                            } catch (error) {
+                                console.error('Error creating activity chart:', error);
+                            }
+                        }
+                    });
+                </script>
+
+                <!-- 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>
-                {% 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 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>
-                {% endif %}
-            {% endcomponent %}
+                    <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 %}
         </div>
     </div>
     {% else %}
@@ -86,4 +176,4 @@
         <p class="text-font-subtle-light dark:text-font-subtle-dark">Charts data is not available in the context</p>
     </div>
     {% endif %}
-</div> 
+</div>

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

@@ -122,16 +122,16 @@
                                                 {% endif %}
                                             </div>
                                             
-                                            <!-- Action Buttons -->
+                                            <!-- Action Buttons - Custom due to onclick handlers -->
                                             <div class="flex gap-2">
-                                                <button 
+                                                <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-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 
+                                                <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-lg text-xs font-medium transition-colors"
                                                     title="Execute command">

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

@@ -0,0 +1,25 @@
+{% load unfold %}
+
+<!-- Recent Users Table Component -->
+{% if recent_users_table and recent_users_table.rows %}
+    {% include 'admin/snippets/components/recent_users_table.html' %}
+{% else %}
+    <!-- Empty State -->
+    <div class="flex flex-col items-center justify-center
+                rounded-default border-2 border-dashed
+                border-base-200 bg-base-50 p-12
+                dark:border-base-700 dark:bg-base-800/50">
+
+        <div class="mb-4 rounded-full bg-base-100 p-4
+                    dark:bg-base-700">
+            <span class="material-icons text-4xl text-base-400
+                         dark:text-base-500">history</span>
+        </div>
+
+        <h3 class="mb-1 text-sm font-semibold text-font-important-light
+                   dark:text-font-important-dark">No Recent Activity</h3>
+        <p class="text-xs text-font-subtle-light dark:text-font-subtle-dark">
+            User activity will appear here once users start joining
+        </p>
+    </div>
+{% endif %}

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

@@ -49,7 +49,7 @@
                 </thead>
                 <tbody class="bg-white dark:bg-base-900 divide-y divide-base-200 dark:divide-base-700">
                     {% for user in recent_users %}
-                        <tr class="hover:bg-base-100 dark:hover:bg-base-800 transition-colors duration-150">
+                        <tr class="hover:bg-base-50 dark:hover:bg-base-700 transition-colors duration-150">
                             <td class="px-6 py-4 whitespace-nowrap">
                                 {% include 'admin/components/user_avatar.html' with name=user.username email=user.email show_details=True %}
                             </td>