48 lines
1.6 KiB
React
48 lines
1.6 KiB
React
import { pdf } from '@react-pdf/renderer';
|
|
import { Download } from 'lucide-react';
|
|
import { formatWeekRange } from '../utils/dateUtils';
|
|
import TimesheetPDF from './TimesheetPDF';
|
|
|
|
const PDFExport = ({ weekDays, timeEntries, userName }) => {
|
|
const handleDownload = async () => {
|
|
try {
|
|
const blob = await pdf(
|
|
<TimesheetPDF weekDays={weekDays} timeEntries={timeEntries} userName={userName} />
|
|
).toBlob();
|
|
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = `Coastal_Timesheet_${formatWeekRange(weekDays).replace(/[^\w\s-]/g, '').replace(/\s+/g, '_')}.pdf`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
console.error('Error generating PDF:', error);
|
|
alert('Error generating PDF. Please try again.');
|
|
}
|
|
};
|
|
|
|
const hasEntries = Object.values(timeEntries).some(dayEntries =>
|
|
dayEntries.some(entry => entry.workDescription || entry.hoursWorked || entry.homeowner)
|
|
);
|
|
|
|
return (
|
|
<button
|
|
onClick={handleDownload}
|
|
disabled={!hasEntries}
|
|
className={`flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-colors ${
|
|
hasEntries
|
|
? 'bg-green-600 hover:bg-green-700 text-white'
|
|
: 'bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 cursor-not-allowed'
|
|
}`}
|
|
title={hasEntries ? 'Download a printable PDF of your timesheet' : 'No data to export as PDF'}
|
|
>
|
|
<Download className="h-5 w-5" />
|
|
Download PDF
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default PDFExport; |