django-cfg 1.4.75__py3-none-any.whl → 1.4.76__py3-none-any.whl

django_cfg/static/admin/css/tabs.css

@@ -0,0 +1,95 @@
+/**
+ * Dashboard Tabs Styles
+ * Styling for tab navigation and tab content
+ */
+
+/* Tab Content Animation */
+.tab-content {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Dashboard Tabs Navigation */
+#dashboard-tabs {
+    border-bottom: 2px solid #e5e7eb !important;
+}
+
+html.dark #dashboard-tabs {
+    border-bottom-color: #374151 !important;
+}
+
+#dashboard-tabs button {
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    background-color: #f3f4f6 !important;
+    color: #6b7280 !important;
+    border-bottom: 2px solid transparent !important;
+}
+
+html.dark #dashboard-tabs button {
+    background-color: #374151 !important;
+    color: #9ca3af !important;
+}
+
+#dashboard-tabs button:hover {
+    background-color: #e5e7eb !important;
+    color: #374151 !important;
+}
+
+html.dark #dashboard-tabs button:hover {
+    background-color: #4b5563 !important;
+    color: #d1d5db !important;
+}
+
+/* Active Tab */
+#dashboard-tabs button.active,
+#dashboard-tabs button[class*="bg-blue"] {
+    background-color: #2563eb !important;
+    color: white !important;
+    border-bottom-color: #2563eb !important;
+}
+
+html.dark #dashboard-tabs button.active,
+html.dark #dashboard-tabs button[class*="bg-blue"] {
+    background-color: #3b82f6 !important;
+    color: white !important;
+    border-bottom-color: #3b82f6 !important;
+}
+
+/* Command Modal Tabs */
+.command-tab {
+    background-color: transparent;
+    color: #6b7280;
+    transition: all 0.2s ease;
+}
+
+.command-tab:hover {
+    background-color: #f3f4f6;
+}
+
+html.dark .command-tab {
+    color: #9ca3af;
+}
+
+html.dark .command-tab:hover {
+    background-color: #374151;
+}
+
+.command-tab.active {
+    background-color: #3b82f6;
+    color: white;
+}
+
+html.dark .command-tab.active {
+    background-color: #2563eb;
+}

django_cfg/static/admin/css/theme.css

@@ -0,0 +1,74 @@
+/**
+ * Theme Styles
+ * Cross-theme compatible styles for light/dark mode
+ */
+
+/* Theme Cards - Glass morphism effect */
+.theme-card {
+    background-color: rgba(255, 255, 255, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+    color: #111827 !important;
+    border-color: rgba(229, 231, 235, 0.6) !important;
+    border-radius: 10px !important;
+    transition: all 0.2s ease;
+}
+
+html.dark .theme-card {
+    background-color: rgba(31, 41, 55, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+    color: white !important;
+    border-color: rgba(55, 65, 81, 0.6) !important;
+    border-radius: 10px !important;
+}
+
+/* Theme Text */
+.theme-text {
+    color: #111827 !important;
+}
+
+html.dark .theme-text {
+    color: white !important;
+}
+
+/* Theme Borders */
+.theme-border {
+    border-color: rgba(229, 231, 235, 0.6) !important;
+}
+
+html.dark .theme-border {
+    border-color: rgba(55, 65, 81, 0.6) !important;
+}
+
+/* Universal Card Borders - Transparent cross-theme */
+.card-border,
+.border-base-200,
+[class*="border-base-200"],
+[class*="dark:border-base-700"] {
+    border-color: rgba(229, 231, 235, 0.6) !important;
+}
+
+html.dark .card-border,
+html.dark .border-base-200,
+html.dark [class*="border-base-200"],
+html.dark [class*="dark:border-base-700"] {
+    border-color: rgba(55, 65, 81, 0.6) !important;
+}
+
+/* Icon Spacing Defaults */
+.theme-card .material-icons:not(.no-margin) {
+    margin-right: 0.75rem !important; /* 12px default spacing */
+}
+
+.theme-card .flex.items-center .material-icons {
+    margin-right: 0.75rem !important;
+}
+
+.theme-card .status-badge .material-icons {
+    margin-right: 0.25rem !important; /* 4px for badges */
+}
+
+/* Icon spacing for buttons and links */
+.theme-card button .material-icons,
+.theme-card a .material-icons {
+    margin-right: 0.5rem !important;
+}

django_cfg/static/admin/js/alpine/activity-tracker.js

@@ -0,0 +1,55 @@
+/**
+ * Activity Tracker Alpine.js Component
+ *
+ * GitHub-style heatmap visualization for activity data
+ */
+
+function activityTrackerComponent(activityData) {
+    return {
+        activityData: activityData || [],
+        weeks: [],
+
+        init() {
+            this.processData();
+        },
+
+        processData() {
+            if (!this.activityData || this.activityData.length === 0) {
+                return;
+            }
+
+            // Group days into weeks (7 days per column)
+            this.weeks = [];
+            for (let i = 0; i < this.activityData.length; i += 7) {
+                this.weeks.push(this.activityData.slice(i, i + 7));
+            }
+        },
+
+        getCellColor(count) {
+            if (count === 0) {
+                return 'bg-gray-200 dark:bg-gray-700';
+            } else if (count <= 2) {
+                return 'bg-green-200 dark:bg-green-800';
+            } else if (count <= 5) {
+                return 'bg-green-400 dark:bg-green-600';
+            } else if (count <= 10) {
+                return 'bg-green-600 dark:bg-green-500';
+            } else {
+                return 'bg-green-800 dark:bg-green-400';
+            }
+        },
+
+        getCellTitle(day) {
+            return `${day.date}: ${day.count} activities`;
+        },
+
+        get hasData() {
+            return this.activityData && this.activityData.length > 0;
+        }
+    };
+}
+
+// Register component
+document.addEventListener('alpine:init', () => {
+    Alpine.data('activityTracker', activityTrackerComponent);
+});

django_cfg/static/admin/js/alpine/chart.js

@@ -0,0 +1,101 @@
+/**
+ * Chart Alpine.js Component
+ *
+ * Universal Chart.js wrapper for Alpine
+ */
+
+function chartComponent(chartData, chartType = 'line', options = {}) {
+    return {
+        chart: null,
+        chartData: chartData,
+        chartType: chartType,
+
+        init() {
+            this.$nextTick(() => {
+                this.renderChart();
+            });
+        },
+
+        renderChart() {
+            const canvas = this.$refs.canvas;
+
+            if (!canvas || typeof Chart === 'undefined') {
+                console.error('Chart.js not loaded or canvas not found');
+                return;
+            }
+
+            try {
+                // Default options
+                const defaultOptions = {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: true,
+                            position: 'top'
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                precision: 0
+                            }
+                        }
+                    }
+                };
+
+                // Merge with custom options
+                const mergedOptions = this.deepMerge(defaultOptions, options);
+
+                this.chart = new Chart(canvas, {
+                    type: this.chartType,
+                    data: this.chartData,
+                    options: mergedOptions
+                });
+            } catch (error) {
+                console.error('Error creating chart:', error);
+            }
+        },
+
+        updateChart(newData) {
+            if (this.chart) {
+                this.chart.data = newData;
+                this.chart.update();
+            }
+        },
+
+        destroy() {
+            if (this.chart) {
+                this.chart.destroy();
+                this.chart = null;
+            }
+        },
+
+        deepMerge(target, source) {
+            const output = Object.assign({}, target);
+            if (this.isObject(target) && this.isObject(source)) {
+                Object.keys(source).forEach(key => {
+                    if (this.isObject(source[key])) {
+                        if (!(key in target))
+                            Object.assign(output, { [key]: source[key] });
+                        else
+                            output[key] = this.deepMerge(target[key], source[key]);
+                    } else {
+                        Object.assign(output, { [key]: source[key] });
+                    }
+                });
+            }
+            return output;
+        },
+
+        isObject(item) {
+            return item && typeof item === 'object' && !Array.isArray(item);
+        }
+    };
+}
+
+// Register component
+document.addEventListener('alpine:init', () => {
+    Alpine.data('chart', chartComponent);
+});

django_cfg/static/admin/js/alpine/command-modal.js

@@ -0,0 +1,159 @@
+/**
+ * Command Modal Alpine.js Component
+ *
+ * Manages command execution modal with tabs for output and documentation
+ * Requires: /static/admin/js/utils.js for getCookie function
+ */
+
+function commandModalComponent() {
+    return {
+        open: false,
+        commandName: '',
+        activeTab: 'output',
+        outputHtml: '',
+        docsHtml: '<p class="text-font-subtle-light dark:text-font-subtle-dark">Loading documentation...</p>',
+        statusText: 'Executing...',
+        statusClass: 'bg-yellow-500 animate-pulse',
+
+        async execute(commandName) {
+            this.commandName = commandName;
+            this.open = true;
+            this.activeTab = 'output';
+            this.outputHtml = '';
+            this.statusText = 'Executing...';
+            this.statusClass = 'bg-yellow-500 animate-pulse';
+
+            // Load documentation
+            this.loadDocumentation(commandName);
+
+            // Execute command
+            try {
+                const response = await fetch('/cfg/commands/execute/', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': window.getCookie('csrftoken')
+                    },
+                    body: JSON.stringify({
+                        command: commandName,
+                        args: [],
+                        options: {}
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                while (true) {
+                    const {done, value} = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+
+                    lines.forEach(line => {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                this.handleCommandData(data);
+                            } catch (e) {
+                                console.error('Error parsing command data:', e);
+                            }
+                        }
+                    });
+                }
+            } catch (error) {
+                console.error('Error executing command:', error);
+                this.outputHtml += `\n❌ Error: ${error.message}`;
+                this.statusText = 'Error';
+                this.statusClass = 'bg-red-500';
+            }
+        },
+
+        handleCommandData(data) {
+            switch (data.type) {
+                case 'start':
+                    this.outputHtml = `🚀 Starting command: ${data.command}\n📝 Arguments: ${data.args.join(' ')}\n\n`;
+                    this.statusText = 'Executing...';
+                    this.statusClass = 'bg-yellow-500 animate-pulse';
+                    break;
+                case 'output':
+                    this.outputHtml += data.line + '\n';
+                    break;
+                case 'complete':
+                    const success = data.return_code === 0;
+                    this.statusText = success ? 'Completed' : 'Failed';
+                    this.statusClass = success ? 'bg-green-500' : 'bg-red-500';
+                    let completionMessage = `${success ? '✅' : '❌'} Command completed with exit code: ${data.return_code}`;
+                    if (data.execution_time) {
+                        completionMessage += ` (${data.execution_time}s)`;
+                    }
+                    this.outputHtml += '\n' + completionMessage;
+                    break;
+                case 'error':
+                    this.outputHtml += `❌ Error: ${data.error}\n`;
+                    this.statusText = 'Error';
+                    this.statusClass = 'bg-red-500';
+                    break;
+            }
+        },
+
+        async loadDocumentation(commandName) {
+            this.docsHtml = `
+                <div class="space-y-4">
+                    <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">${commandName}</h3>
+                    <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
+                        <p class="mb-2">Loading documentation for <code class="bg-base-200 dark:bg-base-700 px-2 py-1 rounded">${commandName}</code>...</p>
+                        <p class="mt-4">To view full documentation, run:</p>
+                        <pre class="bg-base-200 dark:bg-base-700 p-3 rounded-lg mt-2"><code>python manage.py help ${commandName}</code></pre>
+                    </div>
+                </div>
+            `;
+
+            try {
+                const response = await fetch(`/cfg/commands/help/${commandName}/`);
+                const data = await response.json();
+                if (data.help_text) {
+                    this.docsHtml = `
+                        <div class="space-y-4">
+                            <h3 class="text-lg font-semibold text-font-important-light dark:text-font-important-dark">${commandName}</h3>
+                            <pre class="text-sm text-font-default-light dark:text-font-default-dark whitespace-pre-wrap">${data.help_text}</pre>
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                console.error('Error loading documentation:', error);
+                this.docsHtml = `
+                    <div class="text-red-600 dark:text-red-400">
+                        <p>Failed to load documentation.</p>
+                        <p class="text-sm mt-2">Try running: <code class="bg-base-200 dark:bg-base-700 px-2 py-1 rounded">python manage.py help ${commandName}</code></p>
+                    </div>
+                `;
+            }
+        },
+
+        close() {
+            this.open = false;
+        }
+    };
+}
+
+// Register component when Alpine initializes
+document.addEventListener('alpine:init', () => {
+    Alpine.data('commandModal', commandModalComponent);
+});
+
+// Global wrapper for backward compatibility
+window.executeCommand = function(commandName) {
+    const modalEl = document.querySelector('[x-data="commandModal"]');
+    if (modalEl && Alpine) {
+        const component = Alpine.$data(modalEl);
+        if (component && component.execute) {
+            component.execute(commandName);
+        }
+    }
+};

django_cfg/static/admin/js/alpine/commands-panel.js

@@ -0,0 +1,139 @@
+/**
+ * Commands Panel Alpine.js Component
+ *
+ * Manages command search, filtering, and category toggling
+ */
+
+function commandsPanelComponent(totalCommands) {
+    return {
+        searchQuery: '',
+        totalCommands: totalCommands,
+        visibleCommands: totalCommands,
+        expandedCategories: new Set(),
+
+        init() {
+            // Keyboard shortcuts
+            document.addEventListener('keydown', (e) => {
+                // Focus search with Ctrl+F or Cmd+F
+                if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
+                    e.preventDefault();
+                    this.$refs.searchInput?.focus();
+                }
+
+                // Clear search with Escape
+                if (e.key === 'Escape' && document.activeElement === this.$refs.searchInput) {
+                    this.clearSearch();
+                    this.$refs.searchInput?.blur();
+                }
+            });
+        },
+
+        search() {
+            const query = this.searchQuery.toLowerCase().trim();
+            let visibleCount = 0;
+
+            // Get all categories
+            const categories = document.querySelectorAll('[id^="content-"]');
+
+            categories.forEach(category => {
+                const categoryName = category.id.replace('content-', '');
+                const commands = category.querySelectorAll('.command-item');
+                let categoryHasVisibleCommands = false;
+
+                commands.forEach(command => {
+                    const commandName = command.querySelector('.command-name')?.textContent.toLowerCase() || '';
+                    const commandDesc = command.querySelector('.command-description')?.textContent.toLowerCase() || '';
+
+                    if (!query || commandName.includes(query) || commandDesc.includes(query)) {
+                        command.style.display = 'block';
+                        categoryHasVisibleCommands = true;
+                        visibleCount++;
+                    } else {
+                        command.style.display = 'none';
+                    }
+                });
+
+                // Show/hide category based on whether it has visible commands
+                const categoryHeader = document.querySelector(`button[data-category="${categoryName}"]`);
+                const categoryContainer = categoryHeader?.parentElement;
+
+                if (categoryContainer) {
+                    if (categoryHasVisibleCommands) {
+                        categoryContainer.style.display = 'block';
+
+                        // Auto-expand categories when searching
+                        if (query) {
+                            this.expandedCategories.add(categoryName);
+                        }
+                    } else {
+                        categoryContainer.style.display = 'none';
+                    }
+                }
+            });
+
+            this.visibleCommands = visibleCount;
+        },
+
+        clearSearch() {
+            this.searchQuery = '';
+            this.visibleCommands = this.totalCommands;
+
+            // Show all commands and categories
+            const categories = document.querySelectorAll('[id^="content-"]');
+            const allCommands = document.querySelectorAll('.command-item');
+
+            categories.forEach(category => {
+                const categoryName = category.id.replace('content-', '');
+                const categoryHeader = document.querySelector(`button[data-category="${categoryName}"]`);
+                const categoryContainer = categoryHeader?.parentElement;
+
+                if (categoryContainer) {
+                    categoryContainer.style.display = 'block';
+                }
+
+                // Collapse all categories
+                this.expandedCategories.delete(categoryName);
+            });
+
+            allCommands.forEach(command => {
+                command.style.display = 'block';
+            });
+        },
+
+        toggleCategory(categoryName) {
+            if (this.expandedCategories.has(categoryName)) {
+                this.expandedCategories.delete(categoryName);
+            } else {
+                this.expandedCategories.add(categoryName);
+            }
+        },
+
+        isCategoryExpanded(categoryName) {
+            return this.expandedCategories.has(categoryName);
+        },
+
+        get showNoResults() {
+            return this.visibleCommands === 0 && this.searchQuery.trim() !== '';
+        },
+
+        get showClearButton() {
+            return this.searchQuery.trim() !== '';
+        }
+    };
+}
+
+// Register component when Alpine initializes
+document.addEventListener('alpine:init', () => {
+    Alpine.data('commandsPanel', commandsPanelComponent);
+});
+
+// Global wrapper for backward compatibility
+window.toggleCategory = function(category) {
+    const panel = document.querySelector('[x-data*="commandsPanel"]');
+    if (panel && Alpine) {
+        const component = Alpine.$data(panel);
+        if (component && component.toggleCategory) {
+            component.toggleCategory(category);
+        }
+    }
+};