${templateId === "modern" ? `

${labels.from}

` : templateId === "classic" ? `

${labels.from}

` : ""}

${invoiceData.companyName || ""}

${invoiceData.companyEmail ? `

${invoiceData.companyEmail}

` : ""}

${(invoiceData.companyAddress || "").replace(/\n/g, "
")}

`; const toBlock = `

${templateId === "modern" ? `

${labels.to}

` : templateId === "classic" ? `

${labels.to}

` : ""}

${invoiceData.clientName || ""}

${invoiceData.clientEmail ? `

${invoiceData.clientEmail}

` : ""}

${(invoiceData.clientAddress || "").replace(/\n/g, "
")}

`; const detailsBlock = `

${templateId === "modern" ? `

${labels.details}

` : templateId === "classic" ? `

${labels.details}

` : ""}

${formatDate3(invoiceData.date)}

${invoiceData.dueDate ? `

${labels.due} ${formatDate3(invoiceData.dueDate)}

` : ""}

${invoiceData.invoiceNumber || ""}

`; if (templateId === "modern") { return `

${fromBlock}${toBlock}${detailsBlock}

`; } if (templateId === "bold") { const topGrid = `

${invoiceData.companyName || ""}

${invoiceData.companyEmail ? `

${invoiceData.companyEmail}

` : ""}${invoiceData.companyAddress ? `

${(invoiceData.companyAddress || "").replace(/\n/g, "
")}

` : ""}

${invoiceData.clientName || ""}

${invoiceData.clientEmail ? `

${invoiceData.clientEmail}

` : ""}${invoiceData.clientAddress ? `

${(invoiceData.clientAddress || "").replace(/\n/g, "
")}

` : ""}

${formatDate3(invoiceData.date)}

${invoiceData.dueDate ? `

${labels.due} ${formatDate3(invoiceData.dueDate)}

` : ""}

${invoiceData.invoiceNumber || ""}

`; const centeredHeader = `

${logoBase64 ? `

` : ""}

${invoiceData.companyName || ""}

${labels.invoice} ${invoiceData.invoiceNumber || ""}

`; return `

${topGrid}${centeredHeader}

`; } if (templateId === "compact") { const header = `

${logoBase64 ? `

` : ""}

${invoiceData.companyName || ""}

${labels.invoice} ${invoiceData.invoiceNumber || ""}

`; const grid = `

${invoiceData.companyName || ""}

${invoiceData.companyEmail ? `

${invoiceData.companyEmail}

` : ""}${invoiceData.companyAddress ? `

${(invoiceData.companyAddress || "").replace(/\n/g, "
")}

` : ""}

${invoiceData.clientName || ""}

${invoiceData.clientEmail ? `

${invoiceData.clientEmail}

` : ""}${invoiceData.clientAddress ? `

${(invoiceData.clientAddress || "").replace(/\n/g, "
")}

` : ""}

${formatDate3(invoiceData.date)}

${invoiceData.dueDate ? `

${labels.due} ${formatDate3(invoiceData.dueDate)}

` : ""}

${invoiceData.invoiceNumber || ""}

`; return `

${header}${grid}

`; } return `

${fromBlock}${toBlock}${detailsBlock}

`; }; // virtual:/apps/web/src/utils/pdfTemplates/itemsTemplates.js init_injected_globals(); var generateItemsHTML = (templateId, labels, invoiceData, formatMoney, sectionSpacing, lineStrong, mutedText, primaryText, isWhiteBG) => { const qtyCol = templateId === "classic" ? ' style="width:80px"' : ""; const rateCol = templateId === "classic" ? ' style="width:120px"' : ""; const amountCol = templateId === "classic" ? ' style="width:288px"' : ""; const headerBorder = templateId === "compact" ? primaryText : lineStrong; const rowBorder = headerBorder; const headerRow = ` ${labels.description} ${labels.qty} ${labels.rate} ${labels.amount} `; const rows = (invoiceData.items || []).map((item, idx) => { const qty = Number(item.quantity || 0); const rate = Number(item.rate || 0); const amount = qty * rate; const zebra = templateId === "compact" && idx % 2 === 1 ? isWhiteBG ? "#FAFAFA" : "#242424" : "transparent"; return ` ${item.description || "Item description"} ${qty} ${formatMoney(rate)} ${formatMoney(amount)} `; }).join(""); return `

${templateId === "classic" ? `` : ""} ${headerRow}${rows}

`; }; // virtual:/apps/web/src/utils/pdfTemplates/totalsTemplates.js init_injected_globals(); var generateTotalsHTML = (templateId, labels, invoiceData, calculations, formatMoney, sectionSpacing, lineStrong, mutedText, primaryText, tintBg) => { if (templateId === "modern") { return `

${labels.subtotal}${formatMoney(calculations.subtotal || 0)}

${Number(invoiceData.discount || 0) > 0 ? `

${labels.discount}-${formatMoney(calculations.discountAmount || 0)}

` : ""} ${Number(invoiceData.taxRate || 0) > 0 ? `

${labels.tax}${formatMoney(calculations.taxAmount || 0)}

` : ""}

${labels.total}${formatMoney(calculations.total || 0)}

`; } if (templateId === "bold") { return `

${labels.subtotal}${formatMoney(calculations.subtotal || 0)}

${Number(invoiceData.discount || 0) > 0 ? `

${labels.discount}-${formatMoney(calculations.discountAmount || 0)}

` : ""} ${Number(invoiceData.taxRate || 0) > 0 ? `

${labels.tax}${formatMoney(calculations.taxAmount || 0)}

` : ""}

${labels.total}${formatMoney(calculations.total || 0)}

`; } if (templateId === "compact") { return `

${labels.subtotal}${formatMoney(calculations.subtotal || 0)}

${Number(invoiceData.discount || 0) > 0 ? `

${labels.discount}-${formatMoney(calculations.discountAmount || 0)}

` : ""} ${Number(invoiceData.taxRate || 0) > 0 ? `

${labels.tax}${formatMoney(calculations.taxAmount || 0)}

` : ""}

${labels.total}${formatMoney(calculations.total || 0)}

`; } return `

${labels.subtotal}${formatMoney(calculations.subtotal || 0)}

${Number(invoiceData.discount || 0) > 0 ? `

${labels.discount}-${formatMoney(calculations.discountAmount || 0)}

` : ""} ${Number(invoiceData.taxRate || 0) > 0 ? `

${labels.tax}${formatMoney(calculations.taxAmount || 0)}

` : ""}

${labels.total}${formatMoney(calculations.total || 0)}

`; }; // virtual:/apps/web/src/utils/pdfTemplates/notesTemplates.js init_injected_globals(); var generateNotesHTML = (templateId, labels, invoiceData, sectionSpacing, lineStrong, mutedText, primaryText) => { if (!invoiceData.notes && !invoiceData.terms) return ""; const topBorder = templateId === "bold" ? `border-top:2px solid ${lineStrong}; padding-top:16px;` : ""; const titleClass = templateId === "bold" ? "upper" : ""; return `

${invoiceData.notes ? `

${labels.notes}

${invoiceData.notes.replace(/\n/g, "
")}

` : ""} ${invoiceData.terms ? `

${labels.terms}

${invoiceData.terms.replace(/\n/g, "
")}

` : ""}

`; }; // virtual:/apps/web/src/utils/pdfTemplates/watermarkTemplate.js init_injected_globals(); var generateWatermarkHTML = (invoiceData, mutedText) => { return ""; }; // virtual:/apps/web/src/utils/pdfStyles.js init_injected_globals(); var generatePDFStyles = (selectedFont, effectiveBgColor, primaryText) => { return ` @page { size: 8.5in 11in; margin: 0; } html, body { width: 8.5in; height: 11in; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { font-family: ${selectedFont.cssFamily}; margin: 0; padding: 0; line-height: 1.5; font-size: 16px; background: ${effectiveBgColor}; color: ${primaryText}; } .page-container { box-sizing: border-box; padding: 32px; width: 8.5in; height: 11in; position: relative; background: ${effectiveBgColor}; } .header { margin-bottom: 32px; display:flex; justify-content: space-between; align-items: center; } .header.classic { align-items: flex-start; } .title-xxl { font-size: 6rem; font-weight: 400; margin: 0; line-height: 1.1; } .title-xl { font-size: 3.75rem; font-weight: 400; margin: 0; line-height: 1.2; text-align: right; } .title-md { font-size: 1.5rem; margin: 0; } .title-sm { font-size: 1.125rem; margin: 0; } .title-xs { font-size: 1rem; margin: 0; } /* Clamp logo to match preview size exactly */ .logo { max-width: 150px; max-height: 75px; width: auto; height: auto; object-fit: contain; border-radius: 12px; } .logo-small { max-width: 150px; max-height: 60px; width: auto; height: auto; object-fit: contain; border-radius: 12px; } .h3 { margin: 0 0 8px 0; font-size: 1rem; font-weight: 500; } .h4 { margin: 0 0 8px 0; font-size: 1.25rem; font-weight: 600; } .text-sm { font-size: 0.875rem; } .space-y > * { margin: 4px 0; } .mb-8 { margin-bottom: 32px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } .text-center { text-align: center; } .text-right { text-align: right; } .table { width: 100%; border-collapse: collapse; } .th { padding: 12px 0; font-size: 0.875rem; font-weight: 500; } .td { padding: 12px 0; font-size: 0.875rem; } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } .flex-end { display: flex; justify-content: flex-end; } .totals { width: 320px; } .totals.compact { width: 288px; } .totals .row { display:flex; justify-content: space-between; padding: 8px 0; font-size: 0.875rem; } .totals .total { display:flex; justify-content: space-between; padding-top: 8px; font-weight: 600; font-size: 1.125rem; margin-top: 8px; } .totals .total.bold { font-size: 1.25rem; font-weight: 700; padding-top: 12px; } .totals .upper { text-transform: uppercase; letter-spacing: 0.04em; } .totals-box { border-radius: 12px; padding: 16px; } .watermark { position: absolute; bottom: 16px; left: 16px; font-size: 28px; line-height: 1.15; } .watermark .brand { font-size: 56px; line-height: 1; font-family: inherit; } `; }; var getDynamicStyles = (templateConfig, paddingValue, headerSpacing, sectionSpacing) => { return ` .page-container { padding: ${paddingValue}; } .header { margin-bottom: ${headerSpacing}; } .watermark { left: ${paddingValue}; bottom: ${paddingValue}; } `; }; // virtual:/apps/web/src/utils/htmlGenerator.js var formatDate2 = (dateString) => formatDate(dateString); var generateInvoiceHTML = async (invoiceData, calculations) => { const templateConfig = getTemplateConfig(invoiceData.template || "classic"); const templateId = templateConfig.id; let accentColor = invoiceData.accentColor || null; if (!accentColor) { const bgUp = (invoiceData.backgroundColor || "").toUpperCase(); if (bgUp !== "#F3F4F6" && bgUp !== "#FFFFFF") { accentColor = invoiceData.backgroundColor; } } const selectedFontId = invoiceData.font || "Inter"; const selectedFont = FONT_MAP[selectedFontId] || FONT_MAP["Inter"]; const inlineFontStyle = await buildInlineFontCSS(selectedFont.google); const labels = getInvoiceLabels(invoiceData); const currencyCode = invoiceData.currency || "USD"; const { formatMoney } = makeMoneyFormatter(currencyCode); let logoBase64 = null; if (invoiceData.companyLogo) { logoBase64 = await getImageAsBase64(invoiceData.companyLogo); } const { effectiveBgColor, lineStrong: themeLineStrong, lineSoft: themeLineSoft, mutedText: themeMutedText, primaryText: themePrimaryText, isWhiteBG, isDarkBG } = getThemeFromBg(invoiceData.backgroundColor); let lineStrong = themeLineStrong; let lineSoft = themeLineSoft; let mutedText = themeMutedText; let primaryText = themePrimaryText; if (accentColor) { mutedText = computeMutedTintBlend(accentColor, themeMutedText, isDarkBG); } let tintBg = "#F3F4F6"; try { if (accentColor) { const baseHex = (accentColor || "#F3F4F6").replace("#", ""); const { r, g, b } = hexToRgb(baseHex); const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; if (luminance >= 0.6) { const { h, s, l } = rgbToHsl(r, g, b); const sNew = Math.min(1, s * 1.05); const lNew = Math.max(0, Math.min(1, l - 0.12)); const { r: rn, g: gn, b: bn } = hslToRgb(h, sNew, lNew); tintBg = `rgb(${rn}, ${gn}, ${bn})`; } else { const { h, s, l } = rgbToHsl(r, g, b); const sNew = Math.max(0, s * 0.9); const lNew = Math.max(l + 0.16, 0.16); const { r: rn, g: gn, b: bn } = hslToRgb(h, sNew, Math.min(1, lNew)); tintBg = `rgb(${rn}, ${gn}, ${bn})`; } } else { tintBg = "#F3F4F6"; } } catch (e) { tintBg = "#F3F4F6"; } const paddingMap = { "p-4": "16px", "p-6": "24px", "p-8": "32px", "p-12": "48px" }; const spacingMap = { "mb-3": "12px", "mb-4": "16px", "mb-6": "24px", "mb-8": "32px", "mb-12": "48px" }; const paddingValue = paddingMap[templateConfig.padding] || "32px"; const headerSpacing = spacingMap[templateConfig.headerSpacing] || "32px"; const sectionSpacing = spacingMap[templateConfig.sectionSpacing] || "24px"; const headerHTML = generateHeaderHTML( templateId, labels, invoiceData, logoBase64 ); const contactHTML = generateContactHTML( templateId, labels, invoiceData, formatDate2, sectionSpacing, primaryText, mutedText, logoBase64, // PASS the same tint background used by totals so Modern's top box matches in the PDF tintBg ); const itemsHTML = generateItemsHTML( templateId, labels, invoiceData, formatMoney, sectionSpacing, lineStrong, mutedText, primaryText, isWhiteBG ); const totalsHTML = generateTotalsHTML( templateId, labels, invoiceData, calculations, formatMoney, sectionSpacing, lineStrong, mutedText, primaryText, tintBg ); const notesHTML = generateNotesHTML( templateId, labels, invoiceData, sectionSpacing, lineStrong, mutedText, primaryText ); const watermarkHTML = generateWatermarkHTML(invoiceData, mutedText); const baseStyles = generatePDFStyles( selectedFont, effectiveBgColor, primaryText ); const dynamicStyles = getDynamicStyles( templateConfig, paddingValue, headerSpacing, sectionSpacing ); return ` ${inlineFontStyle}

${headerHTML} ${contactHTML} ${itemsHTML} ${totalsHTML} ${notesHTML} ${watermarkHTML}

`; }; // virtual:/apps/web/src/hooks/useInvoicePDF.js function useInvoicePDF() { const [isGeneratingPDF, setIsGeneratingPDF] = (0, import_react2.useState)(false); const generatePDF = (0, import_react2.useCallback)(async (invoiceData, calculations) => { setIsGeneratingPDF(true); try { const html = await generateInvoiceHTML(invoiceData, calculations); const response = await fetch("/integrations/pdf-generation/pdf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ source: { html } }) }); if (!response.ok) { throw new Error("Failed to generate PDF"); } const pdfBlob = await response.blob(); const url = URL.createObjectURL(pdfBlob); const a = document.createElement("a"); a.href = url; a.download = `${invoiceData.invoiceNumber}.pdf`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); } catch (error) { console.error("Error generating PDF:", error); alert("Failed to generate PDF. Please try again."); } finally { setIsGeneratingPDF(false); } }, []); return { isGeneratingPDF, generatePDF }; } // virtual:/apps/web/src/hooks/useFontLoader.js init_injected_globals(); var import_react3 = __toESM(require_react()); // virtual:/apps/web/src/constants/fontOptions.js init_injected_globals(); var FONT_OPTIONS = [ { id: "Inter", cssFamily: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif", google: "family=Inter:wght@300;400;500;600;700" }, { id: "Playfair Display", cssFamily: "'Playfair Display', serif", google: "family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700" }, { id: "IBM Plex Mono", cssFamily: "'IBM Plex Mono', monospace", google: "family=IBM+Plex+Mono:wght@300;400;500;600;700" }, { id: "Bebas Neue", cssFamily: "'Bebas Neue', sans-serif", google: "family=Bebas+Neue" }, { id: "DM Serif Display", cssFamily: "'DM Serif Display', serif", google: "family=DM+Serif+Display:ital@0;1" } ]; // virtual:/apps/web/src/hooks/useFontLoader.js function useFontLoader() { (0, import_react3.useEffect)(() => { if (typeof document === "undefined") return; const linkId = "invoice-fonts-link"; if (document.getElementById(linkId)) return; const link = document.createElement("link"); link.id = linkId; link.rel = "stylesheet"; const families = FONT_OPTIONS.map((f) => f.google).join("&"); link.href = `https://fonts.googleapis.com/css2?${families}&display=swap`; document.head.appendChild(link); }, []); } // virtual:/apps/web/src/utils/sentenceCaseLabel.js init_injected_globals(); var KNOWN_CURRENCY_CODES2 = /* @__PURE__ */ new Set([ "USD", "EUR", "GBP", "AUD", "CAD", "JPY", "CNY", "NZD", "CHF", "SEK", "NOK", "DKK", "BRL", "MXN", "ZAR", "HKD", "SGD", "KRW", "RUB", "INR" ]); function sentenceCaseLabel2(input) { if (!input || typeof input !== "string") return input; const trimmed = input.trim(); if (!trimmed) return trimmed; const lower = trimmed.toLowerCase(); const capitalized = lower.replace(/^[a-z]/, (m) => m.toUpperCase()); let result = capitalized.replace(/\b(pdf)\b/gi, "PDF"); result = result.replace(/\b([a-z]{3})\b/gi, (m, p1) => { const up = p1.toUpperCase(); return KNOWN_CURRENCY_CODES2.has(up) ? up : m; }); return result; } // virtual:/apps/web/src/components/InvoiceGenerator/FormPanel.jsx init_injected_globals(); var import_react16 = __toESM(require_react()); // virtual:/apps/web/src/components/Invoice/LogoUpload.jsx init_injected_globals(); var import_react4 = __toESM(require_react()); var import_lucide_react = __toESM(require_lucide_react()); function LogoUpload({ logo, onUpload, onRemove, loading }) { return /* @__PURE__ */ import_react4.default.createElement("div", { className: "mb-8" }, logo ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ import_react4.default.createElement( "input", { type: "file", accept: ".png,.jpg,.jpeg,.svg", onChange: onUpload, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer peer z-10 focus:outline-none focus:ring-0", disabled: loading } ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full h-[128px] rounded-2xl bg-[#F7F7F7] dark:bg-[#121212] flex items-center justify-center cursor-pointer overflow-hidden px-3" }, loading ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-4 h-4 border-2 border-[#707070]/20 border-t-[#707070] rounded-full animate-spin" }) : /* @__PURE__ */ import_react4.default.createElement( "img", { src: logo, alt: "Company logo", className: "max-h-[112px] max-w-full object-contain" } )), /* @__PURE__ */ import_react4.default.createElement( "button", { type: "button", onClick: (e) => { e.stopPropagation(); onRemove(); }, className: "absolute top-2 right-2 w-6 h-6 bg-white text-black rounded-2xl flex items-center justify-center hover:bg-[#F3F4F6] shadow-sm focus:outline-none focus:ring-2 focus:ring-[#8A8A8A]/30 dark:focus:ring-[#8A8A8A]/30 z-20", "aria-label": "Remove logo" }, /* @__PURE__ */ import_react4.default.createElement(import_lucide_react.X, { size: 12 }) )) : ( // Add group so children can respond to hover reliably, independent of the input hover state /* @__PURE__ */ import_react4.default.createElement("div", { className: "relative w-full group" }, /* @__PURE__ */ import_react4.default.createElement( "input", { type: "file", accept: "image/*", onChange: onUpload, className: "peer absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10 focus:outline-none focus:ring-0", disabled: loading } ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full h-[128px] rounded-2xl flex flex-col items-center justify-center cursor-pointer transition-colors bg-transparent group-hover:bg-[#F5F5F5] group-active:bg-[#F0F0F0] dark:group-hover:bg-[#1a1a1a] dark:group-active:bg-[#222222] relative pt-[2px] pr-[5px] pb-[3px] pl-[2px]" }, /* @__PURE__ */ import_react4.default.createElement( "svg", { className: "absolute inset-0 w-full h-full pointer-events-none", "aria-hidden": "true" }, /* @__PURE__ */ import_react4.default.createElement( "rect", { x: "1", y: "1", rx: "16", ry: "16", fill: "none", className: "text-[#CCCCCC] dark:text-[#2A2A2A] transition-opacity opacity-100 group-hover:opacity-0 group-active:opacity-0", stroke: "currentColor", strokeWidth: "2", strokeDasharray: "6 10", strokeLinecap: "round", style: { width: "calc(100% - 2px)", height: "calc(100% - 2px)" } } ), /* @__PURE__ */ import_react4.default.createElement( "rect", { x: "1", y: "1", rx: "16", ry: "16", fill: "none", className: "transition-opacity opacity-0 group-hover:opacity-0 group-active:opacity-0", stroke: "currentColor", strokeWidth: "2", style: { width: "calc(100% - 2px)", height: "calc(100% - 2px)" } } ) ), loading ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-4 h-4 border-2 border-[#707070]/20 border-t-[#707070] rounded-full animate-spin" }) : /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement( import_lucide_react.Upload, { size: 16, className: "text-[#4A4A4A] dark:text-[#C7C7C7] mb-3" } ), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-xs text-[#4A4A4A] dark:text-[#C7C7C7]" }, "Upload logo"), /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-[11px] text-[#6B6B6B] dark:text-[#8A8A8A] mt-0.5" }, "PNG, JPG, or SVG under 5MB")))) )); } // virtual:/apps/web/src/components/Invoice/InvoiceDetailsForm.jsx init_injected_globals(); var import_react5 = __toESM(require_react()); function InvoiceDetailsForm({ invoiceNumber, date, onUpdate }) { const dateInputRef = (0, import_react5.useRef)(null); const openNativePicker = () => { if (typeof window === "undefined") return; try { dateInputRef.current?.scrollIntoView({ block: "nearest", inline: "nearest" }); } catch (_) { } if (dateInputRef.current && typeof dateInputRef.current.showPicker === "function") { try { dateInputRef.current.showPicker(); } catch (_) { } } }; return /* @__PURE__ */ import_react5.default.createElement("div", { className: "mb-8" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Invoice Number")), /* @__PURE__ */ import_react5.default.createElement( "input", { type: "text", value: invoiceNumber, onChange: (e) => onUpdate({ invoiceNumber: e.target.value }), className: "w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white placeholder:text-[#8A8A8A] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors" } )), /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react5.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Date")), /* @__PURE__ */ import_react5.default.createElement( "input", { ref: dateInputRef, type: "date", value: date || "", onChange: (e) => onUpdate({ date: e.target.value }), onFocus: openNativePicker, onClick: openNativePicker, placeholder: "YYYY-MM-DD", className: "w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors", "aria-label": "Invoice Date" } )))), /* @__PURE__ */ import_react5.default.createElement("style", { jsx: true }, ``)); } // virtual:/apps/web/src/components/Invoice/ClientInfoForm.jsx init_injected_globals(); var import_react9 = __toESM(require_react()); // virtual:/apps/web/src/components/AddressAutocomplete.jsx init_injected_globals(); var import_react6 = __toESM(require_react()); function AddressAutocomplete({ value, onChange, placeholder = "123 Main St, Springfield, IL", className = "" }) { const [suggestions, setSuggestions] = (0, import_react6.useState)([]); const [showSuggestions, setShowSuggestions] = (0, import_react6.useState)(false); const [loading, setLoading] = (0, import_react6.useState)(false); const inputRef = (0, import_react6.useRef)(null); const suggestionsRef = (0, import_react6.useRef)(null); const justSelectedRef = (0, import_react6.useRef)(false); const lastSelectedValueRef = (0, import_react6.useRef)(""); const toTitleCase = (str) => { if (!str) return str; return str.replace(/\b([A-Za-z][A-Za-z']*)\b/g, (word) => { if (/^[A-Z]{2,3}$/.test(word)) return word; return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase(); }); }; const formatAddress = (raw) => { if (!raw || typeof raw !== "string") return raw; const parts = raw.split(",").map((p) => p.trim()); const formatted = parts.map((part, idx) => { const withStateUpper = part.replace( /\b([A-Za-z]{2})\b/g, (m) => m.toUpperCase() ); const titled = toTitleCase(withStateUpper); return titled; }); return formatted.join(", "); }; (0, import_react6.useEffect)(() => { if (justSelectedRef.current || value === lastSelectedValueRef.current) { justSelectedRef.current = false; return; } const fetchSuggestions = async () => { if (!value || value.length < 2) { setSuggestions([]); setShowSuggestions(false); return; } setLoading(true); try { const response = await fetch( `/integrations/google-place-autocomplete/autocomplete/json?input=${encodeURIComponent(value)}&radius=50000` ); if (!response.ok) { throw new Error("Failed to fetch suggestions"); } const data = await response.json(); setSuggestions(data.predictions || []); setShowSuggestions((data.predictions || []).length > 0); } catch (error) { console.error("Error fetching address suggestions:", error); setSuggestions([]); setShowSuggestions(false); } finally { setLoading(false); } }; const timeoutId = setTimeout(fetchSuggestions, 300); return () => clearTimeout(timeoutId); }, [value]); (0, import_react6.useEffect)(() => { const handleClickOutside = (event) => { if (suggestionsRef.current && !suggestionsRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) { setShowSuggestions(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); const handleSelectSuggestion = (suggestion) => { const desc = suggestion.description; const formatted = formatAddress(desc); justSelectedRef.current = true; lastSelectedValueRef.current = formatted; onChange(formatted); setShowSuggestions(false); setSuggestions([]); if (inputRef.current) { requestAnimationFrame(() => inputRef.current && inputRef.current.blur()); } }; const handleInputChange = (e) => { lastSelectedValueRef.current = ""; justSelectedRef.current = false; onChange(e.target.value); if (e.target.value.length < 2) { setShowSuggestions(false); setSuggestions([]); } }; const handleKeyDown = (e) => { if (e.key === "Escape") { setShowSuggestions(false); } }; return /* @__PURE__ */ import_react6.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react6.default.createElement( "input", { ref: inputRef, type: "text", value, onChange: handleInputChange, onKeyDown: handleKeyDown, onBlur: () => onChange(formatAddress(value)), onFocus: () => suggestions.length > 0 && setShowSuggestions(true), placeholder, className: `w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white placeholder:text-[#8A8A8A] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors ${className}` } ), loading && /* @__PURE__ */ import_react6.default.createElement("div", { className: "absolute right-3 top-3 text-[#707070] dark:text-[#C7C7C7]" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "animate-spin h-4 w-4 border-2 border-[#0063FF] border-t-transparent rounded-full" }))), showSuggestions && suggestions.length > 0 && /* @__PURE__ */ import_react6.default.createElement( "div", { ref: suggestionsRef, className: "absolute z-50 w-full mt-1 bg-white dark:bg-[#0F0F10] border border-[#E5E5E5] dark:border-[#2A2A2A] rounded-2xl shadow-lg max-h-60 overflow-y-auto" }, suggestions.map((suggestion, index) => /* @__PURE__ */ import_react6.default.createElement( "button", { key: suggestion.place_id, type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelectSuggestion(suggestion), className: "w-full px-3 py-2 text-left hover:bg-[#F9F9F9] dark:hover:bg-[#151515] focus:bg-[#F9F9F9] dark:focus:bg-[#151515] focus:outline-none text-sm border-b border-[#F0F0F0] dark:border-[#1F1F1F] last:border-b-0" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "font-medium text-[#111111] dark:text-white" }, suggestion.structured_formatting?.main_text || suggestion.description), suggestion.structured_formatting?.secondary_text && /* @__PURE__ */ import_react6.default.createElement("div", { className: "text-xs text-[#707070] dark:text-[#C7C7C7] mt-1" }, suggestion.structured_formatting.secondary_text) )) )); } // virtual:/apps/web/src/components/EmailInput.jsx init_injected_globals(); var import_react7 = __toESM(require_react()); var import_lucide_react2 = __toESM(require_lucide_react()); function EmailInput({ value, onChange, onValidationChange, validateEmail, getValidationStatus, isLoading, fieldKey, label = "Email", placeholder = "hello@example.com", className = "" }) { const [debouncedValue, setDebouncedValue] = (0, import_react7.useState)(value); (0, import_react7.useEffect)(() => { const timer = setTimeout(() => { setDebouncedValue(value); }, 500); return () => clearTimeout(timer); }, [value]); (0, import_react7.useEffect)(() => { if (debouncedValue) { validateEmail(debouncedValue, fieldKey); } }, [debouncedValue, validateEmail, fieldKey]); const validationStatus = getValidationStatus(fieldKey); const loading = isLoading(fieldKey); (0, import_react7.useEffect)(() => { if (onValidationChange && validationStatus) { onValidationChange(validationStatus.isValid); } }, [validationStatus, onValidationChange]); const getStatusColor = () => { if (!validationStatus) return ""; if (validationStatus.isValid) return "text-green-600"; if (validationStatus.status === "error") return "text-red-600"; return "text-orange-600"; }; const getStatusIcon = () => { if (loading) { return /* @__PURE__ */ import_react7.default.createElement(import_lucide_react2.Loader2, { className: "w-4 h-4 animate-spin text-blue-500" }); } if (!validationStatus) return null; if (validationStatus.isValid) { return /* @__PURE__ */ import_react7.default.createElement(import_lucide_react2.Check, { className: "w-4 h-4 text-green-600" }); } if (validationStatus.status === "error") { return /* @__PURE__ */ import_react7.default.createElement(import_lucide_react2.AlertCircle, { className: "w-4 h-4 text-red-600" }); } return /* @__PURE__ */ import_react7.default.createElement(import_lucide_react2.X, { className: "w-4 h-4 text-orange-600" }); }; const getStatusMessage = () => { if (!validationStatus || loading) return ""; if (validationStatus.isValid) { return `\u2713 Valid email ${validationStatus.provider ? `(${validationStatus.provider})` : ""}`; } if (validationStatus.status === "error") { return `\u2717 Validation failed: ${validationStatus.error || "Unknown error"}`; } const statusMessages = { undeliverable: "\u2717 Email address is undeliverable", risky: "\u26A0 Email address may be risky", unknown: "? Unable to verify email address", do_not_send: "\u2717 Do not send to this email address" }; return statusMessages[validationStatus.status] || `? ${validationStatus.reason || "Unknown status"}`; }; return /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel(label)), /* @__PURE__ */ import_react7.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react7.default.createElement( "input", { type: "email", value, onChange: (e) => onChange(e.target.value), placeholder, autoCapitalize: "off", autoCorrect: "off", spellCheck: false, autoComplete: "email", inputMode: "email", className: `w-full h-12 px-3 pr-10 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white placeholder:text-[#8A8A8A] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors ${className}` } ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2" }, getStatusIcon())), (validationStatus || loading) && /* @__PURE__ */ import_react7.default.createElement("div", { className: `mt-1 text-xs ${getStatusColor()}` }, loading ? "Validating email..." : getStatusMessage())); } // virtual:/apps/web/src/hooks/useEmailValidation.js init_injected_globals(); var import_react8 = __toESM(require_react()); function useEmailValidation() { const [validationState, setValidationState] = (0, import_react8.useState)({}); const [loading, setLoading] = (0, import_react8.useState)({}); const validateEmail = (0, import_react8.useCallback)(async (email, fieldKey) => { if (!email || !email.includes("@")) { setValidationState((prev) => ({ ...prev, [fieldKey]: null })); return; } setLoading((prev) => ({ ...prev, [fieldKey]: true })); try { const response = await fetch( `/integrations/email-check-2/v1/email/verify?email=${encodeURIComponent(email)}` ); if (!response.ok) { throw new Error("Failed to validate email"); } const result = await response.json(); setValidationState((prev) => ({ ...prev, [fieldKey]: { isValid: result.status === "deliverable", status: result.status, reason: result.reason, domain: result.domain, provider: result.provider } })); } catch (error) { console.error("Email validation error:", error); setValidationState((prev) => ({ ...prev, [fieldKey]: { isValid: false, status: "error", reason: "validation_failed", error: error.message } })); } finally { setLoading((prev) => ({ ...prev, [fieldKey]: false })); } }, []); const getValidationStatus = (0, import_react8.useCallback)( (fieldKey) => { return validationState[fieldKey] || null; }, [validationState] ); const isLoading = (0, import_react8.useCallback)( (fieldKey) => { return loading[fieldKey] || false; }, [loading] ); return { validateEmail, getValidationStatus, isLoading }; } // virtual:/apps/web/src/components/Invoice/ClientInfoForm.jsx function ClientInfoForm({ clientName, clientEmail, clientAddress, onUpdate }) { const { validateEmail, getValidationStatus, isLoading } = useEmailValidation(); return /* @__PURE__ */ import_react9.default.createElement("div", { className: "mb-8" }, /* @__PURE__ */ import_react9.default.createElement("h2", { className: "text-lg font-semibold text-[#111111] dark:text-white mb-4" }, sentenceCaseLabel("Client Information")), /* @__PURE__ */ import_react9.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Client Name")), /* @__PURE__ */ import_react9.default.createElement( "input", { type: "text", value: clientName, onChange: (e) => onUpdate({ clientName: e.target.value }), className: "w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white placeholder:text-[#8A8A8A] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors" } )), /* @__PURE__ */ import_react9.default.createElement( EmailInput, { value: clientEmail, onChange: (value) => onUpdate({ clientEmail: value }), validateEmail, getValidationStatus, isLoading, fieldKey: "clientEmail", label: sentenceCaseLabel("Email"), placeholder: "client@example.com" } ), /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Address")), /* @__PURE__ */ import_react9.default.createElement( AddressAutocomplete, { value: clientAddress, onChange: (value) => onUpdate({ clientAddress: value }), placeholder: "456 Market St, San Francisco, CA" } )))); } // virtual:/apps/web/src/components/Invoice/CompanyInfoForm.jsx init_injected_globals(); var import_react10 = __toESM(require_react()); function CompanyInfoForm({ companyName, companyEmail, companyAddress, onUpdate }) { const { validateEmail, getValidationStatus, isLoading } = useEmailValidation(); return /* @__PURE__ */ import_react10.default.createElement("div", { className: "mb-8" }, /* @__PURE__ */ import_react10.default.createElement("h2", { className: "text-lg font-semibold text-[#111111] dark:text-white mb-4" }, sentenceCaseLabel("Your Information")), /* @__PURE__ */ import_react10.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Company Name")), /* @__PURE__ */ import_react10.default.createElement( "input", { type: "text", value: companyName, onChange: (e) => onUpdate({ companyName: e.target.value }), className: "w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white placeholder:text-[#8A8A8A] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors" } )), /* @__PURE__ */ import_react10.default.createElement( EmailInput, { value: companyEmail, onChange: (value) => onUpdate({ companyEmail: value }), validateEmail, getValidationStatus, isLoading, fieldKey: "companyEmail", label: sentenceCaseLabel("Email"), placeholder: "hello@example.com" } ), /* @__PURE__ */ import_react10.default.createElement("div", null, /* @__PURE__ */ import_react10.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Address")), /* @__PURE__ */ import_react10.default.createElement( AddressAutocomplete, { value: companyAddress, onChange: (value) => onUpdate({ companyAddress: value }), placeholder: "123 Main St, Springfield, IL" } )))); } // virtual:/apps/web/src/components/Invoice/LineItemsForm.jsx init_injected_globals(); var import_react11 = __toESM(require_react()); var import_lucide_react3 = __toESM(require_lucide_react()); function LineItemsForm({ items, onAddItem, onRemoveItem, onUpdateItem }) { const [focusedRateId, setFocusedRateId] = (0, import_react11.useState)(null); return /* @__PURE__ */ import_react11.default.createElement("div", { className: "mb-8" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "mb-4" }, /* @__PURE__ */ import_react11.default.createElement("h2", { className: "text-lg font-semibold text-[#111111] dark:text-white" }, sentenceCaseLabel("Items"))), /* @__PURE__ */ import_react11.default.createElement("div", { className: "space-y-3" }, items.map((item) => { const handleRateChange = (e) => { const raw = e.target.value || ""; const numeric = raw.replace(/[^0-9.]/g, ""); onUpdateItem(item.id, "rate", parseFloat(numeric) || 0); }; const rateIsZero = !item.rate || Number(item.rate) === 0; const zeroTextClass = "text-[#9CA3AF] dark:text-[#6B7280]"; const normalTextClass = "text-[#111111] dark:text-white"; const rateInputTextClass = rateIsZero ? zeroTextClass : normalTextClass; const isRateFieldFocused = focusedRateId === item.id; const rateDisplay = rateIsZero && isRateFieldFocused ? "$" : `$${item.rate}`; return /* @__PURE__ */ import_react11.default.createElement( "div", { key: item.id, className: "border border-[#EAEAEA] dark:border-[#262626] rounded-2xl p-4" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex justify-between items-start mb-3" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ import_react11.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Description")), /* @__PURE__ */ import_react11.default.createElement( "input", { type: "text", value: item.description, onChange: (e) => onUpdateItem(item.id, "description", e.target.value), className: "w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white placeholder:text-[#9CA3AF] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors" } )), items.length > 1 && /* @__PURE__ */ import_react11.default.createElement( "button", { onClick: () => onRemoveItem(item.id), className: "ml-3 p-2 text-[#E14646] hover:bg-[#FEF2F2] dark:hover:bg-[#2A1212] rounded-2xl" }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react3.Trash2, { size: 16 }) )), /* @__PURE__ */ import_react11.default.createElement("div", { className: "grid grid-cols-3 gap-2" }, /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Quantity")), /* @__PURE__ */ import_react11.default.createElement( "input", { type: "number", min: "0", step: "1", value: item.quantity, onChange: (e) => onUpdateItem( item.id, "quantity", parseInt(e.target.value) || 0 ), className: "w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white placeholder:text-[#9CA3AF] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors" } )), /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Rate")), /* @__PURE__ */ import_react11.default.createElement( "input", { type: "text", value: rateDisplay, onChange: handleRateChange, onFocus: () => setFocusedRateId(item.id), onClick: () => setFocusedRateId(item.id), onBlur: () => setFocusedRateId(null), className: `w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm ${rateInputTextClass} placeholder:text-[#9CA3AF] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors` } )), /* @__PURE__ */ import_react11.default.createElement("div", null, /* @__PURE__ */ import_react11.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Amount")), /* @__PURE__ */ import_react11.default.createElement("div", { className: "h-12 px-3 bg-white dark:bg-[#1A1A1A] border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm flex items-center text-[#111111] dark:text-white" }, "$", (item.quantity * item.rate).toFixed(2)))) ); })), /* @__PURE__ */ import_react11.default.createElement("div", { className: "mt-4" }, /* @__PURE__ */ import_react11.default.createElement( "button", { onClick: onAddItem, className: "flex items-center gap-1 text-sm text-[#0063FF] dark:text-[#66A3FF] hover:text-[#0052CC] dark:hover:text-[#7FB3FF] font-medium" }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react3.Plus, { size: 16 }), sentenceCaseLabel("Add item") ))); } // virtual:/apps/web/src/components/Invoice/AdvancedOptionsForm.jsx init_injected_globals(); var import_react12 = __toESM(require_react()); var import_lucide_react4 = __toESM(require_lucide_react()); function AdvancedOptionsForm({ showAdvanced, onToggle, dueDate, taxRate, discount, notes, terms, onUpdate, currency }) { const CURRENCIES = [ { code: "USD", label: "US Dollar", iso2: "us" }, { code: "EUR", label: "Euro", iso2: "eu" }, { code: "GBP", label: "British Pound", iso2: "gb" }, { code: "CAD", label: "Canadian Dollar", iso2: "ca" }, { code: "AUD", label: "Australian Dollar", iso2: "au" }, { code: "JPY", label: "Japanese Yen", iso2: "jp" }, { code: "INR", label: "Indian Rupee", iso2: "in" }, // More popular/major { code: "CHF", label: "Swiss Franc", iso2: "ch" }, { code: "CNY", label: "Chinese Yuan", iso2: "cn" }, { code: "HKD", label: "Hong Kong Dollar", iso2: "hk" }, { code: "SGD", label: "Singapore Dollar", iso2: "sg" }, { code: "SEK", label: "Swedish Krona", iso2: "se" }, { code: "NOK", label: "Norwegian Krone", iso2: "no" }, { code: "DKK", label: "Danish Krone", iso2: "dk" }, { code: "NZD", label: "New Zealand Dollar", iso2: "nz" }, { code: "ZAR", label: "South African Rand", iso2: "za" }, { code: "BRL", label: "Brazilian Real", iso2: "br" }, { code: "MXN", label: "Mexican Peso", iso2: "mx" }, { code: "TRY", label: "Turkish Lira", iso2: "tr" }, { code: "AED", label: "UAE Dirham", iso2: "ae" }, { code: "SAR", label: "Saudi Riyal", iso2: "sa" }, { code: "KRW", label: "South Korean Won", iso2: "kr" }, { code: "TWD", label: "New Taiwan Dollar", iso2: "tw" }, { code: "THB", label: "Thai Baht", iso2: "th" }, { code: "IDR", label: "Indonesian Rupiah", iso2: "id" }, { code: "PHP", label: "Philippine Peso", iso2: "ph" }, { code: "MYR", label: "Malaysian Ringgit", iso2: "my" }, { code: "PLN", label: "Polish Zloty", iso2: "pl" }, { code: "HUF", label: "Hungarian Forint", iso2: "hu" }, { code: "CZK", label: "Czech Koruna", iso2: "cz" }, { code: "ILS", label: "Israeli New Shekel", iso2: "il" }, { code: "ARS", label: "Argentine Peso", iso2: "ar" }, { code: "CLP", label: "Chilean Peso", iso2: "cl" }, { code: "COP", label: "Colombian Peso", iso2: "co" }, { code: "VND", label: "Vietnamese Dong", iso2: "vn" }, { code: "PKR", label: "Pakistani Rupee", iso2: "pk" }, { code: "NGN", label: "Nigerian Naira", iso2: "ng" }, { code: "EGP", label: "Egyptian Pound", iso2: "eg" }, { code: "KES", label: "Kenyan Shilling", iso2: "ke" }, { code: "GHS", label: "Ghanaian Cedi", iso2: "gh" }, { code: "BDT", label: "Bangladeshi Taka", iso2: "bd" }, { code: "LKR", label: "Sri Lankan Rupee", iso2: "lk" }, { code: "RON", label: "Romanian Leu", iso2: "ro" }, { code: "BGN", label: "Bulgarian Lev", iso2: "bg" }, // Added 28 more common currencies { code: "UAH", label: "Ukrainian Hryvnia", iso2: "ua" }, { code: "RSD", label: "Serbian Dinar", iso2: "rs" }, { code: "ISK", label: "Icelandic Krona", iso2: "is" }, { code: "ALL", label: "Albanian Lek", iso2: "al" }, { code: "BAM", label: "Bosnia and Herzegovina Mark", iso2: "ba" }, { code: "MDL", label: "Moldovan Leu", iso2: "md" }, { code: "GEL", label: "Georgian Lari", iso2: "ge" }, { code: "AMD", label: "Armenian Dram", iso2: "am" }, { code: "AZN", label: "Azerbaijani Manat", iso2: "az" }, { code: "KZT", label: "Kazakhstani Tenge", iso2: "kz" }, { code: "UZS", label: "Uzbekistani Som", iso2: "uz" }, { code: "PEN", label: "Peruvian Sol", iso2: "pe" }, { code: "UYU", label: "Uruguayan Peso", iso2: "uy" }, { code: "PYG", label: "Paraguayan Guarani", iso2: "py" }, { code: "BOB", label: "Bolivian Boliviano", iso2: "bo" }, { code: "DOP", label: "Dominican Peso", iso2: "do" }, { code: "GTQ", label: "Guatemalan Quetzal", iso2: "gt" }, { code: "HNL", label: "Honduran Lempira", iso2: "hn" }, { code: "NIO", label: "Nicaraguan Cordoba", iso2: "ni" }, { code: "CRC", label: "Costa Rican Colon", iso2: "cr" }, { code: "JMD", label: "Jamaican Dollar", iso2: "jm" }, { code: "TTD", label: "Trinidad and Tobago Dollar", iso2: "tt" }, { code: "FJD", label: "Fijian Dollar", iso2: "fj" }, { code: "QAR", label: "Qatari Riyal", iso2: "qa" }, { code: "KWD", label: "Kuwaiti Dinar", iso2: "kw" }, { code: "OMR", label: "Omani Rial", iso2: "om" }, { code: "BHD", label: "Bahraini Dinar", iso2: "bh" }, { code: "JOD", label: "Jordanian Dinar", iso2: "jo" } ]; const getFlagUrl = (iso2) => `https://hatscripts.github.io/circle-flags/flags/${iso2}.svg`; const selectedCode = currency || "USD"; const selectedCurrency = CURRENCIES.find((c) => c.code === selectedCode) || CURRENCIES[0]; const selectedFlagUrl = getFlagUrl(selectedCurrency.iso2); const [open, setOpen] = (0, import_react12.useState)(false); const [query, setQuery] = (0, import_react12.useState)(""); const containerRef = (0, import_react12.useRef)(null); const [isTaxFocused, setIsTaxFocused] = (0, import_react12.useState)(false); const [isDiscountFocused, setIsDiscountFocused] = (0, import_react12.useState)(false); (0, import_react12.useEffect)(() => { function onDocClick(e) { if (containerRef.current && !containerRef.current.contains(e.target)) { setOpen(false); } } document.addEventListener("mousedown", onDocClick); return () => document.removeEventListener("mousedown", onDocClick); }, []); const POPULAR_CODES = ["USD", "EUR", "GBP", "CAD", "AUD", "JPY", "INR"]; const popular = (0, import_react12.useMemo)( () => CURRENCIES.filter((c) => POPULAR_CODES.includes(c.code)), [CURRENCIES] ); const others = (0, import_react12.useMemo)( () => CURRENCIES.filter((c) => !POPULAR_CODES.includes(c.code)).sort( (a, b) => a.label.localeCompare(b.label) ), [CURRENCIES] ); const normalizedQuery = query.trim().toLowerCase(); const filterMatch = (c) => c.code.toLowerCase().includes(normalizedQuery) || c.label.toLowerCase().includes(normalizedQuery); const filteredPopular = (0, import_react12.useMemo)( () => normalizedQuery ? popular.filter(filterMatch) : popular, [popular, normalizedQuery] ); const filteredOthers = (0, import_react12.useMemo)( () => normalizedQuery ? others.filter(filterMatch) : others, [others, normalizedQuery] ); const handleChoose = (c) => { onUpdate({ currency: c.code }); setOpen(false); }; const taxDisplay = Number(taxRate) === 0 && isTaxFocused ? "%" : `${taxRate}%`; const handleTaxChange = (e) => { const raw = e.target.value || ""; const numeric = raw.replace(/[^-0-9.]/g, ""); onUpdate({ taxRate: parseFloat(numeric) || 0 }); }; const discountDisplay = Number(discount) === 0 && isDiscountFocused ? "%" : `${discount}%`; const handleDiscountChange = (e) => { const raw = e.target.value || ""; const numeric = raw.replace(/[^-0-9.]/g, ""); onUpdate({ discount: parseFloat(numeric) || 0 }); }; const zeroTextClass = "text-[#9CA3AF] dark:text-[#6B7280]"; const normalTextClass = "text-[#111111]"; const taxIsZero = !taxRate || Number(taxRate) === 0; const discountIsZero = !discount || Number(discount) === 0; const taxInputTextClass = taxIsZero ? zeroTextClass : normalTextClass; const discountInputTextClass = discountIsZero ? zeroTextClass : normalTextClass; const taxInputRef = (0, import_react12.useRef)(null); const discountInputRef = (0, import_react12.useRef)(null); function moveCaretBeforePercent(el) { if (!el) return; const val = el.value || ""; const idx = val.lastIndexOf("%"); const pos = idx > -1 ? idx : val.length; if (typeof window !== "undefined") { window.requestAnimationFrame(() => { try { el.setSelectionRange(pos, pos); } catch (err) { } }); } } const onTaxFocus = () => { setIsTaxFocused(true); moveCaretBeforePercent(taxInputRef.current); }; const onTaxClick = () => { setIsTaxFocused(true); moveCaretBeforePercent(taxInputRef.current); }; const onTaxBlur = () => setIsTaxFocused(false); const onDiscountFocus = () => { setIsDiscountFocused(true); moveCaretBeforePercent(discountInputRef.current); }; const onDiscountClick = () => { setIsDiscountFocused(true); moveCaretBeforePercent(discountInputRef.current); }; const onDiscountBlur = () => setIsDiscountFocused(false); const dueInputRef = (0, import_react12.useRef)(null); const openNativeDuePicker = () => { if (typeof window === "undefined") return; try { dueInputRef.current?.scrollIntoView({ block: "nearest", inline: "nearest" }); } catch (_) { } if (dueInputRef.current && typeof dueInputRef.current.showPicker === "function") { try { dueInputRef.current.showPicker(); } catch (_) { } } }; return /* @__PURE__ */ import_react12.default.createElement("div", { className: "mb-8" }, /* @__PURE__ */ import_react12.default.createElement( "button", { onClick: onToggle, className: "flex items-center gap-1 text-sm font-medium text-[#707070] dark:text-white hover:text-[#111111] dark:hover:text-white mb-4" }, showAdvanced ? /* @__PURE__ */ import_react12.default.createElement(import_lucide_react4.ChevronDown, { size: 16 }) : /* @__PURE__ */ import_react12.default.createElement(import_lucide_react4.ChevronRight, { size: 16 }), sentenceCaseLabel("Advanced") ), showAdvanced && /* @__PURE__ */ import_react12.default.createElement("div", { className: "space-y-4 pl-6" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react12.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Due Date")), /* @__PURE__ */ import_react12.default.createElement( "input", { ref: dueInputRef, type: "date", value: dueDate || "", onChange: (e) => onUpdate({ dueDate: e.target.value }), onFocus: openNativeDuePicker, onClick: openNativeDuePicker, placeholder: "YYYY-MM-DD", className: "w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors", "aria-label": "Invoice Due Date" } )), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Tax Rate")), /* @__PURE__ */ import_react12.default.createElement( "input", { type: "text", value: taxDisplay, onChange: handleTaxChange, ref: taxInputRef, onFocus: onTaxFocus, onClick: onTaxClick, onBlur: onTaxBlur, className: `w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm ${taxInputTextClass} placeholder:text-[#9CA3AF] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors` } ))), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Currency")), /* @__PURE__ */ import_react12.default.createElement("div", { className: "relative", ref: containerRef }, /* @__PURE__ */ import_react12.default.createElement( "img", { src: selectedFlagUrl, alt: `${selectedCurrency.code} flag`, className: "absolute left-2 top-1/2 -translate-y-1/2 w-5 h-5 rounded-full object-cover pointer-events-none select-none" } ), /* @__PURE__ */ import_react12.default.createElement( "button", { type: "button", onClick: () => { setOpen((o) => !o); setQuery(""); }, className: "w-full h-12 pl-9 pr-6 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-left text-[#111111] dark:text-white focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:outline-none focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] hover:bg-white dark:hover:bg-transparent transition-colors" }, selectedCurrency.code, " \u2014 ", selectedCurrency.label ), /* @__PURE__ */ import_react12.default.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-2 flex items-center" }, /* @__PURE__ */ import_react12.default.createElement(import_lucide_react4.ChevronDown, { size: 16, className: "text-[#6B7280]" })), open ? /* @__PURE__ */ import_react12.default.createElement("div", { className: "absolute left-0 right-0 mt-1 bg:white dark:bg-[#1a1a1a] border border-[#E5E7EB] dark:border-[#333333] rounded-2xl shadow-lg z-50 p-2" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "relative mb-2" }, /* @__PURE__ */ import_react12.default.createElement( "input", { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: sentenceCaseLabel("Search currency or code"), className: "w-full h-10 rounded-xl pl-9 pr-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] text-sm text-[#111111] dark:text-white placeholder:text-[#8A8A8A] dark:placeholder:text-[#6B7280] focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none" } ), /* @__PURE__ */ import_react12.default.createElement( import_lucide_react4.Search, { size: 16, className: "absolute left-2 top-1/2 -translate-y-1/2 text-[#6B7280]" } )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "max-h-64 overflow-auto rounded-xl" }, filteredPopular.length > 0 && /* @__PURE__ */ import_react12.default.createElement("div", { className: "py-1" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "px-2 py-1 text-[10px] uppercase tracking-wide text-[#6B7280]" }, sentenceCaseLabel("Popular")), /* @__PURE__ */ import_react12.default.createElement("ul", { className: "px-1" }, filteredPopular.map((c) => { const flagUrl = getFlagUrl(c.iso2); const isSelected = c.code === selectedCode; return /* @__PURE__ */ import_react12.default.createElement("li", { key: c.code }, /* @__PURE__ */ import_react12.default.createElement( "button", { type: "button", onClick: () => handleChoose(c), className: `w-full flex items-center justify-start gap-2 px-2 py-2 rounded-xl text-sm text-left transition-colors ${isSelected ? "bg-[#EFF6FF] text-[#0063FF] dark:bg-[#222222] dark:text-white" : "hover:bg-[#F5F5F5] dark:hover:bg-[#222222] text-[#111111] dark:text-white"}` }, /* @__PURE__ */ import_react12.default.createElement( "img", { src: flagUrl, alt: `${c.code} flag`, className: "w-4 h-4 rounded-full object-cover" } ), /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex flex-col items-start text-left" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "font-semibold leading-tight" }, c.code), /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-[11px] leading-tight text-[#6B7280] dark:text-[#9CA3AF]" }, c.label)) )); }))), filteredPopular.length > 0 && filteredOthers.length > 0 && /* @__PURE__ */ import_react12.default.createElement("div", { className: "h-px bg-[#E5E7EB] dark:bg-[#333333] my-1" }), /* @__PURE__ */ import_react12.default.createElement("div", { className: "py-1" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "px-2 py-1 text-[10px] uppercase tracking-wide text-[#6B7280]" }, sentenceCaseLabel("All others")), filteredOthers.length > 0 ? /* @__PURE__ */ import_react12.default.createElement("ul", { className: "px-1" }, filteredOthers.map((c) => { const flagUrl = getFlagUrl(c.iso2); const isSelected = c.code === selectedCode; return /* @__PURE__ */ import_react12.default.createElement("li", { key: c.code }, /* @__PURE__ */ import_react12.default.createElement( "button", { type: "button", onClick: () => handleChoose(c), className: `w-full flex items-center justify-start gap-2 px-2 py-2 rounded-xl text-sm text-left transition-colors ${isSelected ? "bg-[#EFF6FF] text-[#0063FF] dark:bg-[#222222] dark:text-white" : "hover:bg-[#F5F5F5] dark:hover:bg-[#222222] text-[#111111] dark:text-white"}` }, /* @__PURE__ */ import_react12.default.createElement( "img", { src: flagUrl, alt: `${c.code} flag`, className: "w-4 h-4 rounded-full object-cover" } ), /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex flex-col items-start text-left" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "font-semibold leading-tight" }, c.code), /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-[11px] leading-tight text-[#6B7280] dark:text-[#9CA3AF]" }, c.label)) )); })) : /* @__PURE__ */ import_react12.default.createElement("div", { className: "px-2 py-3 text-xs text-[#6B7280]" }, normalizedQuery ? "No results" : "")))) : null)), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Discount")), /* @__PURE__ */ import_react12.default.createElement( "input", { type: "text", value: discountDisplay, onChange: handleDiscountChange, ref: discountInputRef, onFocus: onDiscountFocus, onClick: onDiscountClick, onBlur: onDiscountBlur, className: `w-full h-12 px-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm ${discountInputTextClass} placeholder:text-[#9CA3AF] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors` } )), /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("label", { className: "block text-xs font-normal text-[#111111] dark:text-[#E5E5E5] mb-1" }, sentenceCaseLabel("Terms & Conditions")), /* @__PURE__ */ import_react12.default.createElement( "textarea", { value: terms, onChange: (e) => onUpdate({ terms: e.target.value }), rows: 3, className: "w-full px-3 py-3 bg-white dark:bg-transparent border border-[#E5E7EB] dark:border-[#3F3F46] rounded-2xl text-sm text-[#111111] dark:text-white placeholder:text-[#8A8A8A] dark:placeholder:text-[#6B7280] focus:bg-white dark:focus:bg-transparent focus:border-transparent focus:ring-inset focus:ring-2 focus:ring-[#0063FF] dark:focus:ring-[#8A8A8A] focus:outline-none hover:bg-white dark:hover:bg-transparent transition-colors resize-none", placeholder: sentenceCaseLabel( "Additional notes for the invoice" ) } ))), /* @__PURE__ */ import_react12.default.createElement("style", { jsx: true }, ``)); } // virtual:/apps/web/src/components/InvoiceGenerator/ColorSelector.jsx init_injected_globals(); var import_react13 = __toESM(require_react()); // virtual:/apps/web/src/constants/presetColors.js init_injected_globals(); var PRESET_COLORS = [ // First color is pure white and should be the default selection "#FFFFFF", // white "#FCEAA5", // yellow "#CEE9FE", // blue "#C3FAD3", // green "#F7D1E8", // pink "#313131" // dark ]; // virtual:/apps/web/src/components/InvoiceGenerator/ColorSelector.jsx var import_lucide_react5 = __toESM(require_lucide_react()); function ColorSelector({ currentColor, onColorChange }) { const currentBg = (currentColor || "#FFFFFF").toLowerCase(); const selectedKey = currentBg; const [isDark, setIsDark] = (0, import_react13.useState)(false); (0, import_react13.useEffect)(() => { if (typeof window === "undefined") return; const root = document.documentElement; const mql = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)"); const apply = () => { try { const explicitDark = root.classList.contains("dark"); const mediaDark = mql ? mql.matches : false; setIsDark(explicitDark || mediaDark); } catch (e) { } }; apply(); if (mql && mql.addEventListener) { mql.addEventListener("change", apply); return () => mql.removeEventListener("change", apply); } else if (mql && mql.addListener) { mql.addListener(apply); return () => mql.removeListener(apply); } }, []); const baseBtnClass = ( // NOTE: switched to a div with role="button" to avoid UA tint/hover in dark mode "absolute inset-0 rounded-full transition-all bg-transparent outline-none ring-0 appearance-none select-none border-0 hover:border-0" ); const buttons = PRESET_COLORS.map((c) => { const key = c.toLowerCase(); const isSelected = key === selectedKey; const isWhite = key === "#ffffff"; const className = isSelected ? `${baseBtnClass} hover:opacity-100` : `${baseBtnClass} hover:opacity-90`; const onActivate = () => { onColorChange({ backgroundColor: c }); }; const bgColor = isWhite ? "#F3F4F6" : c; return ( // Make the selectable element itself the 48x48 wrapper so spacing equals the gap only /* @__PURE__ */ import_react13.default.createElement("div", { key: c, className: "relative h-12 w-12" }, isSelected ? /* @__PURE__ */ import_react13.default.createElement("div", { className: "pointer-events-none absolute -bottom-1 -right-1 z-10" }, /* @__PURE__ */ import_react13.default.createElement( "div", { className: "rounded-full bg-white/95 dark:bg-white shadow-sm flex items-center justify-center", style: { width: 20, height: 20 } }, /* @__PURE__ */ import_react13.default.createElement(import_lucide_react5.Check, { size: 14, className: "text-black", "aria-hidden": "true" }) )) : null, /* @__PURE__ */ import_react13.default.createElement( "div", { role: "button", tabIndex: 0, onMouseDown: (e) => { e.preventDefault(); }, onClick: onActivate, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onActivate(); } }, "aria-label": `Choose ${c}`, "aria-pressed": isSelected, className: `${className} w-full h-full rounded-full transition-transform hover:scale-105 cursor-pointer focus:outline-none focus:ring-0`, style: { backgroundColor: bgColor, WebkitTapHighlightColor: "transparent", border: 0, WebkitAppearance: "none", MozAppearance: "none", appearance: "none", outline: "none", boxShadow: "none", borderColor: "transparent", // Prevent any UA accent/overlay coloring in dark mode accentColor: "transparent" } } )) ); }); return /* @__PURE__ */ import_react13.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ import_react13.default.createElement("div", null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex flex-wrap gap-2 items-start justify-start" }, buttons)), /* @__PURE__ */ import_react13.default.createElement("style", { jsx: true }, ` button { border: 0; outline: none; box-shadow: none; } button:hover, button:focus, button:active { border: 0; outline: none; box-shadow: none; } button::-moz-focus-inner { border: 0; } `)); } // virtual:/apps/web/src/components/InvoiceGenerator/FontSelector.jsx init_injected_globals(); var import_react14 = __toESM(require_react()); var import_lucide_react6 = __toESM(require_lucide_react()); function FontSelector({ currentFont, onFontChange }) { const selectedId = currentFont; const buttons = FONT_OPTIONS.map((opt) => { const isSelected = selectedId === opt.id; const handleClick = () => { onFontChange({ font: opt.id }); }; return /* @__PURE__ */ import_react14.default.createElement( "button", { key: opt.id, type: "button", onMouseDown: (e) => { e.preventDefault(); }, onClick: handleClick, "aria-label": `Choose ${opt.id}`, "aria-pressed": isSelected, className: "relative w-full h-12 rounded-full flex items-center justify-center px-4 transition-colors text-left bg-[#F6F6F6] dark:bg-[#222222] hover:bg-[#EFEFEF] dark:hover:bg-[#2C2C2C] outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 appearance-none select-none border-0 hover:border-0", style: { WebkitTapHighlightColor: "transparent", border: 0, WebkitAppearance: "none", MozAppearance: "none", appearance: "none", outline: "none", boxShadow: "none", borderColor: "transparent" } }, isSelected ? /* @__PURE__ */ import_react14.default.createElement("span", { className: "pointer-events-none absolute bottom-1.5 right-1.5" }, /* @__PURE__ */ import_react14.default.createElement( "span", { className: "rounded-full bg-white/95 dark:bg-white shadow-sm flex items-center justify-center", style: { width: 20, height: 20 } }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react6.Check, { size: 14, className: "text-black", "aria-hidden": "true" }) )) : null, /* @__PURE__ */ import_react14.default.createElement( "span", { style: { fontFamily: opt.cssFamily }, className: "text-[16px] leading-none text-[#111111] dark:text-white" }, "Abc" ) ); }); return /* @__PURE__ */ import_react14.default.createElement("div", { className: "mb-8" }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("div", { className: "grid grid-cols-5 gap-2" }, buttons)), /* @__PURE__ */ import_react14.default.createElement("style", { jsx: true }, ` button { border: 0; outline: none; box-shadow: none; } button:hover, button:focus, button:active { border: 0; outline: none; box-shadow: none; } button::-moz-focus-inner { border: 0; } `)); } // virtual:/apps/web/src/components/InvoiceGenerator/GeneratePDFButton.jsx init_injected_globals(); var import_react15 = __toESM(require_react()); // virtual:/apps/web/src/components/ui/button.jsx init_injected_globals(); var React12 = __toESM(require_react()); // virtual:/apps/web/src/lib/utils.js init_injected_globals(); function cn(...classes) { return classes.filter(Boolean).join(" "); } // virtual:/apps/web/src/components/ui/button.jsx var buttonVariants = { variant: { // Make default white with subtle border, matching the user's provided style default: "border border-gray-300 bg-white text-gray-900 shadow-sm shadow-black/5 hover:bg-gray-50 hover:text-gray-900 dark:border-transparent dark:bg-[#1A1A1A] dark:hover:bg-[#232323]", destructive: "bg-red-600 text-white shadow-sm shadow-black/5 hover:bg-red-700", outline: "border border-gray-300 bg-white shadow-sm shadow-black/5 hover:bg-gray-50 hover:text-gray-900 dark:border-gray-700 dark:bg-[#1A1A1A] dark:hover:bg-[#232323]", secondary: "bg-gray-100 text-gray-900 shadow-sm shadow-black/5 hover:bg-gray-200 dark:bg-[#1F1F1F] dark:hover:bg-[#2A2A2A]", ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-[#232323]", link: "text-[#111111] underline-offset-4 hover:underline" }, size: { default: "h-12 px-4 py-3", sm: "h-10 rounded-2xl px-3 text-xs", lg: "h-14 rounded-2xl px-8", icon: "h-12 w-12" } }; var getButtonClass = ({ variant = "default", size = "default", className }) => { return cn( // Base styles "inline-flex items-center justify-center whitespace-nowrap rounded-2xl text-sm font-medium transition-colors outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-gray-400 dark:focus-visible:outline-gray-600 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:outline-none focus:ring-0 text-[#111111]", // ^ Button text is always dark, even in dark mode buttonVariants.variant[variant], buttonVariants.size[size], className ); }; var Button = React12.forwardRef( ({ className, variant, size, children, asChild = false, ...props }, ref) => { const classes = getButtonClass({ variant, size, className }); if (asChild && React12.isValidElement(children)) { const mergedStyle = { ...children.props.style || {}, // Prevent UA blue tint/overlay, especially in dark mode on Safari/iOS WebkitTapHighlightColor: "transparent", WebkitAppearance: "none", MozAppearance: "none", appearance: "none", outline: "none", boxShadow: "none", accentColor: "transparent", backgroundImage: "none", filter: "none" }; return React12.cloneElement(children, { className: cn(classes, children.props.className), style: mergedStyle, ref, ...props }); } return /* @__PURE__ */ React12.createElement( "button", { className: classes, ref, style: { WebkitTapHighlightColor: "transparent", WebkitAppearance: "none", MozAppearance: "none", appearance: "none", outline: "none", boxShadow: "none", accentColor: "transparent", backgroundImage: "none", filter: "none" }, ...props }, children ); } ); Button.displayName = "Button"; // virtual:/apps/web/src/components/InvoiceGenerator/GeneratePDFButton.jsx var import_lucide_react7 = __toESM(require_lucide_react()); function GeneratePDFButton({ onClick, isGenerating, showShimmer, labelDownload, labelGenerating }) { import_react15.default.useEffect(() => { const handleKeyDown = (e) => { if ((e.metaKey || e.ctrlKey) && e.key === "d" && !isGenerating) { e.preventDefault(); onClick(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [onClick, isGenerating]); return /* @__PURE__ */ import_react15.default.createElement("div", { className: "relative overflow-hidden" }, /* @__PURE__ */ import_react15.default.createElement( "div", { className: `absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full z-10 pointer-events-none ${showShimmer ? "shimmer-overlay" : ""}` } ), /* @__PURE__ */ import_react15.default.createElement( Button, { onClick, disabled: isGenerating, variant: "default", size: "lg", className: "w-full bg-white hover:bg-gray-50 text-gray-900 border border-gray-300 dark:bg-white dark:hover:bg-gray-50 dark:text-gray-900 dark:border-gray-300", style: { // Ensure border renders properly in Safari borderWidth: "1px", borderStyle: "solid", borderColor: "#d1d5db", // gray-300 WebkitAppearance: "none", MozAppearance: "none", appearance: "none", // Force Safari to respect the border boxSizing: "border-box", outline: "none" } }, isGenerating ? /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement( import_lucide_react7.Loader2, { className: "-ms-1 me-2 animate-spin", size: 16, strokeWidth: 2, "aria-hidden": "true" } ), /* @__PURE__ */ import_react15.default.createElement("span", { className: "animate-dots" }, labelGenerating)) : /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement( import_lucide_react7.Download, { className: "-ms-1 me-2 opacity-60", size: 16, strokeWidth: 2, "aria-hidden": "true" } ), labelDownload, /* @__PURE__ */ import_react15.default.createElement("kbd", { className: "-me-1 ms-3 inline-flex h-5 max-h-full items-center rounded border border-gray-300 bg-white px-1 font-[inherit] text-[0.625rem] font-medium text-gray-500 dark:border-gray-300 dark:bg-white dark:text-gray-500" }, "\u2318D")) )); } // virtual:/apps/web/src/utils/useUpload.js init_injected_globals(); var React14 = __toESM(require_react()); function useUpload() { const [loading, setLoading] = React14.useState(false); const upload = React14.useCallback(async (input) => { try { setLoading(true); let response; if ("file" in input && input.file) { const formData = new FormData(); formData.append("file", input.file); response = await fetch("/_create/api/upload/", { method: "POST", body: formData }); } else if ("url" in input) { response = await fetch("/_create/api/upload/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url: input.url }) }); } else if ("base64" in input) { response = await fetch("/_create/api/upload/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ base64: input.base64 }) }); } else { response = await fetch("/_create/api/upload/", { method: "POST", headers: { "Content-Type": "application/octet-stream" }, body: input.buffer }); } if (!response.ok) { if (response.status === 413) { throw new Error("Upload failed: File too large."); } throw new Error("Upload failed"); } const data = await response.json(); return { url: data.url, mimeType: data.mimeType || null }; } catch (uploadError) { if (uploadError instanceof Error) { return { error: uploadError.message }; } if (typeof uploadError === "string") { return { error: uploadError }; } return { error: "Upload failed" }; } finally { setLoading(false); } }, []); return [upload, { loading }]; } // virtual:/apps/web/src/components/InvoiceGenerator/FormPanel.jsx function FormPanel({ invoiceData, updateInvoiceData, addItem, removeItem, updateItem, showAdvanced, setShowAdvanced, isMobilePreviewOpen, setIsMobilePreviewOpen, onGeneratePDF, isGeneratingPDF, showShimmer, labels }) { const [upload, { loading: uploadLoading }] = useUpload(); const handleLogoUpload = (0, import_react16.useCallback)( async (event) => { const file = event.target.files[0]; if (!file) return; try { const result = await upload({ file }); if (result.error) { alert("Failed to upload logo: " + result.error); return; } updateInvoiceData({ companyLogo: result.url }); } catch (error) { console.error("Logo upload error:", error); alert("Failed to upload logo. Please try again."); } }, [upload, updateInvoiceData] ); const removeLogo = (0, import_react16.useCallback)(() => { updateInvoiceData({ companyLogo: "" }); }, [updateInvoiceData]); return /* @__PURE__ */ React.createElement("div", { className: "w-full px-0 py-6 overflow-y-auto overflow-x-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement( ColorSelector, { currentColor: invoiceData.backgroundColor, onColorChange: updateInvoiceData } ), /* @__PURE__ */ React.createElement( FontSelector, { currentFont: invoiceData.font || "Inter", onFontChange: updateInvoiceData } ), /* @__PURE__ */ React.createElement( LogoUpload, { logo: invoiceData.companyLogo, onUpload: handleLogoUpload, onRemove: removeLogo, loading: uploadLoading } ), /* @__PURE__ */ React.createElement( InvoiceDetailsForm, { invoiceNumber: invoiceData.invoiceNumber, date: invoiceData.date, onUpdate: updateInvoiceData } ), /* @__PURE__ */ React.createElement( ClientInfoForm, { clientName: invoiceData.clientName, clientEmail: invoiceData.clientEmail, clientAddress: invoiceData.clientAddress, onUpdate: updateInvoiceData } ), /* @__PURE__ */ React.createElement( CompanyInfoForm, { companyName: invoiceData.companyName, companyEmail: invoiceData.companyEmail, companyAddress: invoiceData.companyAddress, onUpdate: updateInvoiceData } ), /* @__PURE__ */ React.createElement( LineItemsForm, { items: invoiceData.items, onAddItem: addItem, onRemoveItem: removeItem, onUpdateItem: updateItem } ), /* @__PURE__ */ React.createElement( AdvancedOptionsForm, { showAdvanced, onToggle: () => setShowAdvanced(!showAdvanced), dueDate: invoiceData.dueDate, taxRate: invoiceData.taxRate, discount: invoiceData.discount, notes: invoiceData.notes, terms: invoiceData.terms, onUpdate: updateInvoiceData, currency: invoiceData.currency } ), /* @__PURE__ */ React.createElement("div", { className: "mt-4 space-y-3" }, /* @__PURE__ */ React.createElement( GeneratePDFButton, { onClick: onGeneratePDF, isGenerating: isGeneratingPDF, showShimmer, labelDownload: labels.downloadPDF, labelGenerating: labels.generatingPDF } )))); } // virtual:/apps/web/src/components/InvoiceGenerator/PreviewPanel.jsx init_injected_globals(); // virtual:/apps/web/src/components/Invoice/InvoicePreview.jsx init_injected_globals(); var import_react25 = __toESM(require_react()); // virtual:/apps/web/src/hooks/useCurrencyFormatter.js init_injected_globals(); var import_react17 = __toESM(require_react()); function useCurrencyFormatter(currencyCode = "USD") { const intlFormatter = (0, import_react17.useMemo)(() => { try { return new Intl.NumberFormat(void 0, { style: "currency", currency: currencyCode, currencyDisplay: "symbol", maximumFractionDigits: 2 }); } catch (e) { return new Intl.NumberFormat(void 0, { style: "currency", currency: "USD", currencyDisplay: "symbol", maximumFractionDigits: 2 }); } }, [currencyCode]); const resolvedCurrencyCode = (0, import_react17.useMemo)(() => { try { return intlFormatter.resolvedOptions().currency || currencyCode; } catch { return currencyCode; } }, [intlFormatter, currencyCode]); const formatMoney = (value) => { const n = Number(value || 0); const formatted = intlFormatter.format(n); let parts; try { parts = intlFormatter.formatToParts(n); } catch { parts = null; } const currencyPart = parts?.find((p) => p.type === "currency")?.value; const codeUpper = (resolvedCurrencyCode || "").toUpperCase(); if (currencyPart && currencyPart.toUpperCase() === codeUpper) { const withoutCurrency = parts ? parts.filter((p) => p.type !== "currency").map((p) => p.value).join("").trim() : formatted.replace(resolvedCurrencyCode, "").trim(); return `${withoutCurrency} ${resolvedCurrencyCode}`; } return `${formatted} ${resolvedCurrencyCode}`; }; return { formatMoney, resolvedCurrencyCode }; } // virtual:/apps/web/src/hooks/useInvoiceScale.js init_injected_globals(); var import_react18 = __toESM(require_react()); function useInvoiceScale(wrapperRef, baseWidth, baseHeight, desiredScale, ignoreBounds = false, ignoreHeight = false) { const [scale, setScale] = (0, import_react18.useState)(desiredScale); (0, import_react18.useLayoutEffect)(() => { if (typeof window === "undefined") return; const computeScale = () => { if (ignoreBounds) return desiredScale; const el = wrapperRef.current; if (!el) return desiredScale; const rect = el.getBoundingClientRect(); const availableWidth = rect.width || el.clientWidth || 0; const widthScale = availableWidth > 0 ? availableWidth / baseWidth : desiredScale; const parentRect = el.parentElement ? el.parentElement.getBoundingClientRect() : { height: 0 }; const availableHeight = rect.height || parentRect.height || 0; let fitScale = Math.min(desiredScale, widthScale); if (!ignoreHeight && availableHeight > 0) { const heightScale = availableHeight / baseHeight; fitScale = Math.min(fitScale, heightScale * 0.98); } const MIN_SCALE = 0.25; const next2 = Math.max(MIN_SCALE, fitScale); return next2 > 0 ? next2 : desiredScale; }; const next = computeScale(); setScale(next); }, []); (0, import_react18.useEffect)(() => { if (typeof window === "undefined") return; const computeScale = () => { if (ignoreBounds) return desiredScale; const el = wrapperRef.current; if (!el) return desiredScale; const rect = el.getBoundingClientRect(); const availableWidth = rect.width || el.clientWidth || 0; const widthScale = availableWidth > 0 ? availableWidth / baseWidth : desiredScale; const parentRect = el.parentElement ? el.parentElement.getBoundingClientRect() : { height: 0 }; const availableHeight = rect.height || parentRect.height || 0; let fitScale = Math.min(desiredScale, widthScale); if (!ignoreHeight && availableHeight > 0) { const heightScale = availableHeight / baseHeight; fitScale = Math.min(fitScale, heightScale * 0.98); } const MIN_SCALE = 0.25; const next = Math.max(MIN_SCALE, fitScale); return next > 0 ? next : desiredScale; }; const updateScale = () => setScale(computeScale()); window.addEventListener("resize", updateScale); let ro; if ("ResizeObserver" in window) { ro = new ResizeObserver(() => updateScale()); if (wrapperRef.current) ro.observe(wrapperRef.current); } return () => { window.removeEventListener("resize", updateScale); if (ro) ro.disconnect(); }; }, [ wrapperRef, baseWidth, baseHeight, desiredScale, ignoreBounds, ignoreHeight ]); return scale; } // virtual:/apps/web/src/hooks/useInvoiceTheme.js init_injected_globals(); var import_react19 = __toESM(require_react()); function useInvoiceTheme(backgroundColor) { return (0, import_react19.useMemo)(() => { const rawBg = backgroundColor || "#FFFFFF"; const effectiveBgColor = rawBg; const { r, g, b } = hexToRgb((effectiveBgColor || "").replace("#", "")); const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; const isDarkBG = luminance < 0.5; const isWhiteBG = (effectiveBgColor || "").toUpperCase() === "#FFFFFF"; let lineStrong, lineSoft, mutedText, primaryText; if (isWhiteBG) { lineStrong = "#EAEAEA"; lineSoft = "#F7F7F7"; mutedText = "#707070"; primaryText = "#111111"; } else if (isDarkBG) { lineStrong = "rgba(255, 255, 255, 0.28)"; lineSoft = "rgba(255, 255, 255, 0.14)"; mutedText = "rgba(229, 229, 229, 0.7)"; primaryText = "#E5E5E5"; } else { lineStrong = computeColoredLine(effectiveBgColor, 0.45); lineSoft = computeColoredLine(effectiveBgColor, 0.3); mutedText = computeSlightTint(effectiveBgColor); primaryText = "#111111"; } return { effectiveBgColor, lineStrong, lineSoft, mutedText, primaryText, isWhiteBG, isDarkBG }; }, [backgroundColor]); } // virtual:/apps/web/src/components/Invoice/InvoiceHeader.jsx init_injected_globals(); var import_react20 = __toESM(require_react()); function InvoiceHeader({ invoiceNumber, companyLogo, mutedText, label, template, primaryText }) { const headerSpacing = template?.headerSpacing || "mb-8"; const templateId = template?.id || "classic"; if (templateId === "classic") { return /* @__PURE__ */ import_react20.default.createElement("div", { className: `${headerSpacing} flex justify-between items-start pt-8` }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ import_react20.default.createElement( "h1", { className: "text-[6rem] m-0", style: { color: primaryText } }, label )), /* @__PURE__ */ import_react20.default.createElement("div", null, companyLogo && /* @__PURE__ */ import_react20.default.createElement( "img", { src: companyLogo, alt: "Company Logo", className: "max-w-[150px] max-h-[75px] object-contain rounded-2xl" } ))); } if (templateId === "modern") { return /* @__PURE__ */ import_react20.default.createElement( "div", { className: `${headerSpacing} flex justify-between items-center pt-4` }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "-ml-2 -mt-2" }, companyLogo && /* @__PURE__ */ import_react20.default.createElement( "img", { src: companyLogo, alt: "Company Logo", className: "max-w-[150px] max-h-[75px] object-contain rounded-2xl" } )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ import_react20.default.createElement( "h1", { className: "text-[3.75rem] m-0", style: { color: primaryText } }, label, " ", invoiceNumber )) ); } if (templateId === "bold") { return /* @__PURE__ */ import_react20.default.createElement("div", { className: "pt-8" }); } if (templateId === "compact") { return /* @__PURE__ */ import_react20.default.createElement("div", { className: "pt-8" }); } return /* @__PURE__ */ import_react20.default.createElement("div", { className: `${headerSpacing} flex justify-between items-start pt-8` }, /* @__PURE__ */ import_react20.default.createElement("div", null, companyLogo && /* @__PURE__ */ import_react20.default.createElement( "img", { src: companyLogo, alt: "Company Logo", className: "max-w-[150px] max-h-[75px] object-contain rounded-2xl" } )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ import_react20.default.createElement( "h1", { className: "text-[3rem] font-bold m-0", style: { color: primaryText } }, label ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "text-sm", style: { color: mutedText } }, "#", invoiceNumber))); } // virtual:/apps/web/src/components/Invoice/InvoiceContactInfo.jsx init_injected_globals(); var import_react21 = __toESM(require_react()); function InvoiceContactInfo({ yourName, companyName, companyEmail, companyAddress, clientName, clientEmail, clientAddress, date, dueDate, invoiceNumber, mutedText, labels, template, companyLogo, accentColor, primaryText, // NEW: optional override for tinted box background (used for template covers in dark mode) tintBgOverride, // NEW: optional override for tinted box border color (ensures visibility in both light/dark) tintBorderOverride }) { const sectionSpacing = template?.sectionSpacing || "mb-8"; const templateId = template?.id || "classic"; let tintBg = "#F3F4F6"; if (templateId !== "modern" && accentColor) { try { const { r, g, b } = hexToRgb((accentColor || "").replace("#", "")); tintBg = `rgba(${r}, ${g}, ${b}, 0.06)`; } catch (e) { tintBg = "#F3F4F6"; } } const effectiveTintBg = tintBgOverride || tintBg; const defaultBorder = "rgba(17, 17, 17, 0.10)"; const effectiveBorder = tintBorderOverride || defaultBorder; if (templateId === "classic") { return /* @__PURE__ */ import_react21.default.createElement( "div", { className: `grid gap-8 ${sectionSpacing}`, style: { gridTemplateColumns: "1fr 1fr 320px" } }, /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement("h3", { className: "text-sm font-medium mb-2", style: { color: mutedText } }, labels.from), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-sm space-y-1", style: { color: mutedText } }, /* @__PURE__ */ import_react21.default.createElement("p", null, companyName), /* @__PURE__ */ import_react21.default.createElement("p", null, companyEmail), /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, companyAddress))), /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement("h3", { className: "text-sm font-medium mb-2", style: { color: mutedText } }, labels.to), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-sm space-y-1", style: { color: mutedText } }, /* @__PURE__ */ import_react21.default.createElement("p", null, clientName), /* @__PURE__ */ import_react21.default.createElement("p", null, clientEmail), /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, clientAddress))), /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement("h3", { className: "text-sm font-medium mb-2", style: { color: mutedText } }, labels.details), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-sm space-y-1", style: { color: mutedText } }, /* @__PURE__ */ import_react21.default.createElement("p", null, formatDate(date)), dueDate && /* @__PURE__ */ import_react21.default.createElement("p", null, /* @__PURE__ */ import_react21.default.createElement("span", { className: "font-medium" }, labels.due), " ", formatDate(dueDate)), /* @__PURE__ */ import_react21.default.createElement("p", null, invoiceNumber))) ); } if (templateId === "modern") { const accUp = (accentColor || "").toUpperCase(); const isNeutralAccent = !accentColor || accUp === "#FFFFFF" || accUp === "#F3F4F6"; let modernBg = tintBgOverride || "#F3F4F6"; if (!tintBgOverride) { try { const baseHex = (accentColor || "#F3F4F6").replace("#", ""); const { r, g, b } = hexToRgb(baseHex); const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; if (isNeutralAccent) { modernBg = "#F3F4F6"; } else if (luminance >= 0.6) { const { h, s, l } = rgbToHsl(r, g, b); const sNew = Math.min(1, s * 1.05); const lNew = Math.max(0, Math.min(1, l - 0.12)); const { r: rn, g: gn, b: bn } = hslToRgb(h, sNew, lNew); modernBg = `rgb(${rn}, ${gn}, ${bn})`; } else { const { h, s, l } = rgbToHsl(r, g, b); const sNew = Math.max(0, s * 0.9); const lNew = Math.max(l + 0.16, 0.16); const { r: rn, g: gn, b: bn } = hslToRgb(h, sNew, Math.min(1, lNew)); modernBg = `rgb(${rn}, ${gn}, ${bn})`; } } catch (e) { modernBg = "#F3F4F6"; } } return /* @__PURE__ */ import_react21.default.createElement("div", { className: `${sectionSpacing}` }, /* @__PURE__ */ import_react21.default.createElement( "div", { className: "p-6 rounded-2xl", style: { backgroundColor: modernBg, border: "none" // match totals: a single shape, no stroke } }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "grid grid-cols-3 gap-6" }, /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement( "h3", { className: "text-sm font-medium mb-3", style: { color: primaryText } }, labels.from ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-sm space-y-1", style: { color: mutedText } }, /* @__PURE__ */ import_react21.default.createElement("p", null, companyName), /* @__PURE__ */ import_react21.default.createElement("p", null, companyEmail), /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, companyAddress))), /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement( "h3", { className: "text-sm font-medium mb-3", style: { color: primaryText } }, labels.to ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-sm space-y-1", style: { color: mutedText } }, /* @__PURE__ */ import_react21.default.createElement("p", null, clientName), /* @__PURE__ */ import_react21.default.createElement("p", null, clientEmail), /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, clientAddress))), /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement( "h3", { className: "text-sm font-medium mb-3", style: { color: primaryText } }, labels.details ), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-sm space-y-1", style: { color: mutedText } }, /* @__PURE__ */ import_react21.default.createElement("p", null, formatDate(date)), dueDate && /* @__PURE__ */ import_react21.default.createElement("p", null, /* @__PURE__ */ import_react21.default.createElement("span", { className: "font-medium" }, labels.due), " ", formatDate(dueDate)), /* @__PURE__ */ import_react21.default.createElement("p", null, invoiceNumber)))) )); } if (templateId === "bold") { return /* @__PURE__ */ import_react21.default.createElement("div", { className: `${sectionSpacing}` }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "mb-8" }, /* @__PURE__ */ import_react21.default.createElement( "div", { className: "grid grid-cols-3 gap-8 text-sm", style: { color: primaryText } }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react21.default.createElement("p", null, companyName), companyEmail && /* @__PURE__ */ import_react21.default.createElement("p", null, companyEmail), companyAddress && /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, companyAddress)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react21.default.createElement("p", null, clientName), clientEmail && /* @__PURE__ */ import_react21.default.createElement("p", null, clientEmail), clientAddress && /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, clientAddress)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react21.default.createElement("p", null, formatDate(date)), dueDate && /* @__PURE__ */ import_react21.default.createElement("p", null, /* @__PURE__ */ import_react21.default.createElement("span", { className: "font-medium" }, labels.due), " ", formatDate(dueDate)), /* @__PURE__ */ import_react21.default.createElement("p", null, invoiceNumber)) )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-center mb-8 mt-6" }, companyLogo && /* @__PURE__ */ import_react21.default.createElement("div", { className: "mb-4" }, /* @__PURE__ */ import_react21.default.createElement( "img", { src: companyLogo, alt: "Company Logo", className: "max-w-[150px] max-h-[75px] object-contain rounded-2xl mx-auto" } )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react21.default.createElement("h1", { className: "text-6xl", style: { color: primaryText } }, companyName), /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-2xl", style: { color: primaryText } }, "Invoice ", invoiceNumber)))); } if (templateId === "compact") { return /* @__PURE__ */ import_react21.default.createElement("div", { className: `${sectionSpacing}` }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "mb-4" }, companyLogo && /* @__PURE__ */ import_react21.default.createElement("div", { className: "mb-2" }, /* @__PURE__ */ import_react21.default.createElement( "img", { src: companyLogo, alt: "Company Logo", className: "max-w-[80px] max-h-[40px] object-contain rounded-2xl" } )), /* @__PURE__ */ import_react21.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-lg", style: { color: primaryText } }, companyName), /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-base", style: { color: primaryText } }, "Invoice ", invoiceNumber))), /* @__PURE__ */ import_react21.default.createElement( "div", { className: "grid grid-cols-3 gap-6 text-sm", style: { color: primaryText } }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react21.default.createElement("p", null, companyName), companyEmail && /* @__PURE__ */ import_react21.default.createElement("p", null, companyEmail), companyAddress && /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, companyAddress)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react21.default.createElement("p", null, clientName), clientEmail && /* @__PURE__ */ import_react21.default.createElement("p", null, clientEmail), clientAddress && /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, clientAddress)), /* @__PURE__ */ import_react21.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react21.default.createElement("p", null, formatDate(date)), dueDate && /* @__PURE__ */ import_react21.default.createElement("p", null, /* @__PURE__ */ import_react21.default.createElement("span", { className: "font-medium" }, labels.due), " ", formatDate(dueDate)), /* @__PURE__ */ import_react21.default.createElement("p", null, invoiceNumber)) )); } return /* @__PURE__ */ import_react21.default.createElement( "div", { className: `grid gap-8 ${sectionSpacing}`, style: { gridTemplateColumns: "1fr 1fr 320px" } }, /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement("h3", { className: "text-sm font-medium mb-2", style: { color: mutedText } }, labels.from), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-sm space-y-1", style: { color: mutedText } }, /* @__PURE__ */ import_react21.default.createElement("p", null, companyName), /* @__PURE__ */ import_react21.default.createElement("p", null, companyEmail), /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, companyAddress))), /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement("h3", { className: "text-sm font-medium mb-2", style: { color: mutedText } }, labels.to), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-sm space-y-1", style: { color: mutedText } }, /* @__PURE__ */ import_react21.default.createElement("p", null, clientName), /* @__PURE__ */ import_react21.default.createElement("p", null, clientEmail), /* @__PURE__ */ import_react21.default.createElement("p", { className: "whitespace-pre-line" }, clientAddress))), /* @__PURE__ */ import_react21.default.createElement("div", null, /* @__PURE__ */ import_react21.default.createElement("h3", { className: "text-sm font-medium mb-2", style: { color: mutedText } }, labels.details), /* @__PURE__ */ import_react21.default.createElement("div", { className: "text-sm space-y-1", style: { color: mutedText } }, /* @__PURE__ */ import_react21.default.createElement("p", null, formatDate(date)), dueDate && /* @__PURE__ */ import_react21.default.createElement("p", null, /* @__PURE__ */ import_react21.default.createElement("span", { className: "font-medium" }, labels.due), " ", formatDate(dueDate)), /* @__PURE__ */ import_react21.default.createElement("p", null, invoiceNumber))) ); } // virtual:/apps/web/src/components/Invoice/InvoiceItemsTable.jsx init_injected_globals(); var import_react22 = __toESM(require_react()); function InvoiceItemsTable({ items, formatMoney, lineStrong, lineSoft, // kept for compatibility but no longer used for borders mutedText, labels, template, primaryText, // NEW: optional override for row zebra background (used for template covers in dark mode) rowZebraBg }) { const sectionSpacing = template?.sectionSpacing || "mb-8"; const templateId = template?.id || "classic"; const headerBg = "transparent"; const headerTextClass = templateId === "bold" ? "font-semibold" : ""; const qtyColWidth = templateId === "classic" ? "80px" : void 0; const rateColWidth = templateId === "classic" ? "120px" : void 0; const amountColWidth = templateId === "classic" ? "288px" : void 0; const unifiedBorder = templateId === "compact" ? `1px solid ${primaryText || "#111111"}` : `1px solid ${lineStrong}`; return /* @__PURE__ */ import_react22.default.createElement("div", { className: sectionSpacing }, /* @__PURE__ */ import_react22.default.createElement("table", { className: "w-full" }, templateId === "classic" && /* @__PURE__ */ import_react22.default.createElement("colgroup", null, /* @__PURE__ */ import_react22.default.createElement("col", null), /* @__PURE__ */ import_react22.default.createElement("col", { style: { width: qtyColWidth } }), /* @__PURE__ */ import_react22.default.createElement("col", { style: { width: rateColWidth } }), /* @__PURE__ */ import_react22.default.createElement("col", { style: { width: amountColWidth } })), /* @__PURE__ */ import_react22.default.createElement("thead", null, /* @__PURE__ */ import_react22.default.createElement( "tr", { style: { borderBottom: unifiedBorder, background: headerBg } }, /* @__PURE__ */ import_react22.default.createElement( "th", { className: `text-left py-3 text-sm font-medium ${headerTextClass}`, style: { color: mutedText } }, labels.description ), /* @__PURE__ */ import_react22.default.createElement( "th", { className: `text-center py-3 text-sm font-medium ${headerTextClass}`, style: { color: mutedText } }, labels.qty ), /* @__PURE__ */ import_react22.default.createElement( "th", { className: `text-right py-3 text-sm font-medium ${headerTextClass}`, style: { color: mutedText } }, labels.rate ), /* @__PURE__ */ import_react22.default.createElement( "th", { className: `text-right py-3 text-sm font-medium ${headerTextClass}`, style: { color: mutedText } }, labels.amount ) )), /* @__PURE__ */ import_react22.default.createElement("tbody", null, items.map((item, idx) => { const qty = Number(item.quantity || 0); const rate = Number(item.rate || 0); const amount = qty * rate; const zebra = templateId === "compact" && idx % 2 === 1 ? rowZebraBg || "#FAFAFA" : "transparent"; return /* @__PURE__ */ import_react22.default.createElement( "tr", { key: item.id, style: { borderBottom: unifiedBorder, background: zebra } }, /* @__PURE__ */ import_react22.default.createElement("td", { className: "py-3 text-sm", style: { color: primaryText } }, item.description || "Item description"), /* @__PURE__ */ import_react22.default.createElement( "td", { className: "py-3 text-sm text-center", style: { color: primaryText } }, qty ), /* @__PURE__ */ import_react22.default.createElement( "td", { className: "py-3 text-sm text-right", style: { color: primaryText } }, formatMoney(rate) ), /* @__PURE__ */ import_react22.default.createElement( "td", { className: "py-3 text-sm text-right", style: { color: primaryText } }, formatMoney(amount) ) ); })))); } // virtual:/apps/web/src/components/Invoice/InvoiceTotals.jsx init_injected_globals(); var import_react23 = __toESM(require_react()); function InvoiceTotals({ calculations, discount, taxRate, formatMoney, lineStrong, mutedText, labels, template, primaryText, // Accept accentColor via spread props from parent (InvoicePreview passes it into child props indirectly) accentColor, // NEW: optional override for tinted box background (used in template covers dark mode) tintBgOverride, // NEW: optional override for border color of the totals box (keeps shape visible on any background) tintBorderOverride }) { const sectionSpacing = template?.sectionSpacing || "mb-8"; const templateId = template?.id || "classic"; let tintBg = "#F3F4F6"; if (templateId !== "modern" && accentColor) { try { const { r, g, b } = hexToRgb((accentColor || "").replace("#", "")); tintBg = `rgba(${r}, ${g}, ${b}, 0.06)`; } catch (e) { tintBg = "#F3F4F6"; } } const effectiveTintBg = tintBgOverride || tintBg; const effectiveBorder = tintBorderOverride || lineStrong; if (templateId === "modern") { const accUp = (accentColor || "").toUpperCase(); const isNeutralAccent = !accentColor || accUp === "#FFFFFF" || accUp === "#F3F4F6"; let modernBg = "#F3F4F6"; if (!isNeutralAccent) { try { const baseHex = (accentColor || "#F3F4F6").replace("#", ""); const { r, g, b } = hexToRgb(baseHex); const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255; if (luminance >= 0.6) { const { h, s, l } = rgbToHsl(r, g, b); const sNew = Math.min(1, s * 1.05); const lNew = Math.max(0, Math.min(1, l - 0.12)); const { r: rn, g: gn, b: bn } = hslToRgb(h, sNew, lNew); modernBg = `rgb(${rn}, ${gn}, ${bn})`; } else { const { h, s, l } = rgbToHsl(r, g, b); const sNew = Math.max(0, s * 0.9); const lNew = Math.max(l + 0.16, 0.16); const { r: rn, g: gn, b: bn } = hslToRgb(h, sNew, Math.min(1, lNew)); modernBg = `rgb(${rn}, ${gn}, ${bn})`; } } catch (e) { modernBg = "#F3F4F6"; } } return /* @__PURE__ */ import_react23.default.createElement("div", { className: `${sectionSpacing} flex justify-end` }, /* @__PURE__ */ import_react23.default.createElement( "div", { className: "w-80 rounded-2xl p-4 space-y-2", style: { backgroundColor: tintBgOverride || modernBg, border: "none" // no borders per request } }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between text-sm" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.subtotal), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.subtotal))), discount > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between text-sm" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.discount), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, "-", formatMoney(calculations.discountAmount))), taxRate > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between text-sm" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.tax), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.taxAmount))), /* @__PURE__ */ import_react23.default.createElement( "div", { className: "flex justify-between text-lg font-semibold pt-2", style: { borderTop: `2px solid ${lineStrong}` } }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, labels.total), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.total)) ) )); } if (templateId === "bold") { return /* @__PURE__ */ import_react23.default.createElement("div", { className: `${sectionSpacing} flex justify-end` }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "w-80 space-y-2" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between text-sm" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.subtotal), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.subtotal))), discount > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between text-sm" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.discount), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, "-", formatMoney(calculations.discountAmount))), taxRate > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between text-sm" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.tax), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.taxAmount))), /* @__PURE__ */ import_react23.default.createElement( "div", { className: "flex justify-between text-xl font-bold pt-3", style: { borderTop: `3px solid ${lineStrong}` } }, /* @__PURE__ */ import_react23.default.createElement( "span", { className: "uppercase tracking-wide", style: { color: primaryText } }, labels.total ), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.total)) ))); } if (templateId === "compact") { return /* @__PURE__ */ import_react23.default.createElement("div", { className: `${sectionSpacing} flex justify-end text-sm` }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "w-72 space-y-1" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.subtotal), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.subtotal))), discount > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.discount), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, "-", formatMoney(calculations.discountAmount))), taxRate > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.tax), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.taxAmount))), /* @__PURE__ */ import_react23.default.createElement( "div", { className: "flex justify-between font-semibold pt-1", style: { borderTop: `1px solid ${lineStrong}` } }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, labels.total), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.total)) ))); } return /* @__PURE__ */ import_react23.default.createElement("div", { className: `flex justify-end ${sectionSpacing}` }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "w-80 space-y-2" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between text-sm" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.subtotal), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.subtotal))), discount > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between text-sm" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.discount), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, "-", formatMoney(calculations.discountAmount))), taxRate > 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex justify-between text-sm" }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: mutedText } }, labels.tax), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.taxAmount))), /* @__PURE__ */ import_react23.default.createElement( "div", { className: "flex justify-between text-lg font-semibold pt-2", style: { borderTop: `2px solid ${lineStrong}` } }, /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, labels.total), /* @__PURE__ */ import_react23.default.createElement("span", { style: { color: primaryText } }, formatMoney(calculations.total)) ))); } // virtual:/apps/web/src/components/Invoice/InvoiceNotesTerms.jsx init_injected_globals(); var import_react24 = __toESM(require_react()); function InvoiceNotesTerms({ notes, terms, mutedText, labels, template, primaryText }) { if (!notes && !terms) return null; const sectionSpacing = template?.sectionSpacing || "mb-8"; const templateId = template?.id || "classic"; const isClassic = templateId === "classic"; const headingColor = isClassic ? mutedText : primaryText; const headingMarginClass = templateId === "modern" ? "mb-3" : "mb-2"; return /* @__PURE__ */ import_react24.default.createElement("div", { className: `space-y-4 ${sectionSpacing}` }, notes && /* @__PURE__ */ import_react24.default.createElement("div", null, /* @__PURE__ */ import_react24.default.createElement( "h3", { className: `text-sm font-medium ${headingMarginClass}`, style: { color: headingColor } }, labels.notes ), /* @__PURE__ */ import_react24.default.createElement( "p", { className: "text-sm whitespace-pre-line", style: { color: mutedText } }, notes )), terms && /* @__PURE__ */ import_react24.default.createElement("div", null, /* @__PURE__ */ import_react24.default.createElement( "h3", { className: `text-sm font-medium ${headingMarginClass}`, style: { color: headingColor } }, labels.terms ), /* @__PURE__ */ import_react24.default.createElement( "p", { className: "text-sm whitespace-pre-line", style: { color: mutedText } }, terms ))); } // virtual:/apps/web/src/components/Invoice/InvoicePreview.jsx function InvoicePreview({ invoiceData, calculations, inTemplateCard = false, forceWhiteBackground = false, // NEW: allow external callers (like the right preview panel) to scale the page further scaleMultiplier = 1 }) { const [isMobile, setIsMobile] = (0, import_react25.useState)(false); const [cardPageBg, setCardPageBg] = (0, import_react25.useState)(null); (0, import_react25.useEffect)(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768); }; checkMobile(); window.addEventListener("resize", checkMobile); return () => window.removeEventListener("resize", checkMobile); }, []); const baseWidth = 8.5 * 96; const baseHeight = 11 * 96; const baseCardScale = isMobile ? 0.35 * 0.7 : 0.5; const desiredScale = inTemplateCard ? baseCardScale : 1.7; const isCard = !!inTemplateCard; const isDarkMode = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; const selectedFontId = isCard ? "Inter" : invoiceData.font || "Inter"; const selectedFont = FONT_MAP[selectedFontId] || FONT_MAP["Inter"]; const templateConfig = getTemplateConfig(invoiceData.template || "classic"); const templateId = templateConfig.id; const accentColor = (() => { if (isCard) { return null; } const userAccent = invoiceData.accentColor; if (userAccent) return userAccent; const bg = (invoiceData.backgroundColor || "").toUpperCase(); if (bg === "#F3F4F6" || bg === "#FFFFFF") return null; return invoiceData.backgroundColor; })(); const currencyCode = isCard ? "USD" : invoiceData.currency || "USD"; const { formatMoney } = useCurrencyFormatter(currencyCode); const wrapperRef = (0, import_react25.useRef)(null); const ignoreHeight = !isCard && !forceWhiteBackground ? true : false; const scale = useInvoiceScale( wrapperRef, baseWidth, baseHeight, desiredScale, false, // keep template cards bounded and main preview width-bounded ignoreHeight ); const MOBILE_CARD_EXTRA_SHRINK = 0.6; const DESKTOP_CARD_SHRINK = 0.405; const cardPostFitShrink = isMobile ? DESKTOP_CARD_SHRINK * MOBILE_CARD_EXTRA_SHRINK : DESKTOP_CARD_SHRINK; const nonCardPostFitShrink = 0.85; const baseDisplayScale = isCard ? scale * cardPostFitShrink : scale * nonCardPostFitShrink; const displayScale = baseDisplayScale * scaleMultiplier; const theme = useInvoiceTheme(invoiceData.backgroundColor); const effectiveBgColor = theme.effectiveBgColor; let lineStrong = isCard ? isDarkMode ? "rgba(255,255,255,0.16)" : "#E5E7EB" : theme.lineStrong; let lineSoft = isCard ? isDarkMode ? "rgba(255,255,255,0.08)" : "#F3F4F6" : theme.lineSoft; const mutedText = isCard ? isDarkMode ? "rgba(255, 255, 255, 0.66)" : "rgba(0, 0, 0, 0.66)" : theme.mutedText; let primaryText = isCard && isDarkMode ? "#FFFFFF" : theme.primaryText; let tintBgOverride = void 0; let tintBorderOverride = void 0; const rowZebraBg = isCard ? isDarkMode ? "rgba(255,255,255,0.10)" : void 0 : isDarkMode ? "#202020" : void 0; if (!isCard && templateId !== "modern") { tintBgOverride = isDarkMode ? "rgba(255,255,255,0.06)" : "#F7F7F7"; tintBorderOverride = void 0; } if (isCard && isDarkMode) { tintBgOverride = "rgba(255,255,255,0.10)"; } const sampleInvoiceData = isCard ? { template: templateId, font: "Inter", // CHANGE: keep background neutral; page color below will reflect dark mode backgroundColor: "#FFFFFF", // Removed yourName so it never appears on template covers companyName: "Acme Studio", companyEmail: "billing@acmestudio.com", companyAddress: "123 Market Street\nSan Francisco, CA 94103", clientName: "Taylor Smith", clientEmail: "taylor@clientco.com", clientAddress: "456 Park Ave\nNew York, NY 10022", date: "2025-01-15", dueDate: "2025-01-30", invoiceNumber: "INV-001", items: [ { id: "1", description: "Website Design", quantity: 1, rate: 1200 }, { id: "2", description: "Hosting (12 months)", quantity: 1, rate: 240 }, { id: "3", description: "Maintenance", quantity: 12, rate: 50 } ], discount: 10, // percent taxRate: 8.5, // percent notes: "Thanks for your business.", terms: "Payment due within 15 days.", // watermark fields removed from sample; watermark no longer shown companyLogo: null } : null; let effectiveCalculations = calculations; if (isCard && sampleInvoiceData) { const subtotal = sampleInvoiceData.items.reduce( (sum, it) => sum + Number(it.quantity || 0) * Number(it.rate || 0), 0 ); const discountAmount = sampleInvoiceData.discount ? subtotal * Number(sampleInvoiceData.discount) / 100 : 0; const taxable = subtotal - discountAmount; const taxAmount = sampleInvoiceData.taxRate ? taxable * Number(sampleInvoiceData.taxRate) / 100 : 0; const total = taxable + taxAmount; effectiveCalculations = { subtotal, discountAmount, taxAmount, total }; } const labels = getInvoiceLabels( isCard && sampleInvoiceData ? sampleInvoiceData : invoiceData ); const scaledWidth = Math.round(baseWidth * displayScale); const scaledHeight = Math.round(baseHeight * displayScale); (0, import_react25.useEffect)(() => { if (!isCard) return; if (typeof window === "undefined") return; const el = wrapperRef.current; if (!el) return; const findParentBg = (node) => { let cur = node.parentElement; let safety = 0; while (cur && safety < 8) { const cs = window.getComputedStyle(cur); const bg = cs && cs.backgroundColor; if (bg && bg !== "transparent" && bg !== "rgba(0, 0, 0, 0)") { return bg; } cur = cur.parentElement; safety++; } return null; }; const toDarker = (rgbStr, percent = 6) => { const m = /rgba?$(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([0-9.]+))?$/i.exec( rgbStr || "" ); let r, g, b; if (m) { r = parseInt(m[1], 10); g = parseInt(m[2], 10); b = parseInt(m[3], 10); } else { try { const hex = (rgbStr || "").trim(); const parsed = hexToRgb ? hexToRgb(hex) : null; if (parsed) { r = parsed.r; g = parsed.g; b = parsed.b; } } catch { } } if (typeof r !== "number") { return isDarkMode ? "#141414" : "#ECECEC"; } const delta = Math.round(255 * (percent / 100)); const rr = Math.max(0, r - delta); const gg = Math.max(0, g - delta); const bb = Math.max(0, b - delta); return `rgb(${rr}, ${gg}, ${bb})`; }; const toLighter = (rgbStr, percent = 8) => { const m = /rgba?$(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([0-9.]+))?$/i.exec( rgbStr || "" ); let r, g, b; if (m) { r = parseInt(m[1], 10); g = parseInt(m[2], 10); b = parseInt(m[3], 10); } else { try { const hex = (rgbStr || "").trim(); const parsed = hexToRgb ? hexToRgb(hex) : null; if (parsed) { r = parsed.r; g = parsed.g; b = parsed.b; } } catch { } } if (typeof r !== "number") { return "#1B1B1B"; } const delta = Math.round(255 * (percent / 100)); const rr = Math.min(255, r + delta); const gg = Math.min(255, g + delta); const bb = Math.min(255, b + delta); return `rgb(${rr}, ${gg}, ${bb})`; }; const parentBg = findParentBg(el) || (isDarkMode ? "rgb(26, 26, 26)" : "rgb(243, 243, 243)"); const adjusted = isDarkMode ? toLighter(parentBg, 8) : toDarker(parentBg, 6); setCardPageBg(adjusted); }, [isCard, isDarkMode]); const pageBackground = (() => { if (forceWhiteBackground) return "#FFFFFF"; if (inTemplateCard) { if (!isDarkMode) { return "#FFFFFF"; } return cardPageBg || "#1B1B1B"; } return effectiveBgColor; })(); const pageStyle = { width: `${baseWidth}px`, minHeight: `${baseHeight}px`, transform: `scale(${displayScale})`, transformOrigin: "top left", backgroundColor: pageBackground, fontFamily: selectedFont.cssFamily, // In dark mode for cards, text colors are handled via props color: void 0 }; const data = isCard && sampleInvoiceData ? sampleInvoiceData : invoiceData; const wrapperClass = inTemplateCard ? "w-full h-full flex items-center justify-center" : "w-full h-full flex items-center justify-center"; return /* @__PURE__ */ import_react25.default.createElement("div", { ref: wrapperRef, className: wrapperClass }, /* @__PURE__ */ import_react25.default.createElement( "div", { className: "", style: { width: `${scaledWidth}px`, height: `${scaledHeight}px` } }, /* @__PURE__ */ import_react25.default.createElement( "div", { className: `bg-white dark:bg-[#161616] relative ${// CHANGE: make template previews more rounded and ensure content clips to the rounded corners inTemplateCard ? "rounded-3xl overflow-hidden" : "rounded-xl"}`, style: pageStyle }, /* @__PURE__ */ import_react25.default.createElement("div", { className: `${templateConfig.padding}` }, /* @__PURE__ */ import_react25.default.createElement( InvoiceHeader, { invoiceNumber: data.invoiceNumber, companyLogo: data.companyLogo, mutedText, label: labels.invoice, template: templateConfig, primaryText } ), /* @__PURE__ */ import_react25.default.createElement( InvoiceContactInfo, { yourName: data.yourName, companyName: data.companyName, companyEmail: data.companyEmail, companyAddress: data.companyAddress, clientName: data.clientName, clientEmail: data.clientEmail, clientAddress: data.clientAddress, date: data.date, dueDate: data.dueDate, invoiceNumber: data.invoiceNumber, mutedText, labels, template: templateConfig, companyLogo: data.companyLogo, accentColor, primaryText, tintBgOverride, tintBorderOverride } ), /* @__PURE__ */ import_react25.default.createElement( InvoiceItemsTable, { items: data.items, formatMoney, lineStrong, lineSoft, mutedText, labels, template: templateConfig, primaryText, rowZebraBg } ), /* @__PURE__ */ import_react25.default.createElement( InvoiceTotals, { calculations: effectiveCalculations, discount: data.discount, taxRate: data.taxRate, formatMoney, lineStrong, mutedText, labels, template: templateConfig, primaryText, accentColor, tintBgOverride, tintBorderOverride } ), /* @__PURE__ */ import_react25.default.createElement( InvoiceNotesTerms, { notes: data.notes, terms: data.terms, mutedText, labels, template: templateConfig, primaryText } )) ) )); } // virtual:/apps/web/src/components/InvoiceGenerator/PreviewPanel.jsx var import_lucide_react8 = __toESM(require_lucide_react()); function PreviewPanel({ invoiceData, calculations, scaleMultiplier = 1, onTemplateChange }) { const handleChange = (e) => { const value = e.target.value; if (onTemplateChange) { onTemplateChange({ template: value }); } }; return ( // Show preview on large screens; remove any inner rounded/boxed wrapper /* @__PURE__ */ React.createElement("div", { className: "hidden lg:block relative w-full h-full" }, /* @__PURE__ */ React.createElement("div", { className: "absolute top-5 left-5 z-10 relative" }, /* @__PURE__ */ React.createElement("label", { className: "sr-only", htmlFor: "template-select" }, "Template"), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement( "select", { id: "template-select", value: invoiceData?.template || "classic", onChange: handleChange, className: "text-sm rounded-full border border-zinc-300 dark:border-zinc-600 bg-transparent pl-3 pr-10 py-1.5 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-400/40 dark:focus:ring-zinc-500/40 appearance-none" }, Object.values(INVOICE_TEMPLATES).map((tpl) => /* @__PURE__ */ React.createElement("option", { key: tpl.id, value: tpl.id }, tpl.id === "classic" ? "Default template" : tpl.name)) ), /* @__PURE__ */ React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-2 flex items-center" }, /* @__PURE__ */ React.createElement( import_lucide_react8.ChevronDown, { size: 16, className: "text-[#111111] dark:text-[#E5E5E5]" } )))), /* @__PURE__ */ React.createElement( InvoicePreview, { invoiceData, calculations, scaleMultiplier } )) ); } // virtual:/apps/web/src/app/invoice/page.jsx function InvoiceGenerator() { const [showAdvanced, setShowAdvanced] = (0, import_react26.useState)(false); const [showShimmer, setShowShimmer] = (0, import_react26.useState)(false); const leftScrollRef = (0, import_react26.useRef)(null); const { invoiceData, updateInvoiceData, addItem, removeItem, updateItem, calculations } = useInvoiceData(); const { isGeneratingPDF, generatePDF } = useInvoicePDF(); useFontLoader(); const handleGeneratePDF = async () => { setShowShimmer(true); setTimeout(() => setShowShimmer(false), 800); await generatePDF(invoiceData, calculations); }; const labels = { preview: sentenceCaseLabel2("Preview"), close: sentenceCaseLabel2("Close"), downloadPDF: sentenceCaseLabel2("Download PDF"), generatingPDF: sentenceCaseLabel2("Generating PDF...") // removeWatermark and processing labels removed as premium features are gone }; (0, import_react26.useEffect)(() => { const handleWheel = (e) => { const container = leftScrollRef.current; if (!container) return; if (container.contains(e.target)) { return; } const dy = e.deltaY || 0; const dx = e.deltaX || 0; if (dy === 0 && dx === 0) return; try { container.scrollBy({ top: dy, left: dx, behavior: "auto" }); e.preventDefault(); } catch (_) { } }; window.addEventListener("wheel", handleWheel, { passive: false }); return () => { window.removeEventListener("wheel", handleWheel); }; }, []); (0, import_react26.useEffect)(() => { const handleKeyDown = (e) => { const container = leftScrollRef.current; if (!container) return; const active = typeof document !== "undefined" ? document.activeElement : null; const isTyping = !!active && (active.tagName === "INPUT" || active.tagName === "TEXTAREA" || active.isContentEditable || active.getAttribute?.("role") === "textbox"); if (isTyping) return; const line = 40; const page = Math.max(200, Math.floor(container.clientHeight * 0.9)); let delta = 0; switch (e.key) { case "ArrowDown": delta = line; break; case "ArrowUp": delta = -line; break; case "PageDown": delta = page; break; case "PageUp": delta = -page; break; case " ": delta = e.shiftKey ? -page : page; break; case "Home": delta = -container.scrollTop; break; case "End": delta = container.scrollHeight - container.clientHeight - container.scrollTop; break; default: return; } try { container.scrollBy({ top: delta, behavior: "auto" }); e.preventDefault(); } catch (_) { } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, []); const previewWrapperHeight = "100%"; return ( // Wrap everything so the current view can be visually rounded /* @__PURE__ */ import_react26.default.createElement("div", { className: "relative px-4 sm:px-6" }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "relative z-50 h-screen w-full overflow-hidden bg-white dark:bg-zinc-900 font-inter rounded-xl md:rounded-2xl lg:rounded-3xl" }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-[1fr_2fr] h-full" }, /* @__PURE__ */ import_react26.default.createElement( "div", { ref: leftScrollRef, className: "h-full overflow-y-auto px-4 sm:px-6 py-6 pb-6" }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "max-w-3xl mx-auto w-full" }, /* @__PURE__ */ import_react26.default.createElement("h1", { className: "text-2xl md:text-3xl lg:text-4xl font-semibold text-[#111111] dark:text-[#E5E5E5] mt-8 mb-2" }, "Generate invoice"), /* @__PURE__ */ import_react26.default.createElement("p", { className: "text-sm md:text-base text-gray-600 dark:text-gray-400 mb-4 md:mb-6" }, "Fill in your details, add items, and download a polished PDF in seconds."), /* @__PURE__ */ import_react26.default.createElement( FormPanel, { invoiceData, updateInvoiceData, addItem, removeItem, updateItem, showAdvanced, setShowAdvanced, isMobilePreviewOpen: false, setIsMobilePreviewOpen: () => { }, onGeneratePDF: handleGeneratePDF, isGeneratingPDF, showShimmer, labels } )) ), /* @__PURE__ */ import_react26.default.createElement("div", { className: "hidden lg:flex h-full items-center overflow-hidden pl-5 pr-0 py-5" }, /* @__PURE__ */ import_react26.default.createElement("div", { className: "w-full h-full bg-[#F6F6F6] dark:bg-[#222222] rounded-l-2xl lg:rounded-l-3xl rounded-r-2xl lg:rounded-r-3xl overflow-hidden flex items-center justify-center" }, /* @__PURE__ */ import_react26.default.createElement( PreviewPanel, { invoiceData, calculations, scaleMultiplier: 0.6, onTemplateChange: updateInvoiceData } )))))) ); } // virtual:/apps/web/src/app/page.jsx function HomePage() { return /* @__PURE__ */ import_react27.default.createElement(InvoiceGenerator, null); } // virtual:/apps/web/src/app/layout.jsx init_injected_globals(); var import_react28 = __toESM(require_react()); // ../../../node_modules/@tanstack/react-query/build/modern/index.js init_injected_globals(); // ../../../node_modules/@tanstack/query-core/build/modern/index.js init_injected_globals(); // ../../../node_modules/@tanstack/query-core/build/modern/retryer.js init_injected_globals(); // ../../../node_modules/@tanstack/query-core/build/modern/focusManager.js init_injected_globals(); // ../../../node_modules/@tanstack/query-core/build/modern/subscribable.js init_injected_globals(); var Subscribable = class { constructor() { this.listeners = /* @__PURE__ */ new Set(); this.subscribe = this.subscribe.bind(this); } subscribe(listener) { this.listeners.add(listener); this.onSubscribe(); return () => { this.listeners.delete(listener); this.onUnsubscribe(); }; } hasListeners() { return this.listeners.size > 0; } onSubscribe() { } onUnsubscribe() { } }; // ../../../node_modules/@tanstack/query-core/build/modern/utils.js init_injected_globals(); var isServer = typeof window === "undefined" || "Deno" in globalThis; function noop() { } function functionalUpdate(updater, input) { return typeof updater === "function" ? updater(input) : updater; } function isValidTimeout(value) { return typeof value === "number" && value >= 0 && value !== Infinity; } function timeUntilStale(updatedAt, staleTime) { return Math.max(updatedAt + (staleTime || 0) - Date.now(), 0); } function resolveStaleTime(staleTime, query) { return typeof staleTime === "function" ? staleTime(query) : staleTime; } function resolveEnabled(enabled, query) { return typeof enabled === "function" ? enabled(query) : enabled; } function matchQuery(filters, query) { const { type = "all", exact, fetchStatus, predicate, queryKey, stale } = filters; if (queryKey) { if (exact) { if (query.queryHash !== hashQueryKeyByOptions(queryKey, query.options)) { return false; } } else if (!partialMatchKey(query.queryKey, queryKey)) { return false; } } if (type !== "all") { const isActive = query.isActive(); if (type === "active" && !isActive) { return false; } if (type === "inactive" && isActive) { return false; } } if (typeof stale === "boolean" && query.isStale() !== stale) { return false; } if (fetchStatus && fetchStatus !== query.state.fetchStatus) { return false; } if (predicate && !predicate(query)) { return false; } return true; } function matchMutation(filters, mutation) { const { exact, status, predicate, mutationKey } = filters; if (mutationKey) { if (!mutation.options.mutationKey) { return false; } if (exact) { if (hashKey(mutation.options.mutationKey) !== hashKey(mutationKey)) { return false; } } else if (!partialMatchKey(mutation.options.mutationKey, mutationKey)) { return false; } } if (status && mutation.state.status !== status) { return false; } if (predicate && !predicate(mutation)) { return false; } return true; } function hashQueryKeyByOptions(queryKey, options) { const hashFn = options?.queryKeyHashFn || hashKey; return hashFn(queryKey); } function hashKey(queryKey) { return JSON.stringify( queryKey, (_, val) => isPlainObject(val) ? Object.keys(val).sort().reduce((result, key) => { result[key] = val[key]; return result; }, {}) : val ); } function partialMatchKey(a, b) { if (a === b) { return true; } if (typeof a !== typeof b) { return false; } if (a && b && typeof a === "object" && typeof b === "object") { return Object.keys(b).every((key) => partialMatchKey(a[key], b[key])); } return false; } function replaceEqualDeep(a, b) { if (a === b) { return a; } const array = isPlainArray(a) && isPlainArray(b); if (array || isPlainObject(a) && isPlainObject(b)) { const aItems = array ? a : Object.keys(a); const aSize = aItems.length; const bItems = array ? b : Object.keys(b); const bSize = bItems.length; const copy = array ? [] : {}; let equalItems = 0; for (let i = 0; i < bSize; i++) { const key = array ? i : bItems[i]; if ((!array && aItems.includes(key) || array) && a[key] === void 0 && b[key] === void 0) { copy[key] = void 0; equalItems++; } else { copy[key] = replaceEqualDeep(a[key], b[key]); if (copy[key] === a[key] && a[key] !== void 0) { equalItems++; } } } return aSize === bSize && equalItems === aSize ? a : copy; } return b; } function isPlainArray(value) { return Array.isArray(value) && value.length === Object.keys(value).length; } function isPlainObject(o) { if (!hasObjectPrototype(o)) { return false; } const ctor = o.constructor; if (ctor === void 0) { return true; } const prot = ctor.prototype; if (!hasObjectPrototype(prot)) { return false; } if (!prot.hasOwnProperty("isPrototypeOf")) { return false; } if (Object.getPrototypeOf(o) !== Object.prototype) { return false; } return true; } function hasObjectPrototype(o) { return Object.prototype.toString.call(o) === "[object Object]"; } function sleep(timeout) { return new Promise((resolve) => { setTimeout(resolve, timeout); }); } function replaceData(prevData, data, options) { if (typeof options.structuralSharing === "function") { return options.structuralSharing(prevData, data); } else if (options.structuralSharing !== false) { if (false) { try { return replaceEqualDeep(prevData, data); } catch (error) { console.error( `Structural sharing requires data to be JSON serializable. To fix this, turn off structuralSharing or return JSON-serializable data from your queryFn. [${options.queryHash}]: ${error}` ); throw error; } } return replaceEqualDeep(prevData, data); } return data; } function addToEnd(items, item, max = 0) { const newItems = [...items, item]; return max && newItems.length > max ? newItems.slice(1) : newItems; } function addToStart(items, item, max = 0) { const newItems = [item, ...items]; return max && newItems.length > max ? newItems.slice(0, -1) : newItems; } var skipToken = Symbol(); function ensureQueryFn(options, fetchOptions) { if (false) { if (options.queryFn === skipToken) { console.error( `Attempted to invoke queryFn when set to skipToken. This is likely a configuration error. Query hash: '${options.queryHash}'` ); } } if (!options.queryFn && fetchOptions?.initialPromise) { return () => fetchOptions.initialPromise; } if (!options.queryFn || options.queryFn === skipToken) { return () => Promise.reject(new Error(`Missing queryFn: '${options.queryHash}'`)); } return options.queryFn; } // ../../../node_modules/@tanstack/query-core/build/modern/focusManager.js var FocusManager = class extends Subscribable { #focused; #cleanup; #setup; constructor() { super(); this.#setup = (onFocus) => { if (!isServer && window.addEventListener) { const listener = () => onFocus(); window.addEventListener("visibilitychange", listener, false); return () => { window.removeEventListener("visibilitychange", listener); }; } return; }; } onSubscribe() { if (!this.#cleanup) { this.setEventListener(this.#setup); } } onUnsubscribe() { if (!this.hasListeners()) { this.#cleanup?.(); this.#cleanup = void 0; } } setEventListener(setup) { this.#setup = setup; this.#cleanup?.(); this.#cleanup = setup((focused) => { if (typeof focused === "boolean") { this.setFocused(focused); } else { this.onFocus(); } }); } setFocused(focused) { const changed = this.#focused !== focused; if (changed) { this.#focused = focused; this.onFocus(); } } onFocus() { const isFocused = this.isFocused(); this.listeners.forEach((listener) => { listener(isFocused); }); } isFocused() { if (typeof this.#focused === "boolean") { return this.#focused; } return globalThis.document?.visibilityState !== "hidden"; } }; var focusManager = new FocusManager(); // ../../../node_modules/@tanstack/query-core/build/modern/onlineManager.js init_injected_globals(); var OnlineManager = class extends Subscribable { #online = true; #cleanup; #setup; constructor() { super(); this.#setup = (onOnline) => { if (!isServer && window.addEventListener) { const onlineListener = () => onOnline(true); const offlineListener = () => onOnline(false); window.addEventListener("online", onlineListener, false); window.addEventListener("offline", offlineListener, false); return () => { window.removeEventListener("online", onlineListener); window.removeEventListener("offline", offlineListener); }; } return; }; } onSubscribe() { if (!this.#cleanup) { this.setEventListener(this.#setup); } } onUnsubscribe() { if (!this.hasListeners()) { this.#cleanup?.(); this.#cleanup = void 0; } } setEventListener(setup) { this.#setup = setup; this.#cleanup?.(); this.#cleanup = setup(this.setOnline.bind(this)); } setOnline(online) { const changed = this.#online !== online; if (changed) { this.#online = online; this.listeners.forEach((listener) => { listener(online); }); } } isOnline() { return this.#online; } }; var onlineManager = new OnlineManager(); // ../../../node_modules/@tanstack/query-core/build/modern/thenable.js init_injected_globals(); function pendingThenable() { let resolve; let reject; const thenable = new Promise((_resolve, _reject) => { resolve = _resolve; reject = _reject; }); thenable.status = "pending"; thenable.catch(() => { }); function finalize(data) { Object.assign(thenable, data); delete thenable.resolve; delete thenable.reject; } thenable.resolve = (value) => { finalize({ status: "fulfilled", value }); resolve(value); }; thenable.reject = (reason) => { finalize({ status: "rejected", reason }); reject(reason); }; return thenable; } // ../../../node_modules/@tanstack/query-core/build/modern/retryer.js function defaultRetryDelay(failureCount) { return Math.min(1e3 * 2 ** failureCount, 3e4); } function canFetch(networkMode) { return (networkMode ?? "online") === "online" ? onlineManager.isOnline() : true; } var CancelledError = class extends Error { constructor(options) { super("CancelledError"); this.revert = options?.revert; this.silent = options?.silent; } }; function isCancelledError(value) { return value instanceof CancelledError; } function createRetryer(config) { let isRetryCancelled = false; let failureCount = 0; let isResolved = false; let continueFn; const thenable = pendingThenable(); const cancel = (cancelOptions) => { if (!isResolved) { reject(new CancelledError(cancelOptions)); config.abort?.(); } }; const cancelRetry = () => { isRetryCancelled = true; }; const continueRetry = () => { isRetryCancelled = false; }; const canContinue = () => focusManager.isFocused() && (config.networkMode === "always" || onlineManager.isOnline()) && config.canRun(); const canStart = () => canFetch(config.networkMode) && config.canRun(); const resolve = (value) => { if (!isResolved) { isResolved = true; config.onSuccess?.(value); continueFn?.(); thenable.resolve(value); } }; const reject = (value) => { if (!isResolved) { isResolved = true; config.onError?.(value); continueFn?.(); thenable.reject(value); } }; const pause = () => { return new Promise((continueResolve) => { continueFn = (value) => { if (isResolved || canContinue()) { continueResolve(value); } }; config.onPause?.(); }).then(() => { continueFn = void 0; if (!isResolved) { config.onContinue?.(); } }); }; const run = () => { if (isResolved) { return; } let promiseOrValue; const initialPromise = failureCount === 0 ? config.initialPromise : void 0; try { promiseOrValue = initialPromise ?? config.fn(); } catch (error) { promiseOrValue = Promise.reject(error); } Promise.resolve(promiseOrValue).then(resolve).catch((error) => { if (isResolved) { return; } const retry = config.retry ?? (isServer ? 0 : 3); const retryDelay = config.retryDelay ?? defaultRetryDelay; const delay = typeof retryDelay === "function" ? retryDelay(failureCount, error) : retryDelay; const shouldRetry = retry === true || typeof retry === "number" && failureCount < retry || typeof retry === "function" && retry(failureCount, error); if (isRetryCancelled || !shouldRetry) { reject(error); return; } failureCount++; config.onFail?.(failureCount, error); sleep(delay).then(() => { return canContinue() ? void 0 : pause(); }).then(() => { if (isRetryCancelled) { reject(error); } else { run(); } }); }); }; return { promise: thenable, cancel, continue: () => { continueFn?.(); return thenable; }, cancelRetry, continueRetry, canStart, start: () => { if (canStart()) { run(); } else { pause().then(run); } return thenable; } }; } // ../../../node_modules/@tanstack/query-core/build/modern/queryCache.js init_injected_globals(); // ../../../node_modules/@tanstack/query-core/build/modern/query.js init_injected_globals(); // ../../../node_modules/@tanstack/query-core/build/modern/notifyManager.js init_injected_globals(); var defaultScheduler = (cb) => setTimeout(cb, 0); function createNotifyManager() { let queue = []; let transactions = 0; let notifyFn = (callback) => { callback(); }; let batchNotifyFn = (callback) => { callback(); }; let scheduleFn = defaultScheduler; const schedule = (callback) => { if (transactions) { queue.push(callback); } else { scheduleFn(() => { notifyFn(callback); }); } }; const flush = () => { const originalQueue = queue; queue = []; if (originalQueue.length) { scheduleFn(() => { batchNotifyFn(() => { originalQueue.forEach((callback) => { notifyFn(callback); }); }); }); } }; return { batch: (callback) => { let result; transactions++; try { result = callback(); } finally { transactions--; if (!transactions) { flush(); } } return result; }, /** * All calls to the wrapped function will be batched. */ batchCalls: (callback) => { return (...args) => { schedule(() => { callback(...args); }); }; }, schedule, /** * Use this method to set a custom notify function. * This can be used to for example wrap notifications with `React.act` while running tests. */ setNotifyFunction: (fn) => { notifyFn = fn; }, /** * Use this method to set a custom function to batch notifications together into a single tick. * By default React Query will use the batch function provided by ReactDOM or React Native. */ setBatchNotifyFunction: (fn) => { batchNotifyFn = fn; }, setScheduler: (fn) => { scheduleFn = fn; } }; } var notifyManager = createNotifyManager(); // ../../../node_modules/@tanstack/query-core/build/modern/removable.js init_injected_globals(); var Removable = class { #gcTimeout; destroy() { this.clearGcTimeout(); } scheduleGc() { this.clearGcTimeout(); if (isValidTimeout(this.gcTime)) { this.#gcTimeout = setTimeout(() => { this.optionalRemove(); }, this.gcTime); } } updateGcTime(newGcTime) { this.gcTime = Math.max( this.gcTime || 0, newGcTime ?? (isServer ? Infinity : 5 * 60 * 1e3) ); } clearGcTimeout() { if (this.#gcTimeout) { clearTimeout(this.#gcTimeout); this.#gcTimeout = void 0; } } }; // ../../../node_modules/@tanstack/query-core/build/modern/query.js var Query = class extends Removable { #initialState; #revertState; #cache; #client; #retryer; #defaultOptions; #abortSignalConsumed; constructor(config) { super(); this.#abortSignalConsumed = false; this.#defaultOptions = config.defaultOptions; this.setOptions(config.options); this.observers = []; this.#client = config.client; this.#cache = this.#client.getQueryCache(); this.queryKey = config.queryKey; this.queryHash = config.queryHash; this.#initialState = getDefaultState(this.options); this.state = config.state ?? this.#initialState; this.scheduleGc(); } get meta() { return this.options.meta; } get promise() { return this.#retryer?.promise; } setOptions(options) { this.options = { ...this.#defaultOptions, ...options }; this.updateGcTime(this.options.gcTime); } optionalRemove() { if (!this.observers.length && this.state.fetchStatus === "idle") { this.#cache.remove(this); } } setData(newData, options) { const data = replaceData(this.state.data, newData, this.options); this.#dispatch({ data, type: "success", dataUpdatedAt: options?.updatedAt, manual: options?.manual }); return data; } setState(state, setStateOptions) { this.#dispatch({ type: "setState", state, setStateOptions }); } cancel(options) { const promise = this.#retryer?.promise; this.#retryer?.cancel(options); return promise ? promise.then(noop).catch(noop) : Promise.resolve(); } destroy() { super.destroy(); this.cancel({ silent: true }); } reset() { this.destroy(); this.setState(this.#initialState); } isActive() { return this.observers.some( (observer) => resolveEnabled(observer.options.enabled, this) !== false ); } isDisabled() { if (this.getObserversCount() > 0) { return !this.isActive(); } return this.options.queryFn === skipToken || this.state.dataUpdateCount + this.state.errorUpdateCount === 0; } isStale() { if (this.state.isInvalidated) { return true; } if (this.getObserversCount() > 0) { return this.observers.some( (observer) => observer.getCurrentResult().isStale ); } return this.state.data === void 0; } isStaleByTime(staleTime = 0) { return this.state.isInvalidated || this.state.data === void 0 || !timeUntilStale(this.state.dataUpdatedAt, staleTime); } onFocus() { const observer = this.observers.find((x) => x.shouldFetchOnWindowFocus()); observer?.refetch({ cancelRefetch: false }); this.#retryer?.continue(); } onOnline() { const observer = this.observers.find((x) => x.shouldFetchOnReconnect()); observer?.refetch({ cancelRefetch: false }); this.#retryer?.continue(); } addObserver(observer) { if (!this.observers.includes(observer)) { this.observers.push(observer); this.clearGcTimeout(); this.#cache.notify({ type: "observerAdded", query: this, observer }); } } removeObserver(observer) { if (this.observers.includes(observer)) { this.observers = this.observers.filter((x) => x !== observer); if (!this.observers.length) { if (this.#retryer) { if (this.#abortSignalConsumed) { this.#retryer.cancel({ revert: true }); } else { this.#retryer.cancelRetry(); } } this.scheduleGc(); } this.#cache.notify({ type: "observerRemoved", query: this, observer }); } } getObserversCount() { return this.observers.length; } invalidate() { if (!this.state.isInvalidated) { this.#dispatch({ type: "invalidate" }); } } fetch(options, fetchOptions) { if (this.state.fetchStatus !== "idle") { if (this.state.data !== void 0 && fetchOptions?.cancelRefetch) { this.cancel({ silent: true }); } else if (this.#retryer) { this.#retryer.continueRetry(); return this.#retryer.promise; } } if (options) { this.setOptions(options); } if (!this.options.queryFn) { const observer = this.observers.find((x) => x.options.queryFn); if (observer) { this.setOptions(observer.options); } } if (false) { if (!Array.isArray(this.options.queryKey)) { console.error( `As of v4, queryKey needs to be an Array. If you are using a string like 'repoData', please change it to an Array, e.g. ['repoData']` ); } } const abortController = new AbortController(); const addSignalProperty = (object) => { Object.defineProperty(object, "signal", { enumerable: true, get: () => { this.#abortSignalConsumed = true; return abortController.signal; } }); }; const fetchFn = () => { const queryFn = ensureQueryFn(this.options, fetchOptions); const queryFnContext = { client: this.#client, queryKey: this.queryKey, meta: this.meta }; addSignalProperty(queryFnContext); this.#abortSignalConsumed = false; if (this.options.persister) { return this.options.persister( queryFn, queryFnContext, this ); } return queryFn(queryFnContext); }; const context = { fetchOptions, options: this.options, queryKey: this.queryKey, client: this.#client, state: this.state, fetchFn }; addSignalProperty(context); this.options.behavior?.onFetch( context, this ); this.#revertState = this.state; if (this.state.fetchStatus === "idle" || this.state.fetchMeta !== context.fetchOptions?.meta) { this.#dispatch({ type: "fetch", meta: context.fetchOptions?.meta }); } const onError = (error) => { if (!(isCancelledError(error) && error.silent)) { this.#dispatch({ type: "error", error }); } if (!isCancelledError(error)) { this.#cache.config.onError?.( error, this ); this.#cache.config.onSettled?.( this.state.data, error, this ); } this.scheduleGc(); }; this.#retryer = createRetryer({ initialPromise: fetchOptions?.initialPromise, fn: context.fetchFn, abort: abortController.abort.bind(abortController), onSuccess: (data) => { if (data === void 0) { if (false) { console.error( `Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ${this.queryHash}` ); } onError(new Error(`${this.queryHash} data is undefined`)); return; } try { this.setData(data); } catch (error) { onError(error); return; } this.#cache.config.onSuccess?.(data, this); this.#cache.config.onSettled?.( data, this.state.error, this ); this.scheduleGc(); }, onError, onFail: (failureCount, error) => { this.#dispatch({ type: "failed", failureCount, error }); }, onPause: () => { this.#dispatch({ type: "pause" }); }, onContinue: () => { this.#dispatch({ type: "continue" }); }, retry: context.options.retry, retryDelay: context.options.retryDelay, networkMode: context.options.networkMode, canRun: () => true }); return this.#retryer.start(); } #dispatch(action) { const reducer = (state) => { switch (action.type) { case "failed": return { ...state, fetchFailureCount: action.failureCount, fetchFailureReason: action.error }; case "pause": return { ...state, fetchStatus: "paused" }; case "continue": return { ...state, fetchStatus: "fetching" }; case "fetch": return { ...state, ...fetchState(state.data, this.options), fetchMeta: action.meta ?? null }; case "success": return { ...state, data: action.data, dataUpdateCount: state.dataUpdateCount + 1, dataUpdatedAt: action.dataUpdatedAt ?? Date.now(), error: null, isInvalidated: false, status: "success", ...!action.manual && { fetchStatus: "idle", fetchFailureCount: 0, fetchFailureReason: null } }; case "error": const error = action.error; if (isCancelledError(error) && error.revert && this.#revertState) { return { ...this.#revertState, fetchStatus: "idle" }; } return { ...state, error, errorUpdateCount: state.errorUpdateCount + 1, errorUpdatedAt: Date.now(), fetchFailureCount: state.fetchFailureCount + 1, fetchFailureReason: error, fetchStatus: "idle", status: "error" }; case "invalidate": return { ...state, isInvalidated: true }; case "setState": return { ...state, ...action.state }; } }; this.state = reducer(this.state); notifyManager.batch(() => { this.observers.forEach((observer) => { observer.onQueryUpdate(); }); this.#cache.notify({ query: this, type: "updated", action }); }); } }; function fetchState(data, options) { return { fetchFailureCount: 0, fetchFailureReason: null, fetchStatus: canFetch(options.networkMode) ? "fetching" : "paused", ...data === void 0 && { error: null, status: "pending" } }; } function getDefaultState(options) { const data = typeof options.initialData === "function" ? options.initialData() : options.initialData; const hasData = data !== void 0; const initialDataUpdatedAt = hasData ? typeof options.initialDataUpdatedAt === "function" ? options.initialDataUpdatedAt() : options.initialDataUpdatedAt : 0; return { data, dataUpdateCount: 0, dataUpdatedAt: hasData ? initialDataUpdatedAt ?? Date.now() : 0, error: null, errorUpdateCount: 0, errorUpdatedAt: 0, fetchFailureCount: 0, fetchFailureReason: null, fetchMeta: null, isInvalidated: false, status: hasData ? "success" : "pending", fetchStatus: "idle" }; } // ../../../node_modules/@tanstack/query-core/build/modern/queryCache.js var QueryCache = class extends Subscribable { constructor(config = {}) { super(); this.config = config; this.#queries = /* @__PURE__ */ new Map(); } #queries; build(client, options, state) { const queryKey = options.queryKey; const queryHash = options.queryHash ?? hashQueryKeyByOptions(queryKey, options); let query = this.get(queryHash); if (!query) { query = new Query({ client, queryKey, queryHash, options: client.defaultQueryOptions(options), state, defaultOptions: client.getQueryDefaults(queryKey) }); this.add(query); } return query; } add(query) { if (!this.#queries.has(query.queryHash)) { this.#queries.set(query.queryHash, query); this.notify({ type: "added", query }); } } remove(query) { const queryInMap = this.#queries.get(query.queryHash); if (queryInMap) { query.destroy(); if (queryInMap === query) { this.#queries.delete(query.queryHash); } this.notify({ type: "removed", query }); } } clear() { notifyManager.batch(() => { this.getAll().forEach((query) => { this.remove(query); }); }); } get(queryHash) { return this.#queries.get(queryHash); } getAll() { return [...this.#queries.values()]; } find(filters) { const defaultedFilters = { exact: true, ...filters }; return this.getAll().find( (query) => matchQuery(defaultedFilters, query) ); } findAll(filters = {}) { const queries = this.getAll(); return Object.keys(filters).length > 0 ? queries.filter((query) => matchQuery(filters, query)) : queries; } notify(event) { notifyManager.batch(() => { this.listeners.forEach((listener) => { listener(event); }); }); } onFocus() { notifyManager.batch(() => { this.getAll().forEach((query) => { query.onFocus(); }); }); } onOnline() { notifyManager.batch(() => { this.getAll().forEach((query) => { query.onOnline(); }); }); } }; // ../../../node_modules/@tanstack/query-core/build/modern/queryClient.js init_injected_globals(); // ../../../node_modules/@tanstack/query-core/build/modern/mutationCache.js init_injected_globals(); // ../../../node_modules/@tanstack/query-core/build/modern/mutation.js init_injected_globals(); var Mutation = class extends Removable { #observers; #mutationCache; #retryer; constructor(config) { super(); this.mutationId = config.mutationId; this.#mutationCache = config.mutationCache; this.#observers = []; this.state = config.state || getDefaultState2(); this.setOptions(config.options); this.scheduleGc(); } setOptions(options) { this.options = options; this.updateGcTime(this.options.gcTime); } get meta() { return this.options.meta; } addObserver(observer) { if (!this.#observers.includes(observer)) { this.#observers.push(observer); this.clearGcTimeout(); this.#mutationCache.notify({ type: "observerAdded", mutation: this, observer }); } } removeObserver(observer) { this.#observers = this.#observers.filter((x) => x !== observer); this.scheduleGc(); this.#mutationCache.notify({ type: "observerRemoved", mutation: this, observer }); } optionalRemove() { if (!this.#observers.length) { if (this.state.status === "pending") { this.scheduleGc(); } else { this.#mutationCache.remove(this); } } } continue() { return this.#retryer?.continue() ?? // continuing a mutation assumes that variables are set, mutation must have been dehydrated before this.execute(this.state.variables); } async execute(variables) { const onContinue = () => { this.#dispatch({ type: "continue" }); }; this.#retryer = createRetryer({ fn: () => { if (!this.options.mutationFn) { return Promise.reject(new Error("No mutationFn found")); } return this.options.mutationFn(variables); }, onFail: (failureCount, error) => { this.#dispatch({ type: "failed", failureCount, error }); }, onPause: () => { this.#dispatch({ type: "pause" }); }, onContinue, retry: this.options.retry ?? 0, retryDelay: this.options.retryDelay, networkMode: this.options.networkMode, canRun: () => this.#mutationCache.canRun(this) }); const restored = this.state.status === "pending"; const isPaused = !this.#retryer.canStart(); try { if (restored) { onContinue(); } else { this.#dispatch({ type: "pending", variables, isPaused }); await this.#mutationCache.config.onMutate?.( variables, this ); const context = await this.options.onMutate?.(variables); if (context !== this.state.context) { this.#dispatch({ type: "pending", context, variables, isPaused }); } } const data = await this.#retryer.start(); await this.#mutationCache.config.onSuccess?.( data, variables, this.state.context, this ); await this.options.onSuccess?.(data, variables, this.state.context); await this.#mutationCache.config.onSettled?.( data, null, this.state.variables, this.state.context, this ); await this.options.onSettled?.(data, null, variables, this.state.context); this.#dispatch({ type: "success", data }); return data; } catch (error) { try { await this.#mutationCache.config.onError?.( error, variables, this.state.context, this ); await this.options.onError?.( error, variables, this.state.context ); await this.#mutationCache.config.onSettled?.( void 0, error, this.state.variables, this.state.context, this ); await this.options.onSettled?.( void 0, error, variables, this.state.context ); throw error; } finally { this.#dispatch({ type: "error", error }); } } finally { this.#mutationCache.runNext(this); } } #dispatch(action) { const reducer = (state) => { switch (action.type) { case "failed": return { ...state, failureCount: action.failureCount, failureReason: action.error }; case "pause": return { ...state, isPaused: true }; case "continue": return { ...state, isPaused: false }; case "pending": return { ...state, context: action.context, data: void 0, failureCount: 0, failureReason: null, error: null, isPaused: action.isPaused, status: "pending", variables: action.variables, submittedAt: Date.now() }; case "success": return { ...state, data: action.data, failureCount: 0, failureReason: null, error: null, status: "success", isPaused: false }; case "error": return { ...state, data: void 0, error: action.error, failureCount: state.failureCount + 1, failureReason: action.error, isPaused: false, status: "error" }; } }; this.state = reducer(this.state); notifyManager.batch(() => { this.#observers.forEach((observer) => { observer.onMutationUpdate(action); }); this.#mutationCache.notify({ mutation: this, type: "updated", action }); }); } }; function getDefaultState2() { return { context: void 0, data: void 0, error: null, failureCount: 0, failureReason: null, isPaused: false, status: "idle", variables: void 0, submittedAt: 0 }; } // ../../../node_modules/@tanstack/query-core/build/modern/mutationCache.js var MutationCache = class extends Subscribable { constructor(config = {}) { super(); this.config = config; this.#mutations = /* @__PURE__ */ new Set(); this.#scopes = /* @__PURE__ */ new Map(); this.#mutationId = 0; } #mutations; #scopes; #mutationId; build(client, options, state) { const mutation = new Mutation({ mutationCache: this, mutationId: ++this.#mutationId, options: client.defaultMutationOptions(options), state }); this.add(mutation); return mutation; } add(mutation) { this.#mutations.add(mutation); const scope = scopeFor(mutation); if (typeof scope === "string") { const scopedMutations = this.#scopes.get(scope); if (scopedMutations) { scopedMutations.push(mutation); } else { this.#scopes.set(scope, [mutation]); } } this.notify({ type: "added", mutation }); } remove(mutation) { if (this.#mutations.delete(mutation)) { const scope = scopeFor(mutation); if (typeof scope === "string") { const scopedMutations = this.#scopes.get(scope); if (scopedMutations) { if (scopedMutations.length > 1) { const index = scopedMutations.indexOf(mutation); if (index !== -1) { scopedMutations.splice(index, 1); } } else if (scopedMutations[0] === mutation) { this.#scopes.delete(scope); } } } } this.notify({ type: "removed", mutation }); } canRun(mutation) { const scope = scopeFor(mutation); if (typeof scope === "string") { const mutationsWithSameScope = this.#scopes.get(scope); const firstPendingMutation = mutationsWithSameScope?.find( (m) => m.state.status === "pending" ); return !firstPendingMutation || firstPendingMutation === mutation; } else { return true; } } runNext(mutation) { const scope = scopeFor(mutation); if (typeof scope === "string") { const foundMutation = this.#scopes.get(scope)?.find((m) => m !== mutation && m.state.isPaused); return foundMutation?.continue() ?? Promise.resolve(); } else { return Promise.resolve(); } } clear() { notifyManager.batch(() => { this.#mutations.forEach((mutation) => { this.notify({ type: "removed", mutation }); }); this.#mutations.clear(); this.#scopes.clear(); }); } getAll() { return Array.from(this.#mutations); } find(filters) { const defaultedFilters = { exact: true, ...filters }; return this.getAll().find( (mutation) => matchMutation(defaultedFilters, mutation) ); } findAll(filters = {}) { return this.getAll().filter((mutation) => matchMutation(filters, mutation)); } notify(event) { notifyManager.batch(() => { this.listeners.forEach((listener) => { listener(event); }); }); } resumePausedMutations() { const pausedMutations = this.getAll().filter((x) => x.state.isPaused); return notifyManager.batch( () => Promise.all( pausedMutations.map((mutation) => mutation.continue().catch(noop)) ) ); } }; function scopeFor(mutation) { return mutation.options.scope?.id; } // ../../../node_modules/@tanstack/query-core/build/modern/infiniteQueryBehavior.js init_injected_globals(); function infiniteQueryBehavior(pages) { return { onFetch: (context, query) => { const options = context.options; const direction = context.fetchOptions?.meta?.fetchMore?.direction; const oldPages = context.state.data?.pages || []; const oldPageParams = context.state.data?.pageParams || []; let result = { pages: [], pageParams: [] }; let currentPage = 0; const fetchFn = async () => { let cancelled = false; const addSignalProperty = (object) => { Object.defineProperty(object, "signal", { enumerable: true, get: () => { if (context.signal.aborted) { cancelled = true; } else { context.signal.addEventListener("abort", () => { cancelled = true; }); } return context.signal; } }); }; const queryFn = ensureQueryFn(context.options, context.fetchOptions); const fetchPage = async (data, param, previous) => { if (cancelled) { return Promise.reject(); } if (param == null && data.pages.length) { return Promise.resolve(data); } const queryFnContext = { client: context.client, queryKey: context.queryKey, pageParam: param, direction: previous ? "backward" : "forward", meta: context.options.meta }; addSignalProperty(queryFnContext); const page = await queryFn( queryFnContext ); const { maxPages } = context.options; const addTo = previous ? addToStart : addToEnd; return { pages: addTo(data.pages, page, maxPages), pageParams: addTo(data.pageParams, param, maxPages) }; }; if (direction && oldPages.length) { const previous = direction === "backward"; const pageParamFn = previous ? getPreviousPageParam : getNextPageParam; const oldData = { pages: oldPages, pageParams: oldPageParams }; const param = pageParamFn(options, oldData); result = await fetchPage(oldData, param, previous); } else { const remainingPages = pages ?? oldPages.length; do { const param = currentPage === 0 ? oldPageParams[0] ?? options.initialPageParam : getNextPageParam(options, result); if (currentPage > 0 && param == null) { break; } result = await fetchPage(result, param); currentPage++; } while (currentPage < remainingPages); } return result; }; if (context.options.persister) { context.fetchFn = () => { return context.options.persister?.( fetchFn, { client: context.client, queryKey: context.queryKey, meta: context.options.meta, signal: context.signal }, query ); }; } else { context.fetchFn = fetchFn; } } }; } function getNextPageParam(options, { pages, pageParams }) { const lastIndex = pages.length - 1; return pages.length > 0 ? options.getNextPageParam( pages[lastIndex], pages, pageParams[lastIndex], pageParams ) : void 0; } function getPreviousPageParam(options, { pages, pageParams }) { return pages.length > 0 ? options.getPreviousPageParam?.(pages[0], pages, pageParams[0], pageParams) : void 0; } // ../../../node_modules/@tanstack/query-core/build/modern/queryClient.js var QueryClient = class { #queryCache; #mutationCache; #defaultOptions; #queryDefaults; #mutationDefaults; #mountCount; #unsubscribeFocus; #unsubscribeOnline; constructor(config = {}) { this.#queryCache = config.queryCache || new QueryCache(); this.#mutationCache = config.mutationCache || new MutationCache(); this.#defaultOptions = config.defaultOptions || {}; this.#queryDefaults = /* @__PURE__ */ new Map(); this.#mutationDefaults = /* @__PURE__ */ new Map(); this.#mountCount = 0; } mount() { this.#mountCount++; if (this.#mountCount !== 1) return; this.#unsubscribeFocus = focusManager.subscribe(async (focused) => { if (focused) { await this.resumePausedMutations(); this.#queryCache.onFocus(); } }); this.#unsubscribeOnline = onlineManager.subscribe(async (online) => { if (online) { await this.resumePausedMutations(); this.#queryCache.onOnline(); } }); } unmount() { this.#mountCount--; if (this.#mountCount !== 0) return; this.#unsubscribeFocus?.(); this.#unsubscribeFocus = void 0; this.#unsubscribeOnline?.(); this.#unsubscribeOnline = void 0; } isFetching(filters) { return this.#queryCache.findAll({ ...filters, fetchStatus: "fetching" }).length; } isMutating(filters) { return this.#mutationCache.findAll({ ...filters, status: "pending" }).length; } /** * Imperative (non-reactive) way to retrieve data for a QueryKey. * Should only be used in callbacks or functions where reading the latest data is necessary, e.g. for optimistic updates. * * Hint: Do not use this function inside a component, because it won't receive updates. * Use `useQuery` to create a `QueryObserver` that subscribes to changes. */ getQueryData(queryKey) { const options = this.defaultQueryOptions({ queryKey }); return this.#queryCache.get(options.queryHash)?.state.data; } ensureQueryData(options) { const defaultedOptions = this.defaultQueryOptions(options); const query = this.#queryCache.build(this, defaultedOptions); const cachedData = query.state.data; if (cachedData === void 0) { return this.fetchQuery(options); } if (options.revalidateIfStale && query.isStaleByTime(resolveStaleTime(defaultedOptions.staleTime, query))) { void this.prefetchQuery(defaultedOptions); } return Promise.resolve(cachedData); } getQueriesData(filters) { return this.#queryCache.findAll(filters).map(({ queryKey, state }) => { const data = state.data; return [queryKey, data]; }); } setQueryData(queryKey, updater, options) { const defaultedOptions = this.defaultQueryOptions({ queryKey }); const query = this.#queryCache.get( defaultedOptions.queryHash ); const prevData = query?.state.data; const data = functionalUpdate(updater, prevData); if (data === void 0) { return void 0; } return this.#queryCache.build(this, defaultedOptions).setData(data, { ...options, manual: true }); } setQueriesData(filters, updater, options) { return notifyManager.batch( () => this.#queryCache.findAll(filters).map(({ queryKey }) => [ queryKey, this.setQueryData(queryKey, updater, options) ]) ); } getQueryState(queryKey) { const options = this.defaultQueryOptions({ queryKey }); return this.#queryCache.get( options.queryHash )?.state; } removeQueries(filters) { const queryCache = this.#queryCache; notifyManager.batch(() => { queryCache.findAll(filters).forEach((query) => { queryCache.remove(query); }); }); } resetQueries(filters, options) { const queryCache = this.#queryCache; return notifyManager.batch(() => { queryCache.findAll(filters).forEach((query) => { query.reset(); }); return this.refetchQueries( { type: "active", ...filters }, options ); }); } cancelQueries(filters, cancelOptions = {}) { const defaultedCancelOptions = { revert: true, ...cancelOptions }; const promises = notifyManager.batch( () => this.#queryCache.findAll(filters).map((query) => query.cancel(defaultedCancelOptions)) ); return Promise.all(promises).then(noop).catch(noop); } invalidateQueries(filters, options = {}) { return notifyManager.batch(() => { this.#queryCache.findAll(filters).forEach((query) => { query.invalidate(); }); if (filters?.refetchType === "none") { return Promise.resolve(); } return this.refetchQueries( { ...filters, type: filters?.refetchType ?? filters?.type ?? "active" }, options ); }); } refetchQueries(filters, options = {}) { const fetchOptions = { ...options, cancelRefetch: options.cancelRefetch ?? true }; const promises = notifyManager.batch( () => this.#queryCache.findAll(filters).filter((query) => !query.isDisabled()).map((query) => { let promise = query.fetch(void 0, fetchOptions); if (!fetchOptions.throwOnError) { promise = promise.catch(noop); } return query.state.fetchStatus === "paused" ? Promise.resolve() : promise; }) ); return Promise.all(promises).then(noop); } fetchQuery(options) { const defaultedOptions = this.defaultQueryOptions(options); if (defaultedOptions.retry === void 0) { defaultedOptions.retry = false; } const query = this.#queryCache.build(this, defaultedOptions); return query.isStaleByTime( resolveStaleTime(defaultedOptions.staleTime, query) ) ? query.fetch(defaultedOptions) : Promise.resolve(query.state.data); } prefetchQuery(options) { return this.fetchQuery(options).then(noop).catch(noop); } fetchInfiniteQuery(options) { options.behavior = infiniteQueryBehavior(options.pages); return this.fetchQuery(options); } prefetchInfiniteQuery(options) { return this.fetchInfiniteQuery(options).then(noop).catch(noop); } ensureInfiniteQueryData(options) { options.behavior = infiniteQueryBehavior(options.pages); return this.ensureQueryData(options); } resumePausedMutations() { if (onlineManager.isOnline()) { return this.#mutationCache.resumePausedMutations(); } return Promise.resolve(); } getQueryCache() { return this.#queryCache; } getMutationCache() { return this.#mutationCache; } getDefaultOptions() { return this.#defaultOptions; } setDefaultOptions(options) { this.#defaultOptions = options; } setQueryDefaults(queryKey, options) { this.#queryDefaults.set(hashKey(queryKey), { queryKey, defaultOptions: options }); } getQueryDefaults(queryKey) { const defaults = [...this.#queryDefaults.values()]; const result = {}; defaults.forEach((queryDefault) => { if (partialMatchKey(queryKey, queryDefault.queryKey)) { Object.assign(result, queryDefault.defaultOptions); } }); return result; } setMutationDefaults(mutationKey, options) { this.#mutationDefaults.set(hashKey(mutationKey), { mutationKey, defaultOptions: options }); } getMutationDefaults(mutationKey) { const defaults = [...this.#mutationDefaults.values()]; const result = {}; defaults.forEach((queryDefault) => { if (partialMatchKey(mutationKey, queryDefault.mutationKey)) { Object.assign(result, queryDefault.defaultOptions); } }); return result; } defaultQueryOptions(options) { if (options._defaulted) { return options; } const defaultedOptions = { ...this.#defaultOptions.queries, ...this.getQueryDefaults(options.queryKey), ...options, _defaulted: true }; if (!defaultedOptions.queryHash) { defaultedOptions.queryHash = hashQueryKeyByOptions( defaultedOptions.queryKey, defaultedOptions ); } if (defaultedOptions.refetchOnReconnect === void 0) { defaultedOptions.refetchOnReconnect = defaultedOptions.networkMode !== "always"; } if (defaultedOptions.throwOnError === void 0) { defaultedOptions.throwOnError = !!defaultedOptions.suspense; } if (!defaultedOptions.networkMode && defaultedOptions.persister) { defaultedOptions.networkMode = "offlineFirst"; } if (defaultedOptions.queryFn === skipToken) { defaultedOptions.enabled = false; } return defaultedOptions; } defaultMutationOptions(options) { if (options?._defaulted) { return options; } return { ...this.#defaultOptions.mutations, ...options?.mutationKey && this.getMutationDefaults(options.mutationKey), ...options, _defaulted: true }; } clear() { this.#queryCache.clear(); this.#mutationCache.clear(); } }; // ../../../node_modules/@tanstack/react-query/build/modern/QueryClientProvider.js init_injected_globals(); var React23 = __toESM(require_react(), 1); var import_jsx_runtime = __toESM(require_jsx_runtime(), 1); var QueryClientContext = React23.createContext( void 0 ); var QueryClientProvider = ({ client, children }) => { React23.useEffect(() => { client.mount(); return () => { client.unmount(); }; }, [client]); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QueryClientContext.Provider, { value: client, children }); }; // virtual:/apps/web/src/app/layout.jsx var queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1e3 * 60 * 5, // 5 minutes cacheTime: 1e3 * 60 * 30, // 30 minutes retry: 1, refetchOnWindowFocus: false } } }); function RootLayout({ children }) { (0, import_react28.useEffect)(() => { try { const mql = window.matchMedia("(prefers-color-scheme: dark)"); const apply = () => { const root = document.documentElement; if (mql.matches) root.classList.add("dark"); else root.classList.remove("dark"); }; apply(); if (mql.addEventListener) { mql.addEventListener("change", apply); return () => mql.removeEventListener("change", apply); } else { mql.addListener(apply); return () => mql.removeListener(apply); } } catch (e) { } }, []); (0, import_react28.useEffect)(() => { const pathname = window.location?.pathname || "/"; const isInvoiceRoute = pathname === "/" || pathname.startsWith("/invoice"); document.title = "Invoice Generator"; const viewport = document.querySelector('meta[name="viewport"]'); if (!viewport) { const meta = document.createElement("meta"); meta.name = "viewport"; meta.content = "width=device-width, initial-scale=1"; document.head.appendChild(meta); } const colorScheme = document.querySelector('meta[name="color-scheme"]'); if (!colorScheme) { const meta = document.createElement("meta"); meta.name = "color-scheme"; meta.content = "light dark"; document.head.appendChild(meta); } const ensureThemeMeta = (media, color) => { let el = document.querySelector( `meta[name="theme-color"][media="${media}"]` ); if (!el) { el = document.createElement("meta"); el.name = "theme-color"; el.media = media; document.head.appendChild(el); } el.content = color; }; ensureThemeMeta("(prefers-color-scheme: light)", "#ffffff"); ensureThemeMeta("(prefers-color-scheme: dark)", "#18181b"); const favicon = document.querySelector('link[rel="icon"]'); if (!favicon) { const link = document.createElement("link"); link.rel = "icon"; link.type = "image/svg+xml"; link.href = "https://ucarecdn.com/90a72b08-5051-4344-bbea-48040fd15ee8/-/format/auto/"; document.head.appendChild(link); } const appleTouchIcon = document.querySelector( 'link[rel="apple-touch-icon"]' ); if (!appleTouchIcon) { const link = document.createElement("link"); link.rel = "apple-touch-icon"; link.href = "https://ucarecdn.com/90a72b08-5051-4344-bbea-48040fd15ee8/-/format/auto/"; document.head.appendChild(link); } const preconnect1 = document.querySelector( 'link[href="https://fonts.googleapis.com"]' ); if (!preconnect1) { const link = document.createElement("link"); link.rel = "preconnect"; link.href = "https://fonts.googleapis.com"; document.head.appendChild(link); } const preconnect2 = document.querySelector( 'link[href="https://fonts.gstatic.com"]' ); if (!preconnect2) { const link = document.createElement("link"); link.rel = "preconnect"; link.href = "https://fonts.gstatic.com"; link.crossOrigin = "true"; document.head.appendChild(link); } if (isInvoiceRoute) { const anyFontsLink = document.querySelector( 'link[href*="fonts.googleapis.com/css2"]' ); if (!anyFontsLink) { const link = document.createElement("link"); link.href = "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"; link.rel = "stylesheet"; document.head.appendChild(link); } const hasTangerine = Array.from( document.querySelectorAll('link[href*="fonts.googleapis.com/css2"]') ).some((l) => l.href.includes("family=Tangerine")); if (!hasTangerine) { const link = document.createElement("link"); link.href = "https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap"; link.rel = "stylesheet"; document.head.appendChild(link); } } const existingStyle = document.querySelector("#custom-invoice-styles"); if (!existingStyle) { const style = document.createElement("style"); style.id = "custom-invoice-styles"; style.textContent = ` /* Ensure visible base change even if Tailwind dark variants are not active */ html.dark body { background-color: #18181b; color: #fff; } /* Normalize placeholder color across light/dark to avoid any blue tint */ input::placeholder, textarea::placeholder { color: #8A8A8A !important; opacity: 1; } html.dark input::placeholder, html.dark textarea::placeholder { color: #8A8A8A !important; opacity: 1; } /* WebKit/Safari specific placeholder selector */ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #8A8A8A !important; opacity: 1; } html.dark input::-webkit-input-placeholder, html.dark textarea::-webkit-input-placeholder { color: #8A8A8A !important; opacity: 1; } /* Firefox */ input::-moz-placeholder, textarea::-moz-placeholder { color: #8A8A8A !important; opacity: 1; } html.dark input::-moz-placeholder, html.dark textarea::-moz-placeholder { color: #8A8A8A !important; opacity: 1; } /* MS Edge (legacy) */ input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #8A8A8A !important; opacity: 1; } html.dark input:-ms-input-placeholder, html.dark textarea:-ms-input-placeholder { color: #8A8A8A !important; opacity: 1; } /* Remove UA blue tint/overlay on buttons */ button { -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; accent-color: transparent; background-image: none; filter: none; } button::-moz-focus-inner { border: 0; } button:focus { outline: none; } button:focus-visible { outline: 2px solid #9CA3AF; outline-offset: 2px; } html.dark button:focus-visible { outline-color: #4B5563; } /* Apply the same UA tint/overlay reset for anchors used as buttons (asChild) */ a { -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; accent-color: transparent; background-image: none; filter: none; } a:focus { outline: none; } a:focus-visible { outline: 2px solid #9CA3AF; outline-offset: 2px; } html.dark a:focus-visible { outline-color: #4B5563; } `; document.head.appendChild(style); } else { const sheet = existingStyle.sheet; try { } catch (e) { } } const nativeFontStyle = document.querySelector("#native-ui-font-style"); if (!nativeFontStyle) { const style = document.createElement("style"); style.id = "native-ui-font-style"; style.textContent = ` /* Apply system-native UI font when html has the native-ui class */ html.native-ui, html.native-ui body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", system-ui, sans-serif; } `; document.head.appendChild(style); } const html = document.documentElement; const body = document.body; body.classList.add( "antialiased", "bg-white", "text-[#111111]", "dark:bg-zinc-900", "dark:text-white", "transition-colors", "duration-200" ); if (isInvoiceRoute) { html.classList.remove("native-ui"); if (!html.classList.contains("font-inter")) { html.classList.add("font-inter"); } body.classList.add("font-inter"); } else { html.classList.add("native-ui"); html.classList.remove("font-inter"); body.classList.remove("font-inter"); } }, []); return /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, children); } // virtual:/__wrapped_entry__.jsx function WrappedPage(props) { let content = /* @__PURE__ */ import_react29.default.createElement(HomePage, { ...props }); content = /* @__PURE__ */ import_react29.default.createElement(RootLayout, null, content); return content; } return __toCommonJS(wrapped_entry_exports); })(); /*! Bundled license information: lucide-react/dist/cjs/lucide-react.js: (** * @license lucide-react v0.358.0 - ISC * * This source code is licensed under the ISC license. * See the LICENSE file in the root directory of this source tree. *) react/cjs/react-jsx-runtime.production.min.js: (** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. *) */

Generate invoice

Client information

Your information

Items

Invoice

From

To

Details