import React, { useEffect, useState } from 'react'; import { Head, usePage } from '@inertiajs/react'; import { useTranslation } from 'react-i18next'; import html2pdf from 'html2pdf.js'; import { formatCurrency, formatDate, getCompanySetting } from '@/utils/helpers'; import { PurchaseInvoice } from './types'; import { usePageButtons } from '@/hooks/usePageButtons'; interface PrintProps { invoice: PurchaseInvoice; [key: string]: any; } export default function Print() { const { t } = useTranslation(); const { invoice } = usePage().props; const [isDownloading, setIsDownloading] = useState(false); const signaturePrintButtons = usePageButtons('signaturePrintBtn', { invoice: invoice, invoiceType: 'purchase' }); useEffect(() => { const urlParams = new URLSearchParams(window.location.search); if (urlParams.get('download') === 'pdf') { downloadPDF(); } }, []); const downloadPDF = async () => { setIsDownloading(true); const printContent = document.querySelector('.invoice-container'); if (printContent) { const opt = { margin: 0.25, filename: `purchase-invoice-${invoice.invoice_number}.pdf`, image: { type: 'jpeg' as const, quality: 0.98 }, html2canvas: { scale: 2 }, jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' as const } }; try { await html2pdf().set(opt).from(printContent as HTMLElement).save(); setTimeout(() => window.close(), 1000); } catch (error) { console.error('PDF generation failed:', error); } } setIsDownloading(false); }; return (
{isDownloading && (

{t('Generating PDF...')}

)}
{/* Header */}

{getCompanySetting('company_name') || 'YOUR COMPANY'}

{getCompanySetting('company_address') &&

{getCompanySetting('company_address')}

} {(getCompanySetting('company_city') || getCompanySetting('company_state') || getCompanySetting('company_zipcode')) && (

{getCompanySetting('company_city')}{getCompanySetting('company_state') && `, ${getCompanySetting('company_state')}`} {getCompanySetting('company_zipcode')}

)} {getCompanySetting('company_country') &&

{getCompanySetting('company_country')}

} {getCompanySetting('company_telephone') &&

{t('Phone')}: {getCompanySetting('company_telephone')}

} {getCompanySetting('company_email') &&

{t('Email')}: {getCompanySetting('company_email')}

} {getCompanySetting('registration_number') &&

{t('Registration')}: {getCompanySetting('registration_number')}

}

{t('PURCHASE INVOICE')}

#{invoice.invoice_number}

{t('Date')}: {formatDate(invoice.invoice_date)}

{t('Due')}: {formatDate(invoice.due_date)}

{/* Vendor Information */}

{t('VENDOR')}

{invoice.vendor?.name}

{invoice.vendor?.email}

{invoice.vendor_details?.billing_address && ( <>

{invoice.vendor_details.billing_address.name}

{invoice.vendor_details.billing_address.address_line_1}

{invoice.vendor_details.billing_address.city}, {invoice.vendor_details.billing_address.state} {invoice.vendor_details.billing_address.zip_code}

)}

{t('SHIP TO')}

{invoice.vendor_details?.shipping_address ? ( <>

{invoice.vendor_details.shipping_address.name}

{invoice.vendor_details.shipping_address.address_line_1}

{invoice.vendor_details.shipping_address.city}, {invoice.vendor_details.shipping_address.state} {invoice.vendor_details.shipping_address.zip_code}

) : (

{t('Same as vendor address')}

)}
{/* Notes */} {invoice.notes && (

{t('NOTES')}

{invoice.notes}

)} {/* Items Table */}
{invoice.items?.map((item, index) => ( ))}
{t('ITEM')} {t('QTY')} {t('PRICE')} {t('DISCOUNT')} {t('TAX')} {t('TOTAL')}
{item.product?.name}
{item.product?.sku && (
{t('SKU')}: {item.product.sku}
)} 		{item.quantity} {formatCurrency(item.unit_price)} {item.discount_percentage > 0 ? ( <>
{item.discount_percentage}%
-{formatCurrency(item.discount_amount)}
) : (
0%
)} 		{item.taxes && item.taxes.length > 0 ? ( <> {item.taxes.map((tax, taxIndex) => (
{tax.tax_name} ({tax.tax_rate}%)
))}
{formatCurrency(item.tax_amount)}
) : item.tax_percentage > 0 ? ( <>
{item.tax_percentage}%
{formatCurrency(item.tax_amount)}
) : (
0%
)} 		{formatCurrency(item.total_amount)}
{/* Summary */}
{t('Subtotal')}: {formatCurrency(invoice.subtotal)}
{invoice.discount_amount > 0 && (
{t('Discount')}: -{formatCurrency(invoice.discount_amount)}
)} {invoice.tax_amount > 0 && (
{t('Tax')}: {formatCurrency(invoice.tax_amount)}
)}
{t('TOTAL')}: {formatCurrency(invoice.total_amount)}
{/* Footer */}
{/* Signature Print Display */} {signaturePrintButtons.length > 0 && signaturePrintButtons.map((button) => (
{button.component}
))}

{t('PAYMENT TERMS')}: {invoice.payment_terms || t('Net 30 Days')}

{t('Thank you for your business!')}

); }