feat: aggiunta possiblità di visualizzare un grafico temporale dei ticket, con configurazione avanzata delle serie dei dati ed esportazione dei ticket della serie.

public/css/style.css

@@ -2566,4 +2566,67 @@ body {
   border-radius: 0 !important;
   border-left: none !important;
   border-right: none !important;
+  border-bottom: none !important;
+}
+
+/* ============================================================
+   Advanced Dashboard Ticket Chart Custom Styles
+   ============================================================ */
+.multiselect-list {
+  display: flex;
+  flex-direction: column;
+  max-height: 140px;
+  overflow-y: auto;
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm);
+  padding: 4px;
+  gap: 2px;
+  background: var(--bg-primary);
+}
+.multiselect-item {
+  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.82rem;
+  color: var(--text-secondary);
+  transition: background-color 0.15s, color 0.15s;
+  user-select: none;
+}
+.multiselect-item:hover {
+  background-color: var(--bg-hover, rgba(0,0,0,0.05));
+  color: var(--text-primary);
+}
+.multiselect-item.selected {
+  background-color: var(--accent-primary);
+  color: white;
+}
+.theme-dark .multiselect-item:hover,
+.theme-rosso .multiselect-item:hover,
+.theme-naturale .multiselect-item:hover,
+.theme-ice .multiselect-item:hover,
+.theme-autunno .multiselect-item:hover,
+.theme-fairytale .multiselect-item:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.line-config-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-fast);
+}
+.line-config-row:hover {
+  border-color: var(--border-light);
+}
+.line-config-row .line-name {
+  font-weight: 500;
+  font-size: 0.9rem;
+  color: var(--text-primary);
+}
+.line-config-row .line-actions {
+  display: flex;
+  gap: 6px;
 }

public/index.html

@@ -192,6 +192,7 @@
 
   <!-- Scripts -->
   <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="/js/components/toast.js"></script>
   <script src="/js/components/filters.js"></script>
   <script src="/js/views/dashboard.js"></script>

public/js/views/dashboard.js

@@ -1,20 +1,136 @@
 /**
  * Dashboard View
- * Shows stats overview, distribution charts, and recent tickets.
+ * Shows stats overview, customizable advanced ticket trends chart, distribution charts, and recent tickets.
  */
+
+// Helper to calculate date boundaries
+function getDatesForPeriod(period, customFromVal, customToVal) {
+  let start_date, end_date;
+  const today = new Date();
+  
+  if (period === 'last_week') {
+    const past = new Date();
+    past.setDate(today.getDate() - 7);
+    start_date = formatDateString(past);
+    end_date = formatDateString(today);
+  } else if (period === 'last_month') {
+    const past = new Date();
+    past.setDate(today.getDate() - 30);
+    start_date = formatDateString(past);
+    end_date = formatDateString(today);
+  } else {
+    start_date = customFromVal || formatDateString(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000));
+    end_date = customToVal || formatDateString(today);
+  }
+  return { start_date, end_date };
+}
+
+function formatDateString(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const dateVal = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${dateVal}`;
+}
+
+/**
+ * Dashboard View
+ * Shows stats overview, customizable advanced ticket trends chart, distribution charts, and recent tickets.
+ */
+
+// Helper to calculate date boundaries
+function getDatesForPeriod(period, customFromVal, customToVal) {
+  let start_date, end_date;
+  const today = new Date();
+  
+  if (period === 'last_week') {
+    const past = new Date();
+    past.setDate(today.getDate() - 7);
+    start_date = formatDateString(past);
+    end_date = formatDateString(today);
+  } else if (period === 'last_month') {
+    const past = new Date();
+    past.setDate(today.getDate() - 30);
+    start_date = formatDateString(past);
+    end_date = formatDateString(today);
+  } else {
+    start_date = customFromVal || formatDateString(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000));
+    end_date = customToVal || formatDateString(today);
+  }
+  return { start_date, end_date };
+}
+
+function formatDateString(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const dateVal = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${dateVal}`;
+}
+
 const DashboardView = {
+  chartInstance: null,
+  activeLines: [],
+
   async render() {
     const container = document.getElementById('view-container');
     container.innerHTML = '<div class="loading-screen"><div class="spinner"></div><p>Caricamento dashboard...</p></div>';
 
     try {
+      // Ensure lookup tables are loaded in App.lookups
+      await App.ensureLookups();
+
       const stats = await App.api('/api/dashboard/stats');
 
       const maxByState = Math.max(...(stats.by_state || []).map(s => parseInt(s.count)), 1);
       const maxByPriority = Math.max(...(stats.by_priority || []).map(s => parseInt(s.count)), 1);
       const maxByQueue = Math.max(...(stats.by_queue || []).map(s => parseInt(s.count)), 1);
 
+      // Load saved chart period preferences
+      const savedPeriod = localStorage.getItem('otrs_chart_period') || 'last_week';
+      const savedDateFrom = localStorage.getItem('otrs_chart_date_from') || '';
+      const savedDateTo = localStorage.getItem('otrs_chart_date_to') || '';
+
       container.innerHTML = `
+        <!-- Custom Ticket Trends Chart Card -->
+        <div class="card chart-card" style="margin-bottom: var(--space-md);">
+          <div class="chart-header" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-md); margin-bottom:var(--space-md);">
+            <div class="card-title" style="margin-bottom:0; display:flex; align-items:center; gap:var(--space-sm); flex-wrap:wrap;">
+              <span>Andamento Ticket</span>
+              <button class="btn btn-ghost btn-sm" id="configure-series-btn" style="padding:4px 8px; font-size:0.8rem; display:flex; align-items:center; gap:4px; height:28px;" title="Configura serie di dati del grafico">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;">
+                  <path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+                </svg>
+                <span>Configura serie di dati</span>
+              </button>
+              <button class="btn btn-ghost btn-sm" id="export-series-excel-btn" style="padding:4px 8px; font-size:0.8rem; display:flex; align-items:center; gap:4px; height:28px;" title="Esporta dati in Excel (XLSX)">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+                </svg>
+                <span>Esporta in Excel</span>
+              </button>
+            </div>
+            
+            <!-- Date controls -->
+            <div class="chart-controls" style="display:flex; align-items:center; gap:var(--space-sm); flex-wrap:wrap;">
+              <select id="chart-period-preset" class="form-select" style="height:32px; font-size:0.85rem; padding: 4px 28px 4px 8px; margin:0; width:170px; background-position: right 8px center;">
+                <option value="last_week" ${savedPeriod === 'last_week' ? 'selected' : ''}>Ultima Settimana</option>
+                <option value="last_month" ${savedPeriod === 'last_month' ? 'selected' : ''}>Ultimo Mese</option>
+                <option value="custom" ${savedPeriod === 'custom' ? 'selected' : ''}>Periodo Personalizzato</option>
+              </select>
+              
+              <div id="chart-custom-dates" style="display:${savedPeriod === 'custom' ? 'flex' : 'none'}; align-items:center; gap:6px;">
+                <span style="font-size:0.8rem; color:var(--text-secondary);">Da:</span>
+                <input type="date" id="chart-date-from" class="form-input" value="${savedDateFrom}" style="height:32px; font-size:0.85rem; padding:4px 8px; margin:0; width:135px;">
+                <span style="font-size:0.8rem; color:var(--text-secondary);">A:</span>
+                <input type="date" id="chart-date-to" class="form-input" value="${savedDateTo}" style="height:32px; font-size:0.85rem; padding:4px 8px; margin:0; width:135px;">
+              </div>
+            </div>
+          </div>
+          
+          <div class="chart-canvas-wrapper" style="position:relative; height:300px; width:100%;">
+            <canvas id="dashboard-ticket-chart"></canvas>
+          </div>
+        </div>
+
         <!-- Stats Cards -->
         <div class="stats-grid">
           <div class="stat-card accent">
@@ -133,8 +249,202 @@ const DashboardView = {
             </div>
           `}
         </div>
+
+        <!-- MODAL: Configure Series -->
+        <div id="chart-series-modal" style="display:none; position:fixed; inset:0; z-index:8000; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding: 20px;">
+          <div class="card" style="width:100%; max-width:680px; background:var(--bg-card); max-height: 90vh; display:flex; flex-direction:column; padding: var(--space-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--border-light);">
+            <div style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border-subtle); padding-bottom:var(--space-sm); margin-bottom:var(--space-md); flex-shrink:0;">
+              <h3 style="margin:0; font-size:1.1rem; font-weight:600; color:var(--text-primary);">Configura Serie di Dati</h3>
+              <button id="chart-series-modal-close" style="background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--text-muted); padding:4px;">✕</button>
+            </div>
+            
+            <!-- Series List -->
+            <div id="modal-series-list-section" style="overflow-y:auto; flex-grow:1;">
+              <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-md);">
+                <span style="font-size:0.85rem; color:var(--text-secondary);">Serie di dati attive sul grafico:</span>
+                <button class="btn btn-primary btn-sm" id="btn-add-chart-series">+ Aggiungi Serie</button>
+              </div>
+              <div id="modal-series-list" style="display:flex; flex-direction:column; gap:8px;">
+                <!-- populated dynamically -->
+              </div>
+            </div>
+            
+            <!-- Series Editor Form (hidden by default) -->
+            <form id="modal-series-form" style="display:none; flex-direction:column; gap:var(--space-md); overflow-y:auto; flex-grow:1;">
+              <input type="hidden" id="form-series-id">
+              
+              <div style="display:grid; grid-template-columns: 2fr 1fr; gap:var(--space-md);">
+                <div>
+                  <label class="form-label" style="font-weight:500; font-size:0.85rem; margin-bottom:4px; display:block;">Nome Serie (legenda)</label>
+                  <input type="text" id="form-series-name" class="form-input" placeholder="Es. Ticket urgenti" required style="width:100%;">
+                </div>
+                <div>
+                  <label class="form-label" style="font-weight:500; font-size:0.85rem; margin-bottom:4px; display:block;">Colore Grafico</label>
+                  <input type="color" id="form-series-color" class="form-input" style="width:100%; height:36px; padding: 2px; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--border-light);" value="#4f46e5">
+                </div>
+              </div>
+              
+              <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--space-md);">
+                <div>
+                  <label class="form-label" style="font-weight:500; font-size:0.85rem; margin-bottom:4px; display:block;">Stato (selezione multipla)</label>
+                  <div class="multiselect-list" id="form-select-statuses"></div>
+                </div>
+                <div>
+                  <label class="form-label" style="font-weight:500; font-size:0.85rem; margin-bottom:4px; display:block;">Tipo (selezione multipla)</label>
+                  <div class="multiselect-list" id="form-select-types"></div>
+                </div>
+              </div>
+              
+              <div style="display:grid; grid-template-columns: 1fr 1fr; gap:var(--space-md);">
+                <div>
+                  <label class="form-label" style="font-weight:500; font-size:0.85rem; margin-bottom:4px; display:block;">Coda (selezione multipla)</label>
+                  <div class="multiselect-list" id="form-select-queues"></div>
+                </div>
+                <div>
+                  <label class="form-label" style="font-weight:500; font-size:0.85rem; margin-bottom:4px; display:block;">Proprietario (selezione multipla)</label>
+                  <div class="multiselect-list" id="form-select-owners"></div>
+                </div>
+              </div>
+              
+              <div>
+                <label class="form-label" style="font-weight:500; font-size:0.85rem; margin-bottom:4px; display:block;">Responsabile (selezione multipla)</label>
+                <div class="multiselect-list" id="form-select-responsibles"></div>
+              </div>
+              
+              <div style="display:flex; justify-content:flex-end; gap:var(--space-sm); border-top:1px solid var(--border-subtle); padding-top:var(--space-md); margin-top:var(--space-xs); flex-shrink:0;">
+                <button type="button" class="btn btn-ghost btn-sm" id="btn-series-form-cancel">Annulla</button>
+                <button type="submit" class="btn btn-primary btn-sm">Salva Serie</button>
+              </div>
+            </form>
+          </div>
+        </div>
       `;
 
+      // Draw custom Chart.js lines
+      this.updateChartData();
+
+      // Bind controls listeners
+      const periodSelect = document.getElementById('chart-period-preset');
+      const customDatesDiv = document.getElementById('chart-custom-dates');
+      const dateFromInput = document.getElementById('chart-date-from');
+      const dateToInput = document.getElementById('chart-date-to');
+
+      periodSelect.addEventListener('change', () => {
+        if (periodSelect.value === 'custom') {
+          customDatesDiv.style.display = 'flex';
+        } else {
+          customDatesDiv.style.display = 'none';
+          this.updateChartData();
+        }
+      });
+
+      dateFromInput.addEventListener('change', () => {
+        if (dateFromInput.value && dateToInput.value) {
+          this.updateChartData();
+        }
+      });
+
+      dateToInput.addEventListener('change', () => {
+        if (dateFromInput.value && dateToInput.value) {
+          this.updateChartData();
+        }
+      });
+
+      // Bind Modal listeners
+      const modal = document.getElementById('chart-series-modal');
+      document.getElementById('configure-series-btn').addEventListener('click', () => {
+        modal.style.display = 'flex';
+        this.loadModalSeriesList();
+      });
+
+      document.getElementById('export-series-excel-btn').addEventListener('click', () => {
+        const periodSelect = document.getElementById('chart-period-preset');
+        const dateFromInput = document.getElementById('chart-date-from');
+        const dateToInput = document.getElementById('chart-date-to');
+        const { start_date, end_date } = getDatesForPeriod(periodSelect.value, dateFromInput.value, dateToInput.value);
+        
+        const visibleSeriesIds = [];
+        if (this.chartInstance && this.activeLines) {
+          this.activeLines.forEach((line) => {
+            const datasetIndex = this.chartInstance.data.datasets.findIndex(ds => ds.label === line.name);
+            if (datasetIndex !== -1 && this.chartInstance.isDatasetVisible(datasetIndex)) {
+              visibleSeriesIds.push(line.id);
+            }
+          });
+        }
+        
+        if (visibleSeriesIds.length === 0) {
+          Toast.error('Nessuna serie visibile da esportare!');
+          return;
+        }
+
+        const idsParam = visibleSeriesIds.join(',');
+        window.open(`/api/dashboard/export-excel?start_date=${start_date}&end_date=${end_date}&series_ids=${idsParam}`, '_blank');
+      });
+
+      document.getElementById('chart-series-modal-close').addEventListener('click', () => {
+        modal.style.display = 'none';
+        this.closeSeriesForm();
+      });
+
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+          modal.style.display = 'none';
+          this.closeSeriesForm();
+        }
+      });
+
+      document.getElementById('btn-add-chart-series').addEventListener('click', () => {
+        this.openSeriesForm();
+      });
+
+      document.getElementById('btn-series-form-cancel').addEventListener('click', () => {
+        this.closeSeriesForm();
+      });
+
+      document.getElementById('modal-series-form').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        
+        const seriesId = document.getElementById('form-series-id').value;
+        const name = document.getElementById('form-series-name').value;
+        const color = document.getElementById('form-series-color').value;
+        const statuses = this.getSelectedIds('form-select-statuses');
+        const types = this.getSelectedIds('form-select-types');
+        const queues = this.getSelectedIds('form-select-queues');
+        const owners = this.getSelectedIds('form-select-owners');
+        const responsibles = this.getSelectedIds('form-select-responsibles');
+
+        // Preserve current visibility if editing
+        let is_visible = 1;
+        if (seriesId) {
+          const existing = this.activeLines.find(s => s.id === parseInt(seriesId, 10));
+          if (existing) is_visible = existing.is_visible;
+        }
+
+        const payload = { name, statuses, types, queues, owners, responsibles, color, is_visible };
+
+        try {
+          if (seriesId) {
+            await App.api(`/api/dashboard/chart-lines/${seriesId}`, {
+              method: 'PUT',
+              body: JSON.stringify(payload)
+            });
+            Toast.success('Serie aggiornata!');
+          } else {
+            await App.api('/api/dashboard/chart-lines', {
+              method: 'POST',
+              body: JSON.stringify(payload)
+            });
+            Toast.success('Serie creata!');
+          }
+          this.closeSeriesForm();
+          this.loadModalSeriesList();
+          this.updateChartData();
+        } catch (err) {
+          Toast.error('Errore durante il salvataggio: ' + err.message);
+        }
+      });
+
       // Animate bars after render
       requestAnimationFrame(() => {
         document.querySelectorAll('.dist-bar-fill').forEach(bar => {
@@ -184,4 +494,289 @@ const DashboardView = {
       `;
     }
   },
+
+  async updateChartData() {
+    const periodPreset = document.getElementById('chart-period-preset').value;
+    const customFrom = document.getElementById('chart-date-from').value;
+    const customTo = document.getElementById('chart-date-to').value;
+    
+    // Save selections
+    localStorage.setItem('otrs_chart_period', periodPreset);
+    if (customFrom) localStorage.setItem('otrs_chart_date_from', customFrom);
+    if (customTo) localStorage.setItem('otrs_chart_date_to', customTo);
+
+    const { start_date, end_date } = getDatesForPeriod(periodPreset, customFrom, customTo);
+    
+    try {
+      const data = await App.api(`/api/dashboard/chart-data?start_date=${start_date}&end_date=${end_date}`);
+      this.activeLines = data.lines;
+      this.drawChart(data.labels, data.lines);
+    } catch (err) {
+      console.error("Error loading chart data:", err);
+      const wrapper = document.querySelector('.chart-canvas-wrapper');
+      if (wrapper) {
+        wrapper.innerHTML = `
+          <div style="display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-secondary); gap:8px;">
+            <span>⚠️ Errore durante il caricamento dei dati del grafico</span>
+            <small style="color:var(--text-muted);">${App.escapeHtml(err.message)}</small>
+          </div>
+        `;
+      }
+    }
+  },
+
+  drawChart(labels, lines) {
+    const canvas = document.getElementById('dashboard-ticket-chart');
+    if (!canvas) return;
+
+    if (this.chartInstance) {
+      this.chartInstance.destroy();
+    }
+
+    const isDarkMode = document.body.className.includes('theme-') && !document.body.className.includes('theme-light');
+    const textColor = isDarkMode ? '#a6adc8' : '#4b5563';
+    const gridColor = isDarkMode ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)';
+
+    const datasets = lines.map((line) => {
+      const color = line.color || '#4f46e5';
+      return {
+        label: line.name,
+        data: line.data,
+        borderColor: color,
+        backgroundColor: color + '15',
+        borderWidth: 2.5,
+        tension: 0.3,
+        fill: true,
+        pointBackgroundColor: color,
+        pointBorderColor: '#fff',
+        pointHoverRadius: 6,
+        pointRadius: 4,
+      };
+    });
+
+    this.chartInstance = new Chart(canvas, {
+      type: 'line',
+      data: {
+        labels: labels,
+        datasets: datasets
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            position: 'top',
+            labels: {
+              color: textColor,
+              font: {
+                family: 'Inter',
+                size: 12,
+                weight: '500'
+              },
+              padding: 15,
+            }
+          },
+          tooltip: {
+            mode: 'index',
+            intersect: false,
+            backgroundColor: isDarkMode ? '#1e1e2e' : '#fff',
+            titleColor: isDarkMode ? '#cdd6f4' : '#0f172a',
+            bodyColor: isDarkMode ? '#a6adc8' : '#475569',
+            borderColor: isDarkMode ? '#313244' : '#e2e8f0',
+            borderWidth: 1,
+            padding: 10,
+            titleFont: { family: 'Inter', weight: '600' },
+            bodyFont: { family: 'Inter' },
+          }
+        },
+        scales: {
+          x: {
+            grid: {
+              color: gridColor,
+              drawBorder: false,
+            },
+            ticks: {
+              color: textColor,
+              font: { family: 'Inter', size: 10 },
+              maxRotation: 45,
+              minRotation: 0,
+            }
+          },
+          y: {
+            grid: {
+              color: gridColor,
+              drawBorder: false,
+            },
+            ticks: {
+              color: textColor,
+              font: { family: 'Inter', size: 10 },
+              stepSize: 1,
+              precision: 0,
+            },
+            beginAtZero: true
+          }
+        }
+      }
+    });
+  },
+
+  async loadModalSeriesList() {
+    const listContainer = document.getElementById('modal-series-list');
+    if (!listContainer) return;
+    
+    listContainer.innerHTML = '<div style="text-align:center; padding:10px;"><div class="spinner" style="width:20px;height:20px;"></div></div>';
+    
+    try {
+      const lines = await App.api('/api/dashboard/chart-lines');
+      this.activeLines = lines;
+      
+      listContainer.innerHTML = lines.map(line => `
+        <div class="line-config-row series-config-row" style="display:flex; justify-content:space-between; align-items:center;">
+          <div style="display:flex; align-items:center; gap:var(--space-sm);">
+            <span class="series-color-dot" style="width:14px; height:14px; border-radius:50%; background-color:${line.color || '#4f46e5'}; border:1px solid var(--border-light); display:inline-block;"></span>
+            <span class="line-name" style="${!line.is_visible ? 'text-decoration:line-through; color:var(--text-muted);' : ''}">${App.escapeHtml(line.name)} ${line.is_default ? '<small style="color:var(--text-muted);font-weight:normal;">(Predefinita)</small>' : ''}</span>
+          </div>
+          <div class="line-actions" style="display:flex; align-items:center; gap:6px;">
+            <button class="btn btn-ghost btn-sm btn-toggle-visibility" data-id="${line.id}" style="padding: 2px 6px; font-size:0.75rem;" title="${line.is_visible ? 'Nascondi' : 'Mostra'}">
+              ${line.is_visible ? '👁️ Nascondi' : '❌ Mostra'}
+            </button>
+            <button class="btn btn-ghost btn-sm btn-edit-series" data-id="${line.id}" style="padding: 2px 6px; font-size:0.75rem;">Modifica</button>
+            ${!line.is_default ? `<button class="btn btn-danger btn-sm btn-delete-series" data-id="${line.id}" style="padding: 2px 6px; font-size:0.75rem; background-color: var(--error); color: white; border: none;">Elimina</button>` : ''}
+          </div>
+        </div>
+      `).join('');
+      
+      // Bind actions
+      listContainer.querySelectorAll('.btn-edit-series').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const lineId = parseInt(btn.dataset.id);
+          const line = this.activeLines.find(l => l.id === lineId);
+          if (line) this.openSeriesForm(line);
+        });
+      });
+
+      listContainer.querySelectorAll('.btn-toggle-visibility').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          const lineId = parseInt(btn.dataset.id);
+          const series = this.activeLines.find(l => l.id === lineId);
+          if (series) {
+            const nextVisibility = series.is_visible ? 0 : 1;
+            try {
+              await App.api(`/api/dashboard/chart-lines/${lineId}`, {
+                method: 'PUT',
+                body: JSON.stringify({
+                  name: series.name,
+                  statuses: series.statuses,
+                  types: series.types,
+                  queues: series.queues,
+                  owners: series.owners,
+                  responsibles: series.responsibles,
+                  color: series.color,
+                  is_visible: nextVisibility
+                })
+              });
+              Toast.success(nextVisibility ? 'Serie attivata!' : 'Serie disattivata!');
+              this.loadModalSeriesList();
+              this.updateChartData();
+            } catch (err) {
+              Toast.error('Errore durante l\'aggiornamento dello stato: ' + err.message);
+            }
+          }
+        });
+      });
+      
+      listContainer.querySelectorAll('.btn-delete-series').forEach(btn => {
+        btn.addEventListener('click', async () => {
+          const lineId = parseInt(btn.dataset.id);
+          const confirmed = await App.confirm('Elimina serie', 'Sei sicuro di voler eliminare questa serie dal grafico?');
+          if (!confirmed) return;
+          
+          try {
+            await App.api(`/api/dashboard/chart-lines/${lineId}`, { method: 'DELETE' });
+            Toast.success('Serie eliminata con successo!');
+            this.loadModalSeriesList();
+            this.updateChartData();
+          } catch (err) {
+            Toast.error('Errore durante l\'eliminazione: ' + err.message);
+          }
+        });
+      });
+    } catch (err) {
+      listContainer.innerHTML = `<div style="color:var(--error); font-size:0.85rem; padding:10px;">Errore: ${App.escapeHtml(err.message)}</div>`;
+    }
+  },
+
+  openSeriesForm(line = null) {
+    const listSection = document.getElementById('modal-series-list-section');
+    const formSection = document.getElementById('modal-series-form');
+    
+    listSection.style.display = 'none';
+    formSection.style.display = 'flex';
+    
+    const idInput = document.getElementById('form-series-id');
+    const nameInput = document.getElementById('form-series-name');
+    const colorInput = document.getElementById('form-series-color');
+    
+    const statuses = line ? line.statuses : [];
+    const types = line ? line.types : [];
+    const queues = line ? line.queues : [];
+    const owners = line ? line.owners : [];
+    const responsibles = line ? line.responsibles : [];
+    
+    idInput.value = line ? line.id : '';
+    nameInput.value = line ? line.name : '';
+    colorInput.value = line ? line.color : '#4f46e5';
+    
+    this.renderMultiselect('form-select-statuses', App.lookups.states || [], statuses);
+    this.renderMultiselect('form-select-types', App.lookups.types || [], types);
+    this.renderMultiselect('form-select-queues', App.lookups.queues || [], queues);
+    this.renderMultiselect('form-select-owners', App.lookups.users || [], owners, 'user');
+    this.renderMultiselect('form-select-responsibles', App.lookups.users || [], responsibles, 'user');
+  },
+  
+  closeSeriesForm() {
+    const listSection = document.getElementById('modal-series-list-section');
+    const formSection = document.getElementById('modal-series-form');
+    if (listSection && formSection) {
+      listSection.style.display = 'block';
+      formSection.style.display = 'none';
+    }
+  },
+
+  renderMultiselect(containerId, items, selectedIds, type = 'normal') {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+    
+    const sorted = [...items].sort((a, b) => {
+      const nameA = type === 'user' ? `${a.last_name || ''} ${a.first_name || ''}` : (a.name || '');
+      const nameB = type === 'user' ? `${b.last_name || ''} ${b.first_name || ''}` : (b.name || '');
+      return nameA.localeCompare(nameB, 'it', { sensitivity: 'base' });
+    });
+
+    container.innerHTML = sorted.map(item => {
+      const id = item.id;
+      const isSelected = selectedIds.includes(id) || selectedIds.includes(String(id)) || selectedIds.includes(parseInt(id));
+      let label = item.name;
+      if (type === 'user') {
+        label = `${item.first_name || ''} ${item.last_name || ''} (${item.login || ''})`;
+      }
+      return `<div class="multiselect-item ${isSelected ? 'selected' : ''}" data-id="${id}">${App.escapeHtml(label)}</div>`;
+    }).join('');
+
+    // Bind item click
+    container.querySelectorAll('.multiselect-item').forEach(el => {
+      el.addEventListener('click', () => {
+        el.classList.toggle('selected');
+      });
+    });
+  },
+
+  getSelectedIds(containerId) {
+    const container = document.getElementById(containerId);
+    if (!container) return [];
+    return Array.from(container.querySelectorAll('.multiselect-item.selected')).map(el => {
+      const id = el.dataset.id;
+      return isNaN(parseInt(id)) ? id : parseInt(id);
+    });
+  }
 };