In a B2B billing statement, what's a clear way to illustrate the many-to-many relationship between invoices and payments?
Here's more background:
Our B2B web app helps companies manage sales and deliveries of food to other businesses. Currently our app prints invoices (as PDFs) but doesn't have a way to roll up multiple invoices to give a customer the current state the account. So we're adding a "billing statement" feature to allow our customers to more clearly to communicate to their customers the current state of accounts-- and to provide a reminder for their customers to pay their bills!
The basic requirements are these:
- Show a list of all unpaid invoices plus any paid invoices during the time period covered by the statement (e.g. one month)
- Show payments that correspond to those invoices in a way that makes it really obvious which payment corresponds to which invoice.
- Show all "open payments" meaning payments that have been received but that have not yet been mapped to an invoice.
- Support many-to-many mapping between payments and invoices: a single payment can be split between invoices and/or an invoice can be paid using multiple payments.
All the Googling I've found lots of billing statement examples but all are "consumer-style" statements that simply show transactions and payments chronologically. I have yet to find an example online of a B2B-style invoice that clearly associates invoices with payments or shows how to show a payment that's split across multiple invoices.
I'm sure I'm not the first person who's tried to build a B2B billing statement. Is there a best practice UX for this kind of "list of invoices and related payments" table? Is there an app (desktop or web) that does a good job at this kinds of invoice UX?