Finance · Billing document generator
Turn services, quantities, rates, and tax into a numbered document with a clear next state.
Invoice & Estimates is a focused billing-document tool for freelancers and small service businesses. Create an estimate or invoice, enter a client and line items, calculate subtotal and percentage tax automatically, then move the record through its available states. This Foundationbase version stores documents in the current browser, converts an approved estimate to an invoice, and uses the browser's print dialog for paper or PDF output.
Open the working toolProduct preview
These screens come from the working Foundationbase implementation.
What this tool helps you do
Copying an old document or editing a spreadsheet invites stale client details, broken formulas, and manually typed totals. Larger accounting products solve more problems, but they also introduce accounts, ledgers, payment providers, and configuration that may be outside a simple document prototype.
This tool represents each billing document as a client name, type, automatic number, line items, tax rate, date, and status. The interface calculates amounts from quantity and rate, stores the result locally, and exposes only the state changes implemented for estimates and invoices.
What is included
Choose the document type in the builder. The created record receives an EST or INV prefix with the next shared number.
Why it matters: One data model supports the two common stages of a service billing workflow.
Verified in: DocKind, Builder, and nextNumber
Add or remove rows, describe the work, and enter quantity and rate for each item. Empty descriptions are excluded when the document is created.
Why it matters: The document total is grounded in the work being billed rather than a single manually typed amount.
Verified in: LineItem type and Builder item controls
The builder multiplies quantity by rate for each row, sums the subtotal, and applies the entered percentage tax to produce the total.
Why it matters: Users can see the financial effect of line-item and tax changes before saving the document.
Verified in: subtotal, total, and builder calculations
A shared next-number counter generates EST- or INV-prefixed numbers and advances after each new document or estimate conversion.
Why it matters: New records receive a predictable identity without asking the user to type one.
Verified in: State.nextNumber and create/convert functions
Draft records can be marked sent. Sent estimates can be approved or declined. Sent invoices can be marked paid.
Why it matters: The action set follows the current document type and state instead of displaying every transition at once.
Verified in: DocStatus and DocDetail conditional actions
Convert an approved estimate into a draft invoice with a new INV number while retaining the client, items, tax, and date on the same record.
Why it matters: Accepted work can move into billing without re-entering line items.
Verified in: convertToInvoice
The document list totals sent or approved invoices as outstanding and all paid documents as paid.
Why it matters: The opening view provides a small operational snapshot derived from stored documents.
Verified in: DocList outstanding and paid reducers
Every document detail exposes Print / PDF, which opens the browser's native print workflow.
Why it matters: A user can print or choose a PDF destination without a server-side document service.
Verified in: window.print in DocDetail
How it works
The tool's real workflow is a document state machine with client text and calculated line items—not client management, payment processing, or accounting reconciliation.
Open New document and select the type that matches whether the work is proposed or already billable.
The future record will use the appropriate number prefix.Add the client name, one or more line descriptions, quantities, rates, and an optional tax percentage.
The builder calculates subtotal, tax, and total as values change.Create the document once a client and at least one described line exist.
A draft document is stored in the browser and opened for review.Mark a draft sent. For an estimate, record approval or decline; convert an approved estimate to a new draft invoice. For an invoice, mark payment when received.
The available actions and summary totals reflect the stored state.Use Print / PDF from the document view and choose the printer or PDF destination supplied by the browser and operating system.
The record can leave the browser as a paper copy or user-created PDF.Real use cases
For a freelancer
Situation: A prospective client needs a written scope with several services and a tax-inclusive total.
Workflow: Create an estimate, add the scoped lines, mark it sent, record approval, and convert it to an invoice when work proceeds.
Outcome: The accepted scope moves into billing without retyping the work.
For an independent consultant
Situation: A completed engagement needs a numbered invoice with hours or deliverables and a clear total.
Workflow: Choose invoice, enter the client and line items, verify tax, create the record, and print or save it as PDF.
Outcome: A consistent billing document is produced from calculated inputs.
For a local service operator
Situation: The business wants to test terminology and status flow before adopting accounting or payment integrations.
Workflow: Customize labels, default tax, services, and print branding in a source copy while retaining the existing calculation model.
Outcome: A real workflow prototype informs the later production architecture.
For a developer or student
Situation: You need a compact example of linked UI, calculations, persisted records, and conditional state transitions.
Workflow: Inspect BillingDoc, LineItem, total calculations, and DocDetail actions, then add one scoped capability.
Outcome: The code offers a concrete base for learning or extending a document state machine.
Who it is for
Use it, install it, or make it yours
Open the live tool, create a draft estimate or invoice, move it through the implemented states, and use your browser's print destination. Records are saved in this browser.
Download the MIT-licensed source package. The central component contains the billing types, calculations, document builder, list summaries, state actions, and print boundary.
Ask a coding agent to add addresses, due dates, discounts, branded print CSS, deletion, export, or a real provider integration. Payment and email behavior must be implemented before it is claimed.
Publish the customized Next.js project to a compatible host. If you add accounts, client approval, payment, or document delivery, move sensitive operations to trusted server code and document the new data flow.
Customization ideas
The existing BillingDoc and LineItem types make document changes concrete. Styling and terminology are small edits; payments, authenticated approval, and accounting integration are architectural work with new security and compliance obligations.
Add due dates and percentage or fixed discounts to Invoice & Estimates. Update BillingDoc, calculate subtotal, discount, tax, and total in a documented order, migrate existing local records, and show every amount in the print view.Add document duplication and deletion to Invoice & Estimates. Duplicates must receive a new number and draft status; deletion must require confirmation and update the outstanding and paid summaries.Replace the placeholder payment-link alert with a real Stripe integration. Create payment links only on trusted server code, store no secret in the browser, verify webhooks before marking an invoice paid, and document the new network and privacy behavior.Technical details
Privacy and data behavior
By default, Invoice & Estimates stores billing documents in localStorage in the current browser. It does not create an account, send documents, contact a payment provider, or transmit client and line-item data through an application API.
Location: One JSON state object in the current browser profile under Foundationbase.invoice-estimates.v1
Network: The current component performs no data API calls. The payment-link action displays a placeholder alert; it does not contact Stripe or another provider. Normal site assets still load from the host.
Delete: The current interface has no individual document deletion. Reset replaces all records with seeded sample documents; clearing site data removes the localStorage record.
Export: Print / PDF uses the browser's print dialog. There is no JSON, CSV, accounting, or import workflow.
Verification and known limitations
Foundationbase verification checks expected functionality, packaging, setup clarity, and common implementation concerns. It is not a professional security audit, accessibility certification, legal review, or guarantee of production suitability.
Comparison
This comparison focuses on the billing workflow actually implemented: inputs, calculations, states, output, and missing integrations.
| Decision | Foundationbase tool | Starting from scratch | Generic alternative |
|---|---|---|---|
| Document inputs | Client text, line descriptions, quantities, rates, and percentage tax | You define fields, validation, and editor behavior | Often includes customer, catalog, address, terms, and accounting fields |
| Calculations | Subtotal plus percentage tax in USD | You implement and test formula order | May include discounts, multi-currency, and jurisdiction rules |
| Estimate workflow | Draft, sent, approved or declined, then conversion to invoice | You design states and allowed transitions | May include client portals and e-signature |
| PDF output | Browser Print / PDF | You choose browser or server rendering | Usually generated and stored by the provider |
| Payment processing | Not included; current button identifies an integration boundary | You select and secure a provider | Often integrated with transaction fees |
| Accounting | No ledger or reconciliation | Can be scoped to exact needs | Often a central capability |
| Data and accounts | Local browser state with no account | You choose architecture | Provider-hosted account and cloud data |
| Customization | MIT source with a working document state model | Full freedom with no baseline | Limited to settings, templates, and integrations |
FAQ
Yes. Enter a percentage from the builder and the tool calculates tax as subtotal multiplied by that percentage. It does not implement jurisdiction-specific rules, exemptions, inclusive tax, or tax advice.
It opens the browser's Print / PDF workflow. You can choose a PDF destination if the browser and operating system provide one. The app does not generate or store a server-side PDF file.
No. The current payment-link button only explains where a provider could be integrated. It does not create a link, contact Stripe, process money, or verify a payment.
Yes. After a sent estimate is marked approved, Convert to invoice changes it into a draft invoice with a new INV number while retaining its client, line items, tax, and date.
They are stored in localStorage in the current browser profile under Foundationbase.invoice-estimates.v1. There is no account or automatic remote backup.
Not through the current form. Those are practical source customizations: add issuer and terms fields, render them in document detail, and include print-specific styling.
No. It is a focused estimate and invoice workflow. It has no general ledger, bank reconciliation, receivables aging, compliance reporting, or accounting integration.
The source is listed under the MIT license. Read the license included in the downloaded copy and evaluate any legal, tax, payment, and document requirements for your business before production use.
Start from something real
Use the working builder for a local document, or take the source and add the branding, terms, output, and integrations your real billing workflow requires.