Invoicing System - Migz93/3dq GitHub Wiki
The 3DQ invoicing system generates professional HTML invoices directly from your quotes. This guide explains how the invoicing system works and how to use it effectively.
3DQ offers two types of invoices:
-
Client Invoice: A customer-facing invoice showing the summary and final price. This invoice hides internal cost details and focuses on the final price the customer will pay.
-
Internal Invoice: A detailed invoice showing all cost breakdowns and a full financial summary. This is useful for your internal records and financial analysis.
To generate an invoice from a saved quote:
- Navigate to the Quotes section in the sidebar
- Find and click on the quote you want to invoice
- In the quote view page, you'll find two invoice buttons:
- Generate Client Invoice
- Generate Internal Invoice
- Click the appropriate button based on your needs
- The invoice will open in a new browser tab as an HTML document
The invoicing system is implemented entirely on the backend:
- The route
GET /api/quotes/:id/invoice/:type
in/routes/quotes.js
is responsible for generating invoices - When this endpoint is called, it:
- Fetches all quote data (filament, hardware, print setup, labour, company settings)
- Performs calculations (costs, markups, discounts, tax)
- Constructs a complete HTML string with embedded CSS
- Returns the HTML to the frontend
- On the frontend, the
generateInvoice(type)
JavaScript function inViewQuote.js
calls this API endpoint and opens the returned HTML in a new browser tab
The client invoice includes:
- Your company name and branding
- Quote number and date
- Customer name
- Project title
- Summary of items (filament, hardware, etc.)
- Subtotal
- Markup (not labeled as such, incorporated into the prices)
- Discount (if applicable)
- Tax (if configured and greater than zero)
- Final total
- Print/Save as PDF button (hidden when printing)
The internal invoice includes everything in the client invoice, plus:
- Detailed cost breakdowns for each component
- Raw material costs before markup
- Printer depreciation costs
- Power usage costs
- Labor costs with time breakdowns
- Markup percentage and amount
- Full financial summary
The invoices include print-specific CSS that ensures:
- Proper table borders when printed
- Appropriate header background colors
- No "Print/Save as PDF" button when printing
- Proper page breaks
Both invoice types include a "Print/Save as PDF" button that is hidden when actually printing. To save an invoice as a PDF:
- Generate the invoice (client or internal)
- Click the "Print/Save as PDF" button
- In the print dialog:
- Select "Save as PDF" as the destination (or your browser's equivalent)
- Click "Save"
If you have configured a tax rate greater than zero in the settings, the invoices will:
- Calculate tax based on the amount after markup and discount
- Display the tax amount as a separate line item
- Include tax in the final total
The tax calculation follows this formula:
tax_amount = (total_after_discount) * (tax_rate / 100)
The invoices automatically use your company name and accent color from the settings. To customize your invoices:
- Navigate to the Settings page
- Update your company name
- Set your preferred currency symbol
- Configure your tax rate (if applicable)
- Set your accent color (used in invoice headers)
- Review before sending: Always review the invoice before sending it to a client
- Use appropriate invoice type: Use client invoices for customers and internal invoices for your records
- Save as PDF: Save invoices as PDF for your records and for sending to clients
- Include payment details: Consider adding payment instructions in the notes section of quotes
- Keep branding consistent: Ensure your company name and branding are consistent across all invoices