@rglabs/butterfly 1.0.4 → 1.2.0

package/POC-Generator/examples/reports/examples/script.js

@@ -0,0 +1,401 @@
+/**
+ * Report: Example Report Template
+ * Description: JavaScript functions for report interactivity
+ */
+
+// Alpine.js Data Component
+function reportData() {
+    return {
+        // Filters
+        filters: {
+            startDate: '',
+            endDate: '',
+            status: '',
+            search: ''
+        },
+
+        // Sorting
+        sortField: 'id',
+        sortDirection: 'desc',
+
+        // Pagination
+        currentPage: 1,
+        perPage: 20,
+
+        // Search
+        searchQuery: '',
+
+        // Initialize
+        init() {
+            this.initCharts();
+            this.setDefaultDates();
+        },
+
+        // Set default date range (last 30 days)
+        setDefaultDates() {
+            const today = new Date();
+            const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));
+
+            this.filters.endDate = today.toISOString().split('T')[0];
+            this.filters.startDate = thirtyDaysAgo.toISOString().split('T')[0];
+        },
+
+        // Initialize Charts
+        initCharts() {
+            this.initTrendChart();
+            this.initStatusChart();
+        },
+
+        // Trend Chart (Line)
+        initTrendChart() {
+            const ctx = document.getElementById('trendChart');
+            if (!ctx) return;
+
+            new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: this.getChartLabels(),
+                    datasets: [{
+                        label: 'Orders',
+                        data: this.getChartData(),
+                        borderColor: 'rgb(59, 130, 246)',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    }, {
+                        label: 'Revenue',
+                        data: this.getRevenueData(),
+                        borderColor: 'rgb(16, 185, 129)',
+                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                        tension: 0.4,
+                        fill: true,
+                        yAxisID: 'y1'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                        }
+                    },
+                    scales: {
+                        y: {
+                            type: 'linear',
+                            display: true,
+                            position: 'left',
+                            title: {
+                                display: true,
+                                text: 'Orders'
+                            }
+                        },
+                        y1: {
+                            type: 'linear',
+                            display: true,
+                            position: 'right',
+                            title: {
+                                display: true,
+                                text: 'Revenue (EUR)'
+                            },
+                            grid: {
+                                drawOnChartArea: false,
+                            }
+                        }
+                    }
+                }
+            });
+        },
+
+        // Status Chart (Doughnut)
+        initStatusChart() {
+            const ctx = document.getElementById('statusChart');
+            if (!ctx) return;
+
+            new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: ['Pending', 'Processing', 'Completed', 'Cancelled'],
+                    datasets: [{
+                        data: [25, 35, 120, 15],
+                        backgroundColor: [
+                            'rgb(251, 191, 36)',
+                            'rgb(59, 130, 246)',
+                            'rgb(16, 185, 129)',
+                            'rgb(239, 68, 68)'
+                        ],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                        }
+                    }
+                }
+            });
+        },
+
+        // Get chart labels (dates)
+        getChartLabels() {
+            const labels = [];
+            const days = 14;
+            for (let i = days - 1; i >= 0; i--) {
+                const date = new Date();
+                date.setDate(date.getDate() - i);
+                labels.push(date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' }));
+            }
+            return labels;
+        },
+
+        // Get chart data (sample)
+        getChartData() {
+            return Array.from({ length: 14 }, () => Math.floor(Math.random() * 50) + 10);
+        },
+
+        // Get revenue data (sample)
+        getRevenueData() {
+            return Array.from({ length: 14 }, () => Math.floor(Math.random() * 5000) + 1000);
+        },
+
+        // Apply filters
+        applyFilters() {
+            console.log('Applying filters:', this.filters);
+            // Trigger AJAX request or form submission
+            this.currentPage = 1;
+            this.fetchData();
+        },
+
+        // Fetch data (AJAX)
+        async fetchData() {
+            const params = new URLSearchParams({
+                start_date: this.filters.startDate,
+                end_date: this.filters.endDate,
+                status: this.filters.status,
+                search: this.searchQuery,
+                page: this.currentPage,
+                per_page: this.perPage,
+                sort_field: this.sortField,
+                sort_direction: this.sortDirection
+            });
+
+            try {
+                const response = await fetch(`/api/report-data?${params}`);
+                const data = await response.json();
+                // Update table data
+                console.log('Fetched data:', data);
+            } catch (error) {
+                console.error('Error fetching data:', error);
+            }
+        },
+
+        // Sort by field
+        sortBy(field) {
+            if (this.sortField === field) {
+                this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+            } else {
+                this.sortField = field;
+                this.sortDirection = 'asc';
+            }
+            this.fetchData();
+        },
+
+        // Export to CSV
+        exportCSV() {
+            const table = document.querySelector('table');
+            if (!table) return;
+
+            const rows = Array.from(table.querySelectorAll('tr'));
+            const csv = rows.map(row => {
+                const cells = Array.from(row.querySelectorAll('th, td'));
+                return cells.map(cell => {
+                    let text = cell.textContent.trim();
+                    // Escape quotes and wrap in quotes if contains comma
+                    if (text.includes(',') || text.includes('"')) {
+                        text = '"' + text.replace(/"/g, '""') + '"';
+                    }
+                    return text;
+                }).join(',');
+            }).join('\n');
+
+            const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(blob);
+            link.download = `report_${new Date().toISOString().split('T')[0]}.csv`;
+            link.click();
+        },
+
+        // Export to Excel (using SheetJS if available)
+        exportExcel() {
+            if (typeof XLSX === 'undefined') {
+                console.error('SheetJS library not loaded');
+                return;
+            }
+
+            const table = document.querySelector('table');
+            const wb = XLSX.utils.table_to_book(table, { sheet: 'Report' });
+            XLSX.writeFile(wb, `report_${new Date().toISOString().split('T')[0]}.xlsx`);
+        },
+
+        // Print report
+        printReport() {
+            window.print();
+        },
+
+        // Format number
+        formatNumber(value, decimals = 0) {
+            return new Intl.NumberFormat('de-DE', {
+                minimumFractionDigits: decimals,
+                maximumFractionDigits: decimals
+            }).format(value);
+        },
+
+        // Format currency
+        formatCurrency(value) {
+            return new Intl.NumberFormat('de-DE', {
+                style: 'currency',
+                currency: 'EUR'
+            }).format(value);
+        },
+
+        // Format date
+        formatDate(dateString) {
+            const date = new Date(dateString);
+            return date.toLocaleDateString('de-DE', {
+                day: '2-digit',
+                month: '2-digit',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+        }
+    };
+}
+
+// Utility Functions
+
+/**
+ * Debounce function for search input
+ */
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+/**
+ * Show loading spinner
+ */
+function showLoading() {
+    const loader = document.getElementById('loadingSpinner');
+    if (loader) loader.classList.remove('hidden');
+}
+
+/**
+ * Hide loading spinner
+ */
+function hideLoading() {
+    const loader = document.getElementById('loadingSpinner');
+    if (loader) loader.classList.add('hidden');
+}
+
+/**
+ * Show toast notification
+ */
+function showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${
+        type === 'success' ? 'bg-green-500' :
+        type === 'error' ? 'bg-red-500' :
+        type === 'warning' ? 'bg-yellow-500' :
+        'bg-blue-500'
+    }`;
+    toast.textContent = message;
+    document.body.appendChild(toast);
+
+    setTimeout(() => {
+        toast.remove();
+    }, 3000);
+}
+
+/**
+ * Copy text to clipboard
+ */
+async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        showToast('Copied to clipboard', 'success');
+    } catch (err) {
+        console.error('Failed to copy:', err);
+        showToast('Failed to copy', 'error');
+    }
+}
+
+/**
+ * Toggle element visibility
+ */
+function toggleElement(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.classList.toggle('hidden');
+    }
+}
+
+/**
+ * Collapse/Expand section
+ */
+function toggleSection(header) {
+    const content = header.nextElementSibling;
+    const icon = header.querySelector('i.fa-chevron-down, i.fa-chevron-up');
+
+    if (content) {
+        content.classList.toggle('hidden');
+    }
+    if (icon) {
+        icon.classList.toggle('fa-chevron-down');
+        icon.classList.toggle('fa-chevron-up');
+    }
+}
+
+// Initialize on DOM ready
+document.addEventListener('DOMContentLoaded', function() {
+    // Auto-initialize any standalone charts
+    initializeCharts();
+
+    // Setup search debounce
+    const searchInputs = document.querySelectorAll('[data-search]');
+    searchInputs.forEach(input => {
+        input.addEventListener('input', debounce((e) => {
+            console.log('Search:', e.target.value);
+        }, 300));
+    });
+});
+
+/**
+ * Initialize standalone charts (without Alpine.js)
+ */
+function initializeCharts() {
+    // This is for charts that need to be initialized without Alpine.js
+    const charts = document.querySelectorAll('[data-chart]');
+    charts.forEach(canvas => {
+        const chartType = canvas.dataset.chart;
+        const chartData = JSON.parse(canvas.dataset.chartData || '{}');
+
+        if (chartType && chartData) {
+            new Chart(canvas, {
+                type: chartType,
+                data: chartData,
+                options: {
+                    responsive: true
+                }
+            });
+        }
+    });
+}