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

django_cfg/static/admin/css/dashboard.css

@@ -1,178 +1,14 @@
 /**
  * Django CFG Dashboard Styles
  *
- * Theme-aware styling for dashboard components
+ * Dashboard-specific styling
+ *
+ * NOTE: Common styles moved to separate files:
+ * - Tab styles: /static/admin/css/tabs.css
+ * - Theme styles: /static/admin/css/theme.css
+ * - Layout (including .overview-grid): /static/admin/css/layout.css
  */
 
-/* =============================================================================
-   Dashboard Tab Styles
-   ============================================================================= */
-
-.tab-content {
-    display: none;
-    animation: fadeIn 0.3s ease-in-out;
-}
-
-.tab-content.active {
-    display: block;
-}
-
-#dashboard-tabs button {
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* =============================================================================
-   Theme Cards - Cross-theme Compatible
-   ============================================================================= */
-
-.theme-card {
-    background-color: rgba(255, 255, 255, 0.2) !important;
-    backdrop-filter: blur(10px) !important;
-    color: #111827 !important;
-    border-color: rgba(229, 231, 235, 0.6) !important;
-    border-radius: 10px !important;
-    transition: all 0.2s ease;
-}
-
-html.dark .theme-card {
-    background-color: rgba(31, 41, 55, 0.2) !important;
-    backdrop-filter: blur(10px) !important;
-    color: white !important;
-    border-color: rgba(55, 65, 81, 0.6) !important;
-    border-radius: 10px !important;
-}
-
-.theme-text {
-    color: #111827 !important;
-}
-
-html.dark .theme-text {
-    color: white !important;
-}
-
-.theme-border {
-    border-color: rgba(229, 231, 235, 0.6) !important;
-}
-
-html.dark .theme-border {
-    border-color: rgba(55, 65, 81, 0.6) !important;
-}
-
-/* =============================================================================
-   Grid Layout
-   ============================================================================= */
-
-.overview-grid {
-    display: grid !important;
-    grid-template-columns: 1fr !important;
-}
-
-@media (min-width: 1280px) {
-    .overview-grid {
-        grid-template-columns: 2fr 1fr !important;
-    }
-}
-
-/* =============================================================================
-   Tab Navigation Styling
-   ============================================================================= */
-
-#dashboard-tabs {
-    border-bottom: 2px solid #e5e7eb !important;
-}
-
-html.dark #dashboard-tabs {
-    border-bottom-color: #374151 !important;
-}
-
-#dashboard-tabs button {
-    background-color: #f3f4f6 !important;
-    color: #6b7280 !important;
-    border-bottom: 2px solid transparent !important;
-    transition: all 0.2s ease !important;
-}
-
-html.dark #dashboard-tabs button {
-    background-color: #374151 !important;
-    color: #9ca3af !important;
-}
-
-#dashboard-tabs button:hover {
-    background-color: #e5e7eb !important;
-    color: #374151 !important;
-}
-
-html.dark #dashboard-tabs button:hover {
-    background-color: #4b5563 !important;
-    color: #d1d5db !important;
-}
-
-/* Active tab */
-#dashboard-tabs button.active,
-#dashboard-tabs button[class*="bg-blue"] {
-    background-color: #2563eb !important;
-    color: white !important;
-    border-bottom-color: #2563eb !important;
-}
-
-html.dark #dashboard-tabs button.active,
-html.dark #dashboard-tabs button[class*="bg-blue"] {
-    background-color: #3b82f6 !important;
-    color: white !important;
-    border-bottom-color: #3b82f6 !important;
-}
-
-/* =============================================================================
-   Universal Card Borders - Transparent Cross-theme
-   ============================================================================= */
-
-.card-border,
-.border-base-200,
-[class*="border-base-200"],
-[class*="dark:border-base-700"] {
-    border-color: rgba(229, 231, 235, 0.6) !important;
-}
-
-html.dark .card-border,
-html.dark .border-base-200,
-html.dark [class*="border-base-200"],
-html.dark [class*="dark:border-base-700"] {
-    border-color: rgba(55, 65, 81, 0.6) !important;
-}
-
-/* =============================================================================
-   Icon Spacing Defaults
-   ============================================================================= */
-
-.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 */
-}
-
-.theme-card button .material-icons,
-.theme-card a .material-icons {
-    margin-right: 0.5rem !important;
-}
-
 /* =============================================================================
    Section Specific Styles
    ============================================================================= */

django_cfg/static/admin/css/layout.css

@@ -0,0 +1,21 @@
+/**
+ * Layout Styles
+ * Grid layouts, containers, and responsive design
+ */
+
+/* Overview Grid Layout */
+.overview-grid {
+    display: grid !important;
+    grid-template-columns: 1fr !important;
+}
+
+@media (min-width: 1280px) {
+    .overview-grid {
+        grid-template-columns: 2fr 1fr !important;
+    }
+}
+
+/* Alpine.js Cloak - Hide elements until Alpine initializes */
+[x-cloak] {
+    display: none !important;
+}

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);
+        }
+    }
+};