Peer-to-Peer Recognition Platform
"${rec.message}"
- Recognized by ${rec.senderName}
`;
return card;
};
/**
* Generates a styled PDF report of the recognition wall.
*/
const generatePDF = () => {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const page_width = doc.internal.pageSize.getWidth();
let y = 25; // Initial Y position
// --- 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('Peer-to-Peer Recognition Wall', page_width / 2, 14, { align: 'center' });
// --- Loop through recognitions and add to PDF ---
recognitions.forEach((rec, index) => {
// Check if new page is needed
if (y > 250) { // Approximate height check
doc.addPage();
y = 20;
}
// --- Card Content ---
doc.setFont('helvetica', 'bold');
doc.setFontSize(14);
doc.setTextColor('#4f46e5'); // Indigo
doc.text(rec.recipientName, 15, y);
doc.setFont('helvetica', 'normal');
doc.setFontSize(9);
doc.setTextColor('#374151'); // Gray-700
const valueText = `Value: ${rec.companyValue}`;
const valueTextWidth = doc.getTextWidth(valueText);
doc.text(valueText, page_width - 15 - valueTextWidth, y);
y += 8;
doc.setFont('helvetica', 'italic');
doc.setFontSize(11);
doc.setTextColor('#4B5563'); // Gray-600
const messageLines = doc.splitTextToSize(`"${rec.message}"`, page_width - 30);
doc.text(messageLines, 15, y);
y += messageLines.length * 5;
doc.setFont('helvetica', 'normal');
doc.setFontSize(10);
const senderText = `- Recognized by ${rec.senderName}`;
const senderTextWidth = doc.getTextWidth(senderText);
doc.text(senderText, page_width - 15 - senderTextWidth, y + 4);
y += 15;
// --- Separator Line ---
if (index < recognitions.length - 1) {
doc.setDrawColor('#E5E7EB'); // Gray-200
doc.line(15, y, page_width - 15, y);
y += 10;
}
});
// --- PDF Footer ---
const page_height = doc.internal.pageSize.getHeight();
doc.setFontSize(8);
doc.setTextColor('#9CA3AF'); // Gray-400
doc.text(`Report generated on ${new Date().toLocaleDateString()}`, page_width / 2, page_height - 10, { align: 'center' });
doc.save('Recognition-Wall-Report.pdf');
};
// --- Event Listeners ---
// Tab button clicks
tabButtons.forEach(btn => {
btn.addEventListener('click', () => switchTab(parseInt(btn.dataset.tab)));
});
// Next/Prev button clicks
nextBtn.addEventListener('click', () => {
if (currentTab < totalTabs) switchTab(currentTab + 1);
});
prevBtn.addEventListener('click', () => {
if (currentTab > 1) switchTab(currentTab - 1);
});
// Form submission
recognitionForm.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(recognitionForm);
const newRecognition = {
recipientName: formData.get('recipientName'),
senderName: formData.get('senderName'),
companyValue: formData.get('companyValue'),
message: formData.get('recognitionMessage'),
timestamp: new Date()
};
recognitions.push(newRecognition);
renderRecognitions();
recognitionForm.reset();
switchTab(2); // Switch to the recognition wall after submission
});
// PDF Download button click
downloadPdfBtn.addEventListener('click', generatePDF);
// --- Initialization ---
recognitions = [...sampleRecognitions];
renderRecognitions();
updateNavButtons();
});