`;
}).join('');
};
const addEmployee = () => {
const nameInput = getElement('newEmployeeName');
const titleInput = getElement('newEmployeeTitle');
if (!nameInput.value.trim() || !titleInput.value.trim()) {
alert('Please enter both name and title.');
return;
}
state.employees.push({
id: Date.now(),
name: nameInput.value.trim(),
title: titleInput.value.trim(),
feedback: {
ratings: { communication: 3, teamwork: 3, quality: 3 },
strengths: '',
improvements: ''
}
});
nameInput.value = '';
titleInput.value = '';
renderAll();
};
const removeEmployee = (id) => {
state.employees = state.employees.filter(emp => emp.id !== id);
renderAll();
};
const saveFeedback = () => {
const empId = parseInt(getElement('employeeId').value);
if (!empId) {
alert('Please select an employee.');
return;
}
const employee = state.employees.find(e => e.id === empId);
if (employee) {
employee.feedback.ratings.communication = parseInt(getElement('rating-communication').value);
employee.feedback.ratings.teamwork = parseInt(getElement('rating-teamwork').value);
employee.feedback.ratings.quality = parseInt(getElement('rating-quality').value);
employee.feedback.strengths = getElement('strengths').value.trim();
employee.feedback.improvements = getElement('improvements').value.trim();
}
renderDashboard();
resetFeedbackForm();
switchTab(1);
};
const populateFeedbackForm = (id) => {
const employee = state.employees.find(e => e.id === id);
if (employee) {
getElement('feedback-form-title').innerText = `Edit Feedback for ${employee.name}`;
getElement('employeeId').value = employee.id;
employeeSelect.value = employee.id;
employeeSelect.disabled = true;
getElement('rating-communication').value = employee.feedback.ratings.communication;
getElement('rating-teamwork').value = employee.feedback.ratings.teamwork;
getElement('rating-quality').value = employee.feedback.ratings.quality;
getElement('strengths').value = employee.feedback.strengths;
getElement('improvements').value = employee.feedback.improvements;
switchTab(2);
}
};
const resetFeedbackForm = () => {
getElement('feedback-form-title').innerText = 'Add New Feedback';
feedbackForm.reset();
getElement('employeeId').value = '';
employeeSelect.disabled = false;
};
const generatePDF = () => {
if (state.employees.length === 0) {
alert("No employee data to generate a PDF.");
return;
}
const { jsPDF } = jspdf;
const doc = new jsPDF();
doc.setFontSize(18);
doc.text('Employee Performance Summary', 14, 22);
let lastY = 30;
state.employees.forEach(emp => {
const avgRating = ((emp.feedback.ratings.communication + emp.feedback.ratings.teamwork + emp.feedback.ratings.quality) / 3).toFixed(1);
const tableBody = [
['Overall Rating', `${avgRating} / 5.0`],
['Strengths', emp.feedback.strengths || 'N/A'],
['Areas for Improvement', emp.feedback.improvements || 'N/A']
];
doc.setFontSize(14);
doc.setFont(undefined, 'bold');
doc.text(`${emp.name} - ${emp.title}`, 14, lastY + 10);
doc.autoTable({
startY: lastY + 12,
body: tableBody,
theme: 'grid',
styles: { cellPadding: 3 },
columnStyles: { 0: { fontStyle: 'bold' } }
});
lastY = doc.autoTable.previous.finalY;
});
doc.save('Employee-Performance-Dashboard.pdf');
};
// --- Event Listeners ---
prevBtn.addEventListener('click', () => switchTab(state.currentTab - 1));
nextBtn.addEventListener('click', () => switchTab(state.currentTab + 1));
tabBtns.forEach((btn, index) => btn.addEventListener('click', () => switchTab(index + 1)));
getElement('addEmployeeBtn').addEventListener('click', addEmployee);
employeeList.addEventListener('click', (e) => {
if (e.target.classList.contains('remove-employee-btn')) {
removeEmployee(parseInt(e.target.dataset.id));
}
});
dashboardGrid.addEventListener('click', (e) => {
const btn = e.target.closest('.edit-feedback-btn');
if (btn) {
populateFeedbackForm(parseInt(btn.dataset.id));
}
});
employeeSelect.addEventListener('change', (e) => {
if (e.target.value) {
getElement('employeeId').value = e.target.value;
}
});
getElement('save-feedback-btn').addEventListener('click', saveFeedback);
getElement('cancel-edit-btn').addEventListener('click', () => {
resetFeedbackForm();
switchTab(1);
});
getElement('downloadPdfBtn').addEventListener('click', generatePDF);
// --- Initial Setup ---
const setupInitialData = () => {
state.employees = [
{ id: 1, name: 'Jane Doe', title: 'Lead Developer', feedback: { ratings: { communication: 5, teamwork: 4, quality: 5 }, strengths: 'Exceptional code quality and mentorship.', improvements: 'Can delegate more tasks to junior developers.' }},
{ id: 2, name: 'John Smith', title: 'UX Designer', feedback: { ratings: { communication: 4, teamwork: 5, quality: 4 }, strengths: 'Highly creative and collaborative. Great team player.', improvements: 'Could improve documentation of design decisions.' }},
{ id: 3, name: 'Sam Wilson', title: 'Project Manager', feedback: { ratings: { communication: 5, teamwork: 5, quality: 4 }, strengths: 'Keeps projects on track and communicates effectively with stakeholders.', improvements: 'Can provide more frequent updates on minor tasks.' }}
];
renderAll();
};
setupInitialData();
});
