How to create invoices in Bubble

In the Data tab, create an Invoice Data Type with fields: invoice_number (text — auto-generated unique identifier), client (your Client/Customer Data Type), issue_date (date), due_date (date), status (text — draft/sent/paid/overdue), subtotal (number), tax_rate (number — percentage), tax_amount (number), total (number), notes (text), and created_by (User). Create a Line_Item Data Type with: invoice (Invoice), description (text), quantity (number), unit_price (number), and line_total (number). The line_total is calculated as quantity times unit_price.

Create a 'create-invoice' page. Add a form Group with: a Dropdown for client selection (data source: Search for Clients), a Date Picker for issue_date (default: today), a Date Picker for due_date (default: 30 days from today), and an Input for notes. Below the header, add a Repeating Group of type Line_Item for the line items section. Since we are creating items dynamically, use a custom state on the page called temp_items (list of texts — each text is a JSON-like string for description, qty, price). Add an 'Add Line Item' button that appends a new empty row. Each row has inputs for description, quantity, and unit_price.

For each line item row, calculate the line_total dynamically: set a Text element to display quantity input's value times unit_price input's value. For the invoice totals section, display: Subtotal = sum of all line totals (use the Repeating Group's list of line totals :sum), Tax = Subtotal times tax_rate / 100, and Total = Subtotal + Tax. Add a tax_rate Input (default 0 for no tax). These calculations update in real time as the user enters values. When the user clicks Save, create the Invoice record and all Line_Item records with the calculated values.

Add a 'Save as Draft' button and a 'Send Invoice' button. Save as Draft: create the Invoice record with status 'draft', then create Line_Item records for each row. Send Invoice: same creation logic but set status to 'sent', plus send an email to the client with the invoice details (invoice number, line items, total, due date, and a link to view the invoice online). Generate a unique invoice_number using a format like 'INV-' followed by a sequential number or timestamp. After saving, navigate to the invoice detail page.

Create an 'invoice' page (type: Invoice) displaying all invoice details: client name, invoice number, dates, line items in a Repeating Group, subtotal, tax, and total. Add status management buttons: 'Mark as Paid' (changes status to 'paid'), 'Mark as Overdue' (changes status to 'overdue'), and 'Send Reminder' (re-sends the invoice email). Use conditional formatting to color-code the status badge: green for paid, yellow for sent, red for overdue, grey for draft. Add a backend workflow scheduled for the due_date that automatically changes status from 'sent' to 'overdue' if not yet paid.

Create an 'invoices' page with filter tabs: All, Draft, Sent, Overdue, Paid. Add a Repeating Group showing Invoices where created_by = Current User, filtered by the selected tab's status (use Ignore empty constraints for the All tab). Each row displays invoice number, client name, issue date, due date, total, and a color-coded status badge. Add summary statistics at the top: total outstanding (sum of sent + overdue invoice totals), total paid this month, and total overdue. This gives a financial overview at a glance.