`;
// Project Progress Chart
const projectWidget = document.createElement('div');
projectWidget.className = 'as-widget';
projectWidget.innerHTML = `
Project Progress (Hours)
`;
dashboardGrid.appendChild(projectWidget);
const projectCtx = $('#projectProgressChart').getContext('2d');
chartInstances.project = new Chart(projectCtx, {
type: 'bar',
data: {
labels: Object.keys(metrics.projectStats),
datasets: [
{
label: 'Completed Hours',
data: Object.values(metrics.projectStats).map(p => p.completed),
backgroundColor: 'rgba(39, 174, 96, 0.7)'
},
{
label: 'Total Allocated Hours',
data: Object.values(metrics.projectStats).map(p => p.total),
backgroundColor: 'rgba(210, 214, 222, 0.7)'
}
]
},
options: { indexAxis: 'y', scales: { x: { stacked: false }, y: { stacked: false } } }
});
// Workload Distribution Chart
const workloadWidget = document.createElement('div');
workloadWidget.className = 'as-widget';
workloadWidget.innerHTML = `
Workload Distribution (Active Tasks)
`;
dashboardGrid.appendChild(workloadWidget);
const workloadCtx = $('#workloadChart').getContext('2d');
chartInstances.workload = new Chart(workloadCtx, {
type: 'doughnut',
data: {
labels: metrics.employeeWorkload.map(e => e.name),
datasets: [{
label: 'Assigned Hours',
data: metrics.employeeWorkload.map(e => e.assigned),
backgroundColor: ['#3498db', '#e74c3c', '#9b59b6', '#f1c40f', '#2ecc71']
}]
}
});
};
const renderTaskManagement = () => {
const tableBody = $('#tm-tasks-table-body');
const employeeSelect = $('#tm-assigned-to');
if(!tableBody || !employeeSelect) return;
tableBody.innerHTML = '';
appData.tasks.forEach(task => {
const employee = appData.employees.find(e => e.id === task.employeeId);
const statusClass = `tm-status-${task.status.toLowerCase().replace(' ', '-')}`;
const row = `
| ${task.name} |
${task.project} |
${employee ? employee.name : 'Unassigned'} |
${task.hours} |
${task.status} |
`;
tableBody.innerHTML += row;
});
employeeSelect.innerHTML = '';
appData.employees.forEach(emp => {
employeeSelect.innerHTML += `
`;
});
};
// --- EVENT HANDLERS --- //
const switchTab = (tabId) => {
activeTab = tabId;
tabContents.forEach(content => content.classList.toggle('active', content.id === tabId));
tabButtons.forEach(button => button.classList.toggle('active', button.dataset.tab === tabId));
if (tabId === 'dashboard') renderDashboard();
if (tabId === 'task-management') renderTaskManagement();
};
tabButtons.forEach(button => {
button.addEventListener('click', () => switchTab(button.dataset.tab));
});
// Task Management Form
$('#tm-task-form').addEventListener('submit', (e) => {
e.preventDefault();
const newTask = {
id: nextTaskId++,
name: $('#tm-task-name').value,
project: $('#tm-project-name').value,
employeeId: parseInt($('#tm-assigned-to').value),
hours: parseInt($('#tm-hours-allocated').value),
status: $('#tm-status').value
};
appData.tasks.push(newTask);
renderTaskManagement();
e.target.reset();
});
// Team Config Form
$('#tc-team-form').addEventListener('submit', (e) => {
e.preventDefault();
const newEmployee = {
id: nextEmployeeId++,
name: $('#tc-employee-name').value,
capacity: parseInt($('#tc-weekly-capacity').value)
};
appData.employees.push(newEmployee);
alert(`Employee "${newEmployee.name}" added successfully!`);
e.target.reset();
});
// PDF Download
$('#download-pdf-btn').addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const metrics = calculateMetrics();
doc.setFontSize(22);
doc.text("Time & Work Allocation Summary", 105, 20, null, null, "center");
doc.setFontSize(16);
doc.text("Project Progress (Hours)", 14, 35);
const projectData = Object.entries(metrics.projectStats).map(([name, data]) => [name, data.completed, data.total]);
doc.autoTable({
startY: 40,
head: [['Project', 'Completed Hours', 'Total Hours']],
body: projectData
});
doc.text("Employee Workload (Active Hours)", 14, doc.lastAutoTable.finalY + 15);
const workloadData = metrics.employeeWorkload.map(emp => [emp.name, emp.assigned, emp.capacity]);
doc.autoTable({
startY: doc.lastAutoTable.finalY + 20,
head: [['Employee', 'Assigned Hours', 'Weekly Capacity']],
body: workloadData
});
doc.save('work-allocation-summary.pdf');
});
// Navigation Buttons
const tabOrder = ['dashboard', 'task-management', 'team-config'];
$('#next-btn').addEventListener('click', () => {
const currentIndex = tabOrder.indexOf(activeTab);
const nextIndex = (currentIndex + 1) % tabOrder.length;
switchTab(tabOrder[nextIndex]);
});
$('#prev-btn').addEventListener('click', () => {
const currentIndex = tabOrder.indexOf(activeTab);
const prevIndex = (currentIndex - 1 + tabOrder.length) % tabOrder.length;
switchTab(tabOrder[prevIndex]);
});
// --- INITIALIZATION --- //
switchTab('dashboard');
});
