${issue.orderId}
${issue.customerName}
${issue.description} |
|
|
`;
tableBody.insertAdjacentHTML('beforeend', row);
});
updateSelectBackgrounds();
}
function renderLogForm() {
const prioritySelect = document.getElementById('log-priority');
prioritySelect.innerHTML = priorities.map(p => `
`).join('');
}
function updateSelectBackgrounds() {
document.querySelectorAll('.priority-select, .status-select').forEach(select => {
select.className = select.className.replace(/priority-\w+|status-\w+/g, '');
const type = select.dataset.type;
const value = select.value.replace(' ', '');
select.classList.add(`${type}-${value}`, 'badge');
});
}
// --- FORMS & EVENT HANDLERS ---
logForm.addEventListener('submit', (e) => {
e.preventDefault();
const newIssue = {
id: Date.now(),
orderId: document.getElementById('log-order-id').value,
customerName: document.getElementById('log-customer-name').value,
description: document.getElementById('log-issue-desc').value,
priority: document.getElementById('log-priority').value,
status: 'New'
};
issues.unshift(newIssue);
logForm.reset();
showToast('New issue logged successfully!');
switchTab('dashboard');
renderAll();
});
document.getElementById('issues-table-body').addEventListener('change', (e) => {
if (e.target.matches('.priority-select, .status-select')) {
const id = parseInt(e.target.dataset.id);
const type = e.target.dataset.type;
const value = e.target.value;
const issue = issues.find(i => i.id === id);
if (issue) {
issue[type] = value;
renderDashboard(); // Re-render to update KPIs and sorting
}
}
});
downloadPdfBtn.addEventListener('click', generatePdf);
// --- TABS & NAVIGATION ---
window.switchTab = (tabName) => { currentTab = tabName; Object.values(tabBtns).forEach(b=>b.classList.replace('tab-active', 'tab-inactive')); Object.values(tabContents).forEach(c=>c.style.display='none'); tabBtns[tabName].classList.replace('tab-inactive', 'tab-active'); tabContents[tabName].style.display = 'block'; };
window.navigateTabs = (dir) => { if (dir==='next' && currentTab==='dashboard') switchTab('log'); else if (dir==='prev' && currentTab==='log') switchTab('dashboard'); };
function showToast(message) { const toast = document.getElementById('toast'); toast.textContent = message; toast.classList.remove('opacity-0','translate-y-10'); setTimeout(() => { toast.classList.add('opacity-0','translate-y-10'); }, 3000); }
// --- PDF GENERATION ---
async function generatePdf() {
const { jsPDF } = window.jspdf;
const pdfReportElement = document.getElementById('pdf-report');
const openIssues = issues.filter(i => i.status !== 'Resolved').sort((a,b) => priorities.indexOf(b.priority) - priorities.indexOf(a.priority));
document.getElementById('pdf-date').textContent = new Date().toLocaleDateString('en-US');
const pdfTableBody = document.getElementById('pdf-table-body');
pdfTableBody.innerHTML = '';
openIssues.forEach(i => {
pdfTableBody.insertAdjacentHTML('beforeend', `
| ${i.orderId} | ${i.customerName} | ${i.description} | ${i.priority} | ${i.status} |
`);
});
const canvas = await html2canvas(pdfReportElement, { scale: 2 });
const imgData = canvas.toDataURL('image/jpeg', 0.85);
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
pdf.save('Order-Escalation-Report.pdf');
}
// --- INITIALIZATION ---
function init() {
issues = [
{ id: 1, orderId: 'ORD-USA-9875', customerName: 'Jane Smith', description: 'Item arrived damaged, requesting a replacement.', priority: 'High', status: 'New' },
{ id: 2, orderId: 'ORD-USA-9874', customerName: 'Michael Brown', description: 'Shipment has been stuck in transit for 10 days.', priority: 'Critical', status: 'Escalated' },
{ id: 3, orderId: 'ORD-USA-9872', customerName: 'Emily Davis', description: 'Wrong item received.', priority: 'Medium', status: 'In Progress' },
{ id: 4, orderId: 'ORD-USA-9871', customerName: 'David Wilson', description: 'Question about product warranty.', priority: 'Low', status: 'New' },
{ id: 5, orderId: 'ORD-USA-9870', customerName: 'Sarah Miller', description: 'Package marked as delivered but not received.', priority: 'High', status: 'In Progress' },
{ id: 6, orderId: 'ORD-USA-9869', customerName: 'James Moore', description: 'Order was canceled but I was still charged.', priority: 'Critical', status: 'New' },
];
renderAll();
}
init();
});
