function MainComponent() { const [step, setStep] = useState(1); const [formData, setFormData] = useState({ month: "", hourlyRate: "", workingDays: "", totalWorkingDays: 0, timeEntries: [], clientName: "", clientAddress: "", yourName: "", yourAddress: "", paymentDetails: "", totalWorkHours: 0, totalAmount: 0 }); const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; const calculateWorkingDays = (month)=>{ const year = new Date().getFullYear(); const daysInMonth = new Date(year, months.indexOf(month) + 1, 0).getDate(); let workingDays = 0; for(let day = 1; day <= daysInMonth; day++){ const currentDay = new Date(year, months.indexOf(month), day).getDay(); if (currentDay > 0 && currentDay < 6) { workingDays++; } } return workingDays; }; const handleStep1Submit = (e)=>{ e.preventDefault(); const totalDays = calculateWorkingDays(formData.month); setFormData((prev)=>({ ...prev, totalWorkingDays: totalDays, timeEntries: Array(parseInt(prev.workingDays)).fill({ inTime: "", outTime: "", breakTime: "" }) })); setStep(2); }; const calculateTotalHours = ()=>{ let totalMinutes = 0; let totalBreakMinutes = 0; formData.timeEntries.forEach((entry)=>{ if (entry.inTime && entry.outTime) { const inTime = new Date(`2024-01-01 ${entry.inTime}`); const outTime = new Date(`2024-01-01 ${entry.outTime}`); const diffMinutes = (outTime - inTime) / (1000 * 60); totalMinutes += diffMinutes * formData.totalWorkingDays / formData.workingDays; totalBreakMinutes += parseInt(entry.breakTime || 0) * formData.totalWorkingDays / formData.workingDays; } }); const netMinutes = totalMinutes - totalBreakMinutes; const totalHours = Math.floor(netMinutes / 60); const remainingMinutes = Math.round(netMinutes % 60); const amount = netMinutes / 60 * formData.hourlyRate; return { hours: totalHours, minutes: remainingMinutes, breakHours: Math.floor(totalBreakMinutes / 60), breakMinutes: totalBreakMinutes % 60, amount: amount.toFixed(2) }; }; const saveToLocalStorage = ()=>{ localStorage.setItem("invoiceData", JSON.stringify(formData)); }; const loadFromLocalStorage = ()=>{ const data = localStorage.getItem("invoiceData"); if (data) { setFormData(JSON.parse(data)); } }; const handleDownloadPDF = async ()=>{ const element = document.querySelector(".bg-white"); if (!element || !window.html2pdf) return; const opt = { margin: [ 0.2, 0.2 ], filename: `invoice-${formData.month}-${new Date().getFullYear()}.pdf`, image: { type: "jpeg", quality: 0.98 }, html2canvas: { scale: 2, useCORS: true }, jsPDF: { unit: "in", format: "letter", orientation: "portrait" }, pagebreak: { mode: [ "avoid-all" ] } }; try { await window.html2pdf().set(opt).from(element).save(); } catch (error) { console.error("Error generating PDF:", error); } }; useEffect(()=>{ loadFromLocalStorage(); const script = document.createElement("script"); script.src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"; script.async = true; document.body.appendChild(script); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#ffffff] p-4", __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-[#f8f6f2] p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-8", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, [ 1, 2, 3, 4 ].map((num)=>/*#__PURE__*/ React.createElement("div", { key: num, className: `w-8 h-8 rounded-full flex items-center justify-center ${step >= num ? "bg-[#5dcdf1]" : "bg-gray-300"} text-white`, __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, num))), step === 1 && /*#__PURE__*/ React.createElement("form", { onSubmit: handleStep1Submit, className: "space-y-4", __source: { fileName: "", lineNumber: 142, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "Select Month"), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border rounded", value: formData.month, onChange: (e)=>setFormData((prev)=>({ ...prev, month: e.target.value })), required: true, __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 153, columnNumber: 17 }, __self: this }, "Select Month"), months.map((month)=>/*#__PURE__*/ React.createElement("option", { key: month, value: month, __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }, month)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, "Hourly Rate ($)"), /*#__PURE__*/ React.createElement("input", { type: "number", className: "w-full p-2 border rounded", value: formData.hourlyRate, onChange: (e)=>setFormData((prev)=>({ ...prev, hourlyRate: e.target.value })), required: true, __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 177, columnNumber: 15 }, __self: this }, "Working Days per Week"), /*#__PURE__*/ React.createElement("input", { type: "number", min: "1", max: "7", className: "w-full p-2 border rounded", value: formData.workingDays, onChange: (e)=>setFormData((prev)=>({ ...prev, workingDays: e.target.value })), required: true, __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#5dcdf1] hover:bg-[#1b1624] text-white px-6 py-2 rounded transition-colors", __source: { fileName: "", lineNumber: 193, columnNumber: 13 }, __self: this }, "Next")), step === 2 && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 203, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid gap-4", __source: { fileName: "", lineNumber: 204, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2 items-center", __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }, "Day"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 207, columnNumber: 17 }, __self: this }, "In Time"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, "Out Time"), /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 209, columnNumber: 17 }, __self: this }, "Break (mins)")), Array.from({ length: formData.workingDays }, (_, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "grid grid-cols-4 gap-2 items-center", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 213, columnNumber: 19 }, __self: this }, [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ][i]), /*#__PURE__*/ React.createElement("input", { type: "time", className: "p-2 border rounded", value: formData.timeEntries[i]?.inTime || "", onChange: (e)=>{ const newEntries = [ ...formData.timeEntries ]; newEntries[i] = { ...newEntries[i] || {}, inTime: e.target.value }; setFormData((prev)=>({ ...prev, timeEntries: newEntries })); }, __source: { fileName: "", lineNumber: 216, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "time", className: "p-2 border rounded", value: formData.timeEntries[i]?.outTime || "", onChange: (e)=>{ const newEntries = [ ...formData.timeEntries ]; newEntries[i] = { ...newEntries[i] || {}, outTime: e.target.value }; setFormData((prev)=>({ ...prev, timeEntries: newEntries })); }, __source: { fileName: "", lineNumber: 232, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", placeholder: "Break", className: "p-2 border rounded", value: formData.timeEntries[i]?.breakTime || "", onChange: (e)=>{ const newEntries = [ ...formData.timeEntries ]; newEntries[i] = { ...newEntries[i] || {}, breakTime: e.target.value }; setFormData((prev)=>({ ...prev, timeEntries: newEntries })); }, __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 265, columnNumber: 19 }, __self: this }, (()=>{ const entry = formData.timeEntries[i]; if (entry?.inTime && entry?.outTime) { const inTime = new Date(`2024-01-01 ${entry.inTime}`); const outTime = new Date(`2024-01-01 ${entry.outTime}`); const diffMinutes = (outTime - inTime) / (1000 * 60); const netMinutes = diffMinutes - (parseInt(entry.breakTime) || 0); const hours = Math.floor(netMinutes / 60); const minutes = netMinutes % 60; return `Worked: ${hours}h ${minutes}m`; } return null; })()))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ if (formData.timeEntries[0]) { const firstEntry = formData.timeEntries[0]; const newEntries = Array(parseInt(formData.workingDays)).fill(firstEntry); setFormData((prev)=>({ ...prev, timeEntries: newEntries })); } }, className: "bg-[#5dcdf1] hover:bg-[#1b1624] text-white px-4 py-2 rounded transition-colors", __source: { fileName: "", lineNumber: 283, columnNumber: 15 }, __self: this }, "Copy Monday's Time to All Days")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 301, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#5dcdf1] p-6 rounded-lg shadow-lg text-white", __source: { fileName: "", lineNumber: 302, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 303, columnNumber: 17 }, __self: this }, "Weekly Statistics"), (()=>{ const totals = calculateTotalHours(); const weeklyHours = Math.floor(totals.hours / 4); const weeklyMinutes = Math.floor(totals.minutes / 4); const weeklyAmount = (parseFloat(totals.amount) / 4).toFixed(2); return /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 312, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 313, columnNumber: 23 }, __self: this }, formData.month, " -", " ", Math.floor(formData.totalWorkingDays / 4), " days"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 317, columnNumber: 23 }, __self: this }, "Work Time: ", weeklyHours, "h ", weeklyMinutes, "m"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 320, columnNumber: 23 }, __self: this }, "Break Time: ", Math.floor(totals.breakHours / 4), "h", " ", Math.floor(totals.breakMinutes / 4), "m"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 324, columnNumber: 23 }, __self: this }, "Amount: $", weeklyAmount)); })()), /*#__PURE__*/ React.createElement("div", { className: "bg-[#fcd36b] p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 332, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 333, columnNumber: 17 }, __self: this }, "Bi-Weekly Statistics"), (()=>{ const totals = calculateTotalHours(); const biWeeklyHours = Math.floor(totals.hours / 2); const biWeeklyMinutes = Math.floor(totals.minutes / 2); const biWeeklyAmount = (parseFloat(totals.amount) / 2).toFixed(2); return /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 342, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 343, columnNumber: 23 }, __self: this }, formData.month, " -", " ", Math.floor(formData.totalWorkingDays / 2), " days"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 347, columnNumber: 23 }, __self: this }, "Work Time: ", biWeeklyHours, "h ", biWeeklyMinutes, "m"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 350, columnNumber: 23 }, __self: this }, "Break Time: ", Math.floor(totals.breakHours / 2), "h", " ", Math.floor(totals.breakMinutes / 2), "m"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 354, columnNumber: 23 }, __self: this }, "Amount: $", biWeeklyAmount)); })()), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1b1624] p-6 rounded-lg shadow-lg text-white", __source: { fileName: "", lineNumber: 362, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 363, columnNumber: 17 }, __self: this }, "Monthly Statistics"), (()=>{ const totals = calculateTotalHours(); return /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 367, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 368, columnNumber: 23 }, __self: this }, formData.month, " - ", formData.totalWorkingDays, " days"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 371, columnNumber: 23 }, __self: this }, "Work Time: ", totals.hours, "h ", totals.minutes, "m"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 374, columnNumber: 23 }, __self: this }, "Break Time: ", totals.breakHours, "h ", totals.breakMinutes, "m"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 377, columnNumber: 23 }, __self: this }, "Amount: $", totals.amount)); })())), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 386, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(1), className: "bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-2 rounded transition-colors", __source: { fileName: "", lineNumber: 387, columnNumber: 15 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(3), className: "bg-[#5dcdf1] hover:bg-[#1b1624] text-white px-6 py-2 rounded transition-colors", __source: { fileName: "", lineNumber: 393, columnNumber: 15 }, __self: this }, "Generate Invoice"))), step === 3 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 404, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 405, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 406, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 407, columnNumber: 17 }, __self: this }, "Your Details"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 408, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 409, columnNumber: 19 }, __self: this }, "Your Name"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 border rounded", value: formData.yourName || "", onChange: (e)=>setFormData((prev)=>({ ...prev, yourName: e.target.value })), __source: { fileName: "", lineNumber: 410, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 422, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 423, columnNumber: 19 }, __self: this }, "Your Address"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border rounded", value: formData.yourAddress || "", onChange: (e)=>setFormData((prev)=>({ ...prev, yourAddress: e.target.value })), rows: "3", __source: { fileName: "", lineNumber: 424, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 436, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 437, columnNumber: 19 }, __self: this }, "Payment Details"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border rounded", value: formData.paymentDetails || "", onChange: (e)=>setFormData((prev)=>({ ...prev, paymentDetails: e.target.value })), rows: "3", placeholder: "Bank Account Details / Payment Instructions", __source: { fileName: "", lineNumber: 438, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 453, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 454, columnNumber: 17 }, __self: this }, "Client Details"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 455, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 456, columnNumber: 19 }, __self: this }, "Client Name"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 border rounded", value: formData.clientName, onChange: (e)=>setFormData((prev)=>({ ...prev, clientName: e.target.value })), __source: { fileName: "", lineNumber: 457, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 469, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 470, columnNumber: 19 }, __self: this }, "Client Address"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border rounded", value: formData.clientAddress, onChange: (e)=>setFormData((prev)=>({ ...prev, clientAddress: e.target.value })), rows: "3", __source: { fileName: "", lineNumber: 471, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 483, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 484, columnNumber: 19 }, __self: this }, "Project Name"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2 border rounded", value: formData.projectName || "", onChange: (e)=>setFormData((prev)=>({ ...prev, projectName: e.target.value })), __source: { fileName: "", lineNumber: 485, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 497, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 498, columnNumber: 19 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 border rounded", value: formData.description || "", onChange: (e)=>setFormData((prev)=>({ ...prev, description: e.target.value })), rows: "3", __source: { fileName: "", lineNumber: 499, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mt-8", __source: { fileName: "", lineNumber: 514, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(2), className: "bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-2 rounded transition-colors", __source: { fileName: "", lineNumber: 515, columnNumber: 15 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ saveToLocalStorage(); setStep(4); }, className: "bg-[#5dcdf1] hover:bg-[#1b1624] text-white px-6 py-2 rounded transition-colors", __source: { fileName: "", lineNumber: 521, columnNumber: 15 }, __self: this }, "Save Invoice"))), step === 4 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 535, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 536, columnNumber: 13 }, __self: this }, "Invoice Preview"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow max-w-[800px] mx-auto", __source: { fileName: "", lineNumber: 537, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 538, columnNumber: 15 }, __self: this }, "INVOICE"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-8 mb-6", __source: { fileName: "", lineNumber: 539, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 540, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 541, columnNumber: 19 }, __self: this }, "From:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 542, columnNumber: 19 }, __self: this }, formData.yourName), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-line", __source: { fileName: "", lineNumber: 543, columnNumber: 19 }, __self: this }, formData.yourAddress)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 545, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 546, columnNumber: 19 }, __self: this }, "Bill To:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 547, columnNumber: 19 }, __self: this }, formData.clientName), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-line", __source: { fileName: "", lineNumber: 548, columnNumber: 19 }, __self: this }, formData.clientAddress))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 554, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 555, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 556, columnNumber: 19 }, __self: this }, "Invoice Date:"), " ", new Date().toLocaleDateString()), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 559, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 560, columnNumber: 19 }, __self: this }, "Month:"), " ", formData.month)), /*#__PURE__*/ React.createElement("table", { className: "w-full mb-6", __source: { fileName: "", lineNumber: 564, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 565, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 566, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 text-left", __source: { fileName: "", lineNumber: 567, columnNumber: 21 }, __self: this }, "Project Name"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 text-left", __source: { fileName: "", lineNumber: 568, columnNumber: 21 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 text-right", __source: { fileName: "", lineNumber: 569, columnNumber: 21 }, __self: this }, "Hourly Rate"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 text-right", __source: { fileName: "", lineNumber: 570, columnNumber: 21 }, __self: this }, "Total Hours"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 text-right", __source: { fileName: "", lineNumber: 571, columnNumber: 21 }, __self: this }, "Amount"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 574, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 575, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 576, columnNumber: 21 }, __self: this }, formData.projectName), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 577, columnNumber: 21 }, __self: this }, formData.description), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 text-right", __source: { fileName: "", lineNumber: 578, columnNumber: 21 }, __self: this }, "$", formData.hourlyRate, "/hr"), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 text-right", __source: { fileName: "", lineNumber: 581, columnNumber: 21 }, __self: this }, calculateTotalHours().hours, "h", " ", calculateTotalHours().minutes, "m"), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 text-right", __source: { fileName: "", lineNumber: 585, columnNumber: 21 }, __self: this }, "$", calculateTotalHours().amount))), /*#__PURE__*/ React.createElement("tfoot", { __source: { fileName: "", lineNumber: 590, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "font-bold", __source: { fileName: "", lineNumber: 591, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { colSpan: "4", className: "border px-4 py-2 text-right", __source: { fileName: "", lineNumber: 592, columnNumber: 21 }, __self: this }, "Total Amount Due:"), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2 text-right", __source: { fileName: "", lineNumber: 595, columnNumber: 21 }, __self: this }, "$", calculateTotalHours().amount)))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 602, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 603, columnNumber: 17 }, __self: this }, "Payment Details:"), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-line", __source: { fileName: "", lineNumber: 604, columnNumber: 17 }, __self: this }, formData.paymentDetails)), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 607, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(3), className: "bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-2 rounded transition-colors", __source: { fileName: "", lineNumber: 608, columnNumber: 17 }, __self: this }, "Go Back"), /*#__PURE__*/ React.createElement("button", { onClick: handleDownloadPDF, className: "bg-[#5dcdf1] hover:bg-[#1b1624] text-white px-6 py-2 rounded transition-colors", __source: { fileName: "", lineNumber: 614, columnNumber: 17 }, __self: this }, "Download PDF")))))); }