${ticket.message}
`;
}
function renderAnalytics() {
const statusCounts = tickets.reduce((acc, t) => ({...acc, [t.status]: (acc[t.status] || 0) + 1 }), {});
const sentimentCounts = tickets.reduce((acc, t) => ({...acc, [t.sentiment]: (acc[t.sentiment] || 0) + 1 }), {});
const statusCtx = document.getElementById('statusChart').getContext('2d');
if (statusChart) statusChart.destroy();
statusChart = new Chart(statusCtx, {
type: 'doughnut',
data: { labels: ['New', 'In Progress', 'Resolved'], datasets: [{
data: [statusCounts['New'] || 0, statusCounts['In Progress'] || 0, statusCounts['Resolved'] || 0],
backgroundColor: ['#f59e0b', '#3b82f6', '#10b981'] }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12 } } } }
});
const sentimentCtx = document.getElementById('sentimentChart').getContext('2d');
if(sentimentChart) sentimentChart.destroy();
sentimentChart = new Chart(sentimentCtx, {
type: 'bar',
data: { labels: ['Positive', 'Neutral', 'Negative'], datasets: [{
label: 'Sentiment',
data: [sentimentCounts['Positive'] || 0, sentimentCounts['Neutral'] || 0, sentimentCounts['Negative'] || 0],
backgroundColor: ['#10b981', '#64748b', '#ef4444'] }] },
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } } }
});
}
function renderPlatformFilters() {
const container = document.getElementById('inbox-filters');
container.innerHTML = '';
platforms.forEach(p => {
container.innerHTML += ``;
});
}
function openDataModal() {
document.getElementById('dataModal').classList.remove('hidden');
document.getElementById('dataModal').classList.add('flex');
renderModalLists();
}
function closeDataModal() {
document.getElementById('dataModal').classList.add('hidden');
document.getElementById('dataModal').classList.remove('flex');
renderPlatformFilters();
generateInitialTickets();
updateDashboard();
}
function renderModalLists() {
const platformList = document.getElementById('platformList');
platformList.innerHTML = platforms.map(p => `
${p}`).join('');
const userList = document.getElementById('userList');
userList.innerHTML = mockUsers.map(u => `
${u}`).join('');
const messageList = document.getElementById('messageList');
messageList.innerHTML = mockMessages.map(m => `
${m}`).join('');
}
function setupEventListeners() {
document.getElementById('inbox-filters').addEventListener('click', e => {
e.preventDefault();
if(e.target.dataset.platform) {
filters.platform = e.target.dataset.platform;
document.querySelectorAll('#inbox-filters a').forEach(el => el.classList.remove('active'));
e.target.classList.add('active');
updateDashboard();
}
});
document.getElementById('status-filters').addEventListener('click', e => {
e.preventDefault();
if(e.target.dataset.status) {
filters.status = e.target.dataset.status;
document.querySelectorAll('#status-filters a').forEach(el => el.classList.remove('active'));
e.target.classList.add('active');
updateDashboard();
}
});
document.getElementById('ticket-list').addEventListener('click', e => {
const ticketItem = e.target.closest('.ticket-item');
if (ticketItem) {
filters.activeTicketId = parseInt(ticketItem.dataset.id);
renderTicketList();
renderTicketDetail(filters.activeTicketId);
}
});
document.getElementById('ticket-detail').addEventListener('change', e => {
if (e.target.id === 'status-updater') {
const ticketId = parseInt(e.target.dataset.id);
const newStatus = e.target.value;
const ticket = tickets.find(t => t.id === ticketId);
if (ticket) ticket.status = newStatus;
updateDashboard();
}
});
document.getElementById('manageDataBtn').addEventListener('click', openDataModal);
document.getElementById('closeModalBtn').addEventListener('click', closeDataModal);
document.getElementById('addPlatformBtn').addEventListener('click', () => { const val = document.getElementById('newPlatform').value; if(val) platforms.push(val); document.getElementById('newPlatform').value = ''; renderModalLists(); });
document.getElementById('addUserBtn').addEventListener('click', () => { const val = document.getElementById('newUser').value; if(val) mockUsers.push(val); document.getElementById('newUser').value = ''; renderModalLists(); });
document.getElementById('addMessageBtn').addEventListener('click', () => { const val = document.getElementById('newMessage').value; if(val) mockMessages.push(val); document.getElementById('newMessage').value = ''; renderModalLists(); });
document.getElementById('dataModal').addEventListener('click', e => {
if(e.target.classList.contains('remove-item-btn')) {
const value = e.target.dataset.value;
const listId = e.target.closest('ul').id;
if(listId === 'platformList') platforms = platforms.filter(i => i !== value);
if(listId === 'userList') mockUsers = mockUsers.filter(i => i !== value);
if(listId === 'messageList') mockMessages = mockMessages.filter(i => i !== value);
renderModalLists();
}
});
document.getElementById('downloadPdfBtn').addEventListener('click', generatePdf);
}
async function generatePdf() {
document.getElementById('pdf-date').textContent = new Date().toLocaleString();
document.getElementById('pdf-status-chart').src = statusChart.toBase64Image();
document.getElementById('pdf-sentiment-chart').src = sentimentChart.toBase64Image();
const newTickets = tickets.filter(t => t.status === 'New').slice(0, 10);
document.getElementById('pdf-table-container').innerHTML = `
| User | Platform | Message |
|---|
${newTickets.map(t => `| ${t.user} | ${t.platform} | ${t.message} |
`).join('')}
`;
const reportEl = document.getElementById('pdf-report');
reportEl.classList.remove('hidden');
const canvas = await html2canvas(reportEl, { scale: 2 });
reportEl.classList.add('hidden');
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'p', unit: 'in', format: 'letter' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save('Support-Summary-Report.pdf');
}
generateInitialTickets();
renderPlatformFilters();
updateDashboard();
setupEventListeners();
setInterval(() => {
if(Math.random() > 0.7 && platforms.length > 0 && mockUsers.length > 0 && mockMessages.length > 0) {
const platform = platforms[Math.floor(Math.random() * platforms.length)];
const sentiment = sentiments[Math.floor(Math.random() * sentiments.length)];
tickets.unshift({ id: Date.now(), platform, user: mockUsers[Math.floor(Math.random() * mockUsers.length)], message: mockMessages[Math.floor(Math.random() * mockMessages.length)], status: 'New', sentiment, timestamp: new Date() });
updateDashboard();
}
}, 5000);
});
