pretix-map 0.1.4__py3-none-any.whl → 0.1.6__py3-none-any.whl

pretix_mapplugin/static/pretix_mapplugin/js/salesmap.js

@@ -1,452 +1,611 @@
-document.addEventListener('DOMContentLoaded', function () {
-    console.log("Sales Map JS Loaded (Cluster Toggle & Heatmap Opts)");
-
-    // --- L.Icon.Default setup ---
-    try {
-        delete L.Icon.Default.prototype._getIconUrl;
-        L.Icon.Default.mergeOptions({
-            iconRetinaUrl: '/static/leaflet/images/marker-icon-2x.png',
-            iconUrl: '/static/leaflet/images/marker-icon.png',
-            shadowUrl: '/static/leaflet/images/marker-shadow.png',
-            iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34],
-            tooltipAnchor: [16, -28], shadowSize: [41, 41]
-        });
-        console.log("Set Leaflet default icon image paths explicitly.");
-    } catch (e) {
-        console.error("Error setting icon path:", e);
-    }
-    // --- End L.Icon.Default setup ---
-
-
-    // --- Configuration ---
-    const mapContainerId = 'sales-map-container';
-    const statusOverlayId = 'map-status-overlay';
-    const viewToggleButtonId = 'view-toggle-btn';
-    const clusterToggleButtonId = 'cluster-toggle-btn';
-    const heatmapOptionsPanelId = 'heatmap-options-panel';
-    const initialZoom = 5;
-    const defaultMapView = 'pins';
-
-    // --- Globals & State ---
-    let map = null;
-    let coordinateData = [];
-    let pinLayer = null;
-    let heatmapLayer = null;
-    let currentView = defaultMapView;
-    let dataUrl = null;
-    let isClusteringEnabled = true;
-    let heatmapOptions = {
-        radius: 25, blur: 15, maxZoom: 18, minOpacity: 0.2
-    };
-
-    // --- DOM Elements ---
-    const mapElement = document.getElementById(mapContainerId);
-    const statusOverlay = document.getElementById(statusOverlayId);
-    const viewToggleButton = document.getElementById(viewToggleButtonId);
-    const clusterToggleButton = document.getElementById(clusterToggleButtonId);
-    const heatmapOptionsPanel = document.getElementById(heatmapOptionsPanelId);
-    const heatmapRadiusInput = document.getElementById('heatmap-radius');
-    const heatmapBlurInput = document.getElementById('heatmap-blur');
-    const heatmapMaxZoomInput = document.getElementById('heatmap-maxZoom');
-    const radiusValueSpan = document.getElementById('radius-value');
-    const blurValueSpan = document.getElementById('blur-value');
-    const maxZoomValueSpan = document.getElementById('maxzoom-value');
-
-    // --- Status Update Helpers ---
-    function updateStatus(message, isError = false) {
-        if (statusOverlay) {
-            const p = statusOverlay.querySelector('p');
-            if (p) {
-                p.textContent = message;
-                p.className = isError ? 'text-danger' : '';
-            }
-            statusOverlay.style.display = 'flex';
-        } else {
-            console.warn("Status overlay element not found.");
-        }
-    }
-
-    function hideStatus() {
-        if (statusOverlay) {
-            statusOverlay.style.display = 'none';
-        }
-    }
-
-    // --- End Status Helpers ---
-
-
-    // --- Initialization ---
-    function initializeMap() {
-        if (!mapElement) {
-            console.error(`Map container #${mapContainerId} not found.`);
-            return;
-        }
-        if (!statusOverlay) {
-            console.warn("Status overlay element not found.");
-        }
-        if (!viewToggleButton) console.warn("View toggle button not found.");
-        if (!clusterToggleButton) console.warn("Cluster toggle button not found.");
-        if (!heatmapOptionsPanel) console.warn("Heatmap options panel not found.");
-        if (!heatmapRadiusInput || !heatmapBlurInput || !heatmapMaxZoomInput) console.warn("Heatmap input elements missing.");
-
-        dataUrl = mapElement.dataset.dataUrl;
-        if (!dataUrl) {
-            updateStatus("Configuration Error: Missing data source URL.", true);
-            return;
-        }
-        console.log(`Data URL found: ${dataUrl}`);
-        updateStatus("Initializing map...");
-
-        try {
-            map = L.map(mapContainerId).setView([48.85, 2.35], initialZoom);
-            console.log("L.map() called successfully.");
-
-            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-                maxZoom: 18,
-            }).on('load', function () {
-                console.log('Base tiles loaded.');
-            }).addTo(map);
-            console.log("Tile layer added successfully.");
-
-            if (viewToggleButton) setupViewToggleButton();
-            if (clusterToggleButton) setupClusterToggleButton();
-            setupHeatmapControls();
-            fetchDataAndDraw();
-
-        } catch (error) {
-            console.error("ERROR during Leaflet initialization:", error);
-            updateStatus(`Leaflet Init Failed: ${error.message}`, true);
-        }
-    }
-
-
-    // --- Data Fetching & Initial Drawing ---
-    function fetchDataAndDraw() {
-        if (!dataUrl) return;
-        console.log("Fetching coordinates from:", dataUrl);
-        updateStatus("Loading ticket locations...");
-        if (viewToggleButton) viewToggleButton.disabled = true;
-        if (clusterToggleButton) clusterToggleButton.disabled = true;
-        disableHeatmapControls(true);
-
-        fetch(dataUrl)
-            .then(response => {
-                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status} ${response.statusText}`);
-                return response.json();
-            })
-            .then(data => {
-                if (data.error) throw new Error(`API Error: ${data.error}`);
-                if (!data || !data.locations || !Array.isArray(data.locations)) {
-                    console.warn("Invalid data format:", data);
-                    updateStatus("No valid locations found.", false);
-                    coordinateData = [];
-                    hideStatus();
-                    return;
-                }
-                if (data.locations.length === 0) {
-                    console.log("No locations received.");
-                    updateStatus("No locations found for event.", false);
-                    coordinateData = [];
-                    hideStatus();
-                    return;
-                }
-
-                coordinateData = data.locations;
-                console.log(`Received ${coordinateData.length} coordinates.`);
-
-                if (viewToggleButton) viewToggleButton.disabled = false;
-                if (clusterToggleButton) clusterToggleButton.disabled = (currentView !== 'pins');
-                disableHeatmapControls(false);
-
-                createAllLayers();
-                showCurrentView();
-                adjustMapBounds();
-                hideStatus();
-
-                setTimeout(function () {
-                    console.log("Forcing map.invalidateSize() after data load...");
-                    const container = document.getElementById(mapContainerId);
-                    if (map && container && container.offsetWidth > 0) {
-                        map.invalidateSize();
-                    } else {
-                        console.warn(`Skipping invalidateSize. Map: ${!!map}, Container: ${!!container}, OffsetWidth: ${container ? container.offsetWidth : 'N/A'}`);
-                    }
-                }, 100);
-            })
-            .catch(error => {
-                console.error('Error fetching/processing data:', error);
-                updateStatus(`Error loading map data: ${error.message}.`, true);
-            });
-    }
-
-
-    // --- Layer Creation Functions ---
-    function createAllLayers() {
-        createPinLayer();
-        createHeatmapLayer();
-        console.log("Layers created/updated.");
-    }
-
-    function createPinLayer() {
-        console.log(`Creating pin layer (Clustering: ${isClusteringEnabled})...`);
-        pinLayer = null;
-        if (coordinateData.length === 0) {
-            console.warn("No data for pin layer.");
-            return;
-        }
-        const markers = [];
-        coordinateData.forEach((loc, index) => {
-            try {
-                if (loc.lat == null || loc.lon == null || isNaN(loc.lat) || isNaN(loc.lon)) return;
-                const marker = L.marker(L.latLng(loc.lat, loc.lon));
-                if (loc.tooltip) marker.bindTooltip(loc.tooltip);
-                if (loc.order_url) {
-                    marker.on('click', () => window.open(loc.order_url, '_blank'));
-                }
-                markers.push(marker);
-            } catch (e) {
-                console.error(`Error creating marker ${index}:`, e);
-            }
-        });
-        if (markers.length === 0) {
-            console.warn("No valid markers created.");
-            return;
-        }
-        if (isClusteringEnabled) {
-            pinLayer = L.markerClusterGroup();
-            pinLayer.addLayers(markers);
-            console.log("Marker cluster populated.");
-        } else {
-            pinLayer = L.layerGroup(markers);
-            console.log("Simple layer group populated.");
-        }
-    }
-
-    function createHeatmapLayer() {
-        console.log("Creating heatmap layer...");
-        heatmapLayer = null;
-        if (coordinateData.length === 0) {
-            console.warn("No data for heatmap.");
-            return;
-        }
-        try {
-            const heatPoints = coordinateData.map(loc => {
-                if (loc.lat != null && loc.lon != null && !isNaN(loc.lat) && !isNaN(loc.lon)) {
-                    return [loc.lat, loc.lon, 1.0];
-                }
-                return null;
-            }).filter(p => p !== null);
-            if (heatPoints.length > 0) {
-                heatmapLayer = L.heatLayer(heatPoints, heatmapOptions);
-                console.log("Heatmap created:", heatmapOptions);
-            } else {
-                console.warn("No valid points for heatmap.");
-            }
-        } catch (e) {
-            console.error("Error creating heatmap:", e);
-        }
-    }
-
-
-    // --- Layer Update Functions ---
-    function redrawPinLayer() {
-        if (!map) return;
-        console.log("Redrawing pin layer...");
-        if (pinLayer && map.hasLayer(pinLayer)) map.removeLayer(pinLayer);
-        pinLayer = null;
-        createPinLayer();
-        if (currentView === 'pins' && pinLayer) {
-            console.log("Adding new pin layer.");
-            map.addLayer(pinLayer);
-        }
-    }
-
-    function updateHeatmap() {
-        if (!map || !heatmapLayer) {
-            console.warn("Cannot update heatmap.");
-            return;
-        }
-        console.log("Updating heatmap opts:", heatmapOptions);
-        try {
-            heatmapLayer.setOptions(heatmapOptions);
-            console.log("Heatmap opts updated.");
-        } catch (e) {
-            console.error("Error setting heatmap opts:", e);
-        }
-    }
-
-
-    // --- Adjust Map Bounds (Corrected) ---
-    function adjustMapBounds() {
-        if (!map || coordinateData.length === 0) return;
-        try {
-            let bounds = null;
-            if (currentView === 'pins' && pinLayer && typeof pinLayer.getBounds === 'function') {
-                bounds = pinLayer.getBounds();
-                console.log("Attempting bounds from pin layer.");
-            }
-            // Calculate from raw if pin layer bounds unavailable/invalid or if in heatmap view
-            if (!bounds || !bounds.isValid()) {
-                console.log("Calculating bounds from raw coordinates.");
-                // Filter valid lat/lon pairs
-                const latLngs = coordinateData
-                    .map(loc => {
-                        if (loc.lat != null && loc.lon != null && !isNaN(loc.lat) && !isNaN(loc.lon)) {
-                            return [loc.lat, loc.lon];
-                        }
-                        return null;
-                    })
-                    .filter(p => p !== null);
-                if (latLngs.length > 0) bounds = L.latLngBounds(latLngs);
-            }
-
-            // Apply bounds if valid
-            if (bounds && bounds.isValid()) {
-                console.log("Fitting map to bounds...");
-                map.fitBounds(bounds, {padding: [50, 50]});
-                console.log("Bounds fitted.");
-                // Handle single point case
-            } else if (coordinateData.filter(loc => loc.lat != null && loc.lon != null && !isNaN(loc.lat) && !isNaN(loc.lon)).length === 1) {
-                console.log("Setting view for single coordinate.");
-                // --- Corrected logic to find the single valid coordinate ---
-                const singleCoord = coordinateData.find(loc => loc.lat != null && loc.lon != null && !isNaN(loc.lat) && !isNaN(loc.lon));
-                // --- End Correction ---
-                if (singleCoord) map.setView([singleCoord.lat, singleCoord.lon], 13);
-                else console.warn("Could not find single valid coordinate to set view.");
-                // Removed extra ')' here
-            } else {
-                console.warn("Could not determine valid bounds.");
-            }
-        } catch (e) {
-            console.error("Error fitting map bounds:", e);
-        }
-    } // End adjustMapBounds function
-
-
-    // --- Control Setup Functions ---
-    function setupViewToggleButton() {
-        updateViewToggleButtonText();
-        viewToggleButton.addEventListener('click', () => {
-            console.log("View toggle clicked!");
-            currentView = (currentView === 'pins') ? 'heatmap' : 'pins';
-            showCurrentView();
-            updateViewToggleButtonText();
-            if (clusterToggleButton) clusterToggleButton.disabled = (currentView !== 'pins');
-        });
-        console.log("View toggle listener setup.");
-    }
-
-    function setupClusterToggleButton() {
-        updateClusterToggleButtonText();
-        clusterToggleButton.disabled = (currentView !== 'pins');
-        clusterToggleButton.addEventListener('click', () => {
-            if (currentView !== 'pins') return;
-            console.log("Cluster toggle clicked!");
-            isClusteringEnabled = !isClusteringEnabled;
-            redrawPinLayer();
-            updateClusterToggleButtonText();
-        });
-        console.log("Cluster toggle listener setup.");
-    }
-
-    function setupHeatmapControls() {
-        if (!heatmapRadiusInput || !heatmapBlurInput || !heatmapMaxZoomInput || !radiusValueSpan || !blurValueSpan || !maxZoomValueSpan) {
-            console.error("Heatmap controls missing.");
-            return;
-        }
-        radiusValueSpan.textContent = heatmapOptions.radius;
-        heatmapRadiusInput.value = heatmapOptions.radius;
-        blurValueSpan.textContent = heatmapOptions.blur;
-        heatmapBlurInput.value = heatmapOptions.blur;
-        maxZoomValueSpan.textContent = heatmapOptions.maxZoom;
-        heatmapMaxZoomInput.value = heatmapOptions.maxZoom;
-        heatmapRadiusInput.addEventListener('input', (e) => {
-            const v = parseFloat(e.target.value);
-            heatmapOptions.radius = v;
-            radiusValueSpan.textContent = v;
-            updateHeatmap();
-        });
-        heatmapBlurInput.addEventListener('input', (e) => {
-            const v = parseFloat(e.target.value);
-            heatmapOptions.blur = v;
-            blurValueSpan.textContent = v;
-            updateHeatmap();
-        });
-        heatmapMaxZoomInput.addEventListener('input', (e) => {
-            const v = parseInt(e.target.value, 10);
-            heatmapOptions.maxZoom = v;
-            maxZoomValueSpan.textContent = v;
-            updateHeatmap();
-        });
-        console.log("Heatmap control listeners setup.");
-    }
-
-    function disableHeatmapControls(disabled) {
-        if (heatmapRadiusInput) heatmapRadiusInput.disabled = disabled;
-        if (heatmapBlurInput) heatmapBlurInput.disabled = disabled;
-        if (heatmapMaxZoomInput) heatmapMaxZoomInput.disabled = disabled;
-    }
-
-
-    // --- View Switching Logic ---
-    function showCurrentView() {
-        console.log(`Showing view: ${currentView}`);
-        if (!map) {
-            console.warn("Map not init.");
-            return;
-        }
-        console.log("Removing layers...");
-        if (pinLayer && map.hasLayer(pinLayer)) map.removeLayer(pinLayer);
-        if (heatmapLayer && map.hasLayer(heatmapLayer)) map.removeLayer(heatmapLayer);
-        console.log(`Adding ${currentView} layer...`);
-        let layerToAdd = null;
-        if (currentView === 'pins') {
-            layerToAdd = pinLayer;
-            if (heatmapOptionsPanel) heatmapOptionsPanel.style.display = 'none';
-            if (clusterToggleButton) {
-                clusterToggleButton.style.display = 'inline-block';
-                clusterToggleButton.disabled = false;
-            }
-        } else {
-            layerToAdd = heatmapLayer;
-            if (heatmapOptionsPanel) heatmapOptionsPanel.style.display = 'block';
-            if (clusterToggleButton) {
-                clusterToggleButton.style.display = 'none';
-                clusterToggleButton.disabled = true;
-            }
-        }
-        if (layerToAdd) {
-            try {
-                map.addLayer(layerToAdd);
-                console.log(`Added ${currentView} layer.`);
-            } catch (e) {
-                console.error(`Error adding ${currentView}:`, e);
-                updateStatus(`Error display ${currentView}.`, true);
-            }
-        } else {
-            console.warn(`Layer instance missing for ${currentView}.`);
-            updateStatus(`No data for ${currentView}.`, false);
-        }
-    }
-
-
-    // --- Button Text Update Functions ---
-    function updateViewToggleButtonText() {
-        if (!viewToggleButton) return;
-        const next = (currentView === 'pins') ? 'Heatmap' : 'Pin';
-        viewToggleButton.textContent = `Switch to ${next} View`;
-        console.log(`View Btn text: ${viewToggleButton.textContent}`);
-    }
-
-    function updateClusterToggleButtonText() {
-        if (!clusterToggleButton) return;
-        clusterToggleButton.textContent = isClusteringEnabled ? 'Disable Clustering' : 'Enable Clustering';
-        console.log(`Cluster Btn text: ${clusterToggleButton.textContent}`);
-    }
-
-
-    // --- Start Initialization ---
-    initializeMap();
-
-}); // End DOMContentLoaded
+document.addEventListener('DOMContentLoaded', function () {
+    console.log("Sales Map JS Loaded (Charts, CSP Fix, Toggle Mode Fix, Split-View)");
+
+    // --- Leaflet Setup ---
+    try {
+        delete L.Icon.Default.prototype._getIconUrl;
+        L.Icon.Default.mergeOptions({
+            iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+            iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png'
+        });
+    } catch (e) { console.error(e); }
+
+    const icons = {
+        red: new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] }),
+        orange: new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] }),
+        grey: new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-grey.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] }),
+        blue: new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] })
+    };
+
+    // --- Selectors ---
+    const sel = {
+        map: document.getElementById('sales-map-container'),
+        overlay: document.getElementById('map-status-overlay'),
+        analyticsView: document.getElementById('analytics-view-container'),
+        viewToggle: document.getElementById('view-toggle-btn'),
+        clusterToggle: document.getElementById('cluster-toggle-btn'),
+        gridToggle: document.getElementById('grid-toggle-btn'),
+        weightToggle: document.getElementById('weight-toggle-btn'),
+        showCanceledCheck: document.getElementById('show-canceled-check'),
+        filterToggle: document.getElementById('filter-toggle-btn'),
+        listToggle: document.getElementById('list-toggle-btn'),
+        statsToggle: document.getElementById('stats-toggle-btn'),
+        compareSelect: document.getElementById('compare-event-select'),
+        heatmapPanel: document.getElementById('heatmap-options-panel'),
+        filterPanel: document.getElementById('filter-options-panel'),
+        statsContent: document.getElementById('stats-summary-text'),
+        failedContainer: document.getElementById('failed-orders-container'),
+        failedTbody: document.getElementById('failed-orders-tbody'),
+        filterCheckboxes: document.getElementById('filter-checkboxes'),
+        radiusIn: document.getElementById('heatmap-radius'),
+        blurIn: document.getElementById('heatmap-blur'),
+        maxZoomIn: document.getElementById('heatmap-maxZoom'),
+        radiusVal: document.getElementById('radius-value'),
+        blurVal: document.getElementById('blur-value'),
+        maxZoomVal: document.getElementById('maxzoom-value'),
+        gridSizeSlider: document.getElementById('grid-size-slider'),
+        gridSizeVal: document.getElementById('grid-size-value'),
+        heatmapControls: document.getElementById('heatmap-only-controls'),
+        gridControls: document.getElementById('grid-only-controls'),
+        mapSplitRoot: document.getElementById('map-split-root'),
+        compareMapContainer: document.getElementById('sales-map-compare-container'),
+        compareLabel: document.getElementById('compare-map-label'),
+        mainLabel: document.getElementById('main-map-label'),
+        heatmapReset: document.getElementById('heatmap-reset-btn'),
+        timeSlider: document.getElementById('timeline-slider'),
+        timeDisplay: document.getElementById('timeline-date-display'),
+        timePlayBtn: document.getElementById('timeline-play-btn'),
+        timeCount: document.getElementById('timeline-count-display'),
+        intervalSelect: document.getElementById('timeline-interval-select'),
+        timelineChart: document.getElementById('timeline-volume-chart'),
+        timelineMarkers: document.getElementById('timeline-milestone-markers'),
+        itemAvailContainer: document.getElementById('timeline-item-availability'),
+        itemAvailList: document.getElementById('item-availability-list')
+    };
+
+    // --- State ---
+    let map = null, mapCompare = null, allData = [], filteredData = [], displayData = [], milestones = [], currency = "EUR";
+    let itemAvailData = {};
+    let compareData = [], compareFilteredData = [], compareDisplayData = [];
+    let pinLayer = null, heatmapLayer = null, gridLayer = null, comparisonLayer = null, eventMarkerLayer = null;
+    let pinLayerComp = null, heatmapLayerComp = null, gridLayerComp = null, eventMarkerLayerComp = null;
+    let currentView = 'pins', isClustering = true, isWeighted = false, showCanceled = false;
+    let isPlaying = false, playInterval = null, currentCompareSlug = "";
+    let availableItems = new Set(), selectedItems = new Set();
+    let currentDisplayMode = 'map'; // map | list | stats
+    let charts = {};
+
+    function updateStatus(msg, isErr = false) {
+        if (sel.overlay) {
+            const p = sel.overlay.querySelector('p');
+            if (p) { p.textContent = msg; p.className = isErr ? 'text-danger' : ''; }
+            sel.overlay.style.display = 'flex';
+        }
+    }
+    function hideStatus() { if (sel.overlay) sel.overlay.style.display = 'none'; }
+
+    function init() {
+        if (!sel.map) return;
+        const dataUrl = sel.map.dataset.dataUrl;
+        
+        map = L.map('sales-map-container').setView([48.85, 2.35], 5);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);
+        
+        mapCompare = L.map('sales-map-compare-container', { zoomControl: false }).setView([48.85, 2.35], 5);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(mapCompare);
+
+        // Synchronize maps
+        let isSyncing = false;
+        const sync = (src, dest) => {
+            if (isSyncing) return;
+            isSyncing = true;
+            dest.setView(src.getCenter(), src.getZoom(), { animate: false });
+            isSyncing = false;
+        };
+        map.on('move', () => sync(map, mapCompare));
+        mapCompare.on('move', () => sync(mapCompare, map));
+        map.on('zoomend', () => sync(map, mapCompare));
+        mapCompare.on('zoomend', () => sync(mapCompare, map));
+
+        setupControls();
+        fetchData(dataUrl);
+    }
+
+    function fetchData(url) {
+        updateStatus("Loading data...");
+        fetch(url).then(r => r.json()).then(data => {
+            if (data.error) throw new Error(data.error);
+            allData = (data.locations || []).map(loc => { loc.ts = loc.date ? new Date(loc.date).getTime() : 0; return loc; }).sort((a, b) => a.ts - b.ts);
+            milestones = (data.milestones || []).map(m => { m.ts = new Date(m.date).getTime(); return m; });
+            itemAvailData = data.item_availability || {};
+            currency = (data.stats && data.stats.currency) ? data.stats.currency : "EUR";
+            
+            extractItems(); buildFilterUI(); initTimeline(); applyFilters();
+            renderFailedOrders(data.failed_orders || []);
+            renderStats(data.stats || {});
+            if (data.event_marker) renderEventMarker(data.event_marker);
+            
+            [sel.viewToggle, sel.clusterToggle, sel.gridToggle, sel.weightToggle, sel.compareSelect, sel.filterToggle, sel.statsToggle, sel.listToggle].forEach(b => { if (b) b.disabled = false; });
+            hideStatus();
+            setTimeout(() => map.invalidateSize(), 100);
+        }).catch(e => { console.error(e); updateStatus(e.message, true); });
+    }
+
+    function setupControls() {
+        sel.viewToggle.onclick = () => { currentView = (currentView === 'pins' ? 'heatmap' : 'pins'); refreshLayers(); };
+        sel.gridToggle.onclick = () => { currentView = (currentView === 'grid' ? 'pins' : 'grid'); refreshLayers(); };
+        sel.weightToggle.onclick = () => { isWeighted = !isWeighted; sel.weightToggle.className = isWeighted ? 'btn btn-success' : 'btn btn-default'; refreshLayers(); };
+        sel.showCanceledCheck.onchange = applyFilters;
+        sel.clusterToggle.onclick = () => { isClustering = !isClustering; refreshLayers(); };
+        sel.compareSelect.onchange = (e) => loadComparison(e.target.value);
+        sel.timeSlider.oninput = updateTimelineDisplay;
+        sel.timePlayBtn.onclick = togglePlay;
+        sel.intervalSelect.onchange = updateTimelineSlider;
+        sel.filterToggle.onclick = () => sel.filterPanel.style.display = (sel.filterPanel.style.display === 'none' ? 'block' : 'none');
+        
+        sel.listToggle.onclick = () => switchDisplayMode(currentDisplayMode === 'list' ? 'map' : 'list');
+        sel.statsToggle.onclick = () => switchDisplayMode(currentDisplayMode === 'stats' ? 'map' : 'stats');
+
+        const updateHeat = () => {
+            sel.radiusVal.textContent = sel.radiusIn.value; 
+            sel.blurVal.textContent = sel.blurIn.value;
+            sel.maxZoomVal.textContent = sel.maxZoomIn.value;
+            
+            if (heatmapLayer) {
+                heatmapLayer.setOptions({ 
+                    radius: parseInt(sel.radiusIn.value), 
+                    blur: parseInt(sel.blurIn.value),
+                    maxZoom: parseInt(sel.maxZoomIn.value),
+                    minOpacity: 0.4
+                });
+            }
+        };
+        [sel.radiusIn, sel.blurIn, sel.maxZoomIn].forEach(i => i.oninput = updateHeat);
+        sel.heatmapReset.onclick = () => { 
+            sel.radiusIn.value = 25; sel.blurIn.value = 15; sel.maxZoomIn.value = 18; 
+            sel.gridSizeSlider.value = 70;
+            updateHeat(); 
+        };
+        sel.gridSizeSlider.oninput = () => refreshLayers();
+    }
+
+    function switchDisplayMode(mode) {
+        currentDisplayMode = mode;
+        sel.map.style.display = (mode === 'map' ? 'block' : 'none');
+        sel.failedContainer.style.display = (mode === 'list' ? 'block' : 'none');
+        sel.analyticsView.style.display = (mode === 'stats' ? 'block' : 'none');
+        
+        sel.listToggle.className = (mode === 'list' ? 'btn btn-success' : 'btn btn-info');
+        sel.statsToggle.className = (mode === 'stats' ? 'btn btn-success' : 'btn btn-primary');
+        sel.listToggle.textContent = (mode === 'list' ? 'Show Map' : 'Failed Orders');
+        sel.statsToggle.textContent = (mode === 'stats' ? 'Show Map' : 'Analytics View');
+
+        if (mode === 'map') map.invalidateSize();
+    }
+
+    function renderStats(s) {
+        if (!sel.statsContent) return;
+        sel.statsContent.innerHTML = `
+            <table class="table table-condensed">
+                <tr><td><strong>Orders Total</strong></td><td class="text-right">${s.total_orders}</td></tr>
+                <tr><td><strong>Geocoded</strong></td><td class="text-right">${s.geocoded_count}</td></tr>
+                <tr><td><strong>Revenue</strong></td><td class="text-right">${s.total_revenue.toFixed(2)} ${s.currency}</td></tr>
+                <tr><td><strong>Avg. Travel</strong></td><td class="text-right">${s.avg_distance_km} km</td></tr>
+            </table>
+        `;
+        renderCharts(s);
+    }
+
+    function renderCharts(s) {
+        const ctxCities = document.getElementById('cities-chart').getContext('2d');
+        if (charts.cities) charts.cities.destroy();
+        charts.cities = new Chart(ctxCities, {
+            type: 'bar',
+            data: {
+                labels: s.top_cities.map(c => c[0]),
+                datasets: [{ label: 'Orders', data: s.top_cities.map(c => c[1]), backgroundColor: 'rgba(54, 162, 235, 0.5)' }]
+            },
+            options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false }
+        });
+
+        const ctxItems = document.getElementById('items-chart').getContext('2d');
+        if (charts.items) charts.items.destroy();
+        charts.items = new Chart(ctxItems, {
+            type: 'doughnut',
+            data: {
+                labels: s.top_items.map(i => i[0]),
+                datasets: [{ data: s.top_items.map(i => i[1]), backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'] }]
+            },
+            options: { responsive: true, maintainAspectRatio: false }
+        });
+    }
+
+    function initTimeline() {
+        if (!sel.timeSlider) return;
+        updateTimelineSlider();
+    }
+
+    function updateTimelineSlider() {
+        const interval = sel.intervalSelect.value;
+        const validData = allData.filter(d => d.ts > 0);
+        if (validData.length === 0) { sel.timeSlider.disabled = true; return; }
+        const uniqueKeys = new Set();
+        validData.forEach(d => {
+            const date = new Date(d.ts);
+            if (interval === 'hour') date.setMinutes(0, 0, 0);
+            else if (interval === 'day') date.setHours(0, 0, 0, 0);
+            else if (interval === 'week') { const day = date.getDay(), diff = date.getDate() - day + (day === 0 ? -6 : 1); date.setDate(diff); date.setHours(0, 0, 0, 0); }
+            else if (interval === 'month') { date.setDate(1); date.setHours(0, 0, 0, 0); }
+            uniqueKeys.add(date.getTime());
+        });
+        const steps = Array.from(uniqueKeys).sort((a, b) => a - b);
+        sel.timeSlider.min = 0; sel.timeSlider.max = steps.length - 1; sel.timeSlider.value = steps.length - 1;
+        sel.timeSlider._steps = steps;
+        
+        renderTimelineVolumeChart(steps);
+        renderMilestoneMarkers(steps);
+        renderItemAvailability(steps);
+        updateTimelineDisplay();
+    }
+
+    function renderItemAvailability(steps) {
+        if (!sel.itemAvailList || !steps || steps.length === 0) return;
+        sel.itemAvailList.innerHTML = '';
+        sel.itemAvailContainer.style.display = 'block';
+        
+        const minTs = steps[0];
+        const maxTs = steps[steps.length - 1];
+        const range = maxTs - minTs;
+
+        Object.keys(itemAvailData).forEach(itemName => {
+            const d = itemAvailData[itemName];
+            const firstTs = d.first_sale ? new Date(d.first_sale).getTime() : null;
+            const lastTs = d.last_sale ? new Date(d.last_sale).getTime() : null;
+            const availFrom = d.available_from ? new Date(d.available_from).getTime() : null;
+            const availUntil = d.available_until ? new Date(d.available_until).getTime() : null;
+
+            if (!firstTs && !availFrom) return;
+
+            const row = document.createElement('div');
+            row.style.height = '14px';
+            row.style.marginBottom = '2px';
+            row.style.position = 'relative';
+            row.style.width = '100%';
+            row.style.display = 'flex';
+            row.style.alignItems = 'center';
+
+            const label = document.createElement('div');
+            label.textContent = itemName;
+            label.style.width = '120px';
+            label.style.overflow = 'hidden';
+            label.style.textOverflow = 'ellipsis';
+            label.style.whiteSpace = 'nowrap';
+            label.style.marginRight = '5px';
+            row.appendChild(label);
+
+            const barContainer = document.createElement('div');
+            barContainer.style.flexGrow = '1';
+            barContainer.style.height = '8px';
+            barContainer.style.background = '#f9f9f9';
+            barContainer.style.position = 'relative';
+            barContainer.style.borderRadius = '4px';
+            row.appendChild(barContainer);
+
+            // Planned availability (light grey bar)
+            if (availFrom || availUntil) {
+                const start = availFrom ? Math.max(availFrom, minTs) : minTs;
+                const end = availUntil ? Math.min(availUntil, maxTs) : maxTs;
+                if (start < end) {
+                    const left = ((start - minTs) / range) * 100;
+                    const width = ((end - start) / range) * 100;
+                    const bar = document.createElement('div');
+                    bar.style.position = 'absolute';
+                    bar.style.left = `${left}%`;
+                    bar.style.width = `${width}%`;
+                    bar.style.height = '100%';
+                    bar.style.background = '#eee';
+                    bar.style.borderRadius = '4px';
+                    bar.title = `${itemName} (Configured Availability)`;
+                    barContainer.appendChild(bar);
+                }
+            }
+
+            // Actual sales period (blue bar)
+            if (firstTs && lastTs) {
+                const start = Math.max(firstTs, minTs);
+                const end = Math.min(lastTs, maxTs);
+                if (start <= end) {
+                    const left = ((start - minTs) / range) * 100;
+                    const width = Math.max(((end - start) / range) * 100, 0.5); // Min width for visibility
+                    const bar = document.createElement('div');
+                    bar.style.position = 'absolute';
+                    bar.style.left = `${left}%`;
+                    bar.style.width = `${width}%`;
+                    bar.style.height = '100%';
+                    bar.style.background = 'rgba(54, 162, 235, 0.6)';
+                    bar.style.borderRadius = '4px';
+                    bar.style.zIndex = '1';
+                    bar.title = `${itemName} (Actual Sales)`;
+                    barContainer.appendChild(bar);
+                }
+            }
+
+            sel.itemAvailList.appendChild(row);
+        });
+    }
+
+    function renderTimelineVolumeChart(steps) {
+        if (!sel.timelineChart) return;
+        const ctx = sel.timelineChart.getContext('2d');
+        if (charts.timeline) charts.timeline.destroy();
+
+        // Calculate counts per step from filteredData
+        const stepCounts = steps.map(ts => {
+            const nextTsIndex = steps.indexOf(ts) + 1;
+            const nextTs = nextTsIndex < steps.length ? steps[nextTsIndex] : Infinity;
+            return filteredData.filter(d => d.ts >= ts && d.ts < nextTs).length;
+        });
+
+        charts.timeline = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: steps.map(ts => new Date(ts).toLocaleDateString()),
+                datasets: [{
+                    data: stepCounts,
+                    backgroundColor: 'rgba(54, 162, 235, 0.4)',
+                    borderWidth: 0,
+                    barPercentage: 1.0,
+                    categoryPercentage: 1.0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false }, tooltip: { enabled: false } },
+                scales: {
+                    x: { display: false },
+                    y: { display: false, beginAtZero: true }
+                }
+            }
+        });
+    }
+
+    function renderMilestoneMarkers(steps) {
+        if (!sel.timelineMarkers || !steps || steps.length === 0) return;
+        sel.timelineMarkers.innerHTML = '';
+        
+        milestones.forEach(m => {
+            // Find closest step index
+            let closestIdx = -1;
+            let minDiff = Infinity;
+            steps.forEach((ts, idx) => {
+                const diff = Math.abs(ts - m.ts);
+                if (diff < minDiff) {
+                    minDiff = diff;
+                    closestIdx = idx;
+                }
+            });
+
+            if (closestIdx !== -1 && minDiff < 86400000 * 2) { // Only show if close enough (2 days)
+                const percent = (closestIdx / (steps.length - 1)) * 100;
+                const marker = document.createElement('div');
+                marker.className = 'timeline-milestone-marker';
+                marker.style.position = 'absolute';
+                marker.style.left = `${percent}%`;
+                marker.style.top = '0';
+                marker.style.width = '2px';
+                marker.style.height = '100%';
+                marker.style.background = '#d9534f';
+                marker.style.zIndex = '2';
+                
+                const label = document.createElement('span');
+                label.textContent = m.label;
+                label.style.position = 'absolute';
+                label.style.top = '2px';
+                label.style.left = '4px';
+                label.style.fontSize = '9px';
+                label.style.whiteSpace = 'nowrap';
+                label.style.background = 'rgba(255,255,255,0.7)';
+                label.style.padding = '0 2px';
+                
+                marker.appendChild(label);
+                sel.timelineMarkers.appendChild(marker);
+            }
+        });
+    }
+
+    function updateTimelineDisplay() {
+        const steps = sel.timeSlider._steps;
+        if (!steps) return;
+        const currentTs = steps[parseInt(sel.timeSlider.value)];
+        const dateObj = new Date(currentTs);
+        const activeMilestone = milestones.find(m => new Date(m.date).toDateString() === dateObj.toDateString());
+        sel.timeDisplay.innerHTML = dateObj.toLocaleDateString() + (activeMilestone ? ` — <strong>★ ${activeMilestone.label}</strong>` : "");
+        
+        displayData = filteredData.filter(d => d.ts === 0 || d.ts <= currentTs);
+        if (compareFilteredData.length > 0) {
+            compareDisplayData = compareFilteredData.filter(d => d.ts === 0 || d.ts <= currentTs);
+        }
+        
+        if (sel.timeCount) sel.timeCount.textContent = displayData.length;
+        refreshLayers();
+    }
+
+    function togglePlay() {
+        if (isPlaying) { clearInterval(playInterval); isPlaying = false; sel.timePlayBtn.innerHTML = '<i class="fa fa-play"></i> Play'; }
+        else {
+            isPlaying = true; sel.timePlayBtn.innerHTML = '<i class="fa fa-pause"></i> Pause';
+            if (parseInt(sel.timeSlider.value) >= parseInt(sel.timeSlider.max)) sel.timeSlider.value = 0;
+            playInterval = setInterval(() => {
+                let v = parseInt(sel.timeSlider.value);
+                if (v < parseInt(sel.timeSlider.max)) { sel.timeSlider.value = v + 1; updateTimelineDisplay(); }
+                else togglePlay();
+            }, 400);
+        }
+    }
+
+    function refreshLayers() {
+        if (!map) return;
+        [pinLayer, heatmapLayer, gridLayer].forEach(l => { if (l && map.hasLayer(l)) map.removeLayer(l); });
+        if (mapCompare) {
+            [pinLayerComp, heatmapLayerComp, gridLayerComp, eventMarkerLayerComp].forEach(l => { if (l && mapCompare.hasLayer(l)) mapCompare.removeLayer(l); });
+        }
+        if (comparisonLayer && map.hasLayer(comparisonLayer)) map.removeLayer(comparisonLayer);
+
+        const isSplitNeeded = currentCompareSlug && (currentView === 'heatmap' || currentView === 'grid');
+        if (isSplitNeeded) {
+            sel.mapSplitRoot.classList.add('map-split-active');
+            sel.mainLabel.style.display = 'block';
+            sel.compareMapContainer.style.display = 'block';
+            setTimeout(() => { map.invalidateSize(); mapCompare.invalidateSize(); }, 50);
+        } else {
+            sel.mapSplitRoot.classList.remove('map-split-active');
+            sel.mainLabel.style.display = 'none';
+            sel.compareMapContainer.style.display = 'none';
+            setTimeout(() => { map.invalidateSize(); }, 50);
+        }
+
+        createPinLayer(); createHeatmapLayer(); createGridLayer();
+        if (isSplitNeeded) {
+            createPinLayer(true); createHeatmapLayer(true); createGridLayer(true);
+        } else if (currentCompareSlug && currentView === 'pins') {
+            const dots = compareData.map(l => l.lat ? L.circleMarker([l.lat, l.lon], { radius: 4, color: '#888', fillOpacity: 0.5 }).bindTooltip("Comparison") : null).filter(l => l);
+            comparisonLayer = L.layerGroup(dots);
+        }
+        showCurrentView();
+    }
+
+    function createPinLayer(isCompare = false) {
+        const data = isCompare ? compareDisplayData : displayData;
+        if (data.length === 0) { if(isCompare) pinLayerComp = null; else pinLayer = null; return; }
+        const markers = data.map(loc => {
+            if (loc.lat == null) return null;
+            let icon = icons.blue;
+            if (loc.status === 'pending') icon = icons.orange;
+            else if (loc.status === 'canceled') icon = icons.grey;
+            const m = L.marker([loc.lat, loc.lon], { icon: icon });
+            if (loc.tooltip) m.bindTooltip(loc.tooltip);
+            if (loc.order_url) m.on('click', () => window.open(loc.order_url, '_blank'));
+            return m;
+        }).filter(m => m !== null);
+        const layer = isClustering ? L.markerClusterGroup().addLayers(markers) : L.layerGroup(markers);
+        if (isCompare) pinLayerComp = layer; else pinLayer = layer;
+    }
+
+    function createHeatmapLayer(isCompare = false) {
+        const data = isCompare ? compareDisplayData : displayData;
+        if (data.length === 0) { if(isCompare) heatmapLayerComp = null; else heatmapLayer = null; return; }
+        let maxRev = Math.max(...data.map(d => d.revenue || 0), 1);
+        const points = data.map(l => [l.lat, l.lon, isWeighted ? (l.revenue || 0) / maxRev : 1.0]);
+        const layer = L.heatLayer(points, { 
+            radius: parseInt(sel.radiusIn.value), 
+            blur: parseInt(sel.blurIn.value),
+            maxZoom: parseInt(sel.maxZoomIn.value),
+            minOpacity: 0.4
+        });
+        if (isCompare) heatmapLayerComp = layer; else heatmapLayer = layer;
+    }
+
+    function createGridLayer(isCompare = false) {
+        const data = isCompare ? compareDisplayData : displayData;
+        if (data.length === 0) { if(isCompare) gridLayerComp = null; else gridLayer = null; return; }
+        const rawVal = parseInt(sel.gridSizeSlider.value);
+        const gridSize = 0.4 * Math.pow(rawVal / 100, 2); 
+        sel.gridSizeVal.textContent = gridSize.toFixed(3);
+        const bins = {}; let maxVal = 0;
+        data.forEach(l => {
+            if (l.lat == null) return;
+            const key = `${Math.floor(l.lat/gridSize)},${Math.floor(l.lon/gridSize)}`;
+            if (!bins[key]) bins[key] = { count: 0, revenue: 0, lat: Math.floor(l.lat/gridSize)*gridSize, lon: Math.floor(l.lon/gridSize)*gridSize };
+            bins[key].count++; bins[key].revenue += (l.revenue||0);
+            const v = isWeighted ? bins[key].revenue : bins[key].count;
+            if (v > maxVal) maxVal = v;
+        });
+        const rects = Object.values(bins).map(bin => {
+            const i = (isWeighted ? bin.revenue : bin.count) / maxVal;
+            return L.rectangle([[bin.lat, bin.lon], [bin.lat+gridSize, bin.lon+gridSize]], { color: 'transparent', fillColor: isWeighted ? 'green' : 'blue', fillOpacity: 0.2 + (i*0.6) }).bindTooltip(isWeighted ? `Revenue: ${bin.revenue.toFixed(2)}` : `Count: ${bin.count}`);
+        });
+        const layer = L.layerGroup(rects);
+        if (isCompare) gridLayerComp = layer; else gridLayer = layer;
+    }
+
+    function showCurrentView() {
+        if (!map) return;
+        if (currentView === 'pins' && pinLayer) map.addLayer(pinLayer);
+        else if (currentView === 'heatmap' && heatmapLayer) map.addLayer(heatmapLayer);
+        else if (currentView === 'grid' && gridLayer) map.addLayer(gridLayer);
+        
+        sel.heatmapPanel.style.display = (currentView === 'heatmap' || currentView === 'grid' ? 'block' : 'none');
+        sel.heatmapControls.style.display = (currentView === 'heatmap' ? 'block' : 'none');
+        sel.gridControls.style.display = (currentView === 'grid' ? 'block' : 'none');
+        
+        if (sel.clusterToggle) sel.clusterToggle.style.display = (currentView === 'pins' ? 'inline-block' : 'none');
+        if (eventMarkerLayer) map.addLayer(eventMarkerLayer);
+        if (comparisonLayer && currentView === 'pins') map.addLayer(comparisonLayer);
+
+        if (mapCompare && sel.mapSplitRoot.classList.contains('map-split-active')) {
+            if (currentView === 'pins' && pinLayerComp) mapCompare.addLayer(pinLayerComp);
+            else if (currentView === 'heatmap' && heatmapLayerComp) mapCompare.addLayer(heatmapLayerComp);
+            else if (currentView === 'grid' && gridLayerComp) mapCompare.addLayer(gridLayerComp);
+            if (eventMarkerLayerComp) mapCompare.addLayer(eventMarkerLayerComp);
+        }
+    }
+
+    function renderEventMarker(em, isCompare = false) {
+        const layer = L.marker([em.lat, em.lon], { icon: icons.red, zIndexOffset: 2000 }).bindTooltip(`<strong>EVENT: ${em.name}</strong><br>${em.location}`);
+        if (isCompare) {
+            if (eventMarkerLayerComp && mapCompare.hasLayer(eventMarkerLayerComp)) mapCompare.removeLayer(eventMarkerLayerComp);
+            eventMarkerLayerComp = layer.addTo(mapCompare);
+        } else {
+            if (eventMarkerLayer && map.hasLayer(eventMarkerLayer)) map.removeLayer(eventMarkerLayer);
+            eventMarkerLayer = layer.addTo(map);
+        }
+    }
+
+    function loadComparison(slug) {
+        currentCompareSlug = slug;
+        if (!slug) { 
+            compareData = []; compareFilteredData = []; compareDisplayData = [];
+            sel.compareLabel.textContent = "";
+            refreshLayers(); return; 
+        }
+        const option = sel.compareSelect.options[sel.compareSelect.selectedIndex];
+        sel.compareLabel.textContent = option.text;
+        const newUrl = sel.map.dataset.dataUrl.replace(/\/event\/([^\/]+)\/([^\/]+)\//, `/event/$1/${slug}/`);
+        fetch(newUrl).then(r => r.json()).then(data => {
+            compareData = (data.locations || []).map(loc => { loc.ts = loc.date ? new Date(loc.date).getTime() : 0; return loc; }).sort((a, b) => a.ts - b.ts);
+            if (data.event_marker) renderEventMarker(data.event_marker, true);
+            applyFilters();
+        });
+    }
+
+    function extractItems() { availableItems.clear(); allData.forEach(loc => (loc.items || []).forEach(i => availableItems.add(i))); selectedItems = new Set(availableItems); }
+    function buildFilterUI() {
+        if (!sel.filterCheckboxes) return; sel.filterCheckboxes.innerHTML = '';
+        Array.from(availableItems).sort().forEach(item => {
+            const div = document.createElement('div'); div.className = 'checkbox';
+            const label = document.createElement('label'); const input = document.createElement('input'); input.type = 'checkbox'; input.checked = true;
+            input.onchange = (e) => { if (e.target.checked) selectedItems.add(item); else selectedItems.delete(item); applyFilters(); };
+            label.appendChild(input); label.appendChild(document.createTextNode(` ${item}`)); div.appendChild(label); sel.filterCheckboxes.appendChild(div);
+        });
+    }
+    function applyFilters() {
+        showCanceled = sel.showCanceledCheck.checked;
+        const filterFn = loc => (loc.items.length === 0 || loc.items.some(i => selectedItems.has(i))) && (showCanceled || loc.status !== 'canceled');
+        filteredData = allData.filter(filterFn);
+        if (compareData.length > 0) compareFilteredData = compareData.filter(filterFn);
+        updateTimelineSlider();
+    }
+
+    function renderFailedOrders(orders) {
+        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+        sel.failedTbody.innerHTML = orders.map(o => `<tr><td><code>${o.code}</code></td><td>${o.address}</td><td><div class="btn-group"><a href="${o.url}" target="_blank" class="btn btn-default btn-xs">View</a><button class="btn btn-warning btn-xs retry-btn" data-url="${o.retry_url}">Retry</button></div></td></tr>`).join('') || '<tr><td colspan="3">None</td></tr>';
+        sel.failedTbody.querySelectorAll('.retry-btn').forEach(btn => btn.onclick = () => {
+            btn.disabled = true; btn.innerHTML = '...';
+            fetch(btn.dataset.url, { method: 'POST', headers: { 'X-CSRFToken': csrfToken } }).then(r => r.json()).then(d => { if(d.success) { btn.className = 'btn btn-success btn-xs'; btn.innerHTML = '✔'; setTimeout(() => fetchData(sel.map.dataset.dataUrl), 1000); } });
+        });
+    }
+
+    init();
+});