New Hire Orientation System
Welcome Aboard!
We are thrilled to have you join our team. This orientation portal is designed to guide you through your first few weeks. Please navigate through the tabs to complete your checklist and find helpful resources.
Your Progress
0% Complete
Task Details
Due: ${item.dueDate}
${res.title}
${res.description}
Go to Resource → `; resourcesContainer.appendChild(card); }); }; /** * Updates the progress bar and text. */ const updateProgress = () => { const completedCount = checklistItems.filter(item => item.completed).length; const totalCount = checklistItems.length; const percentage = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0; progressBar.style.width = `${percentage}%`; progressText.textContent = `${percentage}% Complete (${completedCount} of ${totalCount} tasks)`; }; /** * Opens the details modal for a specific checklist item. */ const openModal = (itemId) => { const item = checklistItems.find(i => i.id === itemId); if (item) { modalTitle.textContent = item.title; modalBody.innerHTML = `${item.details}
Due: ${item.dueDate}
`; detailsModal.classList.remove('hidden'); document.body.classList.add('modal-open'); } }; /** * Closes the details modal. */ const closeModal = () => { detailsModal.classList.add('hidden'); document.body.classList.remove('modal-open'); }; /** * Generates a styled PDF progress report. */ const generatePDF = () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); const page_width = doc.internal.pageSize.getWidth(); let y = 30; // PDF Header doc.setFillColor('#4f46e5'); // Indigo doc.rect(0, 0, page_width, 20, 'F'); doc.setFont('helvetica', 'bold'); doc.setFontSize(14); doc.setTextColor('#FFFFFF'); doc.text('New Hire Orientation Progress Report', page_width / 2, 14, { align: 'center' }); // Progress Summary const completedCount = checklistItems.filter(item => item.completed).length; const totalCount = checklistItems.length; const percentage = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0; doc.setFontSize(12); doc.setTextColor('#1F2937'); doc.text(`Completion Status: ${percentage}% (${completedCount} of ${totalCount} tasks completed)`, 15, y); y += 15; // Checklist Items checklistItems.forEach(item => { if (y > 270) { doc.addPage(); y = 20; } const status = item.completed ? '✓ Completed' : '☐ Pending'; const statusColor = item.completed ? '#10B981' : '#F59E0B'; // Green vs Amber doc.setFont('helvetica', 'bold'); doc.setFontSize(11); doc.setTextColor('#1F2937'); doc.text(item.title, 15, y); doc.setFont('helvetica', 'normal'); doc.setTextColor(statusColor); const statusWidth = doc.getTextWidth(status); doc.text(status, page_width - 15 - statusWidth, y); y += 6; doc.setFontSize(10); doc.setTextColor('#6B7280'); doc.text(`Due: ${item.dueDate}`, 15, y); y += 10; }); doc.save('Orientation-Progress-Report.pdf'); }; // --- Event Listeners --- nextBtn.addEventListener('click', () => { if (currentTab < totalTabs) switchTab(currentTab + 1); }); prevBtn.addEventListener('click', () => { if (currentTab > 1) switchTab(currentTab - 1); }); tabButtons.forEach(btn => btn.addEventListener('click', () => switchTab(parseInt(btn.dataset.tab)))); closeModalBtn.addEventListener('click', closeModal); downloadPdfBtn.addEventListener('click', generatePDF); checklistContainer.addEventListener('click', (e) => { const target = e.target; if (target.classList.contains('details-btn')) { const id = parseInt(target.dataset.id); openModal(id); } if (target.classList.contains('complete-cb')) { const id = parseInt(target.dataset.id); const item = checklistItems.find(i => i.id === id); if (item) { item.completed = target.checked; renderChecklist(); } } }); // --- Initialization --- checklistItems = [...sampleChecklist]; renderChecklist(); renderResources(); updateNavButtons(); });