How to Build a Custom Invoicing System in FlutterFlow

Create a clients collection with fields: name (String), email (String), company (String), address (String), and phone (String). Create an invoices collection with fields: invoiceNumber (String — auto-generated like INV-0001), clientId (String), clientName (String — denormalized for display), items (List of Maps — each with description String, qty Integer, unitPrice Double, lineTotal Double), subtotal (Double), taxRate (Double — e.g., 0.08 for 8%), taxAmount (Double), grandTotal (Double), status (String — draft, sent, paid, overdue), dueDate (Timestamp), pdfUrl (String — Firebase Storage URL), createdAt (Timestamp), and notes (String). For auto-increment: use a counters document that stores the last invoice number and increment via transaction on each new invoice.

Create a CreateInvoicePage with a Page State variable lineItems of type List of JSON (initially one empty row). At the top, add a DropDown bound to a Backend Query on clients, displaying client names, with the selected value stored in Page State selectedClientId. Below, place a ListView bound to lineItems where each row is a Row of four widgets: TextField for description, TextField (numeric keyboard) for quantity, TextField (numeric, decimal) for unit price, and a Text showing the line total (qty * unitPrice). Add an IconButton (Icons.remove_circle) per row to remove it from lineItems. Below the ListView, add a TextButton 'Add Line Item' that appends a new empty row. At the bottom, display three calculated Texts: Subtotal (sum of all line totals), Tax (subtotal * taxRate), and Grand Total (subtotal + tax). Bind these to a Custom Function calculateInvoiceTotals that takes the lineItems list and taxRate, computes each with toStringAsFixed(2) rounding, and returns the values.

Add a Save Invoice button at the bottom of the form. The On Tap Action Flow first runs a Custom Action that reads the counters/invoiceCounter document, increments the count atomically via a Firestore transaction, and formats the new number as INV-{count.toString().padLeft(4, '0')}. Then create the invoice document in Firestore with all fields: the generated invoiceNumber, selectedClientId, denormalized clientName, the lineItems array (with calculated lineTotal per row), subtotal, taxRate, taxAmount, grandTotal, status: draft, dueDate from a DateTimePicker on the form, empty pdfUrl, current timestamp, and any notes. After creation, navigate to the InvoiceDetailPage passing the new invoice reference.

1// Custom Action: getNextInvoiceNumber
2final counterRef = FirebaseFirestore.instance
3    .collection('counters').doc('invoiceCounter');
4String invoiceNumber = '';
5await FirebaseFirestore.instance.runTransaction((tx) async {
6  final snap = await tx.get(counterRef);
7  final current = snap.exists ? (snap.data()?['count'] ?? 0) : 0;
8  final next = current + 1;
9  tx.set(counterRef, {'count': next});
10  invoiceNumber = 'INV-${next.toString().padLeft(4, '0')}';
11});
12return invoiceNumber;

Create a Custom Action generateInvoicePdf that uses the pdf Dart package (add to pubspec: pdf, printing). The action takes the invoice data as parameters and builds a PDF document: company logo and name at the top, invoice number and date on the right, client billing details below, a table with columns for Description, Qty, Unit Price, and Line Total, followed by subtotal, tax, and grand total rows, and payment instructions at the bottom. Convert the PDF to bytes with document.save(), upload to Firebase Storage at invoices/{invoiceId}/invoice.pdf using firebase_storage, get the download URL, and update the invoice document's pdfUrl field. Add a 'Generate PDF' button on the InvoiceDetailPage that triggers this action and then shows the PDF in a preview using a WebView or Custom Widget.

Deploy a Cloud Function sendInvoiceEmail triggered by an HTTP call that accepts invoiceId, reads the invoice and client data, and sends an email via SendGrid with the PDF attached (downloaded from Storage URL) and a 'Pay Now' link. In FlutterFlow, add a 'Send Invoice' button on the InvoiceDetailPage that calls this Cloud Function and then updates the invoice status to sent. For status tracking, create an InvoicesListPage with a ListView of all invoices ordered by createdAt desc. Each row shows: invoiceNumber, clientName, grandTotal, dueDate, and a status badge — Container with conditional background color: grey for draft, blue for sent, green for paid, red for overdue. Add a Conditional Action to mark as paid: a 'Record Payment' button updates status to paid. For overdue detection, deploy a scheduled Cloud Function that runs daily and updates status to overdue for any sent invoice where dueDate < today.