No invoices saved yet. Generate a bill to save it here.
'; - return; - } - - list.innerHTML = ''; - history.forEach(entry => { - const item = document.createElement('div'); - item.className = 'history-item'; - item.dataset.id = entry.id; - - const info = document.createElement('div'); - info.className = 'history-item-info'; - - const title = document.createElement('div'); - title.className = 'history-item-title'; - title.textContent = `#${entry.invoiceNumber} - ${entry.customerName || 'No customer'}`; - - const meta = document.createElement('div'); - meta.className = 'history-item-meta'; - meta.textContent = `${formatDate(entry.date)} · ${formatCurrency(entry.total, entry.currency)}`; - - info.appendChild(title); - info.appendChild(meta); - - const deleteBtn = document.createElement('button'); - deleteBtn.type = 'button'; - deleteBtn.className = 'history-item-delete'; - deleteBtn.dataset.id = entry.id; - deleteBtn.title = 'Delete'; - deleteBtn.textContent = '×'; - - item.appendChild(info); - item.appendChild(deleteBtn); - list.appendChild(item); - }); -} - -function toggleHistoryPanel(show) { - const panel = document.getElementById('historyPanel'); - if (!panel) return; - - if (typeof show === 'boolean') { - panel.style.display = show ? 'block' : 'none'; - } else { - panel.style.display = panel.style.display === 'none' ? 'block' : 'none'; - } - - if (panel.style.display === 'block') { - renderHistoryList(); - } -} - -function getValue(id, fallback = '') { - const el = document.getElementById(id); - if (!el) return fallback; - return el.value ?? fallback; -} - -function setValue(id, value) { - const el = document.getElementById(id); - if (!el) return; - el.value = value ?? ''; -} - -function setText(id, value) { - const el = document.getElementById(id); - if (!el) return; - el.textContent = value ?? ''; -} - -function escapeHtml(str) { - if (str == null) return ''; - return String(str) - .replace(/&/g, '&') - .replace(//g, '>') - .replace(/"/g, '"') - .replace(/'/g, '''); -} - -function parseNumber(value, fallback = 0) { - const num = parseFloat(value); - return Number.isFinite(num) ? num : fallback; -} - -function formatCurrency(amount, currency, locale) { - const safeAmount = Number.isFinite(amount) ? amount : 0; - try { - return new Intl.NumberFormat(locale || 'en-IN', { - style: 'currency', - currency: currency || 'INR', - minimumFractionDigits: 2, - maximumFractionDigits: 2 - }).format(safeAmount); - } catch (error) { - const suffix = currency ? ` ${currency}` : ''; - return `${safeAmount.toFixed(2)}${suffix}`; - } -} - -function formatDate(dateValue) { - if (!dateValue) return ''; - const date = new Date(dateValue); - if (Number.isNaN(date.getTime())) return dateValue; - const day = String(date.getDate()).padStart(2, '0'); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const year = String(date.getFullYear()); - return `${day}/${month}/${year}`; -} - -function calculateTotals(items, taxRate, discount) { - const subtotal = items.reduce((sum, item) => sum + item.total, 0); - const taxAmount = subtotal * (taxRate / 100); - const total = subtotal + taxAmount - discount; - return { - subtotal, - taxRate, - taxAmount, - discount, - total, - balanceDue: total - }; -} - -function ensureAtLeastOneItemRow() { - const container = document.getElementById('itemsContainer'); - if (!container || container.querySelectorAll('.item-row').length > 0) return; - addItemRow({ - description: '', - quantity: 1, - unitPrice: 0 - }); -} - -function addItemRow(item = {}) { - const container = document.getElementById('itemsContainer'); - if (!container) return; - - const row = document.createElement('div'); - row.className = 'item-row'; - - const descInput = document.createElement('input'); - descInput.type = 'text'; - descInput.className = 'item-description'; - descInput.placeholder = 'Description'; - descInput.value = item.description ?? ''; - - const qtyInput = document.createElement('input'); - qtyInput.type = 'number'; - qtyInput.className = 'item-quantity'; - qtyInput.min = '0'; - qtyInput.step = '1'; - qtyInput.value = item.quantity ?? 1; - - const priceInput = document.createElement('input'); - priceInput.type = 'number'; - priceInput.className = 'item-unit-price'; - priceInput.min = '0'; - priceInput.step = '0.01'; - priceInput.value = item.unitPrice ?? 0; - - const totalSpan = document.createElement('span'); - totalSpan.className = 'item-total'; - totalSpan.textContent = '0.00'; - - const removeBtn = document.createElement('button'); - removeBtn.type = 'button'; - removeBtn.className = 'remove-item'; - removeBtn.title = 'Remove item'; - removeBtn.textContent = '×'; - - row.appendChild(descInput); - row.appendChild(qtyInput); - row.appendChild(priceInput); - row.appendChild(totalSpan); - row.appendChild(removeBtn); - - container.appendChild(row); -} - -function renderItemsForm(items) { - const container = document.getElementById('itemsContainer'); - if (!container) return; - container.innerHTML = ''; - - if (!Array.isArray(items) || items.length === 0) { - addItemRow(); - return; - } - - items.forEach((item) => addItemRow(item)); -} - -function collectItemsFromForm(settings) { - const rows = Array.from(document.querySelectorAll('.item-row')); - const items = rows.map((row) => { - const description = row.querySelector('.item-description')?.value?.trim() ?? ''; - const quantity = parseNumber(row.querySelector('.item-quantity')?.value, 0); - const unitPrice = parseNumber(row.querySelector('.item-unit-price')?.value, 0); - const total = quantity * unitPrice; - const totalEl = row.querySelector('.item-total'); - if (totalEl) { - totalEl.textContent = formatCurrency(total, settings.currency, settings.locale); - } - return { - description, - quantity, - unitPrice, - total - }; - }); - - return items; -} - -function getDataFromForm() { - const settings = { - currency: getValue('currencyCode', 'INR').trim() || 'INR', - locale: 'en-IN' - }; - - const items = collectItemsFromForm(settings); - const taxRate = parseNumber(getValue('taxRate', 0), 0); - const discount = parseNumber(getValue('discountAmount', 0), 0); - const totals = calculateTotals(items, taxRate, discount); - - return { - schemaVersion: 1, - settings, - seller: { - name: getValue('sellerName'), - address: getValue('sellerAddress'), - email: getValue('sellerEmail'), - phone: getValue('sellerPhone') - }, - billTo: { - name: getValue('billToName'), - address: getValue('billToAddress'), - email: getValue('billToEmail'), - phone: getValue('billToPhone') - }, - invoice: { - title: getValue('invoiceTitle', 'INVOICE'), - date: getValue('invoiceDate'), - dueDate: getValue('invoiceDueDate'), - number: getValue('invoiceNumber'), - notes: getValue('invoiceNotes'), - instructions: getValue('invoiceInstructions') - }, - items, - totals, - meta: { - updatedAt: new Date().toISOString(), - showInvoice: isInvoiceVisible() - } - }; -} - -function updateFormTotalsDisplay(data) { - const { totals, settings } = data; - setText('formSubtotal', formatCurrency(totals.subtotal, settings.currency, settings.locale)); - setText('formTaxAmount', formatCurrency(totals.taxAmount, settings.currency, settings.locale)); - setText('formTotal', formatCurrency(totals.total, settings.currency, settings.locale)); -} - -function renderInvoice(data) { - const { settings, seller, billTo, invoice, items, totals } = data; - - setText('displaySellerName', seller.name); - setText('displaySellerAddress', seller.address || ''); - setText('displaySellerEmail', seller.email); - setText('displaySellerPhone', seller.phone); - - setText('displayInvoiceTitle', invoice.title || 'INVOICE'); - - setText('displayBillToName', billTo.name); - setText('displayBillToAddress', billTo.address || ''); - setText('displayBillToEmail', billTo.email); - setText('displayBillToPhone', billTo.phone); - - setText('displayInvoiceDate', formatDate(invoice.date)); - - // Conditionally show/hide due date row - const dueDateRow = document.getElementById('dueDateRow'); - if (dueDateRow) { - if (invoice.dueDate) { - dueDateRow.style.display = ''; - setText('displayInvoiceDueDate', formatDate(invoice.dueDate)); - } else { - dueDateRow.style.display = 'none'; - } - } - - setText('displayInvoiceNumber', invoice.number); - - const itemsBody = document.getElementById('displayItemsBody'); - if (itemsBody) { - itemsBody.innerHTML = ''; - items.forEach((item) => { - const row = document.createElement('tr'); - - const descTd = document.createElement('td'); - descTd.textContent = item.description || ''; - - const qtyTd = document.createElement('td'); - qtyTd.textContent = item.quantity || 0; - - const priceTd = document.createElement('td'); - priceTd.textContent = formatCurrency(item.unitPrice || 0, settings.currency, settings.locale); - - const totalTd = document.createElement('td'); - totalTd.textContent = formatCurrency(item.total || 0, settings.currency, settings.locale); - - row.appendChild(descTd); - row.appendChild(qtyTd); - row.appendChild(priceTd); - row.appendChild(totalTd); - - itemsBody.appendChild(row); - }); - } - - setText('displaySubtotal', formatCurrency(totals.subtotal, settings.currency, settings.locale)); - - // Conditionally show/hide tax row - const taxRow = document.getElementById('taxRow'); - if (taxRow) { - if (totals.taxAmount > 0) { - taxRow.style.display = ''; - setText('displayTaxAmount', formatCurrency(totals.taxAmount, settings.currency, settings.locale)); - } else { - taxRow.style.display = 'none'; - } - } - - // Conditionally show/hide discount row - const discountRow = document.getElementById('discountRow'); - if (discountRow) { - if (totals.discount > 0) { - discountRow.style.display = ''; - setText('displayDiscount', formatCurrency(totals.discount, settings.currency, settings.locale)); - } else { - discountRow.style.display = 'none'; - } - } - - setText('displayBalanceDue', formatCurrency(totals.balanceDue, settings.currency, settings.locale)); - - setText('displayNotesHeading', invoice.notes || 'Thank you for your business'); - setText('displayInstructions', invoice.instructions || ''); - - document.getElementById('invoicePlaceholder').style.display = 'none'; - document.getElementById('invoice').style.display = 'block'; - document.getElementById('downloadBtn').style.display = 'inline-block'; -} - -function isInvoiceVisible() { - const invoice = document.getElementById('invoice'); - return invoice && invoice.style.display === 'block'; -} - -function saveDraft(data) { - localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); -} - -function loadDraft() { - const raw = localStorage.getItem(STORAGE_KEY); - if (!raw) return null; - try { - return JSON.parse(raw); - } catch (error) { - return null; - } -} - -function deepMerge(target, source) { - if (!source || typeof source !== 'object') return target; - - // Dangerous keys that could lead to prototype pollution - const UNSAFE_KEYS = ['__proto__', 'constructor', 'prototype']; - - function hasUnsafeKeys(obj, visited = new Set()) { - if (!obj || typeof obj !== 'object' || visited.has(obj)) return false; - visited.add(obj); - return UNSAFE_KEYS.some(k => k in obj) || - Object.values(obj).some(v => v && typeof v === 'object' && hasUnsafeKeys(v, visited)); - } - - Object.keys(source).forEach((key) => { - // Skip prototype pollution vectors - if (UNSAFE_KEYS.includes(key)) return; - if (!Object.prototype.hasOwnProperty.call(source, key)) return; - - const value = source[key]; - if (Array.isArray(value)) { - target[key] = value.slice(); - } else if (value && typeof value === 'object') { - if (hasUnsafeKeys(value)) return; - if (!target[key] || typeof target[key] !== 'object') { - target[key] = {}; - } - deepMerge(target[key], value); - } else { - target[key] = value; - } - }); - return target; -} - -function applyDataToForm(data) { - isApplyingData = true; - - setValue('sellerName', data.seller?.name ?? ''); - setValue('sellerAddress', data.seller?.address ?? ''); - setValue('sellerEmail', data.seller?.email ?? ''); - setValue('sellerPhone', data.seller?.phone ?? ''); - setValue('billToName', data.billTo?.name ?? ''); - setValue('billToAddress', data.billTo?.address ?? ''); - setValue('billToEmail', data.billTo?.email ?? ''); - setValue('billToPhone', data.billTo?.phone ?? ''); - - setValue('invoiceTitle', data.invoice?.title ?? 'INVOICE'); - setValue('invoiceDate', data.invoice?.date ?? ''); - setValue('invoiceDueDate', data.invoice?.dueDate ?? ''); - setValue('invoiceNumber', data.invoice?.number ?? ''); - - setValue('currencyCode', data.settings?.currency ?? 'INR'); - - renderItemsForm(data.items || []); - - setValue('taxRate', data.totals?.taxRate ?? 0); - setValue('discountAmount', data.totals?.discount ?? 0); - - setValue('invoiceNotes', data.invoice?.notes ?? ''); - - const legacyBank = data.seller?.bank; - const legacyInstructions = data.invoice?.terms ?? data.invoice?.instructions ?? ''; - let mergedInstructions = legacyInstructions; - if (!mergedInstructions && legacyBank) { - const lines = []; - if (legacyBank.accountNo) lines.push(`A/c no: ${legacyBank.accountNo}`); - if (legacyBank.ifsc) lines.push(`IFSC: ${legacyBank.ifsc}`); - if (legacyBank.name) lines.push(`Name: ${legacyBank.name}`); - if (lines.length > 0) { - mergedInstructions = `Please send payment to below bank account.\n${lines.join('\n')}`; - } - } - setValue('invoiceInstructions', mergedInstructions); - - isApplyingData = false; - - syncFromForm({ render: data.meta?.showInvoice, showInvoice: data.meta?.showInvoice }); -} - -function syncFromForm(options = {}) { - const data = getDataFromForm(); - if (typeof options.showInvoice === 'boolean') { - data.meta.showInvoice = options.showInvoice; - } - updateFormTotalsDisplay(data); - saveDraft(data); - if (options.render) { - renderInvoice(data); - } - return data; -} - -function validateData(data) { - if (!data.seller.name || !data.seller.address) return false; - if (!data.billTo.name || !data.billTo.address) return false; - if (!data.invoice.date || !data.invoice.number) return false; - if (!Array.isArray(data.items) || data.items.length === 0) return false; - const validItems = data.items.some((item) => item.description && item.quantity > 0 && item.unitPrice >= 0); - return validItems; -} - -function generateBill() { - const data = syncFromForm({ showInvoice: true }); - if (!validateData(data)) { - alert('Please fill in all required fields and add at least one line item.'); - return; - } - data.meta.showInvoice = true; - saveDraft(data); - renderInvoice(data); - localStorage.setItem(LAST_NUMBER_KEY, data.invoice.number); - saveToHistory(data); - document.getElementById('invoice').scrollIntoView({ behavior: 'smooth' }); -} - -async function downloadPDF() { - const { jsPDF } = window.jspdf; - const invoiceElement = document.getElementById('invoice'); - const downloadBtn = document.getElementById('downloadBtn'); - - // Show loading state - const originalBtnText = downloadBtn.textContent; - downloadBtn.textContent = 'Generating...'; - downloadBtn.disabled = true; - - // Store original styles to restore later - const originalStyles = { - formDisplay: document.querySelector('.form-section').style.display, - invoiceHeight: invoiceElement.style.height, - invoiceOverflow: invoiceElement.style.overflow - }; - - try { - // Prepare invoice for capture - document.querySelector('.form-section').style.display = 'none'; - invoiceElement.style.height = 'auto'; - invoiceElement.style.overflow = 'visible'; - document.body.classList.add('pdf-generation'); - - // Add print-optimized styles - const printStyles = document.createElement('style'); - printStyles.id = 'pdf-print-styles'; - printStyles.textContent = ` - .pdf-generation .invoice-section { - background: white !important; - box-shadow: none !important; - padding: 40px !important; - margin: 0 !important; - width: 794px !important; - min-height: auto !important; - height: auto !important; - overflow: visible !important; - font-family: 'Inter', Arial, sans-serif !important; - } - .pdf-generation .invoice-header { margin-bottom: 30px !important; } - .pdf-generation .business-info h1 { font-size: 18px !important; } - .pdf-generation .business-info p { font-size: 12px !important; } - .pdf-generation .invoice-title h1 { font-size: 28px !important; } - .pdf-generation .invoice-table { font-size: 12px !important; } - .pdf-generation .invoice-table th, - .pdf-generation .invoice-table td { padding: 10px !important; } - `; - document.head.appendChild(printStyles); - - // Wait for styles to apply - await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))); - - // Capture with high DPI for crisp output - const canvas = await html2canvas(invoiceElement, { - scale: 3, // Higher scale for better quality - useCORS: true, - backgroundColor: '#ffffff', - logging: false, - windowWidth: 794, // A4 width at 96 DPI - onclone: (clonedDoc) => { - // Ensure cloned element is fully visible - const clonedInvoice = clonedDoc.getElementById('invoice'); - if (clonedInvoice) { - clonedInvoice.style.height = 'auto'; - clonedInvoice.style.overflow = 'visible'; - } - } - }); - - // Create PDF with proper A4 dimensions - const pdf = new jsPDF({ - orientation: 'portrait', - unit: 'mm', - format: 'a4', - compress: true - }); - - const pageWidth = pdf.internal.pageSize.getWidth(); - const pageHeight = pdf.internal.pageSize.getHeight(); - const margin = 10; - const contentWidth = pageWidth - (margin * 2); - - // Calculate image dimensions maintaining aspect ratio - const imgWidth = contentWidth; - const imgHeight = (canvas.height * imgWidth) / canvas.width; - - // Handle multi-page if content is taller than one page - const maxHeightPerPage = pageHeight - (margin * 2); - - if (imgHeight <= maxHeightPerPage) { - // Single page - center vertically if short - const yOffset = margin; - pdf.addImage(canvas.toDataURL('image/png', 1.0), 'PNG', margin, yOffset, imgWidth, imgHeight); - } else { - // Multi-page handling for long invoices - let remainingHeight = imgHeight; - let sourceY = 0; - let pageNum = 0; - - while (remainingHeight > 0) { - if (pageNum > 0) pdf.addPage(); - - const sliceHeight = Math.min(remainingHeight, maxHeightPerPage); - const sourceSliceHeight = (sliceHeight / imgHeight) * canvas.height; - - // Create a slice canvas for this page - const sliceCanvas = document.createElement('canvas'); - sliceCanvas.width = canvas.width; - sliceCanvas.height = sourceSliceHeight; - const ctx = sliceCanvas.getContext('2d'); - ctx.drawImage(canvas, 0, sourceY, canvas.width, sourceSliceHeight, 0, 0, canvas.width, sourceSliceHeight); - - pdf.addImage(sliceCanvas.toDataURL('image/png', 1.0), 'PNG', margin, margin, imgWidth, sliceHeight); - - sourceY += sourceSliceHeight; - remainingHeight -= sliceHeight; - pageNum++; - } - } - - // Generate filename - const customerName = getValue('billToName').replace(/[^a-zA-Z0-9\s]/g, '').trim().replace(/\s+/g, '-'); - const invoiceNumber = getValue('invoiceNumber'); - const filename = `Invoice-${invoiceNumber}-${customerName}.pdf`; - - pdf.save(filename); - - // Remove print styles - document.head.removeChild(printStyles); - - } catch (error) { - console.error('Error generating PDF:', error); - alert('Error generating PDF. Please try again.'); - } finally { - // Restore original styles - document.querySelector('.form-section').style.display = originalStyles.formDisplay; - invoiceElement.style.height = originalStyles.invoiceHeight; - invoiceElement.style.overflow = originalStyles.invoiceOverflow; - document.body.classList.remove('pdf-generation'); - - // Remove print styles if still present - const printStyles = document.getElementById('pdf-print-styles'); - if (printStyles) printStyles.remove(); - - // Restore button - downloadBtn.textContent = originalBtnText; - downloadBtn.disabled = false; - } -} - -function exportJsonToTextarea() { - const data = syncFromForm({ render: false }); - const json = JSON.stringify(data, null, 2); - setValue('jsonData', json); -} - -function downloadJsonFile() { - const data = syncFromForm({ render: false }); - const json = JSON.stringify(data, null, 2); - const blob = new Blob([json], { type: 'application/json' }); - const url = URL.createObjectURL(blob); - const anchor = document.createElement('a'); - const invoiceNumber = data.invoice.number || 'draft'; - anchor.href = url; - anchor.download = `invoice-${invoiceNumber}.json`; - document.body.appendChild(anchor); - anchor.click(); - anchor.remove(); - URL.revokeObjectURL(url); -} - -function importJsonData(rawJson) { - let parsed; - try { - parsed = JSON.parse(rawJson); - } catch (error) { - alert('Invalid JSON. Please check the format and try again.'); - return; - } - - const base = getDataFromForm(); - const merged = deepMerge(base, parsed); - merged.meta = merged.meta || {}; - merged.meta.showInvoice = true; - - applyDataToForm(merged); -} - -function handleFileImport(event) { - const file = event.target.files[0]; - if (!file) return; - const reader = new FileReader(); - reader.onload = () => { - importJsonData(reader.result); - }; - reader.readAsText(file); -} - -function resetDraft() { - const shouldReset = confirm('Reset the current draft? Your stored draft will be cleared.'); - if (!shouldReset) return; - - localStorage.removeItem(STORAGE_KEY); - document.getElementById('invoice').style.display = 'none'; - document.getElementById('invoicePlaceholder').style.display = 'flex'; - document.getElementById('downloadBtn').style.display = 'none'; - setValue('jsonData', ''); - - // Reset all form fields - setValue('sellerName', ''); - setValue('sellerAddress', ''); - setValue('sellerEmail', ''); - setValue('sellerPhone', ''); - setValue('billToName', ''); - setValue('billToAddress', ''); - setValue('billToEmail', ''); - setValue('billToPhone', ''); - setValue('invoiceTitle', 'INVOICE'); - setValue('invoiceDueDate', ''); - setValue('currencyCode', 'INR'); - setValue('taxRate', '0'); - setValue('discountAmount', '0'); - setValue('invoiceNotes', ''); - setValue('invoiceInstructions', ''); - - const today = new Date().toISOString().split('T')[0]; - setValue('invoiceDate', today); - - const lastNumber = localStorage.getItem(LAST_NUMBER_KEY); - if (lastNumber) { - setValue('invoiceNumber', String(parseNumber(lastNumber, 0) + 1)); - } else { - setValue('invoiceNumber', '1'); - } - - renderItemsForm([]); - ensureAtLeastOneItemRow(); - syncFromForm({ render: false, showInvoice: false }); -} - -function attachEventHandlers() { - const form = document.getElementById('billForm'); - form.addEventListener('input', () => { - if (isApplyingData) return; - const shouldRender = isInvoiceVisible(); - syncFromForm({ render: shouldRender }); - }); - - document.getElementById('addItemBtn').addEventListener('click', () => { - addItemRow({ description: '', quantity: 1, unitPrice: 0 }); - syncFromForm({ render: isInvoiceVisible() }); - }); - - const itemsContainer = document.getElementById('itemsContainer'); - itemsContainer.addEventListener('click', (event) => { - if (!event.target.classList.contains('remove-item')) return; - const row = event.target.closest('.item-row'); - if (row) row.remove(); - ensureAtLeastOneItemRow(); - syncFromForm({ render: isInvoiceVisible() }); - }); - - document.getElementById('exportJsonBtn').addEventListener('click', exportJsonToTextarea); - document.getElementById('downloadJsonBtn').addEventListener('click', downloadJsonFile); - document.getElementById('importJsonBtn').addEventListener('click', () => { - const raw = getValue('jsonData'); - if (!raw.trim()) { - alert('Paste invoice JSON first.'); - return; - } - importJsonData(raw); - }); - - document.getElementById('importFile').addEventListener('change', handleFileImport); - document.getElementById('resetDraftBtn').addEventListener('click', resetDraft); - - // Invoice number increment/decrement buttons - document.getElementById('incrementInvoice').addEventListener('click', () => { - const input = document.getElementById('invoiceNumber'); - const current = parseNumber(input.value, 0); - input.value = current + 1; - syncFromForm({ render: isInvoiceVisible() }); - }); - - document.getElementById('decrementInvoice').addEventListener('click', () => { - const input = document.getElementById('invoiceNumber'); - const current = parseNumber(input.value, 0); - if (current > 1) { - input.value = current - 1; - syncFromForm({ render: isInvoiceVisible() }); - } - }); - - // Drag and drop support for JSON textarea - const jsonTextarea = document.getElementById('jsonData'); - - jsonTextarea.addEventListener('dragover', (e) => { - e.preventDefault(); - jsonTextarea.classList.add('drag-over'); - }); - - jsonTextarea.addEventListener('dragleave', (e) => { - e.preventDefault(); - jsonTextarea.classList.remove('drag-over'); - }); - - jsonTextarea.addEventListener('drop', (e) => { - e.preventDefault(); - jsonTextarea.classList.remove('drag-over'); - - const file = e.dataTransfer.files[0]; - if (!file) return; - - if (!file.name.endsWith('.json') && file.type !== 'application/json') { - alert('Please drop a .json file.'); - return; - } - - const reader = new FileReader(); - reader.onload = () => { - importJsonData(reader.result); - }; - reader.readAsText(file); - }); - - // History panel handlers - document.getElementById('historyToggle').addEventListener('click', () => toggleHistoryPanel()); - document.getElementById('clearHistoryBtn').addEventListener('click', clearHistory); - - document.getElementById('historyList').addEventListener('click', (e) => { - const deleteBtn = e.target.closest('.history-item-delete'); - if (deleteBtn) { - e.stopPropagation(); - const id = parseInt(deleteBtn.dataset.id, 10); - deleteFromHistory(id); - return; - } - - const item = e.target.closest('.history-item'); - if (item) { - const id = parseInt(item.dataset.id, 10); - loadFromHistory(id); - } - }); -} - -document.addEventListener('DOMContentLoaded', () => { - const today = new Date().toISOString().split('T')[0]; - if (!getValue('invoiceDate')) { - setValue('invoiceDate', today); - } - - attachEventHandlers(); - - const storedDraft = loadDraft(); - if (storedDraft) { - applyDataToForm(storedDraft); - if (storedDraft.meta?.showInvoice) { - renderInvoice(storedDraft); - } - return; - } - - const lastNumber = localStorage.getItem(LAST_NUMBER_KEY); - if (lastNumber && !getValue('invoiceNumber')) { - setValue('invoiceNumber', String(parseNumber(lastNumber, 0) + 1)); - } - - ensureAtLeastOneItemRow(); - syncFromForm({ render: false, showInvoice: false }); -}); diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..1503142 --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,286 @@ +/** + * Rebill - Invoice Generator + * Main Application Entry Point + */ + +// Import modules +import { getValue, setValue } from './modules/dom.js'; +import { parseNumber } from './modules/formatters.js'; +import { saveDraft, loadDraft, clearDraft, STORAGE_KEY } from './modules/storage.js'; +import { + getHistory, + saveToHistory, + deleteFromHistory, + clearHistory, + getHistoryEntry, + renderHistoryList, + toggleHistoryPanel +} from './modules/history.js'; +import { addItemRow, renderItemsForm, ensureAtLeastOneItemRow } from './modules/items.js'; +import { renderInvoice, isInvoiceVisible } from './modules/invoice.js'; +import { + getDataFromForm, + updateFormTotalsDisplay, + validateData, + syncFromForm, + applyDataToForm +} from './modules/form.js'; +import { downloadPDF, shareInvoice } from './modules/pdf.js'; +import { + exportJsonToTextarea, + downloadJsonFile, + importJsonData, + handleFileImport +} from './modules/json-io.js'; + +// Constants +const LAST_NUMBER_KEY = 'invoice.lastNumber'; + +// State +let isApplyingData = false; + +/** + * Generate bill from form data + */ +function generateBill() { + const data = syncFromForm({ showInvoice: true }); + if (!validateData(data)) { + alert('Please fill in all required fields and add at least one line item.'); + return; + } + data.meta.showInvoice = true; + saveDraft(data); + renderInvoice(data); + localStorage.setItem(LAST_NUMBER_KEY, data.invoice.number); + saveToHistory(data); + document.getElementById('invoice').scrollIntoView({ behavior: 'smooth' }); +} + +/** + * Load invoice from history by ID + * @param {number} id - History entry ID + */ +function loadFromHistory(id) { + const entry = getHistoryEntry(id); + if (!entry || !entry.data) return; + applyDataToForm(entry.data, (options) => { + isApplyingData = true; + syncFromForm(options); + isApplyingData = false; + }); + toggleHistoryPanel(false); +} + +/** + * Reset the current draft + */ +function resetDraft() { + const shouldReset = confirm('Reset the current draft? Your stored draft will be cleared.'); + if (!shouldReset) return; + + clearDraft(); + document.getElementById('invoice').style.display = 'none'; + document.getElementById('invoicePlaceholder').style.display = 'flex'; + document.getElementById('downloadBtn').style.display = 'none'; + document.getElementById('shareBtn').style.display = 'none'; + setValue('jsonData', ''); + + // Reset all form fields + setValue('sellerName', ''); + setValue('sellerAddress', ''); + setValue('sellerEmail', ''); + setValue('sellerPhone', ''); + setValue('billToName', ''); + setValue('billToAddress', ''); + setValue('billToEmail', ''); + setValue('billToPhone', ''); + setValue('invoiceTitle', 'INVOICE'); + setValue('invoiceDueDate', ''); + setValue('currencyCode', 'INR'); + setValue('taxRate', '0'); + setValue('discountAmount', '0'); + setValue('invoiceNotes', ''); + setValue('invoiceInstructions', ''); + + const today = new Date().toISOString().split('T')[0]; + setValue('invoiceDate', today); + + const lastNumber = localStorage.getItem(LAST_NUMBER_KEY); + if (lastNumber) { + setValue('invoiceNumber', String(parseNumber(lastNumber, 0) + 1)); + } else { + setValue('invoiceNumber', '1'); + } + + renderItemsForm([]); + ensureAtLeastOneItemRow(addItemRow); + syncFromForm({ render: false, showInvoice: false }); +} + +/** + * Attach all event handlers + */ +function attachEventHandlers() { + const form = document.getElementById('billForm'); + form.addEventListener('input', () => { + if (isApplyingData) return; + const shouldRender = isInvoiceVisible(); + syncFromForm({ render: shouldRender }); + }); + + document.getElementById('addItemBtn').addEventListener('click', () => { + addItemRow({ description: '', quantity: 1, unitPrice: 0 }); + syncFromForm({ render: isInvoiceVisible() }); + }); + + const itemsContainer = document.getElementById('itemsContainer'); + itemsContainer.addEventListener('click', (event) => { + if (!event.target.classList.contains('remove-item')) return; + const row = event.target.closest('.item-row'); + if (row) row.remove(); + ensureAtLeastOneItemRow(addItemRow); + syncFromForm({ render: isInvoiceVisible() }); + }); + + document.getElementById('exportJsonBtn').addEventListener('click', exportJsonToTextarea); + document.getElementById('downloadJsonBtn').addEventListener('click', downloadJsonFile); + document.getElementById('importJsonBtn').addEventListener('click', () => { + const raw = getValue('jsonData'); + if (!raw.trim()) { + alert('Paste invoice JSON first.'); + return; + } + importJsonData(raw, (options) => { + isApplyingData = true; + syncFromForm(options); + isApplyingData = false; + }); + }); + + document.getElementById('importFile').addEventListener('change', (event) => { + handleFileImport(event, (options) => { + isApplyingData = true; + syncFromForm(options); + isApplyingData = false; + }); + }); + document.getElementById('resetDraftBtn').addEventListener('click', resetDraft); + + // Invoice number increment/decrement buttons + document.getElementById('incrementInvoice').addEventListener('click', () => { + const input = document.getElementById('invoiceNumber'); + const current = parseNumber(input.value, 0); + input.value = current + 1; + syncFromForm({ render: isInvoiceVisible() }); + }); + + document.getElementById('decrementInvoice').addEventListener('click', () => { + const input = document.getElementById('invoiceNumber'); + const current = parseNumber(input.value, 0); + if (current > 1) { + input.value = current - 1; + syncFromForm({ render: isInvoiceVisible() }); + } + }); + + // Drag and drop support for JSON textarea + const jsonTextarea = document.getElementById('jsonData'); + + jsonTextarea.addEventListener('dragover', (e) => { + e.preventDefault(); + jsonTextarea.classList.add('drag-over'); + }); + + jsonTextarea.addEventListener('dragleave', (e) => { + e.preventDefault(); + jsonTextarea.classList.remove('drag-over'); + }); + + jsonTextarea.addEventListener('drop', (e) => { + e.preventDefault(); + jsonTextarea.classList.remove('drag-over'); + + const file = e.dataTransfer.files[0]; + if (!file) return; + + if (!file.name.endsWith('.json') && file.type !== 'application/json') { + alert('Please drop a .json file.'); + return; + } + + const reader = new FileReader(); + reader.onload = () => { + importJsonData(reader.result, (options) => { + isApplyingData = true; + syncFromForm(options); + isApplyingData = false; + }); + }; + reader.readAsText(file); + }); + + // History panel handlers + document.getElementById('historyToggle').addEventListener('click', () => toggleHistoryPanel()); + document.getElementById('clearHistoryBtn').addEventListener('click', () => { + clearHistory(); + renderHistoryList(); + }); + + document.getElementById('historyList').addEventListener('click', (e) => { + const deleteBtn = e.target.closest('.history-item-delete'); + if (deleteBtn) { + e.stopPropagation(); + const id = parseInt(deleteBtn.dataset.id, 10); + deleteFromHistory(id); + renderHistoryList(); + return; + } + + const item = e.target.closest('.history-item'); + if (item) { + const id = parseInt(item.dataset.id, 10); + loadFromHistory(id); + } + }); +} + +/** + * Initialize the application + */ +function init() { + const today = new Date().toISOString().split('T')[0]; + if (!getValue('invoiceDate')) { + setValue('invoiceDate', today); + } + + attachEventHandlers(); + + const storedDraft = loadDraft(); + if (storedDraft) { + isApplyingData = true; + applyDataToForm(storedDraft, (options) => { + syncFromForm(options); + }); + isApplyingData = false; + if (storedDraft.meta?.showInvoice) { + renderInvoice(storedDraft); + } + return; + } + + const lastNumber = localStorage.getItem(LAST_NUMBER_KEY); + if (lastNumber && !getValue('invoiceNumber')) { + setValue('invoiceNumber', String(parseNumber(lastNumber, 0) + 1)); + } + + ensureAtLeastOneItemRow(addItemRow); + syncFromForm({ render: false, showInvoice: false }); +} + +// Expose functions to global scope for onclick handlers in HTML +window.generateBill = generateBill; +window.downloadPDF = downloadPDF; +window.shareInvoice = shareInvoice; + +// Initialize on DOM ready +document.addEventListener('DOMContentLoaded', init); diff --git a/src/js/modules/calculations.js b/src/js/modules/calculations.js new file mode 100644 index 0000000..4a821ca --- /dev/null +++ b/src/js/modules/calculations.js @@ -0,0 +1,25 @@ +/** + * Calculations Module + * Invoice totals calculation + */ + +/** + * Calculate invoice totals from items + * @param {Array} items - Array of line items with total property + * @param {number} taxRate - Tax rate as percentage + * @param {number} discount - Discount amount + * @returns {Object} Totals object with subtotal, taxRate, taxAmount, discount, total, balanceDue + */ +export function calculateTotals(items, taxRate, discount) { + const subtotal = items.reduce((sum, item) => sum + item.total, 0); + const taxAmount = subtotal * (taxRate / 100); + const total = subtotal + taxAmount - discount; + return { + subtotal, + taxRate, + taxAmount, + discount, + total, + balanceDue: total + }; +} diff --git a/src/js/modules/dom.js b/src/js/modules/dom.js new file mode 100644 index 0000000..19f041e --- /dev/null +++ b/src/js/modules/dom.js @@ -0,0 +1,97 @@ +/** + * DOM Helper Functions + * Utilities for getting/setting form values and creating clickable links + */ + +/** + * Get value from a form element by ID + * @param {string} id - Element ID + * @param {string} fallback - Default value if element not found + * @returns {string} Element value or fallback + */ +export function getValue(id, fallback = '') { + const el = document.getElementById(id); + if (!el) return fallback; + return el.value ?? fallback; +} + +/** + * Set value on a form element by ID + * @param {string} id - Element ID + * @param {*} value - Value to set + */ +export function setValue(id, value) { + const el = document.getElementById(id); + if (!el) return; + el.value = value ?? ''; +} + +/** + * Set text content of an element by ID + * @param {string} id - Element ID + * @param {*} value - Text to set + */ +export function setText(id, value) { + const el = document.getElementById(id); + if (!el) return; + el.textContent = value ?? ''; +} + +/** + * Escape HTML special characters to prevent XSS + * @param {string} str - String to escape + * @returns {string} Escaped string + */ +export function escapeHtml(str) { + if (str == null) return ''; + return String(str) + .replace(/&/g, '&') + .replace(//g, '>') + .replace(/"/g, '"') + .replace(/'/g, '''); +} + +/** + * Set clickable email link in an element + * @param {string} id - Element ID + * @param {string} email - Email address + */ +export function setEmailLink(id, email) { + const el = document.getElementById(id); + if (!el) return; + if (email && email.trim()) { + el.innerHTML = ''; + const link = document.createElement('a'); + link.href = `mailto:${escapeHtml(email.trim())}`; + link.textContent = email.trim(); + link.style.color = 'inherit'; + link.style.textDecoration = 'none'; + el.appendChild(link); + } else { + el.textContent = ''; + } +} + +/** + * Set clickable phone link in an element + * @param {string} id - Element ID + * @param {string} phone - Phone number + */ +export function setPhoneLink(id, phone) { + const el = document.getElementById(id); + if (!el) return; + if (phone && phone.trim()) { + el.innerHTML = ''; + const link = document.createElement('a'); + // Remove spaces and special chars for tel: link + const cleanPhone = phone.trim().replace(/[\s\-\(\)]/g, ''); + link.href = `tel:${escapeHtml(cleanPhone)}`; + link.textContent = phone.trim(); + link.style.color = 'inherit'; + link.style.textDecoration = 'none'; + el.appendChild(link); + } else { + el.textContent = ''; + } +} diff --git a/src/js/modules/form.js b/src/js/modules/form.js new file mode 100644 index 0000000..26a5240 --- /dev/null +++ b/src/js/modules/form.js @@ -0,0 +1,151 @@ +/** + * Form Module + * Form data collection and synchronization + */ + +import { getValue, setValue, setText } from './dom.js'; +import { parseNumber, formatCurrency } from './formatters.js'; +import { calculateTotals } from './calculations.js'; +import { collectItemsFromForm, renderItemsForm, addItemRow } from './items.js'; +import { saveDraft, deepMerge } from './storage.js'; +import { renderInvoice, isInvoiceVisible } from './invoice.js'; + +/** + * Get all invoice data from the form + * @returns {Object} Complete invoice data object + */ +export function getDataFromForm() { + const settings = { + currency: getValue('currencyCode', 'INR').trim() || 'INR', + locale: 'en-IN' + }; + + const items = collectItemsFromForm(settings); + const taxRate = parseNumber(getValue('taxRate', 0), 0); + const discount = parseNumber(getValue('discountAmount', 0), 0); + const totals = calculateTotals(items, taxRate, discount); + + return { + schemaVersion: 1, + settings, + seller: { + name: getValue('sellerName'), + address: getValue('sellerAddress'), + email: getValue('sellerEmail'), + phone: getValue('sellerPhone') + }, + billTo: { + name: getValue('billToName'), + address: getValue('billToAddress'), + email: getValue('billToEmail'), + phone: getValue('billToPhone') + }, + invoice: { + title: getValue('invoiceTitle', 'INVOICE'), + date: getValue('invoiceDate'), + dueDate: getValue('invoiceDueDate'), + number: getValue('invoiceNumber'), + notes: getValue('invoiceNotes'), + instructions: getValue('invoiceInstructions') + }, + items, + totals, + meta: { + updatedAt: new Date().toISOString(), + showInvoice: isInvoiceVisible() + } + }; +} + +/** + * Update form totals display + * @param {Object} data - Invoice data with totals + */ +export function updateFormTotalsDisplay(data) { + const { totals, settings } = data; + setText('formSubtotal', formatCurrency(totals.subtotal, settings.currency, settings.locale)); + setText('formTaxAmount', formatCurrency(totals.taxAmount, settings.currency, settings.locale)); + setText('formTotal', formatCurrency(totals.total, settings.currency, settings.locale)); +} + +/** + * Validate invoice data + * @param {Object} data - Invoice data to validate + * @returns {boolean} True if valid + */ +export function validateData(data) { + if (!data.seller.name || !data.seller.address) return false; + if (!data.billTo.name || !data.billTo.address) return false; + if (!data.invoice.date || !data.invoice.number) return false; + if (!Array.isArray(data.items) || data.items.length === 0) return false; + const validItems = data.items.some((item) => item.description && item.quantity > 0 && item.unitPrice >= 0); + return validItems; +} + +/** + * Sync data from form, save draft, and optionally render + * @param {Object} options - { render: boolean, showInvoice: boolean } + * @returns {Object} Current form data + */ +export function syncFromForm(options = {}) { + const data = getDataFromForm(); + if (typeof options.showInvoice === 'boolean') { + data.meta.showInvoice = options.showInvoice; + } + updateFormTotalsDisplay(data); + saveDraft(data); + if (options.render) { + renderInvoice(data); + } + return data; +} + +/** + * Apply data to form fields + * @param {Object} data - Invoice data to apply + * @param {Function} syncCallback - Callback to sync after applying + */ +export function applyDataToForm(data, syncCallback) { + setValue('sellerName', data.seller?.name ?? ''); + setValue('sellerAddress', data.seller?.address ?? ''); + setValue('sellerEmail', data.seller?.email ?? ''); + setValue('sellerPhone', data.seller?.phone ?? ''); + setValue('billToName', data.billTo?.name ?? ''); + setValue('billToAddress', data.billTo?.address ?? ''); + setValue('billToEmail', data.billTo?.email ?? ''); + setValue('billToPhone', data.billTo?.phone ?? ''); + + setValue('invoiceTitle', data.invoice?.title ?? 'INVOICE'); + setValue('invoiceDate', data.invoice?.date ?? ''); + setValue('invoiceDueDate', data.invoice?.dueDate ?? ''); + setValue('invoiceNumber', data.invoice?.number ?? ''); + + setValue('currencyCode', data.settings?.currency ?? 'INR'); + + renderItemsForm(data.items || []); + + setValue('taxRate', data.totals?.taxRate ?? 0); + setValue('discountAmount', data.totals?.discount ?? 0); + + setValue('invoiceNotes', data.invoice?.notes ?? ''); + + const legacyBank = data.seller?.bank; + const legacyInstructions = data.invoice?.terms ?? data.invoice?.instructions ?? ''; + let mergedInstructions = legacyInstructions; + if (!mergedInstructions && legacyBank) { + const lines = []; + if (legacyBank.accountNo) lines.push(`A/c no: ${legacyBank.accountNo}`); + if (legacyBank.ifsc) lines.push(`IFSC: ${legacyBank.ifsc}`); + if (legacyBank.name) lines.push(`Name: ${legacyBank.name}`); + if (lines.length > 0) { + mergedInstructions = `Please send payment to below bank account.\n${lines.join('\n')}`; + } + } + setValue('invoiceInstructions', mergedInstructions); + + if (syncCallback) { + syncCallback({ render: data.meta?.showInvoice, showInvoice: data.meta?.showInvoice }); + } +} + +export { deepMerge }; diff --git a/src/js/modules/formatters.js b/src/js/modules/formatters.js new file mode 100644 index 0000000..d9a77bc --- /dev/null +++ b/src/js/modules/formatters.js @@ -0,0 +1,52 @@ +/** + * Formatting Functions + * Number parsing and currency/date formatting utilities + */ + +/** + * Parse a value as a number with fallback + * @param {*} value - Value to parse + * @param {number} fallback - Default if parsing fails + * @returns {number} Parsed number or fallback + */ +export function parseNumber(value, fallback = 0) { + const num = parseFloat(value); + return Number.isFinite(num) ? num : fallback; +} + +/** + * Format amount as currency string + * @param {number} amount - Amount to format + * @param {string} currency - Currency code (e.g., 'INR', 'USD') + * @param {string} locale - Locale string (e.g., 'en-IN') + * @returns {string} Formatted currency string + */ +export function formatCurrency(amount, currency, locale) { + const safeAmount = Number.isFinite(amount) ? amount : 0; + try { + return new Intl.NumberFormat(locale || 'en-IN', { + style: 'currency', + currency: currency || 'INR', + minimumFractionDigits: 2, + maximumFractionDigits: 2 + }).format(safeAmount); + } catch (error) { + const suffix = currency ? ` ${currency}` : ''; + return `${safeAmount.toFixed(2)}${suffix}`; + } +} + +/** + * Format date value as DD/MM/YYYY + * @param {string|Date} dateValue - Date to format + * @returns {string} Formatted date string + */ +export function formatDate(dateValue) { + if (!dateValue) return ''; + const date = new Date(dateValue); + if (Number.isNaN(date.getTime())) return dateValue; + const day = String(date.getDate()).padStart(2, '0'); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const year = String(date.getFullYear()); + return `${day}/${month}/${year}`; +} diff --git a/src/js/modules/history.js b/src/js/modules/history.js new file mode 100644 index 0000000..77b8d24 --- /dev/null +++ b/src/js/modules/history.js @@ -0,0 +1,156 @@ +/** + * History Module + * Invoice history management in localStorage + */ + +import { formatDate, formatCurrency } from './formatters.js'; + +const HISTORY_KEY = 'invoice.history'; + +/** + * Get all history entries from localStorage + * @returns {Array} Array of history entries + */ +export function getHistory() { + const raw = localStorage.getItem(HISTORY_KEY); + if (!raw) return []; + try { + return JSON.parse(raw); + } catch (e) { + return []; + } +} + +/** + * Save invoice data to history + * @param {Object} data - Invoice data to save + */ +export function saveToHistory(data) { + const history = getHistory(); + const entry = { + id: Date.now(), + date: data.invoice?.date || new Date().toISOString().split('T')[0], + number: data.invoice?.number || '', + customerName: data.billTo?.name || '', + total: data.totals?.total || 0, + currency: data.settings?.currency || 'INR', + data: data + }; + + // Check for duplicate invoice number + const existingIndex = history.findIndex(h => h.number === entry.number && entry.number); + if (existingIndex >= 0) { + history[existingIndex] = entry; + } else { + history.unshift(entry); + } + + // Keep only last 50 entries + const trimmed = history.slice(0, 50); + + try { + localStorage.setItem(HISTORY_KEY, JSON.stringify(trimmed)); + } catch (e) { + console.warn('Failed to save history:', e); + } +} + +/** + * Delete a history entry by ID + * @param {number} id - Entry ID to delete + */ +export function deleteFromHistory(id) { + const history = getHistory().filter(h => h.id !== id); + localStorage.setItem(HISTORY_KEY, JSON.stringify(history)); +} + +/** + * Clear all history entries + */ +export function clearHistory() { + if (!confirm('Clear all invoice history? This cannot be undone.')) return; + localStorage.removeItem(HISTORY_KEY); +} + +/** + * Get a history entry by ID + * @param {number} id - Entry ID + * @returns {Object|null} History entry or null + */ +export function getHistoryEntry(id) { + const history = getHistory(); + return history.find(h => h.id === id) || null; +} + +/** + * Render the history list in the UI + * @param {Function} onLoad - Callback when an entry is loaded + * @param {Function} onDelete - Callback when an entry is deleted + */ +export function renderHistoryList() { + const list = document.getElementById('historyList'); + if (!list) return; + + const history = getHistory(); + list.innerHTML = ''; + + if (history.length === 0) { + const empty = document.createElement('p'); + empty.className = 'history-empty'; + empty.textContent = 'No saved invoices yet'; + list.appendChild(empty); + return; + } + + history.forEach((entry) => { + const item = document.createElement('div'); + item.className = 'history-item'; + item.dataset.id = entry.id; + + const info = document.createElement('div'); + info.className = 'history-item-info'; + + const title = document.createElement('div'); + title.className = 'history-item-title'; + title.textContent = `#${entry.number} - ${entry.customerName || 'Unknown'}`; + + const meta = document.createElement('div'); + meta.className = 'history-item-meta'; + meta.textContent = `${formatDate(entry.date)} · ${formatCurrency(entry.total, entry.currency)}`; + + info.appendChild(title); + info.appendChild(meta); + + const deleteBtn = document.createElement('button'); + deleteBtn.type = 'button'; + deleteBtn.className = 'history-item-delete'; + deleteBtn.dataset.id = entry.id; + deleteBtn.title = 'Delete'; + deleteBtn.textContent = '×'; + + item.appendChild(info); + item.appendChild(deleteBtn); + list.appendChild(item); + }); +} + +/** + * Toggle history panel visibility + * @param {boolean} show - Optional explicit show/hide + */ +export function toggleHistoryPanel(show) { + const panel = document.getElementById('historyPanel'); + if (!panel) return; + + if (typeof show === 'boolean') { + panel.style.display = show ? 'block' : 'none'; + } else { + panel.style.display = panel.style.display === 'none' ? 'block' : 'none'; + } + + if (panel.style.display === 'block') { + renderHistoryList(); + } +} + +export { HISTORY_KEY }; diff --git a/src/js/modules/invoice.js b/src/js/modules/invoice.js new file mode 100644 index 0000000..0fee987 --- /dev/null +++ b/src/js/modules/invoice.js @@ -0,0 +1,112 @@ +/** + * Invoice Rendering Module + * Display invoice preview + */ + +import { setText, setEmailLink, setPhoneLink } from './dom.js'; +import { formatCurrency, formatDate } from './formatters.js'; + +/** + * Check if invoice preview is currently visible + * @returns {boolean} True if invoice is visible + */ +export function isInvoiceVisible() { + const invoice = document.getElementById('invoice'); + return invoice && invoice.style.display === 'block'; +} + +/** + * Render invoice preview from data + * @param {Object} data - Complete invoice data object + */ +export function renderInvoice(data) { + const { settings, seller, billTo, invoice, items, totals } = data; + + setText('displaySellerName', seller.name); + setText('displaySellerAddress', seller.address || ''); + setEmailLink('displaySellerEmail', seller.email); + setPhoneLink('displaySellerPhone', seller.phone); + + setText('displayInvoiceTitle', invoice.title || 'INVOICE'); + + setText('displayBillToName', billTo.name); + setText('displayBillToAddress', billTo.address || ''); + setEmailLink('displayBillToEmail', billTo.email); + setPhoneLink('displayBillToPhone', billTo.phone); + + setText('displayInvoiceDate', formatDate(invoice.date)); + + // Conditionally show/hide due date row + const dueDateRow = document.getElementById('dueDateRow'); + if (dueDateRow) { + if (invoice.dueDate) { + dueDateRow.style.display = ''; + setText('displayInvoiceDueDate', formatDate(invoice.dueDate)); + } else { + dueDateRow.style.display = 'none'; + } + } + + setText('displayInvoiceNumber', invoice.number); + + const itemsBody = document.getElementById('displayItemsBody'); + if (itemsBody) { + itemsBody.innerHTML = ''; + items.forEach((item) => { + const row = document.createElement('tr'); + + const descTd = document.createElement('td'); + descTd.textContent = item.description || ''; + + const qtyTd = document.createElement('td'); + qtyTd.textContent = item.quantity || 0; + + const priceTd = document.createElement('td'); + priceTd.textContent = formatCurrency(item.unitPrice || 0, settings.currency, settings.locale); + + const totalTd = document.createElement('td'); + totalTd.textContent = formatCurrency(item.total || 0, settings.currency, settings.locale); + + row.appendChild(descTd); + row.appendChild(qtyTd); + row.appendChild(priceTd); + row.appendChild(totalTd); + + itemsBody.appendChild(row); + }); + } + + setText('displaySubtotal', formatCurrency(totals.subtotal, settings.currency, settings.locale)); + + // Conditionally show/hide tax row + const taxRow = document.getElementById('taxRow'); + if (taxRow) { + if (totals.taxAmount > 0) { + taxRow.style.display = ''; + setText('displayTaxAmount', formatCurrency(totals.taxAmount, settings.currency, settings.locale)); + } else { + taxRow.style.display = 'none'; + } + } + + // Conditionally show/hide discount row + const discountRow = document.getElementById('discountRow'); + if (discountRow) { + if (totals.discount > 0) { + discountRow.style.display = ''; + setText('displayDiscount', formatCurrency(totals.discount, settings.currency, settings.locale)); + } else { + discountRow.style.display = 'none'; + } + } + + setText('displayBalanceDue', formatCurrency(totals.balanceDue, settings.currency, settings.locale)); + + setText('displayNotesHeading', invoice.notes || 'Thank you for your business'); + setText('displayInstructions', invoice.instructions || ''); + + document.getElementById('invoicePlaceholder').style.display = 'none'; + document.getElementById('invoice').style.display = 'block'; + document.getElementById('downloadBtn').style.display = 'inline-block'; + document.getElementById('shareBtn').style.display = 'inline-block'; +} diff --git a/src/js/modules/items.js b/src/js/modules/items.js new file mode 100644 index 0000000..7673eb8 --- /dev/null +++ b/src/js/modules/items.js @@ -0,0 +1,114 @@ +/** + * Items Module + * Line items form management + */ + +import { parseNumber, formatCurrency } from './formatters.js'; + +/** + * Ensure at least one item row exists + * @param {Function} addItemRowFn - Function to add an item row + */ +export function ensureAtLeastOneItemRow(addItemRowFn) { + const container = document.getElementById('itemsContainer'); + if (!container || container.querySelectorAll('.item-row').length > 0) return; + addItemRowFn({ + description: '', + quantity: 1, + unitPrice: 0 + }); +} + +/** + * Add an item row to the form + * @param {Object} item - Item data (description, quantity, unitPrice) + */ +export function addItemRow(item = {}) { + const container = document.getElementById('itemsContainer'); + if (!container) return; + + const row = document.createElement('div'); + row.className = 'item-row'; + + const descInput = document.createElement('input'); + descInput.type = 'text'; + descInput.className = 'item-description'; + descInput.placeholder = 'Description'; + descInput.value = item.description ?? ''; + + const qtyInput = document.createElement('input'); + qtyInput.type = 'number'; + qtyInput.className = 'item-quantity'; + qtyInput.min = '0'; + qtyInput.step = '1'; + qtyInput.value = item.quantity ?? 1; + + const priceInput = document.createElement('input'); + priceInput.type = 'number'; + priceInput.className = 'item-unit-price'; + priceInput.min = '0'; + priceInput.step = '0.01'; + priceInput.value = item.unitPrice ?? 0; + + const totalSpan = document.createElement('span'); + totalSpan.className = 'item-total'; + totalSpan.textContent = '0.00'; + + const removeBtn = document.createElement('button'); + removeBtn.type = 'button'; + removeBtn.className = 'remove-item'; + removeBtn.title = 'Remove item'; + removeBtn.textContent = '×'; + + row.appendChild(descInput); + row.appendChild(qtyInput); + row.appendChild(priceInput); + row.appendChild(totalSpan); + row.appendChild(removeBtn); + + container.appendChild(row); +} + +/** + * Render items form from data + * @param {Array} items - Array of item objects + */ +export function renderItemsForm(items) { + const container = document.getElementById('itemsContainer'); + if (!container) return; + container.innerHTML = ''; + + if (!Array.isArray(items) || items.length === 0) { + addItemRow(); + return; + } + + items.forEach((item) => addItemRow(item)); +} + +/** + * Collect items data from the form + * @param {Object} settings - Settings with currency and locale + * @returns {Array} Array of item objects with totals + */ +export function collectItemsFromForm(settings) { + const rows = Array.from(document.querySelectorAll('.item-row')); + const items = rows.map((row) => { + const description = row.querySelector('.item-description')?.value?.trim() ?? ''; + const quantity = parseNumber(row.querySelector('.item-quantity')?.value, 0); + const unitPrice = parseNumber(row.querySelector('.item-unit-price')?.value, 0); + const total = quantity * unitPrice; + const totalEl = row.querySelector('.item-total'); + if (totalEl) { + totalEl.textContent = formatCurrency(total, settings.currency, settings.locale); + } + return { + description, + quantity, + unitPrice, + total + }; + }); + + return items; +} diff --git a/src/js/modules/json-io.js b/src/js/modules/json-io.js new file mode 100644 index 0000000..809ecfe --- /dev/null +++ b/src/js/modules/json-io.js @@ -0,0 +1,72 @@ +/** + * JSON Import/Export Module + * Export and import invoice data as JSON + */ + +import { getValue, setValue } from './dom.js'; +import { getDataFromForm, applyDataToForm, syncFromForm } from './form.js'; +import { deepMerge } from './storage.js'; + +/** + * Export current form data to JSON textarea + */ +export function exportJsonToTextarea() { + const data = syncFromForm({ render: false }); + const json = JSON.stringify(data, null, 2); + setValue('jsonData', json); +} + +/** + * Download form data as JSON file + */ +export function downloadJsonFile() { + const data = syncFromForm({ render: false }); + const json = JSON.stringify(data, null, 2); + const blob = new Blob([json], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const anchor = document.createElement('a'); + const invoiceNumber = data.invoice.number || 'draft'; + anchor.href = url; + anchor.download = `invoice-${invoiceNumber}.json`; + document.body.appendChild(anchor); + anchor.click(); + anchor.remove(); + URL.revokeObjectURL(url); +} + +/** + * Import JSON data and apply to form + * @param {string} rawJson - JSON string to import + * @param {Function} syncCallback - Callback to sync after import + */ +export function importJsonData(rawJson, syncCallback) { + let parsed; + try { + parsed = JSON.parse(rawJson); + } catch (error) { + alert('Invalid JSON. Please check the format and try again.'); + return; + } + + const base = getDataFromForm(); + const merged = deepMerge(base, parsed); + merged.meta = merged.meta || {}; + merged.meta.showInvoice = true; + + applyDataToForm(merged, syncCallback); +} + +/** + * Handle file import from file input + * @param {Event} event - File input change event + * @param {Function} syncCallback - Callback to sync after import + */ +export function handleFileImport(event, syncCallback) { + const file = event.target.files[0]; + if (!file) return; + const reader = new FileReader(); + reader.onload = () => { + importJsonData(reader.result, syncCallback); + }; + reader.readAsText(file); +} diff --git a/src/js/modules/pdf.js b/src/js/modules/pdf.js new file mode 100644 index 0000000..db080b3 --- /dev/null +++ b/src/js/modules/pdf.js @@ -0,0 +1,329 @@ +/** + * PDF Module + * PDF generation and sharing functionality + */ + +import { getValue } from './dom.js'; +import { getDataFromForm } from './form.js'; + +/** + * Generate PDF and download it + */ +export async function downloadPDF() { + const { jsPDF } = window.jspdf; + const invoiceElement = document.getElementById('invoice'); + const downloadBtn = document.getElementById('downloadBtn'); + + // Show loading state + const originalBtnText = downloadBtn.textContent; + downloadBtn.textContent = 'Generating...'; + downloadBtn.disabled = true; + + // Get invoice data for metadata + const data = getDataFromForm(); + const customerName = data.billTo?.name?.replace(/[^a-zA-Z0-9\s]/g, '').trim().replace(/\s+/g, '-') || 'Customer'; + const invoiceNumber = data.invoice?.number || 'draft'; + const filename = `Invoice-${invoiceNumber}-${customerName}.pdf`; + + // Store original styles to restore later + const originalStyles = { + formDisplay: document.querySelector('.form-section').style.display, + invoiceHeight: invoiceElement.style.height, + invoiceOverflow: invoiceElement.style.overflow + }; + + try { + // Prepare invoice for capture + document.querySelector('.form-section').style.display = 'none'; + invoiceElement.style.height = 'auto'; + invoiceElement.style.overflow = 'visible'; + document.body.classList.add('pdf-generation'); + + // Add print-optimized styles + const printStyles = document.createElement('style'); + printStyles.id = 'pdf-print-styles'; + printStyles.textContent = ` + .pdf-generation .invoice-section { + background: white !important; + box-shadow: none !important; + padding: 40px !important; + margin: 0 !important; + width: 794px !important; + min-height: auto !important; + height: auto !important; + overflow: visible !important; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; + } + .pdf-generation .invoice-header { margin-bottom: 30px !important; } + .pdf-generation .business-info h1 { font-size: 18px !important; font-weight: 600 !important; } + .pdf-generation .business-info p { font-size: 11px !important; line-height: 1.5 !important; } + .pdf-generation .invoice-title h1 { font-size: 28px !important; font-weight: 700 !important; } + .pdf-generation .invoice-table { font-size: 11px !important; } + .pdf-generation .invoice-table th, + .pdf-generation .invoice-table td { padding: 10px !important; } + .pdf-generation .invoice-table th { font-size: 10px !important; font-weight: 600 !important; } + /* Tabular figures for number alignment */ + .pdf-generation .invoice-table td:nth-child(2), + .pdf-generation .invoice-table td:nth-child(3), + .pdf-generation .invoice-table td:nth-child(4), + .pdf-generation .invoice-totals span, + .pdf-generation .balance-due span { + font-variant-numeric: tabular-nums !important; + } + `; + document.head.appendChild(printStyles); + + // Wait for styles to apply + await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))); + + // Capture with high DPI for crisp output + const canvas = await html2canvas(invoiceElement, { + scale: 3, // Higher scale for better quality + useCORS: true, + backgroundColor: '#ffffff', + logging: false, + windowWidth: 794, // A4 width at 96 DPI + onclone: (clonedDoc) => { + // Ensure cloned element is fully visible + const clonedInvoice = clonedDoc.getElementById('invoice'); + if (clonedInvoice) { + clonedInvoice.style.height = 'auto'; + clonedInvoice.style.overflow = 'visible'; + } + } + }); + + // Create PDF with proper A4 dimensions + const pdf = new jsPDF({ + orientation: 'portrait', + unit: 'mm', + format: 'a4', + compress: true + }); + + // Set PDF metadata + pdf.setProperties({ + title: `Invoice ${invoiceNumber}`, + subject: `Invoice for ${data.billTo?.name || 'Customer'}`, + author: data.seller?.name || 'Rebill', + creator: 'Rebill - Invoice Generator (rebill.mrjl.dev)', + keywords: 'invoice, receipt, billing' + }); + + const pageWidth = pdf.internal.pageSize.getWidth(); + const pageHeight = pdf.internal.pageSize.getHeight(); + const margin = 10; + const contentWidth = pageWidth - (margin * 2); + + // Calculate image dimensions maintaining aspect ratio + const imgWidth = contentWidth; + const imgHeight = (canvas.height * imgWidth) / canvas.width; + + // Handle multi-page if content is taller than one page + const maxHeightPerPage = pageHeight - (margin * 2); + + if (imgHeight <= maxHeightPerPage) { + // Single page - center vertically if short + const yOffset = margin; + pdf.addImage(canvas.toDataURL('image/png', 1.0), 'PNG', margin, yOffset, imgWidth, imgHeight); + } else { + // Multi-page handling for long invoices + let remainingHeight = imgHeight; + let sourceY = 0; + let pageNum = 0; + + while (remainingHeight > 0) { + if (pageNum > 0) pdf.addPage(); + + const sliceHeight = Math.min(remainingHeight, maxHeightPerPage); + const sourceSliceHeight = (sliceHeight / imgHeight) * canvas.height; + + // Create a slice canvas for this page + const sliceCanvas = document.createElement('canvas'); + sliceCanvas.width = canvas.width; + sliceCanvas.height = sourceSliceHeight; + const ctx = sliceCanvas.getContext('2d'); + ctx.drawImage(canvas, 0, sourceY, canvas.width, sourceSliceHeight, 0, 0, canvas.width, sourceSliceHeight); + + pdf.addImage(sliceCanvas.toDataURL('image/png', 1.0), 'PNG', margin, margin, imgWidth, sliceHeight); + + sourceY += sourceSliceHeight; + remainingHeight -= sliceHeight; + pageNum++; + } + } + + pdf.save(filename); + + // Remove print styles + document.head.removeChild(printStyles); + + } catch (error) { + console.error('Error generating PDF:', error); + alert('Error generating PDF. Please try again.'); + } finally { + // Restore original styles + document.querySelector('.form-section').style.display = originalStyles.formDisplay; + invoiceElement.style.height = originalStyles.invoiceHeight; + invoiceElement.style.overflow = originalStyles.invoiceOverflow; + document.body.classList.remove('pdf-generation'); + + // Remove print styles if still present + const printStyles = document.getElementById('pdf-print-styles'); + if (printStyles) printStyles.remove(); + + // Restore button + downloadBtn.textContent = originalBtnText; + downloadBtn.disabled = false; + } +} + +/** + * Generate PDF as Blob for sharing + * @returns {Promise<{blob: Blob, filename: string}>} PDF blob and filename + */ +export async function generatePDFBlob() { + const { jsPDF } = window.jspdf; + const invoiceElement = document.getElementById('invoice'); + + const data = getDataFromForm(); + const customerName = data.billTo?.name?.replace(/[^a-zA-Z0-9\s]/g, '').trim().replace(/\s+/g, '-') || 'Customer'; + const invoiceNumber = data.invoice?.number || 'draft'; + const filename = `Invoice-${invoiceNumber}-${customerName}.pdf`; + + // Store original styles + const originalStyles = { + formDisplay: document.querySelector('.form-section').style.display, + invoiceHeight: invoiceElement.style.height, + invoiceOverflow: invoiceElement.style.overflow + }; + + try { + // Prepare invoice for capture + document.querySelector('.form-section').style.display = 'none'; + invoiceElement.style.height = 'auto'; + invoiceElement.style.overflow = 'visible'; + document.body.classList.add('pdf-generation'); + + await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve))); + + // Capture with html2canvas + const canvas = await html2canvas(invoiceElement, { + scale: 3, + useCORS: true, + backgroundColor: '#ffffff', + logging: false, + windowWidth: 794, + onclone: (clonedDoc) => { + const clonedInvoice = clonedDoc.getElementById('invoice'); + if (clonedInvoice) { + clonedInvoice.style.height = 'auto'; + clonedInvoice.style.overflow = 'visible'; + } + } + }); + + const pdf = new jsPDF({ + orientation: 'portrait', + unit: 'mm', + format: 'a4', + compress: true + }); + + pdf.setProperties({ + title: `Invoice ${invoiceNumber}`, + subject: `Invoice for ${data.billTo?.name || 'Customer'}`, + author: data.seller?.name || 'Rebill', + creator: 'Rebill - Invoice Generator', + keywords: 'invoice, receipt, billing' + }); + + const pageWidth = pdf.internal.pageSize.getWidth(); + const pageHeight = pdf.internal.pageSize.getHeight(); + const margin = 10; + const contentWidth = pageWidth - (margin * 2); + const imgWidth = contentWidth; + const imgHeight = (canvas.height * imgWidth) / canvas.width; + const maxHeightPerPage = pageHeight - (margin * 2); + + if (imgHeight <= maxHeightPerPage) { + pdf.addImage(canvas.toDataURL('image/png', 1.0), 'PNG', margin, margin, imgWidth, imgHeight); + } else { + let remainingHeight = imgHeight; + let sourceY = 0; + let pageNum = 0; + + while (remainingHeight > 0) { + if (pageNum > 0) pdf.addPage(); + const sliceHeight = Math.min(remainingHeight, maxHeightPerPage); + const sourceSliceHeight = (sliceHeight / imgHeight) * canvas.height; + const sliceCanvas = document.createElement('canvas'); + sliceCanvas.width = canvas.width; + sliceCanvas.height = sourceSliceHeight; + const ctx = sliceCanvas.getContext('2d'); + ctx.drawImage(canvas, 0, sourceY, canvas.width, sourceSliceHeight, 0, 0, canvas.width, sourceSliceHeight); + pdf.addImage(sliceCanvas.toDataURL('image/png', 1.0), 'PNG', margin, margin, imgWidth, sliceHeight); + sourceY += sourceSliceHeight; + remainingHeight -= sliceHeight; + pageNum++; + } + } + + return { blob: pdf.output('blob'), filename }; + } finally { + // Restore original styles + document.querySelector('.form-section').style.display = originalStyles.formDisplay; + invoiceElement.style.height = originalStyles.invoiceHeight; + invoiceElement.style.overflow = originalStyles.invoiceOverflow; + document.body.classList.remove('pdf-generation'); + } +} + +/** + * Share invoice using Web Share API + */ +export async function shareInvoice() { + const shareBtn = document.getElementById('shareBtn'); + if (shareBtn) { + shareBtn.textContent = 'Preparing...'; + shareBtn.disabled = true; + } + + try { + const { blob, filename } = await generatePDFBlob(); + const file = new File([blob], filename, { type: 'application/pdf' }); + + if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) { + await navigator.share({ + files: [file], + title: filename.replace('.pdf', ''), + text: 'Invoice generated with Rebill' + }); + } else { + // Fallback: download the file + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + document.body.appendChild(a); + a.click(); + a.remove(); + URL.revokeObjectURL(url); + + // Show a message that sharing isn't available + if (!navigator.share) { + console.log('Web Share API not available, downloaded file instead'); + } + } + } catch (error) { + if (error.name !== 'AbortError') { + console.error('Error sharing invoice:', error); + alert('Error sharing invoice. Please try downloading instead.'); + } + } finally { + if (shareBtn) { + shareBtn.textContent = '📤 Share'; + shareBtn.disabled = false; + } + } +} diff --git a/src/js/modules/storage.js b/src/js/modules/storage.js new file mode 100644 index 0000000..74e3120 --- /dev/null +++ b/src/js/modules/storage.js @@ -0,0 +1,82 @@ +/** + * Storage Module + * Draft save/load and deep merge utilities + */ + +const STORAGE_KEY = 'invoice.draft.v1'; + +/** + * Save draft data to localStorage + * @param {Object} data - Invoice data to save + */ +export function saveDraft(data) { + try { + localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); + } catch (e) { + console.warn('Failed to save draft:', e); + } +} + +/** + * Load draft data from localStorage + * @returns {Object|null} Saved draft or null + */ +export function loadDraft() { + const raw = localStorage.getItem(STORAGE_KEY); + if (!raw) return null; + try { + return JSON.parse(raw); + } catch (error) { + return null; + } +} + +/** + * Clear the saved draft + */ +export function clearDraft() { + localStorage.removeItem(STORAGE_KEY); +} + +/** + * Deep merge source object into target + * Includes protection against prototype pollution + * @param {Object} target - Target object + * @param {Object} source - Source object to merge + * @returns {Object} Merged target object + */ +export function deepMerge(target, source) { + if (!source || typeof source !== 'object') return target; + + // Dangerous keys that could lead to prototype pollution + const UNSAFE_KEYS = ['__proto__', 'constructor', 'prototype']; + + function hasUnsafeKeys(obj, visited = new Set()) { + if (!obj || typeof obj !== 'object' || visited.has(obj)) return false; + visited.add(obj); + return UNSAFE_KEYS.some(k => k in obj) || + Object.values(obj).some(v => v && typeof v === 'object' && hasUnsafeKeys(v, visited)); + } + + Object.keys(source).forEach((key) => { + // Skip prototype pollution vectors + if (UNSAFE_KEYS.includes(key)) return; + if (!Object.prototype.hasOwnProperty.call(source, key)) return; + + const value = source[key]; + if (Array.isArray(value)) { + target[key] = value.slice(); + } else if (value && typeof value === 'object') { + if (hasUnsafeKeys(value)) return; + if (!target[key] || typeof target[key] !== 'object') { + target[key] = {}; + } + deepMerge(target[key], value); + } else { + target[key] = value; + } + }); + return target; +} + +export { STORAGE_KEY }; diff --git a/styles.css b/styles.css index c247254..3a68851 100644 --- a/styles.css +++ b/styles.css @@ -731,7 +731,19 @@ button:focus-visible { padding: var(--space-10); height: 100vh; overflow-y: auto; - font-family: 'Inter', Arial, sans-serif; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Tabular figures for proper number alignment in invoice */ +.invoice-table td:nth-child(2), +.invoice-table td:nth-child(3), +.invoice-table td:nth-child(4), +.invoice-totals span, +.balance-due span { + font-variant-numeric: tabular-nums; + font-feature-settings: "tnum"; } .invoice-header { diff --git a/tests/rebill.spec.js b/tests/rebill.spec.js new file mode 100644 index 0000000..44b93af --- /dev/null +++ b/tests/rebill.spec.js @@ -0,0 +1,271 @@ +// @ts-check +import { test, expect } from '@playwright/test'; + +/** + * Rebill Invoice Generator - E2E Tests + * + * These tests verify the core functionality of the invoice generator, + * with special focus on PDF generation and layout correctness. + */ + +// Test data fixtures +const testData = { + seller: { + name: 'Test Company Ltd', + address: '123 Business Park, Tech City 12345', + email: 'billing@testcompany.com', + phone: '+91 9876543210' + }, + customer: { + name: 'Customer Corp', + address: '456 Client Street, Commerce Town 67890', + email: 'accounts@customercorp.com', + phone: '+91 9876543211' + }, + invoice: { + number: '001', + title: 'INVOICE' + }, + items: [ + { description: 'Web Development Services', quantity: 1, price: 50000 }, + { description: 'UI/UX Design', quantity: 2, price: 15000 } + ] +}; + +test.describe('Invoice Form', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/'); + // Clear any stored draft + await page.evaluate(() => localStorage.clear()); + await page.reload(); + }); + + test('should load the homepage', async ({ page }) => { + await expect(page).toHaveTitle(/Rebill/); + await expect(page.locator('.form-section')).toBeVisible(); + }); + + test('should fill seller information', async ({ page }) => { + await page.fill('#sellerName', testData.seller.name); + await page.fill('#sellerAddress', testData.seller.address); + await page.fill('#sellerEmail', testData.seller.email); + await page.fill('#sellerPhone', testData.seller.phone); + + await expect(page.locator('#sellerName')).toHaveValue(testData.seller.name); + await expect(page.locator('#sellerAddress')).toHaveValue(testData.seller.address); + }); + + test('should add line items', async ({ page }) => { + // Fill first item + await page.fill('.item-description', testData.items[0].description); + await page.fill('.item-quantity', String(testData.items[0].quantity)); + await page.fill('.item-unit-price', String(testData.items[0].price)); + + // Add second item + await page.click('#addItemBtn'); + const itemRows = page.locator('.item-row'); + await expect(itemRows).toHaveCount(2); + }); + + test('should calculate totals correctly', async ({ page }) => { + // Fill one item + await page.fill('.item-description', 'Test Service'); + await page.fill('.item-quantity', '2'); + await page.fill('.item-unit-price', '1000'); + + // Wait for calculation + await page.waitForTimeout(100); + + // Check item total + const itemTotal = page.locator('.item-total').first(); + await expect(itemTotal).toContainText('2,000'); + }); +}); + +test.describe('Invoice Generation', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/'); + await page.evaluate(() => localStorage.clear()); + await page.reload(); + }); + + test('should generate invoice preview', async ({ page }) => { + // Fill required fields + await page.fill('#sellerName', testData.seller.name); + await page.fill('#sellerAddress', testData.seller.address); + await page.fill('#billToName', testData.customer.name); + await page.fill('#billToAddress', testData.customer.address); + await page.fill('#invoiceNumber', testData.invoice.number); + + // Fill item + await page.fill('.item-description', testData.items[0].description); + await page.fill('.item-quantity', String(testData.items[0].quantity)); + await page.fill('.item-unit-price', String(testData.items[0].price)); + + // Generate invoice + await page.click('button:has-text("Generate Bill")'); + + // Verify preview is visible + await expect(page.locator('#invoice')).toBeVisible(); + await expect(page.locator('#downloadBtn')).toBeVisible(); + }); + + test('should show validation alert for incomplete form', async ({ page }) => { + // Try to generate without filling required fields + page.on('dialog', async dialog => { + expect(dialog.message()).toContain('required fields'); + await dialog.accept(); + }); + + await page.click('button:has-text("Generate Bill")'); + }); +}); + +test.describe('PDF Generation', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/'); + await page.evaluate(() => localStorage.clear()); + await page.reload(); + }); + + test('should download PDF without errors', async ({ page }) => { + // Fill complete invoice + await page.fill('#sellerName', testData.seller.name); + await page.fill('#sellerAddress', testData.seller.address); + await page.fill('#sellerEmail', testData.seller.email); + await page.fill('#billToName', testData.customer.name); + await page.fill('#billToAddress', testData.customer.address); + await page.fill('#invoiceNumber', testData.invoice.number); + await page.fill('.item-description', testData.items[0].description); + await page.fill('.item-quantity', String(testData.items[0].quantity)); + await page.fill('.item-unit-price', String(testData.items[0].price)); + + // Generate invoice + await page.click('button:has-text("Generate Bill")'); + await expect(page.locator('#invoice')).toBeVisible(); + + // Start waiting for download before clicking + const downloadPromise = page.waitForEvent('download'); + await page.click('#downloadBtn'); + const download = await downloadPromise; + + // Verify download + expect(download.suggestedFilename()).toMatch(/Invoice-.*\.pdf/); + + // Verify file is not empty + const path = await download.path(); + const fs = await import('fs'); + const stats = fs.statSync(path); + expect(stats.size).toBeGreaterThan(10000); // PDF should be > 10KB + }); + + test('invoice preview should not have horizontal cutoff', async ({ page }) => { + // Fill complete invoice + await page.fill('#sellerName', testData.seller.name); + await page.fill('#sellerAddress', testData.seller.address); + await page.fill('#billToName', testData.customer.name); + await page.fill('#billToAddress', testData.customer.address); + await page.fill('#invoiceNumber', testData.invoice.number); + await page.fill('.item-description', testData.items[0].description); + await page.fill('.item-quantity', String(testData.items[0].quantity)); + await page.fill('.item-unit-price', String(testData.items[0].price)); + + // Generate invoice + await page.click('button:has-text("Generate Bill")'); + await expect(page.locator('#invoice')).toBeVisible(); + + // Verify key elements are fully visible (this catches horizontal cutoff) + const invoiceTitle = page.locator('.invoice-title h1'); + await expect(invoiceTitle).toHaveText('INVOICE'); + await expect(invoiceTitle).toBeVisible(); + + // Verify seller name is visible + const sellerName = page.locator('#displaySellerName'); + await expect(sellerName).toHaveText(testData.seller.name); + + // Verify customer name is visible + const customerName = page.locator('#displayBillToName'); + await expect(customerName).toHaveText(testData.customer.name); + + // Verify invoice number is visible + const invoiceNumber = page.locator('#displayInvoiceNumber'); + await expect(invoiceNumber).toHaveText(testData.invoice.number); + + // Verify balance due is visible (right-side element - catches horizontal cutoff) + const balanceDue = page.locator('#displayBalanceDue'); + await expect(balanceDue).toBeVisible(); + await expect(balanceDue).toContainText('₹'); + }); +}); + +test.describe('History Management', () => { + test('should save invoice to history', async ({ page }) => { + await page.goto('/'); + await page.evaluate(() => localStorage.clear()); + await page.reload(); + + // Fill and generate invoice + await page.fill('#sellerName', testData.seller.name); + await page.fill('#sellerAddress', testData.seller.address); + await page.fill('#billToName', testData.customer.name); + await page.fill('#billToAddress', testData.customer.address); + await page.fill('#invoiceNumber', '100'); + await page.fill('.item-description', 'Test Item'); + await page.fill('.item-quantity', '1'); + await page.fill('.item-unit-price', '1000'); + + await page.click('button:has-text("Generate Bill")'); + + // Open history panel + await page.click('#historyToggle'); + await expect(page.locator('#historyPanel')).toBeVisible(); + + // Verify entry exists + await expect(page.locator('.history-item')).toHaveCount(1); + await expect(page.locator('.history-item-title')).toContainText('#100'); + }); +}); + +test.describe('JSON Import/Export', () => { + test('should export and import JSON', async ({ page }) => { + await page.goto('/'); + await page.evaluate(() => localStorage.clear()); + await page.reload(); + + // Fill invoice data + await page.fill('#sellerName', testData.seller.name); + await page.fill('#invoiceNumber', '200'); + + // Export JSON + await page.click('#exportJsonBtn'); + const jsonData = await page.locator('#jsonData').inputValue(); + expect(jsonData).toContain(testData.seller.name); + expect(jsonData).toContain('200'); + + // Parse and verify JSON structure + const parsed = JSON.parse(jsonData); + expect(parsed.seller.name).toBe(testData.seller.name); + expect(parsed.invoice.number).toBe('200'); + }); +}); + +test.describe('Reset Draft', () => { + test('should clear form on reset', async ({ page }) => { + await page.goto('/'); + + // Fill some data + await page.fill('#sellerName', testData.seller.name); + await page.fill('#billToName', testData.customer.name); + + // Click reset and accept dialog + page.on('dialog', async dialog => { + await dialog.accept(); + }); + + await page.click('#resetDraftBtn'); + + // Verify fields are cleared + await expect(page.locator('#sellerName')).toHaveValue(''); + await expect(page.locator('#billToName')).toHaveValue(''); + }); +}); diff --git a/tests/rebill.spec.js-snapshots/invoice-preview-chromium-darwin.png b/tests/rebill.spec.js-snapshots/invoice-preview-chromium-darwin.png new file mode 100644 index 0000000000000000000000000000000000000000..c1e26b095b3d856c5cfa0f5ef84110e2988f0da7 GIT binary patch literal 41717 zcmeEuJhdKl;gEWU$X=GAGP?$AuCrTxTH
zsV+wshCc$&+K!&}Z|(F;6NiRV>(IyqB`J-6cOBoE*gqV5f&61VTyO>v->gF+%zNV@
zKBIPruxX%mAiEnV=`%6wG$)n4RE-K!CEQJG+Gf?iJYGag1rZcJcAxI=!mxHqST!^k
zBB_C6SeYwyw~1}_(SoYi^