Loading REACH BILLING cloud data...

; } const moveToTrash = ({ collection, label, record, related = [] }) => { const entry = { id: uid(), collection, label, record, related, title: trashTitle(record, label), deletedAt: new Date().toISOString() }; setTrash((items) => [entry, ...items].slice(0, 500)); addActivity(`Moved ${label.toLowerCase()} ${entry.title} to trash`); }; const context = { data, setters, notify, confirmThen, addActivity, navigate, importCloudBackup, openTarget, setOpenTarget, moveToTrash, auth }; const visibleNavItems = auth.user?.isPlatformAdmin ? navItems : navItems.filter(([id]) => id !== 'admin'); const navLabel = (id, label) => { const preset = getBusinessPreset(data.settings.businessType); if (id === 'clients') return `${naturalLabel(data.settings.clientLabel, preset.clientLabel, ['Customer'])}s`; if (id === 'services') return naturalLabel(data.settings.itemPluralLabel, preset.itemPluralLabel, ['Items']); if (id === 'calculator') return getCalculatorPreset(data.settings.businessType).navLabel; return label; }; const screens = { dashboard: , clients: , services: , quotations: , invoices: , payments: , projects: , calculator: , expenses: , reports: , export: , trash: , admin: auth.user?.isPlatformAdmin ? : , settings: }; const theme = buildTheme(settings.primaryColor); return (

{navLabel(active, navItems.find(([id]) => id === active)?.[1])}

{formatDate(today())}

{menuOpen &&

{toast &&
{toast}
} {confirmDialog && setConfirmDialog(null)} />}

); } function AccessIssueScreen({ message, user, onLogout }) { return (

BILLING
{message.toLowerCase().includes('trial') ? 'Trial Period Ended' : 'Account Access Paused'}

{message}
{user?.email &&
{user.email}
}

); } function AccountBadge({ organization, user }) { if (user?.isPlatformAdmin) { return Platform Admin; } if (!organization?.status) return null; const trialEnd = toInputDate(organization.trialEndsAt); const subscriptionEnd = toInputDate(organization.subscriptionEndsAt); const isTrial = organization.status === 'trial'; const label = isTrial ? `Trial active${trialEnd ? ` until ${formatDate(trialEnd)}` : ''}` : organization.status === 'active' && subscriptionEnd ? `Active until ${formatDate(subscriptionEnd)}` : organization.status; return {label}; } function AuthScreen({ onAuth }) { const [mode, setMode] = React.useState('login'); const [form, setForm] = React.useState({ email: '', password: '', companyName: 'REACH Design', businessType: 'general' }); const [message, setMessage] = React.useState(''); const [busy, setBusy] = React.useState(false); const isRegister = mode === 'register'; const isForgot = mode === 'forgot'; const submit = async (event) => { event.preventDefault(); setBusy(true); setMessage(''); try { if (isForgot) { await apiRequest('/api/auth/forgot-password', { method: 'POST', body: { email: form.email } }); setMessage('Password reset instructions sent if the email exists.'); } else { const result = await apiRequest(isRegister ? '/api/auth/register' : '/api/auth/login', { method: 'POST', body: { email: form.email, password: form.password, companyName: form.companyName, businessType: form.businessType } }); onAuth(result); } } catch (error) { setMessage(error.message); } finally { setBusy(false); } }; return (

BILLING
{isRegister ? 'Create billing account' : isForgot ? 'Reset password' : 'Login to billing'}

Your bills, customers, items and company settings will sync online after login.
Email setForm({ ...form, email: e.target.value })} /> {!isForgot && Password setForm({ ...form, password: e.target.value })} />} {isRegister && Company Name setForm({ ...form, companyName: e.target.value })} />} {isRegister && Business Type} {message &&
{message}
}

); } function Dashboard({ ctx }) { const { data, navigate } = ctx; const [selectedStat, setSelectedStat] = React.useState(null); const completed = data.projects.filter((item) => item.status === 'Completed').length; const activeProjects = data.projects.filter((item) => !['Completed', 'Cancelled'].includes(item.status)).length; const invoiceRevenue = data.invoices.reduce((sum, item) => sum + Number(item.grandTotal || 0), 0); const paid = data.invoices.reduce((sum, item) => sum + Number(item.paidAmount || 0), 0); const pending = data.invoices.reduce((sum, item) => sum + Math.max(Number(item.grandTotal || 0) - Number(item.paidAmount || 0), 0), 0); const collectionTotal = paid + pending; const paidPercent = collectionTotal ? Math.round((paid / collectionTotal) * 100) : 0; const paidArc = `${paidPercent} ${100 - paidPercent}`; const monthSales = data.invoices.filter((item) => item.date >= monthStart()).reduce((sum, item) => sum + Number(item.grandTotal || 0), 0); const clientIncome = data.clients.map((client) => { const invoices = data.invoices.filter((invoice) => invoice.clientId === client.id); const billed = invoices.reduce((sum, invoice) => sum + Number(invoice.grandTotal || 0), 0); const received = invoices.reduce((sum, invoice) => sum + Number(invoice.paidAmount || 0), 0); return { ...client, billed, received, outstanding: Math.max(billed - received, 0), invoiceCount: invoices.length }; }).filter((client) => client.billed > 0).sort((a, b) => b.billed - a.billed); const maxClientIncome = Math.max(1, ...clientIncome.map((client) => client.billed)); const stats = [ ['revenue', 'Total Revenue', money(invoiceRevenue), 'fa-indian-rupee-sign'], ['pending', 'Pending Payments', money(pending), 'fa-clock'], ['clients', 'Total Clients', data.clients.length, 'fa-users'], ['activeProjects', 'Active Projects', activeProjects, 'fa-briefcase'], ['completedProjects', 'Completed Projects', completed, 'fa-circle-check'], ['monthSales', 'This Month Sales', money(monthSales), 'fa-chart-line'], ['unpaidInvoices', 'Unpaid Invoices', data.invoices.filter((item) => Number(item.balanceAmount || 0) > 0).length, 'fa-file-invoice-dollar'], ['customReport', 'Custom Report', 'Build Report', 'fa-calendar-days'] ]; return (

{stats.map(([id, label, value, icon]) => (

Invoice Collection
Payment Overview

See how much invoiced revenue has been received and how much is still outstanding.

Received{money(paid)}

Outstanding{money(pending)}

{paidPercent}%received

Received Outstanding

{clientIncome.slice(0, 7).map((client, index) => { const receivedPercent = client.billed ? (client.received / client.billed) * 100 : 0; return (

{index + 1}{client.name}{client.invoiceCount} invoice{client.invoiceCount === 1 ? '' : 's'}

{money(client.billed)}{money(client.received)} received

); })} {!clientIncome.length && }

{data.invoices.filter((item) => Number(item.balanceAmount || 0) > 0).slice(0, 8).map((invoice) => (
{invoice.number} {money(invoice.balanceAmount)}
))} {!data.invoices.some((item) => Number(item.balanceAmount || 0) > 0) && }

{data.activities.length ? data.activities.slice(0, 10).map((item) => (
{formatDateTime(item.date)} {item.text}
)) : }

{selectedStat && ( id === selectedStat)?.[1] || 'Dashboard Details'} onClose={() => setSelectedStat(null)} wide> setSelectedStat(null)} invoiceRevenue={invoiceRevenue} paid={paid} pending={pending} monthSales={monthSales} /> )}
); } function DashboardStatPreview({ type, data, navigate, close, invoiceRevenue, paid, pending, monthSales }) { if (type === 'customReport') return ; const unpaid = data.invoices.filter((item) => Number(item.balanceAmount || 0) > 0); const active = data.projects.filter((item) => !['Completed', 'Cancelled'].includes(item.status)); const completed = data.projects.filter((item) => item.status === 'Completed'); const monthly = data.invoices.filter((item) => item.date >= monthStart()); const client = (id) => data.clients.find((item) => item.id === id)?.name || 'No client'; const openInvoice = (invoice) => { close?.(); navigate?.('invoices', invoice.id); }; if (type === 'revenue') return (

Total invoiced{money(invoiceRevenue)}Received{money(paid)}Outstanding{money(pending)}
<>{invoice.number}{client(invoice.clientId)}{money(invoice.grandTotal)}} />
); if (type === 'pending' || type === 'unpaidInvoices') return (

Outstanding total{money(pending)}Unpaid invoices{unpaid.length}
<>{invoice.number}{client(invoice.clientId)} · Due {formatDate(invoice.dueDate)}{money(invoice.balanceAmount)}} />
); if (type === 'clients') return (

Total clients{data.clients.length}
<>{item.name}{item.company || item.email || 'No company details'}{data.invoices.filter((invoice) => invoice.clientId === item.id).length} invoices} />
); if (type === 'activeProjects' || type === 'completedProjects') { const rows = type === 'activeProjects' ? active : completed; return
{type === 'activeProjects' ? 'Active projects' : 'Completed projects'}{rows.length}
<>{project.projectName}{client(project.clientId)} · {project.status}{money(project.projectValue)}} />
; } return (

This month sales{money(monthSales)}Invoices created{monthly.length}
<>{invoice.number}{client(invoice.clientId)} · {formatDate(invoice.date)}{money(invoice.grandTotal)}} />
); } function DashboardCustomReport({ data, navigate, close }) { const currentMonth = today().slice(0, 7); const currentYear = today().slice(0, 4); const [mode, setMode] = React.useState('month'); const [month, setMonth] = React.useState(currentMonth); const [year, setYear] = React.useState(currentYear); const [from, setFrom] = React.useState(`${currentYear}-01-01`); const [to, setTo] = React.useState(today()); const inRange = (date) => { if (!date) return false; if (mode === 'month') return date.startsWith(month); if (mode === 'year') return date.startsWith(year); return (!from || date >= from) && (!to || date <= to); }; const invoices = data.invoices.filter((item) => inRange(item.date)); const sales = invoices.reduce((sum, item) => sum + Number(item.grandTotal || 0), 0); const received = invoices.reduce((sum, item) => sum + Number(item.paidAmount || 0), 0); const expenses = data.expenses.filter((item) => inRange(item.date)).reduce((sum, item) => sum + Number(item.amount || 0), 0); const outstanding = invoices.reduce((sum, item) => sum + Number(item.balanceAmount || 0), 0); const netCash = received - expenses; const client = (id) => data.clients.find((item) => item.id === id)?.name || 'No client'; const openInvoice = (invoice) => { close?.(); navigate?.('invoices', invoice.id); }; const label = mode === 'month' ? month ? new Date(`${month}-01T00:00:00`).toLocaleDateString('en-IN', { month: 'long', year: 'numeric' }) : 'Select a month' : mode === 'year' ? year : `${from ? formatDate(from) : 'Start'} to ${to ? formatDate(to) : 'Today'}`; return (

{mode === 'month' && } {mode === 'year' && } {mode === 'custom' && <>}

Report Period{label}

Total Sales{money(sales)} Payments Received{money(received)} Outstanding{money(outstanding)} Expenses{money(expenses)} Net Cash Flow{money(netCash)} Invoices{invoices.length}
<>{invoice.number}{client(invoice.clientId)} · {formatDate(invoice.date)}{money(invoice.grandTotal)}} />
); } function ModernDateField({ label, value, onChange }) { const selected = value ? new Date(`${value}T00:00:00`) : new Date(); const [open, setOpen] = React.useState(false); const [viewDate, setViewDate] = React.useState(() => new Date(selected.getFullYear(), selected.getMonth(), 1)); const year = viewDate.getFullYear(); const month = viewDate.getMonth(); const firstDay = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); const previousMonthDays = new Date(year, month, 0).getDate(); const cells = Array.from({ length: 42 }, (_, index) => { const day = index - firstDay + 1; if (day < 1) return new Date(year, month - 1, previousMonthDays + day); if (day > daysInMonth) return new Date(year, month + 1, day - daysInMonth); return new Date(year, month, day); }); const toValue = (date) => { const pad = (number) => String(number).padStart(2, '0'); return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`; }; const choose = (date) => { onChange(toValue(date)); setViewDate(new Date(date.getFullYear(), date.getMonth(), 1)); setOpen(false); }; const todayValue = toValue(new Date()); return ( {label && {label}} {open && (

{viewDate.toLocaleDateString('en-IN', { month: 'long' })}{year}

{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => {day.slice(0, 1)})}

{cells.map((date) => { const dateValue = toValue(date); return ; })}

)} ); } function ModernMonthField({ label, value, onChange }) { const selectedYear = Number(String(value || today()).slice(0, 4)); const [open, setOpen] = React.useState(false); const [year, setYear] = React.useState(selectedYear); const months = Array.from({ length: 12 }, (_, index) => new Date(2000, index, 1).toLocaleDateString('en-IN', { month: 'short' })); const choose = (index) => { onChange(`${year}-${String(index + 1).padStart(2, '0')}`); setOpen(false); }; const selectedLabel = value ? new Date(`${value}-01T00:00:00`).toLocaleDateString('en-IN', { month: 'long', year: 'numeric' }) : 'Select month'; return ( {label} ); } function PreviewRows({ rows, empty, render, onRowClick }) { if (!rows.length) return ; return
{rows.slice(0, 8).map((row) => { const content = render(row); return onRowClick ? :
{content}
; })}
; } function Clients({ ctx }) { const { data, setters, notify, addActivity, moveToTrash } = ctx; const preset = getBusinessPreset(data.settings.businessType); const clientLabel = naturalLabel(data.settings.clientLabel, preset.clientLabel, ['Customer']); const fields = [ ['name', 'text', true, null, `${clientLabel} Name`], ['company', 'text'], ['mobile', 'tel'], ['email', 'email'], ['gst', 'text'], ['billingAddress', 'textarea'], ['shippingAddress', 'textarea'], ['city', 'text'], ['state', 'text'], ['pin', 'text'], ['notes', 'textarea'] ]; const save = (record) => { upsert(setters.setClients, record); notify(record._editing ? 'Client updated' : 'Client added'); addActivity(`${record._editing ? 'Updated' : 'Added'} client ${record.name}`); }; return ( row.state} fields={fields} onSave={save} onDelete={(row) => removeRecord({ collection: 'clients', label: 'Client', record: row, setter: setters.setClients, notify, moveToTrash })} detail={(client) => } /> ); } function ClientDetail({ client, data }) { const clientQuotations = data.quotations.filter((item) => item.clientId === client.id); const clientInvoices = data.invoices.filter((item) => item.clientId === client.id); const clientPayments = data.payments.filter((item) => item.clientId === client.id); const clientProjects = data.projects.filter((item) => item.clientId === client.id); return (

); } function Services({ ctx }) { const { data, setters, notify, addActivity, moveToTrash } = ctx; const preset = getBusinessPreset(data.settings.businessType); const itemLabel = naturalLabel(data.settings.itemLabel, preset.itemLabel || 'Item', ['Item']); const itemPluralLabel = naturalLabel(data.settings.itemPluralLabel, preset.itemPluralLabel || 'Items', ['Items']); const categoryLabel = naturalLabel(data.settings.categoryLabel, preset.categoryLabel || 'Category', ['Category']); const fields = [ ['name', 'text', true, null, `${itemLabel} Name`], ['category', 'text', true, null, categoryLabel], ['description', 'textarea', false, null, 'Description'], ['hsn', 'text', false, null, 'HSN/SAC Code'], ['unit', 'text', true, null, 'Billing Unit'], ['rate', 'number', true, null, 'Rate (Rs.)'], ['gst', 'number', true, null, 'GST (%)'], ['type', 'select', true, preset.serviceTypes, `${itemLabel} Type`] ]; return ( row.type} fields={fields} onSave={(record) => { upsert(setters.setServices, record); notify(record._editing ? `${itemLabel} updated` : `${itemLabel} added`); addActivity(`${record._editing ? 'Updated' : 'Added'} ${itemLabel.toLowerCase()} ${record.name}`); }} onDelete={(row) => removeRecord({ collection: 'services', label: itemLabel, record: row, setter: setters.setServices, notify, moveToTrash })} detail={(row) =>
} /> ); } function Quotations({ ctx }) { return ; } function Invoices({ ctx }) { return ; } function Documents({ ctx, kind }) { const { data, setters, notify, addActivity, openTarget, setOpenTarget, moveToTrash } = ctx; const isInvoice = kind === 'invoice'; const rows = isInvoice ? data.invoices : data.quotations; const setRows = isInvoice ? setters.setInvoices : setters.setQuotations; const [modal, setModal] = React.useState(null); const [view, setView] = React.useState(null); const [search, setSearch] = React.useState(''); const [status, setStatus] = React.useState(''); const [date, setDate] = React.useState(''); const clientName = (id) => data.clients.find((item) => item.id === id)?.name || 'No client'; const filtered = rows.filter((row) => { const hay = `${row.number} ${clientName(row.clientId)} ${row.status}`.toLowerCase(); return hay.includes(search.toLowerCase()) && (!status || row.status === status) && (!date || row.date === date); }).sort((a, b) => isInvoice ? invoiceSequence(b.number) - invoiceSequence(a.number) || String(b.number).localeCompare(String(a.number), undefined, { numeric: true }) : 0); const statuses = isInvoice ? ['Draft', 'Sent', 'Partially Paid', 'Paid', 'Overdue', 'Cancelled'] : ['Draft', 'Sent', 'Approved', 'Rejected', 'Converted to Invoice']; React.useEffect(() => { if (!openTarget || openTarget.section !== (isInvoice ? 'invoices' : 'quotations')) return; const target = rows.find((item) => item.id === openTarget.recordId); if (target) setView(target); setOpenTarget?.(null); }, [openTarget, rows, isInvoice, setOpenTarget]); const saveDoc = (doc) => { const totals = documentTotals(doc.items); if (isInvoice) { const requestedPaid = Math.min(Math.max(Number(doc.paidAmount || 0), 0), totals.grandTotal); const baseInvoice = { ...doc, ...totals, paidAmount: requestedPaid, balanceAmount: Math.max(totals.grandTotal - requestedPaid, 0) }; const existingPayments = data.payments.filter((payment) => payment.invoiceId === doc.id); const manualPayments = existingPayments.filter((payment) => payment.source !== 'invoice-editor'); const manualPaid = manualPayments.reduce((sum, payment) => sum + Number(payment.amount || 0), 0); const editorPayment = existingPayments.find((payment) => payment.source === 'invoice-editor'); const editorAmount = Math.max(requestedPaid - manualPaid, 0); const nextPayments = data.payments.filter((payment) => !(payment.invoiceId === doc.id && payment.source === 'invoice-editor')); if (editorAmount > 0) { nextPayments.unshift({ id: editorPayment?.id || uid(), date: editorPayment?.date || today(), invoiceId: doc.id, invoiceNumber: doc.number, clientId: doc.clientId, amount: editorAmount, paymentMode: 'Invoice Update', transactionId: '', notes: 'Recorded from invoice edit', source: 'invoice-editor' }); } setters.setPayments(nextPayments); setRows((items) => { const baseRows = items.some((item) => item.id === baseInvoice.id) ? items.map((item) => item.id === baseInvoice.id ? baseInvoice : item) : [baseInvoice, ...items]; return recalculateInvoiceBalances(baseRows, nextPayments); }); notify('Invoice saved'); addActivity(`Saved invoice ${baseInvoice.number}`); setModal(null); return; } const next = { ...doc, ...totals, paidAmount: 0, balanceAmount: 0 }; upsert(setRows, next); notify(`${isInvoice ? 'Invoice' : 'Quotation'} saved`); addActivity(`Saved ${isInvoice ? 'invoice' : 'quotation'} ${next.number}`); setModal(null); }; const convertToInvoice = (quote) => { const number = nextNumber(data.invoices, data.settings.invoicePrefix || 'INV'); const invoice = { ...quote, id: uid(), number, date: today(), dueDate: today(), status: 'Draft', paidAmount: 0, balanceAmount: quote.grandTotal, sourceQuotationId: quote.id }; setters.setInvoices((items) => [invoice, ...items]); setters.setQuotations((items) => items.map((item) => item.id === quote.id ? { ...item, status: 'Converted to Invoice' } : item)); notify('Quotation converted to invoice'); addActivity(`Converted quotation ${quote.number} to invoice ${number}`); }; const duplicateQuote = (quote) => { const copy = { ...quote, id: uid(), number: nextNumber(rows, data.settings.quotationPrefix || 'QT'), status: 'Draft', date: today() }; setRows((items) => [copy, ...items]); notify('Quotation duplicated'); }; const deleteDocument = (row) => removeRecord({ collection: isInvoice ? 'invoices' : 'quotations', label: isInvoice ? 'Invoice' : 'Quotation', record: row, setter: setRows, notify, moveToTrash, afterDelete: isInvoice ? () => setters.setPayments((items) => items.filter((payment) => payment.invoiceId !== row.id)) : null, related: isInvoice ? data.payments.filter((payment) => payment.invoiceId === row.id).map((payment) => ({ collection: 'payments', label: 'Payment', record: payment })) : [] }); return (
setModal({ id: uid(), number: nextNumber(rows, isInvoice ? data.settings.invoicePrefix || 'INV' : data.settings.quotationPrefix || 'QT'), date: today(), dueDate: today(), validTill: today(), clientId: data.clients[0]?.id || '', status: 'Draft', terms: data.settings.terms, notes: '', items: [blankLine(data.services[0])], paidAmount: 0 })} />
{isInvoice && } {filtered.map((row) => ( {isInvoice && } ))}

Number Date Client Status Total Balance Actions

{row.number} {formatDate(row.date)} {clientName(row.clientId)} {money(row.grandTotal)} {money(row.balanceAmount)} {!isInvoice && } {!isInvoice && }

{filtered.map((row) => (

{row.number}

Date{formatDate(row.date)} Client{clientName(row.clientId)} Total{money(row.grandTotal)} {isInvoice && Balance{money(row.balanceAmount)}}

{!isInvoice && } {!isInvoice && }

))}
{!filtered.length && }
{modal && setModal(null)} onSave={saveDoc} />} {view && setView(null)} wide> }
); } function DocumentModal({ isInvoice, doc, setDoc, data, ctx, onClose, onSave }) { const { setters, notify, addActivity } = ctx; const updateLine = (id, patch) => { setDoc((current) => ({ ...current, items: current.items.map((item) => item.id === id ? { ...item, ...patch } : item) })); }; const totals = documentTotals(doc.items); const balance = Math.max(totals.grandTotal - Number(doc.paidAmount || 0), 0); const paymentHistory = isInvoice ? data.payments.filter((payment) => payment.invoiceId === doc.id).sort((a, b) => String(b.date || '').localeCompare(String(a.date || ''))) : []; return (
setDoc({ ...doc, number: v })} readOnly={isInvoice && doc._editing} required /> setDoc({ ...doc, date: v })} required /> setDoc({ ...doc, [isInvoice ? 'dueDate' : 'validTill']: v })} /> setDoc({ ...doc, clientId: v })} data={data} setters={setters} notify={notify} addActivity={addActivity} required /> [v, v])} onChange={(v) => setDoc({ ...doc, status: v })} /> {isInvoice &&
setDoc({ ...doc, paidAmount: v })} />
}

Services & ChargesRate x quantity, minus discount, plus GST

{doc.items.map((line) => (
Service Description updateLine(line.id, { description: e.target.value })} placeholder="Work details" /> Quantity updateLine(line.id, { qty: e.target.value })} placeholder="1" /> Rate (Rs.) updateLine(line.id, { rate: e.target.value })} placeholder="1800" /> Discount (Rs.) updateLine(line.id, { discount: e.target.value })} placeholder="0" /> GST (%) updateLine(line.id, { gst: e.target.value })} placeholder="18" />
Item Total{money(lineTotals(line).total)}

))}

setDoc({ ...doc, terms: v })} /> setDoc({ ...doc, notes: v })} />

Subtotal {money(totals.subtotal)} Discount {money(totals.discount)} GST {money(totals.gst)} Grand Total {money(totals.grandTotal)} {isInvoice && Balance {money(balance)}}
{isInvoice && }

); } function Payments({ ctx }) { const { data, setters, notify, addActivity, moveToTrash } = ctx; const [modal, setModal] = React.useState(null); const [search, setSearch] = React.useState(''); const invoices = data.invoices; const savePayment = (payment) => { const invoice = invoices.find((item) => item.id === payment.invoiceId); const next = { ...payment, clientId: invoice?.clientId || payment.clientId, invoiceNumber: invoice?.number || payment.invoiceNumber }; const nextPayments = data.payments.some((item) => item.id === next.id) ? data.payments.map((item) => item.id === next.id ? next : item) : [next, ...data.payments]; setters.setPayments(nextPayments); setters.setInvoices((items) => recalculateInvoiceBalances(items, nextPayments)); notify('Payment recorded'); addActivity(`Recorded payment ${money(next.amount)} for ${next.invoiceNumber}`); setModal(null); }; const filtered = data.payments.filter((row) => `${row.invoiceNumber} ${clientName(row.clientId, data)} ${row.paymentMode}`.toLowerCase().includes(search.toLowerCase())); return (
setModal({ id: uid(), date: today(), invoiceId: invoices[0]?.id || '', amount: '', paymentMode: 'UPI', transactionId: '', notes: '' })} />
Paid {money(data.invoices.reduce((s, i) => s + Number(i.paidAmount || 0), 0))} Pending {money(data.invoices.reduce((s, i) => s + Number(i.balanceAmount || 0), 0))} Overdue {data.invoices.filter((i) => i.dueDate < today() && Number(i.balanceAmount || 0) > 0).length}
clientName(v, data)], ['amount', 'Amount', money], ['paymentMode', 'Mode'], ['transactionId', 'Transaction ID'] ]} actions={(row) => <> } /> {modal && setModal(null)} />}
); } function PaymentModal({ payment, setPayment, invoices, data, onSave, onClose }) { return (
setPayment({ ...payment, date: v })} required /> [item.id, `${item.number} - ${clientName(item.clientId, data)} - ${money(item.balanceAmount)}`])} onChange={(v) => setPayment({ ...payment, invoiceId: v })} required /> setPayment({ ...payment, amount: v })} required /> [v, v])} onChange={(v) => setPayment({ ...payment, paymentMode: v })} /> setPayment({ ...payment, transactionId: v })} /> setPayment({ ...payment, notes: v })} />

); } function Projects({ ctx }) { const { data, setters, notify, addActivity, moveToTrash } = ctx; const [modal, setModal] = React.useState(null); const fields = [ ['projectName', 'text', true], ['clientId', 'client', true], ['projectType', 'text'], ['startDate', 'date'], ['deadline', 'date'], ['status', 'select', true, ['Lead', 'Quotation Sent', 'Approved', 'In Design', 'Client Review', 'Printing', 'Installation', 'Completed', 'On Hold', 'Cancelled']], ['assignedTo', 'text'], ['projectValue', 'number'], ['advanceReceived', 'number'], ['notes', 'textarea'] ]; return ( ({ ...item, balance: Number(item.projectValue || 0) - Number(item.advanceReceived || 0) }))} columns={[ ['projectName', 'Project'], ['clientId', 'Client', (v) => clientName(v, data)], ['status', 'Status', (v) => ], ['deadline', 'Deadline'], ['projectValue', 'Value', money], ['balance', 'Balance', money] ]} searchKeys={['projectName', 'projectType', 'status', 'assignedTo']} getStatus={(row) => row.status} fields={fields} clients={data.clients} onSave={(record) => { upsert(setters.setProjects, { ...record, tasks: record.tasks || [] }); notify('Project saved'); addActivity(`Saved project ${record.projectName}`); }} onDelete={(row) => removeRecord({ collection: 'projects', label: 'Project', record: row, setter: setters.setProjects, notify, moveToTrash })} detail={(row) => setModal(row)} />} externalModal={modal} setExternalModal={setModal} customForm={(record, setRecord, onClose, onSave) => } /> ); } function ProjectForm({ ctx, data, record, setRecord, onClose, onSave, fields }) { const { setters, notify, addActivity } = ctx; const [taskText, setTaskText] = React.useState(''); const tasks = record.tasks || []; return (
{fields.map(([key, type, required, options]) => ( type === 'client' ? setRecord({ ...record, [key]: v })} data={data} setters={setters} notify={notify} addActivity={addActivity} required={required} /> : [v, v])} value={record[key] || ''} onChange={(v) => setRecord({ ...record, [key]: v })} /> ))}

setTaskText(e.target.value)} placeholder="Add project task" />

{tasks.map((task) => ( setRecord({ ...record, tasks: tasks.map((item) => item.id === task.id ? { ...item, done: e.target.checked } : item) })} /> {task.text} ))} {!tasks.length && }

); } function ProjectDetail({ row, data }) { const invoice = data.invoices.find((item) => item.clientId === row.clientId); return (

Tasks {(row.tasks || []).length ? row.tasks.map((task) =>
{task.done ? 'Done' : 'Open'} - {task.text}
) :
No tasks.
}

); } function PrintCalculator({ ctx }) { const { data, setters, notify, addActivity, navigate } = ctx; const calculator = getCalculatorPreset(data.settings.businessType); const customerLabel = data.settings.clientLabel || getBusinessPreset(data.settings.businessType).clientLabel || 'Customer'; const defaultWorkType = calculator.workTypeOptions?.[0] || calculator.itemName; const [calc, setCalc] = React.useState({ workType: defaultWorkType, primaryQty: '', primaryRate: '', secondaryQty: '', secondaryRate: '', extra: '', gst: 18 }); const [clientId, setClientId] = React.useState(data.clients[0]?.id || ''); React.useEffect(() => { setCalc({ workType: defaultWorkType, primaryQty: '', primaryRate: '', secondaryQty: '', secondaryRate: '', extra: '', gst: calculator.workTypeOptions ? 18 : 18 }); }, [data.settings.businessType]); React.useEffect(() => { if (!clientId && data.clients[0]?.id) setClientId(data.clients[0].id); }, [data.clients.length]); const primaryQty = Number(calc.primaryQty || 0); const primaryRate = Number(calc.primaryRate || 0); const secondaryQty = Number(calc.secondaryQty || 0); const secondaryRate = Number(calc.secondaryRate || 0); const primaryTotal = primaryQty * primaryRate; const secondaryTotal = calculator.secondaryLabel ? secondaryQty * secondaryRate : 0; const extra = Number(calc.extra || 0); const taxableTotal = primaryTotal + secondaryTotal + extra; const gstAmount = taxableTotal * Number(calc.gst || 0) / 100; const final = taxableTotal + gstAmount; const canCreateQuotation = clientId && primaryQty > 0 && primaryRate > 0 && taxableTotal > 0; const createQuotation = () => { if (!canCreateQuotation) { notify(`Please select ${customerLabel.toLowerCase()}, quantity and rate first`); return; } const primaryDescription = [ calc.workType, `${calculator.primaryLabel}: ${formatNumber(primaryQty)} ${calculator.primaryUnit || ''}`.trim() ].filter(Boolean).join(' | '); const items = [{ id: uid(), serviceId: '', name: `${calculator.itemName} - ${calc.workType}`, description: primaryDescription, qty: primaryQty, rate: primaryRate, discount: 0, gst: Number(calc.gst || 0) }]; if (calculator.secondaryLabel && secondaryTotal > 0) { items.push({ id: uid(), serviceId: '', name: calculator.secondaryLabel, description: `${calc.workType} | ${formatNumber(secondaryQty)} ${calculator.secondaryUnit || ''}`.trim(), qty: secondaryQty, rate: secondaryRate, discount: 0, gst: Number(calc.gst || 0) }); } if (extra > 0) { items.push({ id: uid(), serviceId: '', name: calculator.extraLabel, description: `Extra charges for ${calc.workType}`, qty: 1, rate: extra, discount: 0, gst: Number(calc.gst || 0) }); } const totals = documentTotals(items); const quotation = { id: uid(), number: nextNumber(data.quotations, data.settings.quotationPrefix || 'QT'), date: today(), validTill: today(), clientId, status: 'Draft', terms: data.settings.terms, notes: `Created from ${calculator.navLabel}`, items, ...totals }; setters.setQuotations((items) => [quotation, ...items]); notify(`Quotation ${quotation.number} created`); addActivity(`Created quotation ${quotation.number} from ${calculator.navLabel.toLowerCase()}`); navigate('quotations'); }; return (

[item, item])} onChange={(v) => setCalc({ ...calc, workType: v })} /> setCalc({ ...calc, primaryQty: v })} /> setCalc({ ...calc, primaryRate: v })} /> {calculator.secondaryLabel && setCalc({ ...calc, secondaryQty: v })} />} {calculator.secondaryLabel && setCalc({ ...calc, secondaryRate: v })} />} setCalc({ ...calc, extra: v })} /> setCalc({ ...calc, gst: v })} />

{calculator.primaryLabel}{formatNumber(primaryQty)} {calculator.primaryUnit}

Base Amount{money(primaryTotal)}
{calculator.secondaryLabel &&
{calculator.secondaryLabel}{money(secondaryTotal)}
}
{calculator.extraLabel}{money(extra)}

GST Amount{money(gstAmount)}

Final Amount{money(final)}

Ready for quotation
{calculator.readyText}

); } function Expenses({ ctx }) { const { data, setters, notify, addActivity, moveToTrash } = ctx; const fields = [ ['date', 'date', true], ['vendorName', 'text', true], ['category', 'select', true, ['Printing Vendor', 'Material Purchase', 'Freelancer Payment', 'Hosting/Domain', 'Office Expense', 'Travel', 'Software Subscription', 'Other']], ['description', 'textarea'], ['amount', 'number', true], ['gst', 'number'], ['paymentMode', 'select', false, ['Cash', 'UPI', 'Bank Transfer', 'Cheque', 'Online', 'Other']], ['billNumber', 'text'], ['notes', 'textarea'] ]; return ( row.category} fields={fields} onSave={(record) => { upsert(setters.setExpenses, record); notify('Expense saved'); addActivity(`Saved expense ${record.vendorName} ${money(record.amount)}`); }} onDelete={(row) => removeRecord({ collection: 'expenses', label: 'Expense', record: row, setter: setters.setExpenses, notify, moveToTrash })} detail={(row) =>
} /> ); } function Reports({ ctx }) { const { data } = ctx; const customerLabel = data.settings.clientLabel || getBusinessPreset(data.settings.businessType).clientLabel || 'Customer'; const [filters, setFilters] = React.useState({ from: '', to: '', clientId: '', status: '', payment: '', category: '' }); const inRange = (date) => (!filters.from || date >= filters.from) && (!filters.to || date <= filters.to); const invoices = data.invoices.filter((item) => inRange(item.date) && (!filters.clientId || item.clientId === filters.clientId) && (!filters.status || item.status === filters.status)); const expenses = data.expenses.filter((item) => inRange(item.date) && (!filters.category || item.category === filters.category)); const sales = invoices.reduce((s, i) => s + Number(i.grandTotal || 0), 0); const expenseTotal = expenses.reduce((s, i) => s + Number(i.amount || 0), 0); const pending = invoices.reduce((s, i) => s + Number(i.balanceAmount || 0), 0); const gstSales = invoices.reduce((s, i) => s + Number(i.gst || 0), 0); const gstExpense = expenses.reduce((s, i) => s + Number(i.amount || 0) * Number(i.gst || 0) / 100, 0); const clientRevenue = data.clients.map((client) => ({ client: client.name, revenue: invoices.filter((invoice) => invoice.clientId === client.id).reduce((s, i) => s + Number(i.grandTotal || 0), 0) })).filter((row) => row.revenue > 0); const monthly = invoices.reduce((acc, invoice) => { const key = invoice.date?.slice(0, 7) || 'No date'; acc[key] = (acc[key] || 0) + Number(invoice.grandTotal || 0); return acc; }, {}); return (

setFilters({ ...filters, from: v })} /> setFilters({ ...filters, to: v })} /> [c.id, c.name])]} onChange={(v) => setFilters({ ...filters, clientId: v })} /> setFilters({ ...filters, status: v })} /> setFilters({ ...filters, payment: v })} /> setFilters({ ...filters, category: v })} />

Sales Report{money(sales)}

Pending Payment{money(pending)}

Expense Report{money(expenseTotal)}

Profit Estimate{money(sales - expenseTotal)}

GST Summary{money(gstSales - gstExpense)}

Project Status{data.projects.length} jobs

({ month, revenue }))} columns={[['month', 'Month'], ['revenue', 'Revenue', money]]} />

); } function ExportImport({ ctx, resetData }) { const { data, notify, importCloudBackup } = ctx; const exportRows = (key, rows) => download(`${key}.csv`, toCsv(flattenRows(rows)), 'text/csv;charset=utf-8'); const exportAll = () => STORAGE_KEYS.filter((key) => key !== 'companySettings' && key !== 'activities').forEach((key) => exportRows(key, data[key])); const backup = () => download('reach-billing-backup.json', JSON.stringify({ clients: data.clients, services: data.services, quotations: data.quotations, invoices: data.invoices, payments: data.payments, projects: data.projects, expenses: data.expenses, companySettings: data.settings, activities: data.activities }, null, 2), 'application/json'); const importBackup = (file) => { if (!file) return; const reader = new FileReader(); reader.onload = () => { try { const parsed = JSON.parse(reader.result); importCloudBackup(parsed) .then(() => notify('Backup imported to cloud')) .catch((error) => notify(error.message)); } catch { notify('Could not import backup'); } }; reader.readAsText(file); }; const exports = [ ['Clients', 'clients', data.clients], ['Services', 'services', data.services], ['Quotations', 'quotations', data.quotations], ['Invoices', 'invoices', data.invoices], ['Payments', 'payments', data.payments], ['Projects', 'projects', data.projects], ['Expenses', 'expenses', data.expenses] ]; return (

{exports.map(([label, key, rows]) => )} Import Backup JSON importBackup(e.target.files[0])} />

); } function TrashSection({ ctx }) { const { data, setters, notify, addActivity } = ctx; const [search, setSearch] = React.useState(''); const collectionSetters = { clients: setters.setClients, services: setters.setServices, quotations: setters.setQuotations, invoices: setters.setInvoices, payments: setters.setPayments, projects: setters.setProjects, expenses: setters.setExpenses }; const filtered = data.trash.filter((item) => `${item.label} ${item.title} ${item.collection}`.toLowerCase().includes(search.toLowerCase())); const restoreRelated = (related = []) => { related.forEach((item) => { const setter = collectionSetters[item.collection]; if (setter && item.record) upsert(setter, item.record); }); }; const restoreItem = (item) => { const setter = collectionSetters[item.collection]; if (!setter || !item.record) { notify('Unable to restore this item'); return; } const activeRows = data[item.collection] || []; if ((item.collection === 'invoices' || item.collection === 'quotations') && activeRows.some((row) => row.id !== item.record.id && row.number === item.record.number)) { notify(`Cannot restore. ${item.record.number} already exists.`); return; } upsert(setter, item.record); restoreRelated(item.related); setters.setTrash((rows) => rows.filter((row) => row.id !== item.id)); if (item.collection === 'invoices') { window.setTimeout(() => setters.setInvoices((rows) => recalculateInvoiceBalances(rows, data.payments)), 0); } notify(`${item.label} restored`); addActivity(`Restored ${item.label.toLowerCase()} ${item.title}`); }; const deleteForever = (item) => { confirmThen({ title: 'Delete forever?', message: `${item.title} will be permanently removed from Trash.`, confirmText: 'Delete forever', cancelText: 'No', tone: 'danger' }, () => { setters.setTrash((rows) => rows.filter((row) => row.id !== item.id)); notify('Deleted forever'); }); }; const clearTrash = () => { confirmThen({ title: 'Empty Trash?', message: 'All trash items will be permanently deleted.', confirmText: 'Empty Trash', cancelText: 'No', tone: 'danger' }, () => { setters.setTrash([]); notify('Trash emptied'); }); }; return (

setSearch(e.target.value)} placeholder="Search trash" />

{filtered.map((item) => (

{item.title} {item.label} · Deleted {formatDate(item.deletedAt?.slice(0, 10))} {!!item.related?.length && Includes {item.related.length} related payment record{item.related.length > 1 ? 's' : ''}}

))} {!filtered.length && }

); } function AdminPanel({ auth, notify }) { const [tenants, setTenants] = React.useState([]); const [loading, setLoading] = React.useState(true); const [savingId, setSavingId] = React.useState(''); const statuses = ['trial', 'active', 'suspended', 'disabled', 'expired']; const plans = ['trial', 'basic', 'pro', 'enterprise']; const loadTenants = React.useCallback(() => { setLoading(true); apiRequest('/api/admin/tenants', { token: auth.token }) .then((result) => { const adminEmail = normalizeEmail(auth.user?.email); setTenants((result.tenants || []).filter((tenant) => normalizeEmail(tenant.owner_email) !== adminEmail)); }) .catch((error) => notify(error.message)) .finally(() => setLoading(false)); }, [auth.token, auth.user?.email]); React.useEffect(() => { loadTenants(); }, [loadTenants]); const updateTenant = (tenant, patch) => { const nextTenant = { ...tenant, ...patch }; setTenants((rows) => rows.map((row) => row.id === tenant.id ? nextTenant : row)); setSavingId(tenant.id); apiRequest(`/api/admin/tenants/${tenant.id}`, { method: 'PATCH', token: auth.token, body: { status: nextTenant.status, plan: nextTenant.plan, trialEndsAt: nextTenant.trial_ends_at, subscriptionEndsAt: nextTenant.subscription_ends_at } }) .then((result) => { setTenants((rows) => rows.map((row) => row.id === tenant.id ? { ...row, ...result.tenant } : row)); notify('Customer workspace updated'); }) .catch((error) => { notify(error.message); loadTenants(); }) .finally(() => setSavingId('')); }; return (

Each signup gets a separate private workspace. Use this area to manage trials, paid plans, and blocked accounts.
{loading ? : (
{tenants.map((tenant) => (

{tenant.name} {tenant.owner_email || 'No owner email'} {tenant.record_count || 0} records - Created {formatDate(String(tenant.created_at || '').slice(0, 10))}
Status Plan Trial Ends updateTenant(tenant, { trial_ends_at: e.target.value })} /> Subscription Ends updateTenant(tenant, { subscription_ends_at: e.target.value || null })} />
))} {!tenants.length && }
)}
); } function CompanySettings({ ctx }) { const { data, setters, notify, confirmThen, auth } = ctx; const [form, setForm] = React.useState(data.settings); const [dirty, setDirty] = React.useState(false); const [uploadNotice, setUploadNotice] = React.useState(''); React.useEffect(() => { if (!dirty) setForm(data.settings); }, [data.settings, dirty]); const fields = [ ['companyName', 'Company Name'], ['primaryColor', 'Primary Theme Color', 'color'], ['phone', 'Phone'], ['email', 'Email'], ['address', 'Address', 'textarea'], ['gstNumber', 'GST Number'], ['clientLabel', 'Customer/Client Label'], ['itemLabel', 'Item Label'], ['itemPluralLabel', 'Items Section Label'], ['categoryLabel', 'Category Label'], ['bankDetails', 'Bank Details', 'textarea'], ['upiId', 'UPI ID'], ['invoicePrefix', 'Invoice Prefix'], ['quotationPrefix', 'Quotation Prefix'], ['terms', 'Default Terms and Conditions', 'textarea'] ]; const uploadImage = (key, file) => { if (!file) return; if (!String(file.type || '').startsWith('image/')) { setUploadNotice('Please upload an image file only.'); return; } const reader = new FileReader(); reader.onload = () => { setForm((current) => ({ ...current, [key]: reader.result })); setDirty(true); setUploadNotice(key === 'signature' ? 'Signature ready. Click Save Settings.' : 'Logo ready. Click Save Settings.'); }; reader.onerror = () => setUploadNotice('Upload failed. Please try another image.'); reader.readAsDataURL(file); }; const updateSetting = (key, value) => { setDirty(true); setForm((current) => ({ ...current, [key]: value })); }; const persistCloud = (key, value) => { if (!auth?.token) return; apiRequest(`/api/app-state/${key}`, { method: 'PUT', token: auth.token, body: { data: value } }) .catch((error) => notify(`Cloud save failed: ${error.message}`)); }; const selectBusinessType = (businessType) => { const nextSettings = applyBusinessPresetToSettings(form, businessType); setDirty(true); setForm(nextSettings); }; const addMissingDefaults = () => confirmThen({ title: 'Add missing default services?', message: `Add any missing ${getBusinessPreset(form.businessType).label} defaults without changing or deleting your existing services/items?`, confirmText: 'Yes, add missing', cancelText: 'No' }, () => { const defaults = makeServices(form.businessType); const serviceKey = (service) => `${String(service.name || '').trim().toLowerCase()}|${String(service.category || '').trim().toLowerCase()}`; const existingKeys = new Set(data.services.map(serviceKey)); const missing = defaults.filter((service) => !existingKeys.has(serviceKey(service))); const merged = [...data.services, ...missing]; setters.setSettings(form); persistCloud('companySettings', form); setters.setServices(merged); persistCloud('services', merged); notify(missing.length ? `${missing.length} missing services/items added` : 'All default services/items are already available'); setDirty(false); setUploadNotice(''); }); const saveSettings = () => confirmThen({ title: 'Save company settings?', message: `Are you sure to save company settings and load ${getBusinessPreset(form.businessType).label} default services/items?`, confirmText: 'Yes, save', cancelText: 'No' }, () => { const defaults = makeServices(form.businessType); setters.setSettings(form); persistCloud('companySettings', form); setters.setServices(defaults); persistCloud('services', defaults); notify(`${getBusinessPreset(form.businessType).label} settings and services saved`); setDirty(false); setUploadNotice(''); }); return (

Upload Logo uploadImage('logo', e.target.files[0])} />

{form.signature ? : Signature preview}
Upload Signature uploadImage('signature', e.target.files[0])} /> {form.signature && } {uploadNotice && {uploadNotice}}

Business Type Choose the business type, then click Save Settings to load the correct services/items.
{getBusinessPreset(form.businessType).label}
{naturalLabel(form.itemPluralLabel, getBusinessPreset(form.businessType).itemPluralLabel || 'Services', ['Items'])} will use labels like {form.clientLabel || 'Customer'}, {naturalLabel(form.itemLabel, getBusinessPreset(form.businessType).itemLabel || 'Service', ['Item'])} and {naturalLabel(form.categoryLabel, getBusinessPreset(form.businessType).categoryLabel || 'Service Category', ['Category'])}.

{fields.map(([key, label, type]) => updateSetting(key, v)} />)}

); } function normalizeEmail(email) { return String(email || '').trim().toLowerCase(); } function CrudSection({ title, singular, rows, columns, searchKeys, getStatus, fields, clients = [], onSave, onDelete, detail, externalModal, setExternalModal, customForm }) { const [modal, setModal] = React.useState(null); const [view, setView] = React.useState(null); const [search, setSearch] = React.useState(''); const [status, setStatus] = React.useState(''); const activeModal = externalModal || modal; const setActiveModal = setExternalModal || setModal; const statuses = [...new Set(rows.map(getStatus).filter(Boolean))]; const filtered = rows.filter((row) => { const hay = searchKeys.map((key) => row[key]).join(' ').toLowerCase(); return hay.includes(search.toLowerCase()) && (!status || getStatus(row) === status); }); const blank = fields.reduce((acc, [key, type, , options]) => ({ ...acc, [key]: key === 'date' || key === 'startDate' ? today() : type === 'select' && options?.length ? options[0] : '' }), { id: uid() }); return (
setActiveModal(blank)} /> <> } /> {!filtered.length && } {activeModal && (customForm ? customForm(activeModal, setActiveModal, () => setActiveModal(null), (record) => { if (validate(record, fields)) { onSave(record); setActiveModal(null); } }) : setActiveModal(null)} onSave={() => { if (validate(activeModal, fields)) { onSave(activeModal); setActiveModal(null); } }} /> )} {view && setView(null)} wide> {detail?.(view)} }
); } function RecordModal({ title, singular = 'record', record, setRecord, fields, clients, onClose, onSave }) { return (
{fields.map(([key, type, required, options, customLabel]) => ( [item.id, item.name]) : options?.map((item) => [item, item])} value={record[key] || ''} onChange={(v) => setRecord({ ...record, [key]: v })} /> ))}

); } function QuickClientField({ label = 'Client', value, onChange, data, setters, notify, addActivity, required }) { const preset = getBusinessPreset(data.settings.businessType); const clientLabel = naturalLabel(data.settings.clientLabel, preset.clientLabel || 'Client', ['Customer']); const [quickClient, setQuickClient] = React.useState(null); const openQuickAdd = () => setQuickClient({ id: uid(), name: '', company: '', mobile: '', email: '', gst: '', city: '', address: '', notes: '' }); const saveQuickClient = () => { const name = String(quickClient?.name || '').trim(); if (!name) { notify(`${clientLabel} name is required`); return; } const record = { ...quickClient, name }; setters.setClients((items) => [record, ...items]); onChange(record.id); notify(`${clientLabel} added`); addActivity?.(`Added ${clientLabel.toLowerCase()} ${record.name}`); setQuickClient(null); }; return ( <> {label}{required ? ' *' : ''}

Need a new {clientLabel.toLowerCase()}? Add it here without leaving this screen. {quickClient && setQuickClient(null)}>
setQuickClient({ ...quickClient, name: v })} required /> setQuickClient({ ...quickClient, company: v })} /> setQuickClient({ ...quickClient, mobile: v })} /> setQuickClient({ ...quickClient, email: v })} /> setQuickClient({ ...quickClient, gst: v })} /> setQuickClient({ ...quickClient, city: v })} /> setQuickClient({ ...quickClient, address: v })} /> setQuickClient({ ...quickClient, notes: v })} />

} ); } function Toolbar({ search, setSearch, status, setStatus, statuses = [], date, setDate, actionLabel, onAction }) { return (
setSearch(e.target.value)} placeholder="Search" /> {setStatus && } {setDate && } {onAction && }
); } function DataTable({ rows, columns, actions }) { return (
{columns.map(([, label]) => )}{actions && } {rows.map((row) => ( {columns.map(([key, , format]) => )} {actions && } ))}

{label} Actions

{format ? format(row[key], row) : displayCellValue(key, row[key])} {actions(row)}

{!rows.length && }
); } function Field({ label, type = 'text', value, onChange, options = [], required, help, placeholder, readOnly }) { if (type === 'date') { return ; } if (type === 'month') { return ; } return ( {label}{required ? ' *' : ''} {type === 'textarea' ? onChange(e.target.value)} /> : type === 'select' ? <select value={value || ''} onChange={(e) => onChange(e.target.value)}>{options.map(([value, label]) => <option key={value} value={value}>{label}</option>)}</select> : <input placeholder={placeholder} readOnly={readOnly} type={type} value={value || ''} onChange={(e) => onChange(e.target.value)} />} {help && <small className="field-help">{help}</small>} </label> ); } function Modal({ title, children, onClose, wide }) { React.useEffect(() => { const scrollY = window.scrollY; document.body.classList.add('modal-open'); document.body.style.top = `-${scrollY}px`; return () => { document.body.classList.remove('modal-open'); document.body.style.top = ''; window.scrollTo(0, scrollY); }; }, []); return ( <div className="modal-backdrop"> <div className={`modal ${wide ? 'wide' : ''}`}> <div className="modal-head"><h2>{title}</h2><button className="ghost" onClick={onClose}>Close</button></div> {children} </div> </div> ); } function ConfirmDialog({ config, onClose }) { const confirm = () => { onClose(); config.onConfirm?.(); }; return ( <div className="modal-backdrop"> <div className="modal confirm-modal"> <div className={`confirm-icon ${config.tone === 'danger' ? 'danger' : ''}`}> <i className={`fa-solid ${config.tone === 'danger' ? 'fa-triangle-exclamation' : 'fa-circle-question'}`} /> </div> <h2>{config.title || 'Are you sure?'}</h2> <p>{config.message || 'Are you sure to continue?'}</p> <div className="modal-actions confirm-actions"> <button className="ghost" onClick={onClose}>{config.cancelText || 'No'}</button> <button className={config.tone === 'danger' ? 'danger' : ''} onClick={confirm}>{config.confirmText || 'Yes'}</button> </div> </div> </div> ); } function Panel({ title, children }) { return <section className="panel"><h2>{title}</h2>{children}</section>; } function Empty({ text }) { return <div className="empty">{text}</div>; } function Badge({ text }) { return <span className={`badge ${String(text || '').toLowerCase().replaceAll(' ', '-')}`}>{text || 'Open'}</span>; } function Info({ label, value }) { return <div className="info"><span>{label}</span><strong>{value || '-'}</strong></div>; } function History({ title, rows, nameKey = 'number', amountKey = 'grandTotal' }) { return <div className="wide-field"><strong>{title}</strong>{rows.length ? rows.map((row) => <p key={row.id}>{row[nameKey] || row.invoiceNumber || formatDate(row.date)} {row.date && (row[nameKey] || row.invoiceNumber) ? `- ${formatDate(row.date)}` : ''} {amountKey && row[amountKey] ? `- ${money(row[amountKey])}` : ''}</p>) : <p>No records.</p>}</div>; } function PaymentHistoryBlock({ payments }) { return ( <div className="payment-history"> <div> <strong>Payment History</strong> <span>{payments.length ? `${payments.length} payment${payments.length === 1 ? '' : 's'} recorded` : 'No payment recorded yet'}</span> </div> {payments.length ? payments.map((payment) => ( <p key={payment.id}> <span>{formatDate(payment.date)} - {payment.paymentMode || 'Payment'}</span> <strong>{money(payment.amount)}</strong> </p> )) : <p><span>Payment details will appear here after saving received amount.</span><strong>{money(0)}</strong></p>} </div> ); } function DataSummary({ row, columns }) { return <div className="detail-grid">{columns.map(([key, label, format]) => <Info key={key} label={label} value={format ? format(row[key], row) : displayCellValue(key, row[key])} />)}</div>; } function upsert(setter, record) { const clean = { ...record }; delete clean._editing; setter((items) => items.some((item) => item.id === clean.id) ? items.map((item) => item.id === clean.id ? clean : item) : [clean, ...items]); } function trashTitle(record, label = 'Record') { return record?.number || record?.name || record?.projectName || record?.vendorName || record?.invoiceNumber || label; } function removeRecord({ collection, label, record, setter, notify, moveToTrash, related = [], afterDelete }) { confirmThen({ title: `Move ${label.toLowerCase()} to trash?`, message: `${trashTitle(record, label)} will move to Trash. You can restore it later.`, confirmText: 'Yes, move', cancelText: 'No', tone: 'danger' }, () => { let nextRows = []; setter((items) => { nextRows = items.filter((item) => item.id !== record.id); return nextRows; }); moveToTrash?.({ collection, label, record, related }); afterDelete?.(nextRows); notify(`${label} moved to Trash`); }); } function validate(record, fields) { const missing = fields .filter(([, , required]) => required) .some(([key]) => record[key] == null || (typeof record[key] === 'string' && !record[key].trim())); if (missing) { alert('Please complete required fields.'); return false; } return true; } function blankLine(service, id = uid()) { return { id, serviceId: service?.id || '', name: service?.name || '', description: service?.description || '', qty: 1, rate: service?.rate || 0, discount: 0, gst: service?.gst || 18 }; } function nextNumber(rows, prefix) { const next = Math.max(0, ...rows.map((row) => invoiceSequence(row.number))) + 1; return `${prefix}-${String(next).padStart(4, '0')}`; } function invoiceSequence(number) { const match = String(number || '').match(/(\d+)(?!.*\d)/); return match ? Number(match[1]) : 0; } function displayCellValue(key, value) { return ['date', 'dueDate', 'validTill', 'startDate', 'deadline'].includes(key) ? formatDate(value) : value; } function clientName(id, data) { return data.clients.find((item) => item.id === id)?.name || 'No client'; } function flattenRows(rows) { return rows.map((row) => Object.fromEntries(Object.entries(row).map(([key, value]) => [key, Array.isArray(value) || typeof value === 'object' ? JSON.stringify(value) : value]))); } function recalculateInvoiceBalances(invoices, payments) { return invoices.map((invoice) => { const paidAmount = payments .filter((payment) => payment.invoiceId === invoice.id) .reduce((sum, payment) => sum + Number(payment.amount || 0), 0); const balanceAmount = Math.max(Number(invoice.grandTotal || 0) - paidAmount, 0); let status = invoice.status; if (!['Cancelled', 'Draft'].includes(status)) { status = balanceAmount <= 0 ? 'Paid' : paidAmount > 0 ? 'Partially Paid' : status; } else if (paidAmount > 0) { status = balanceAmount <= 0 ? 'Paid' : 'Partially Paid'; } return { ...invoice, paidAmount, balanceAmount, status }; }); } function DocumentPreview({ doc, data, kind }) { const client = data.clients.find((item) => item.id === doc.clientId) || {}; const paymentHistory = kind === 'Invoice' ? data.payments.filter((payment) => payment.invoiceId === doc.id).sort((a, b) => String(b.date || '').localeCompare(String(a.date || ''))) : []; return ( <div className="print-sheet"> <div className="print-head"> <div className="logo-box"><img src={data.settings.logo || DEFAULT_LOGO} alt="Reach Design" /></div> <div className="company-details"> <h2>{data.settings.companyName}</h2> <p className="company-address">{splitAddress(data.settings.address).map((line) => <span key={line}>{line}</span>)}</p> <div className="company-contact"> {data.settings.phone && <span><i className="fa-solid fa-phone" /><b>Phone</b><em>{data.settings.phone}</em></span>} {data.settings.email && <span><i className="fa-solid fa-envelope" /><b>Email</b><em>{data.settings.email}</em></span>} <span><i className="fa-solid fa-file-invoice" /><b>GSTIN</b><em>{data.settings.gstNumber || 'Not provided'}</em></span> </div> </div> </div> <div className="invoice-divider" /> <div className="print-meta"> <div><strong>Client Details</strong><p>{client.name}</p><p>{client.company}</p><p>{client.billingAddress}</p><p>GST: {client.gst || '-'}</p></div> <div><strong>{kind} Details</strong><p>No: {doc.number}</p><p>Date: {formatDate(doc.date)}</p><p>Status: {doc.status}</p></div> </div> <table className="print-table"><thead><tr><th>Item</th><th>Qty</th><th>Rate</th><th>Discount</th><th>GST</th><th>Total</th></tr></thead><tbody>{doc.items.map((line) => <tr key={line.id}><td>{line.name || line.description}<small>{line.description}</small></td><td>{line.qty}</td><td>{money(line.rate)}</td><td>{money(line.discount)}</td><td>{percent(line.gst)}</td><td>{money(lineTotals(line).total)}</td></tr>)}</tbody></table> <div className="print-total"><p>Subtotal: {money(doc.subtotal)}</p><p>GST: {money(doc.gst)}</p><p>Discount: {money(doc.discount)}</p>{kind === 'Invoice' && <><p>Paid: {money(doc.paidAmount)}</p><p>Balance: {money(doc.balanceAmount)}</p></>}<strong>Grand Total: {money(doc.grandTotal)}</strong></div> {kind === 'Invoice' && <PaymentHistoryBlock payments={paymentHistory} />} <div className="print-meta"><div><strong>Terms</strong><p>{doc.terms}</p><p>{doc.notes}</p></div><div className="signature">{data.settings.signature && <img src={data.settings.signature} alt="Authorized signature" />}<span>Authorized Signature</span></div></div> </div> ); } function printDocument(doc, data, kind, notify = () => {}) { if (window.ReachInvoiceAndroid?.shareImage) { shareDocumentFile(doc, data, kind, notify, { fromPrint: true }); return; } const win = window.open('', '_blank'); if (!win) { notify('Popup blocked. Use Share to send invoice image.'); return; } const icons = new URL('./src/vendor/fontawesome/css/all.min.css', window.location.href).href; win.document.write(`<!doctype html><html><head><title>${kind} ${doc.number}</title><link rel="stylesheet" href="${icons}"><style>${printCss(data.settings.primaryColor)}</style></head><body>${renderPrintHtml(doc, data, kind)}</body></html>`); win.document.close(); printWindowWhenReady(win); } async function shareDocumentFile(doc, data, kind, notify, options = {}) { try { notify(options.fromPrint ? `Preparing ${kind.toLowerCase()} for print/share...` : `Preparing ${kind.toLowerCase()} image...`); const blob = await createDocumentImageBlob(doc, data, kind); const filename = `${kind} ${doc.number}.png`; if (window.ReachInvoiceAndroid?.shareImage) { const dataUrl = await blobToDataUrl(blob); window.ReachInvoiceAndroid.shareImage(dataUrl, filename, `${kind} ${doc.number} - ${money(doc.grandTotal)}`); notify(options.fromPrint ? `${kind} image ready` : `${kind} image shared`); return; } const file = new File([blob], filename, { type: 'image/png' }); if (navigator.canShare?.({ files: [file] })) { await navigator.share({ title: `${kind} ${doc.number}`, text: `${kind} ${doc.number} - ${money(doc.grandTotal)}`, files: [file] }); notify(`${kind} image shared`); } else { const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = filename; anchor.click(); URL.revokeObjectURL(url); notify(`${kind} image downloaded`); } } catch (error) { shareText(`${kind} ${doc.number}: ${money(doc.grandTotal)}`, notify); } } function blobToDataUrl(blob) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(blob); }); } async function createDocumentImageBlob(doc, data, kind) { const canvas = document.createElement('canvas'); canvas.width = 1080; canvas.height = 1520; const ctx = canvas.getContext('2d'); const client = data.clients.find((item) => item.id === doc.clientId) || {}; const pad = 72; const primary = data.settings.primaryColor || '#f3c910'; const primaryDark = mixColor(primary, [0, 0, 0], 0.36); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#202124'; ctx.textBaseline = 'top'; const logo = await loadCanvasImage(data.settings.logo || DEFAULT_LOGO).catch(() => null); const signature = data.settings.signature ? await loadCanvasImage(data.settings.signature).catch(() => null) : null; if (logo) { drawContainImage(ctx, logo, pad, 82, 260, 135); } ctx.textAlign = 'left'; drawText(ctx, data.settings.companyName || 'REACH Design', 520, 82, 390, 36, 800, '#202124'); let y = 138; splitAddress(data.settings.address).forEach((line) => { drawText(ctx, line, 520, y, 420, 18, 500, '#5f6368'); y += 28; }); y += 12; drawContactLine(ctx, 'PHONE', data.settings.phone || '-', 520, y, primaryDark); drawContactLine(ctx, 'EMAIL', data.settings.email || '-', 700, y, primaryDark); drawContactLine(ctx, 'GSTIN', data.settings.gstNumber || 'Not provided', 520, y + 34, primaryDark); ctx.strokeStyle = primary; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(pad, 275); ctx.lineTo(canvas.width - pad, 275); ctx.stroke(); drawText(ctx, 'Client Details', pad, 335, 360, 22, 800, '#202124'); drawText(ctx, client.name || '-', pad, 374, 360, 18, 500, '#5f6368'); drawText(ctx, client.company || '', pad, 406, 360, 18, 500, '#5f6368'); drawText(ctx, client.billingAddress || '', pad, 438, 420, 16, 500, '#5f6368', 2); drawText(ctx, `GST: ${client.gst || '-'}`, pad, 502, 360, 16, 500, '#5f6368'); ctx.textAlign = 'right'; drawText(ctx, `${kind} Details`, canvas.width - pad, 335, 360, 22, 800, '#202124', 1, 'right'); drawText(ctx, `No: ${doc.number}`, canvas.width - pad, 374, 360, 18, 500, '#5f6368', 1, 'right'); drawText(ctx, `Date: ${formatDate(doc.date)}`, canvas.width - pad, 406, 360, 18, 500, '#5f6368', 1, 'right'); drawText(ctx, `Status: ${doc.status}`, canvas.width - pad, 438, 360, 18, 500, '#5f6368', 1, 'right'); const tableTop = 575; ctx.fillStyle = '#f7f7f7'; ctx.fillRect(pad, tableTop, canvas.width - pad * 2, 54); const columns = [ ['ITEM', pad + 16, 'left'], ['QTY', 470, 'right'], ['RATE', 610, 'right'], ['DISC.', 750, 'right'], ['GST', 865, 'right'], ['TOTAL', canvas.width - pad - 16, 'right'] ]; columns.forEach(([label, x, align]) => drawText(ctx, label, x, tableTop + 18, 120, 13, 800, '#5f6368', 1, align)); let rowY = tableTop + 78; (doc.items || []).slice(0, 8).forEach((line) => { drawText(ctx, line.name || line.description || '-', pad + 16, rowY, 330, 18, 500, '#202124'); drawText(ctx, line.description || '', pad + 16, rowY + 26, 330, 14, 500, '#777777', 2); drawText(ctx, formatNumber(line.qty), 470, rowY, 70, 18, 500, '#202124', 1, 'right'); drawText(ctx, money(line.rate), 610, rowY, 120, 18, 500, '#202124', 1, 'right'); drawText(ctx, money(line.discount), 750, rowY, 120, 18, 500, '#202124', 1, 'right'); drawText(ctx, percent(line.gst), 865, rowY, 80, 18, 500, '#202124', 1, 'right'); drawText(ctx, money(lineTotals(line).total), canvas.width - pad - 16, rowY, 130, 18, 700, '#202124', 1, 'right'); ctx.strokeStyle = '#e5e7ea'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(pad, rowY + 76); ctx.lineTo(canvas.width - pad, rowY + 76); ctx.stroke(); rowY += 86; }); const totalY = Math.max(rowY + 28, 930); ctx.textAlign = 'right'; drawText(ctx, `Subtotal: ${money(doc.subtotal)}`, canvas.width - pad, totalY, 300, 20, 500, '#202124', 1, 'right'); drawText(ctx, `GST: ${money(doc.gst)}`, canvas.width - pad, totalY + 38, 300, 20, 500, '#202124', 1, 'right'); drawText(ctx, `Discount: ${money(doc.discount)}`, canvas.width - pad, totalY + 76, 300, 20, 500, '#202124', 1, 'right'); drawText(ctx, `Grand Total: ${money(doc.grandTotal)}`, canvas.width - pad, totalY + 126, 420, 30, 800, '#202124', 1, 'right'); ctx.textAlign = 'left'; drawText(ctx, 'Terms', pad, 1245, 420, 22, 800, '#202124'); drawText(ctx, doc.terms || '', pad, 1282, 520, 16, 500, '#5f6368', 3); if (doc.notes) drawText(ctx, doc.notes, pad, 1360, 520, 15, 500, '#777777', 2); if (signature) drawContainImage(ctx, signature, 690, 1250, 310, 70); ctx.strokeStyle = '#222222'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(690, 1325); ctx.lineTo(1000, 1325); ctx.stroke(); ctx.textAlign = 'center'; drawText(ctx, 'Authorized Signature', 845, 1343, 250, 16, 500, '#202124', 1, 'center'); return new Promise((resolve) => canvas.toBlob(resolve, 'image/png', 0.95)); } function loadCanvasImage(src) { return new Promise((resolve, reject) => { const image = new Image(); image.onload = () => resolve(image); image.onerror = reject; image.src = src; }); } function drawContainImage(ctx, image, x, y, width, height) { const ratio = Math.min(width / image.naturalWidth, height / image.naturalHeight); const drawWidth = image.naturalWidth * ratio; const drawHeight = image.naturalHeight * ratio; ctx.drawImage(image, x + (width - drawWidth) / 2, y + (height - drawHeight) / 2, drawWidth, drawHeight); } function drawContactLine(ctx, label, value, x, y, accent = '#8a6800') { drawText(ctx, label, x, y, 56, 11, 800, accent); drawText(ctx, value, x + 72, y - 2, 240, 14, 500, '#303438'); } function drawText(ctx, text, x, y, maxWidth, size, weight = 500, color = '#202124', maxLines = 1, align = 'left') { ctx.fillStyle = color; ctx.font = `${weight} ${size}px Arial, sans-serif`; ctx.textAlign = align; const words = String(text ?? '').split(/\s+/).filter(Boolean); const lines = []; let line = ''; words.forEach((word) => { const test = line ? `${line} ${word}` : word; if (ctx.measureText(test).width > maxWidth && line) { lines.push(line); line = word; } else { line = test; } }); if (line) lines.push(line); (lines.length ? lines : ['-']).slice(0, maxLines).forEach((lineText, index) => { ctx.fillText(lineText, x, y + index * (size + 8), maxWidth); }); } function printReceipt(payment, data) { const client = data.clients.find((item) => item.id === payment.clientId) || {}; const win = window.open('', '_blank'); win.document.write(`<!doctype html><html><head><title>Receipt ${payment.invoiceNumber}</title><style>${printCss(data.settings.primaryColor)}</style></head><body><div class="sheet"><h1>Payment Receipt</h1><p><b>${data.settings.companyName}</b></p><p>${data.settings.address}</p><hr/><p>Client: ${client.name || '-'}</p><p>Invoice: ${payment.invoiceNumber}</p><p>Date: ${formatDate(payment.date)}</p><p>Mode: ${payment.paymentMode}</p><h2>Amount: ${money(payment.amount)}</h2><p>Transaction ID: ${payment.transactionId || '-'}</p><div class="signature">Authorized Signature</div></div></body></html>`); win.document.close(); printWindowWhenReady(win); } function printWindowWhenReady(win) { const images = Array.from(win.document.images); const ready = images.map((image) => image.complete && image.naturalWidth ? Promise.resolve() : new Promise((resolve) => { image.addEventListener('load', resolve, { once: true }); image.addEventListener('error', resolve, { once: true }); })); Promise.race([ Promise.all([Promise.all(ready), win.document.fonts?.ready || Promise.resolve()]), new Promise((resolve) => win.setTimeout(resolve, 1800)) ]).then(() => { win.setTimeout(() => { win.focus(); win.print(); }, 350); }); } function renderPrintHtml(doc, data, kind) { const client = data.clients.find((item) => item.id === doc.clientId) || {}; const address = splitAddress(data.settings.address).map((line) => `<span>${line}</span>`).join(''); const paymentRows = kind === 'Invoice' ? data.payments .filter((payment) => payment.invoiceId === doc.id) .sort((a, b) => String(b.date || '').localeCompare(String(a.date || ''))) .map((payment) => `<p><span>${formatDate(payment.date)} - ${payment.paymentMode || 'Payment'}</span><strong>${money(payment.amount)}</strong></p>`) .join('') : ''; return `<div class="sheet"> <div class="head"><div class="logo"><img src="${data.settings.logo || DEFAULT_LOGO}" alt="Reach Design"/></div><div class="company"><h1>${data.settings.companyName || 'REACH Design'}</h1><p class="address">${address}</p><div class="contact">${data.settings.phone ? `<span><i class="fa-solid fa-phone"></i><b>Phone</b><em>${data.settings.phone}</em></span>` : ''}${data.settings.email ? `<span><i class="fa-solid fa-envelope"></i><b>Email</b><em>${data.settings.email}</em></span>` : ''}<span><i class="fa-solid fa-file-invoice"></i><b>GSTIN</b><em>${data.settings.gstNumber || 'Not provided'}</em></span></div></div></div> <div class="invoice-divider"></div> <div class="meta"><div><b>Client Details</b><p>${client.name || ''}</p><p>${client.company || ''}</p><p>${client.billingAddress || ''}</p><p>GST: ${client.gst || '-'}</p></div><div><b>${kind} Details</b><p>No: ${doc.number}</p><p>Date: ${formatDate(doc.date)}</p><p>Status: ${doc.status}</p></div></div> <table><thead><tr><th>Item</th><th>Qty</th><th>Rate</th><th>Discount</th><th>GST</th><th>Total</th></tr></thead><tbody>${doc.items.map((line) => `<tr><td>${line.name || ''}<br/><small>${line.description || ''}</small></td><td>${line.qty}</td><td>${money(line.rate)}</td><td>${money(line.discount)}</td><td>${percent(line.gst)}</td><td>${money(lineTotals(line).total)}</td></tr>`).join('')}</tbody></table> <div class="total"><p>Subtotal: ${money(doc.subtotal)}</p><p>GST: ${money(doc.gst)}</p><p>Discount: ${money(doc.discount)}</p>${kind === 'Invoice' ? `<p>Paid: ${money(doc.paidAmount)}</p><p>Balance: ${money(doc.balanceAmount)}</p>` : ''}<h2>Grand Total: ${money(doc.grandTotal)}</h2></div> ${kind === 'Invoice' ? `<div class="payment-history"><div><b>Payment History</b><span>${paymentRows ? 'Recorded payments' : 'No payment recorded yet'}</span></div>${paymentRows || `<p><span>Payment details will appear after received amount is saved.</span><strong>${money(0)}</strong></p>`}</div>` : ''} <div class="meta"><div><b>Terms</b><p>${doc.terms || ''}</p><p>${doc.notes || ''}</p></div><div class="signature">${data.settings.signature ? `<img src="${data.settings.signature}" alt="Authorized signature"/>` : ''}<span>Authorized Signature</span></div></div> </div>`; } function printCss(primaryColor = '#f3c910') { const primary = primaryColor || '#f3c910'; const primaryDark = mixColor(primary, [0, 0, 0], 0.36); const primarySoft = mixColor(primary, [255, 255, 255], 0.72); const primarySoft2 = mixColor(primary, [255, 255, 255], 0.88); return `body{margin:0;font-family:"Google Sans","Product Sans",Inter,Arial,sans-serif;color:#202124}.sheet{max-width:980px;margin:auto;padding:34px 46px}.head{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding:6px 8px 28px}.invoice-divider{position:relative;z-index:5;clear:both;width:100%;height:0;margin:8px 0 40px;border-top:2px solid ${primary}}.logo{width:220px;height:130px;display:grid;place-items:center;justify-self:start}.logo img{display:block;width:100%;height:100%;object-fit:contain}.company{width:330px;max-width:100%;justify-self:end}.company h1{margin:0 0 12px;font-size:30px;letter-spacing:0}.company p{margin:0;color:#5f6368}.address{display:grid;gap:3px;line-height:1.45;font-size:12px}.contact{display:grid;gap:8px;margin-top:14px}.contact span{display:grid;grid-template-columns:14px 42px minmax(0,1fr);align-items:center;gap:7px;font-size:11px}.contact i{color:${primaryDark};font-size:9px;text-align:center}.contact b{color:${primaryDark};font-size:8px;text-transform:uppercase;letter-spacing:.7px}.contact em{min-width:0;color:#303438;font-style:normal;overflow-wrap:anywhere}.meta{display:flex;justify-content:space-between;gap:40px;margin:0 8px 38px}.meta>div:last-child{min-width:210px;text-align:right}.meta b{font-size:15px}.meta p{margin:6px 0;color:#5f6368;font-size:13px}.meta:last-of-type{align-items:flex-end;margin-top:20px}table{width:calc(100% - 16px);margin:0 8px;border-collapse:collapse}th,td{padding:12px 10px;text-align:left;border-bottom:1px solid #dfe2e5}th{background:#fff;color:#5f6368;font-size:9px;text-transform:uppercase}td{font-size:13px}td small{display:block;margin-top:3px}.total{text-align:right;margin:18px 8px 14px}.total p{margin:9px 0;font-size:13px}.total h2{margin:16px 0 0;font-size:21px}.signature{border-top:2px solid #222;align-self:flex-end;padding-top:10px;min-width:200px;text-align:center;font-size:12px}.signature img{display:block;width:170px;max-height:58px;object-fit:contain;margin:-72px auto 10px}.signature span{display:block}.payment-history{margin:18px 8px;padding:12px 14px;border:1px solid ${primarySoft};border-radius:8px;background:${primarySoft2}}.payment-history div{display:flex;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid ${primarySoft}}.payment-history div b{font-size:13px}.payment-history div span{color:#777b7f;font-size:11px}.payment-history p{margin:7px 0 0;display:flex;justify-content:space-between;gap:14px;color:#55595d;font-size:12px}.payment-history p strong{color:#202124;white-space:nowrap}@media print{button{display:none}.sheet{padding:24px 38px}}`; } createRoot(document.getElementById('root')).render(<App />);