${articles.length === 0 ? `
Nessuna nota o email trovata in questa data per l'agente selezionato.
` : articles.map(a => this.buildArticleCard(a)).join('')}
${selectedArticle ? this.buildDetailPanel(selectedArticle) : `
Seleziona una nota o email a sinistra per gestirne il tempo o retrodatare.
`}
`}
`;
},
buildDayStrip(data) {
const selectedParts = this.selectedDate.split('-').map(Number);
const selected = new Date(selectedParts[0], selectedParts[1] - 1, selectedParts[2]);
const todayStr = this.formatLocalISO(new Date());
const weekdays = ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'];
const months = ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'];
const dailyTotals = (data && data.daily_totals) || {};
const targetMins = (data && data.target_minutes) || 480;
const workDays = (data && data.work_days) || [1, 2, 3, 4, 5];
// Generate 2 full weeks of days (15 calendar days if showing all, or 10-11 working days if hiding non-working days)
const dateList = [];
if (this.showNonWorkingDays) {
for (let offset = -7; offset <= 7; offset++) {
const d = new Date(selected);
d.setDate(d.getDate() + offset);
dateList.push(d);
}
} else {
const before = [];
let dPrev = new Date(selected);
while (before.length < 5) {
dPrev.setDate(dPrev.getDate() - 1);
if (workDays.includes(dPrev.getDay())) {
before.unshift(new Date(dPrev));
}
}
const current = new Date(selected);
const after = [];
let dNext = new Date(selected);
while (after.length < 5) {
dNext.setDate(dNext.getDate() + 1);
if (workDays.includes(dNext.getDay())) {
after.push(new Date(dNext));
}
}
dateList.push(...before, current, ...after);
}
const days = [];
for (const d of dateList) {
const isoStr = this.formatLocalISO(d);
const dayOfWeek = d.getDay(); // 0 = Sun, 1 = Mon ... 6 = Sat
const isWorkDay = workDays.includes(dayOfWeek);
const isSelected = isoStr === this.selectedDate;
const isToday = isoStr === todayStr;
const dayNum = d.getDate();
const weekdayName = weekdays[dayOfWeek];
const monthName = months[d.getMonth()];
const dayMins = Math.round(dailyTotals[isoStr] || 0);
const formattedTime = this.formatPillTime(dayMins);
const isTargetReached = dayMins >= targetMins;
// Color coding computation
let bgStyle = 'var(--bg-card)';
let borderStyle = '1px solid var(--border-subtle)';
let textColor = 'var(--text-primary)';
let badgeBg = 'var(--bg-tertiary)';
let badgeColor = 'var(--text-muted)';
if (!isWorkDay) {
// Non-working days (e.g., weekends)
if (isSelected) {
bgStyle = 'var(--accent-primary)';
borderStyle = '1px solid var(--accent-primary)';
textColor = '#ffffff';
badgeBg = 'rgba(255,255,255,0.25)';
badgeColor = '#ffffff';
} else if (isToday) {
bgStyle = 'rgba(79, 70, 229, 0.12)';
borderStyle = '1px solid var(--border-subtle)';
textColor = 'var(--accent-primary)';
}
} else {
// Working days (configured in WORK_DAYS)
if (isTargetReached) {
// Verdino (green)
if (isSelected) {
bgStyle = '#15803d';
borderStyle = '1px solid #166534';
textColor = '#ffffff';
badgeBg = 'rgba(255,255,255,0.28)';
badgeColor = '#ffffff';
} else {
bgStyle = 'rgba(34, 197, 94, 0.16)';
borderStyle = '1px solid rgba(34, 197, 94, 0.5)';
textColor = '#15803d';
badgeBg = 'rgba(34, 197, 94, 0.25)';
badgeColor = '#15803d';
}
} else {
// Rosso (red)
if (isSelected) {
bgStyle = '#b91c1c';
borderStyle = '1px solid #991b1b';
textColor = '#ffffff';
badgeBg = 'rgba(255,255,255,0.28)';
badgeColor = '#ffffff';
} else {
bgStyle = 'rgba(239, 68, 68, 0.14)';
borderStyle = '1px solid rgba(239, 68, 68, 0.4)';
textColor = '#b91c1c';
badgeBg = 'rgba(239, 68, 68, 0.22)';
badgeColor = '#b91c1c';
}
}
}
days.push(`
🚀 ${this.showAllTime ? 'Tutto lo Storico (Attivo)' : 'Carica Tutto lo Storico'}
📊 Mostra Grafico
‹ Mese Precedente
${this.showAllTime ? 'Tutto lo Storico Consuntivato' : currentMonthName}
Mese Successivo ›
${monthsToRender.map(m => renderSingleMonthGrid(m.year, m.month)).join('')}
`;
},
buildArticleCard(a) {
const isSelected = String(a.article_id) === String(this.selectedArticleId);
const dt = a.create_time ? new Date(a.create_time).toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' }) : '—';
const bodyPreview = App.escapeHtml((a.a_body || '').replace(/<[^>]*>/g, ' ').substring(0, 150)) + ((a.a_body || '').length > 150 ? '...' : '');
const timeMins = parseFloat(a.time_unit || 0);
return `
${App.escapeHtml(a.a_subject || '(senza oggetto)')}
${bodyPreview || 'Nessun testo '}
${App.escapeHtml(a.channel || a.sender_type || 'Nota')}
⏱️ ${timeMins} min
`;
},
buildDetailPanel(a) {
const timeMins = parseFloat(a.time_unit || 0);
const localISO = (dateStr) => {
if (!dateStr) return '';
const d = new Date(dateStr);
return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
};
return `
📊
Andamento Consuntivazione Tempo
Confronto e analisi temporale delle consuntivazioni agenti
Periodo:
🚀 Tutto lo Storico
Ultimi 7 Giorni
Ultimi 14 Giorni
Ultimi 30 Giorni
Ultimi 3 Mesi (90 gg)
Ultimi 6 Mesi (180 gg)
Ultimo Anno (365 gg)
✕
👥 Agenti (${users.length})
Tutti
${users.map((u, idx) => {
const uId = String(u.id);
const isBanned = bannedAgentIds.includes(uId);
const isChecked = !isBanned && activeAgentIds.includes(uId);
const color = colorPalette[idx % colorPalette.length];
return `
${App.escapeHtml(u.first_name)} ${App.escapeHtml(u.last_name)}
0h
🚫
`;
}).join('')}
`;
document.body.appendChild(modal);
const closeModal = () => {
if (this.chartInstance) {
this.chartInstance.destroy();
this.chartInstance = null;
}
modal.remove();
};
modal.querySelector('#ta-chart-modal-close').onclick = closeModal;
modal.onclick = (e) => {
if (e.target === modal) closeModal();
};
// Function to fetch data and refresh chart instance
const refreshChartData = async () => {
const loadingEl = modal.querySelector('#ta-chart-loading');
if (loadingEl) loadingEl.style.display = 'flex';
const checkboxes = modal.querySelectorAll('.ta-agent-checkbox:checked');
const selectedIds = Array.from(checkboxes).map(c => c.value);
// Save state to localStorage
localStorage.setItem('otrs_ta_chart_agents', JSON.stringify(selectedIds));
localStorage.setItem('otrs_ta_chart_range', selectedRange);
const countEl = modal.querySelector('#ta-chart-agents-count');
if (countEl) countEl.textContent = selectedIds.length;
if (selectedIds.length === 0) {
if (this.chartInstance) {
this.chartInstance.destroy();
this.chartInstance = null;
}
if (loadingEl) loadingEl.style.display = 'none';
return;
}
try {
const params = new URLSearchParams({
agent_ids: selectedIds.join(','),
date: this.selectedDate,
range: selectedRange,
});
const data = await App.api(`/api/tickets/time-accounting/summary?${params}`);
const dailyTotalsByAgent = data.daily_totals_by_agent || {};
const targetMins = data.target_minutes || 480;
const targetHoursVal = +(targetMins / 60).toFixed(2);
// Compute set of all dates across selected agents
let allDates = [];
Object.values(dailyTotalsByAgent).forEach(agentTotals => {
Object.keys(agentTotals).forEach(d => {
if (!allDates.includes(d)) allDates.push(d);
});
});
allDates.sort();
// If numeric range (e.g. last 30, 90, 180, 365 days), slice dates
if (selectedRange !== 'all' && !isNaN(parseInt(selectedRange, 10))) {
const limitDays = parseInt(selectedRange, 10);
const cutoff = new Date();
cutoff.setDate(cutoff.getDate() - limitDays);
const cutoffIso = this.formatLocalISO(cutoff);
allDates = allDates.filter(d => d >= cutoffIso);
}
const labels = allDates.map(d => {
const parts = d.split('-');
return `${parts[2]}/${parts[1]}`;
});
// Update total hours badges for all agents in the sidebar list
users.forEach((u) => {
const uId = String(u.id);
const agentTotals = dailyTotalsByAgent[uId] || {};
let totalMinsForAgent = 0;
allDates.forEach(d => {
totalMinsForAgent += (agentTotals[d] || 0);
});
const totalHoursVal = (totalMinsForAgent / 60).toFixed(1);
const badgeEl = modal.querySelector(`.ta-agent-toggle-item[data-id="${uId}"] .ta-agent-total-badge`);
if (badgeEl) {
badgeEl.textContent = `${totalHoursVal}h`;
if (totalMinsForAgent > 0) {
badgeEl.style.color = 'var(--accent-primary)';
badgeEl.style.borderColor = 'rgba(59, 130, 246, 0.3)';
} else {
badgeEl.style.color = 'var(--text-muted)';
badgeEl.style.borderColor = 'var(--border-subtle)';
}
}
});
// Build dataset per agent
const datasets = selectedIds.map((agId) => {
const userObj = users.find(u => String(u.id) === String(agId));
const idx = users.findIndex(u => String(u.id) === String(agId));
const color = colorPalette[idx >= 0 ? idx % colorPalette.length : 0];
const agentTotals = dailyTotalsByAgent[agId] || {};
const hoursData = allDates.map(d => {
const mins = agentTotals[d] || 0;
return +(mins / 60).toFixed(2);
});
return {
label: userObj ? `${userObj.first_name} ${userObj.last_name}` : `Agente #${agId}`,
data: hoursData,
borderColor: color,
backgroundColor: color + '22',
borderWidth: 2,
fill: false,
tension: 0.25,
pointBackgroundColor: color,
pointRadius: 1.5,
pointHoverRadius: 5,
};
});
// Add Target reference line
datasets.push({
label: 'Soglia Target (Ore)',
data: allDates.map(() => targetHoursVal),
borderColor: '#ef4444',
borderDash: [5, 5],
borderWidth: 2,
fill: false,
pointRadius: 0,
});
if (this.chartInstance) {
this.chartInstance.destroy();
}
if (window.Chart) {
const ctx = modal.querySelector('#ta-chart-canvas').getContext('2d');
this.chartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: datasets,
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
tooltip: {
mode: 'index',
intersect: false,
callbacks: {
label: function(context) {
const val = context.raw || 0;
const mins = Math.round(val * 60);
const h = Math.floor(mins / 60);
const m = mins % 60;
const timeFormatted = h > 0 ? `${h}h ${m}m` : `${m}m`;
return `${context.dataset.label}: ${timeFormatted} (${val}h)`;
}
}
}
},
scales: {
x: {
grid: { color: gridColor },
ticks: { color: textColor, font: { family: 'Inter', size: 10 } }
},
y: {
grid: { color: gridColor },
beginAtZero: true,
ticks: {
color: textColor,
font: { family: 'Inter', size: 10 },
callback: function(value) {
return value + 'h';
}
}
}
}
}
});
}
} catch (err) {
console.error('Error loading chart data:', err);
} finally {
if (loadingEl) loadingEl.style.display = 'none';
}
};
// Range selector change event
const rangeSelect = modal.querySelector('#ta-chart-range-select');
if (rangeSelect) {
rangeSelect.onchange = (e) => {
selectedRange = e.target.value;
refreshChartData();
};
}
// Agent checkboxes toggle events
modal.querySelectorAll('.ta-agent-checkbox').forEach(chk => {
chk.onchange = (e) => {
const itemLabel = e.target.closest('.ta-agent-toggle-item');
if (itemLabel) {
itemLabel.style.background = e.target.checked ? 'var(--bg-tertiary)' : 'transparent';
itemLabel.style.borderColor = e.target.checked ? 'var(--border-subtle)' : 'transparent';
}
refreshChartData();
};
});
// Agent Ban/Unban toggle button events 🚫
modal.querySelectorAll('.ta-agent-ban-btn').forEach(btn => {
btn.onclick = (e) => {
e.stopPropagation();
const uId = String(btn.dataset.id);
const itemLabel = btn.closest('.ta-agent-toggle-item');
const chk = itemLabel ? itemLabel.querySelector('.ta-agent-checkbox') : null;
const isCurrentlyBanned = bannedAgentIds.includes(uId);
if (isCurrentlyBanned) {
bannedAgentIds = bannedAgentIds.filter(id => id !== uId);
if (itemLabel) {
itemLabel.classList.remove('banned');
itemLabel.style.opacity = '1';
itemLabel.style.pointerEvents = 'auto';
}
if (chk) {
chk.disabled = false;
}
btn.title = 'Blocca agente (Escludi dal grafico e dal pulsante Tutti)';
btn.style.opacity = '0.5';
} else {
bannedAgentIds.push(uId);
if (itemLabel) {
itemLabel.classList.add('banned');
itemLabel.style.opacity = '0.4';
itemLabel.style.pointerEvents = 'none';
itemLabel.style.background = 'transparent';
itemLabel.style.borderColor = 'transparent';
}
if (chk) {
chk.checked = false;
chk.disabled = true;
}
btn.title = 'Sblocca agente';
btn.style.opacity = '1';
}
localStorage.setItem('otrs_ta_chart_banned_agents', JSON.stringify(bannedAgentIds));
refreshChartData();
};
});
// Select All agents button (ignores banned agents)
const selectAllBtn = modal.querySelector('#ta-chart-select-all');
if (selectAllBtn) {
selectAllBtn.onclick = () => {
// Only select/unselect checkboxes that are not disabled/banned
const activeCheckboxes = modal.querySelectorAll('.ta-agent-checkbox:not(:disabled)');
const allChecked = Array.from(activeCheckboxes).every(c => c.checked);
activeCheckboxes.forEach(chk => {
chk.checked = !allChecked;
const itemLabel = chk.closest('.ta-agent-toggle-item');
if (itemLabel) {
itemLabel.style.background = chk.checked ? 'var(--bg-tertiary)' : 'transparent';
itemLabel.style.borderColor = chk.checked ? 'var(--border-subtle)' : 'transparent';
}
});
refreshChartData();
};
}
// Initial render
refreshChartData();
}
};