`; dashboardOutput.appendChild(card); }); } // --- TAB NAVIGATION --- function updateTabUI() { tabPanels.forEach((panel, index) => { panel.classList.toggle('hidden', index !== currentTab); }); tabButtons.forEach((button, index) => { button.classList.toggle('tab-active', index === currentTab); button.classList.toggle('tab-inactive', index !== currentTab); }); if (prevTabBtn) prevTabBtn.disabled = currentTab === 0; if (nextTabBtn) nextTabBtn.disabled = currentTab === totalTabs - 1; } function changeTab(newIndex) { if (newIndex >= 0 && newIndex < totalTabs) { currentTab = newIndex; updateTabUI(); } } // --- EVENT HANDLERS --- if (taskForm) { taskForm.addEventListener('submit', (e) => { e.preventDefault(); // Null checks for inputs if (!taskNameInput || !taskDateInput || !startTimeInput || !endTimeInput || !priorityInput || !taskIdInput) return; const id = taskIdInput.value ? parseInt(taskIdInput.value) : Date.now(); const taskData = { id: id, name: taskNameInput.value, date: taskDateInput.value, startTime: startTimeInput.value, endTime: endTimeInput.value, priority: priorityInput.value }; if (taskIdInput.value) { // Update existing task tasks = tasks.map(t => t.id === id ? taskData : t); } else { // Add new task tasks.push(taskData); } resetForm(); renderAll(); }); } if (formCancelBtn) { formCancelBtn.addEventListener('click', resetForm); } window.editTaskHandler = (id) => { const task = tasks.find(t => t.id === id); if (task && taskIdInput && taskNameInput && taskDateInput && startTimeInput && endTimeInput && priorityInput && formTitle && formSubmitBtn && formCancelBtn) { taskIdInput.value = task.id; taskNameInput.value = task.name; taskDateInput.value = task.date; startTimeInput.value = task.startTime; endTimeInput.value = task.endTime; priorityInput.value = task.priority; formTitle.textContent = 'Edit Task'; formSubmitBtn.textContent = 'Update Task'; formSubmitBtn.classList.remove('bg-green-600', 'hover:bg-green-700'); formSubmitBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600'); formCancelBtn.classList.remove('hidden'); changeTab(1); // Switch to config tab } }; window.deleteTaskHandler = (id) => { tasks = tasks.filter(t => t.id !== id); renderAll(); }; if (downloadPdfBtn) { downloadPdfBtn.addEventListener('click', generatePDF); } tabButtons.forEach(button => { button.addEventListener('click', () => { const tabIndex = parseInt(button.getAttribute('data-tab-index')); changeTab(tabIndex); }); }); if (nextTabBtn) { nextTabBtn.addEventListener('click', () => changeTab(currentTab + 1)); } if (prevTabBtn) { prevTabBtn.addEventListener('click', () => changeTab(currentTab - 1)); } // --- UTILITY FUNCTIONS --- function resetForm() { if (taskForm) taskForm.reset(); if (taskIdInput) taskIdInput.value = ''; if (formTitle) formTitle.textContent = 'Add New Task'; if (formSubmitBtn) { formSubmitBtn.textContent = 'Add Task'; formSubmitBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600'); formSubmitBtn.classList.add('bg-green-600', 'hover:bg-green-700'); } if (formCancelBtn) formCancelBtn.classList.add('hidden'); } function getPriorityClass(priority) { switch (priority) { case 'High': return 'bg-red-100 text-red-800'; case 'Medium': return 'bg-yellow-100 text-yellow-800'; case 'Low': return 'bg-green-100 text-green-800'; default: return 'bg-gray-100 text-gray-800'; } } function getPriorityBorderClass(priority) { switch (priority) { case 'High': return 'border-red-500 bg-red-50'; case 'Medium': return 'border-yellow-500 bg-yellow-50'; case 'Low': return 'border-green-500 bg-green-50'; default: return 'border-gray-500 bg-gray-50'; } } function formatDate(dateString) { const options = { year: 'numeric', month: 'long', day: 'numeric' }; return new Date(dateString + 'T00:00:00').toLocaleDateString('en-US', options); } function formatTime(timeString) { const [hour, minute] = timeString.split(':'); const h = parseInt(hour); const ampm = h >= 12 ? 'PM' : 'AM'; const formattedHour = h % 12 === 0 ? 12 : h % 12; return `${formattedHour}:${minute} ${ampm}`; } function calculateDuration(start, end) { const startDate = new Date(`1970-01-01T${start}:00`); const endDate = new Date(`1970-01-01T${end}:00`); let diff = endDate.getTime() - startDate.getTime(); if (diff < 0) return 'N/A'; const hours = Math.floor(diff / (1000 * 60 * 60)); diff -= hours * (1000 * 60 * 60); const mins = Math.floor(diff / (1000 * 60)); let durationStr = ''; if (hours > 0) durationStr += `${hours}h `; if (mins > 0) durationStr += `${mins}m`; return durationStr.trim() || '0m'; } // --- PDF GENERATION --- function generatePDF() { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(18); doc.text("Task Schedule", 14, 22); doc.setFontSize(11); doc.setTextColor(100); doc.text(`Generated on: ${new Date().toLocaleDateString('en-US')}`, 14, 29); const sortedTasks = [...tasks].sort((a, b) => new Date(`${a.date}T${a.startTime}`) - new Date(`${b.date}T${b.startTime}`)); const tableColumn = ["Task Name", "Date", "Start Time", "End Time", "Duration", "Priority"]; const tableRows = []; sortedTasks.forEach(task => { const taskData = [ task.name, formatDate(task.date), formatTime(task.startTime), formatTime(task.endTime), calculateDuration(task.startTime, task.endTime), task.priority ]; tableRows.push(taskData); }); doc.autoTable({ head: [tableColumn], body: tableRows, startY: 35, theme: 'grid', headStyles: { fillColor: [22, 160, 133] }, }); doc.save("task-schedule.pdf"); } // --- START THE APP --- initialize(); });