Invoice Summary Dashboard Block for Vue

Edit INVOICES: each has a client, an issue date, a due date, an amount and a status of draft, sent or paid. Overdue isn't stored: a sent invoice is overdue when its due date is before AS_OF, and its age and bucket come from that. Group counts, totals, the aging bar and the header sentence are all added up from the rows.

It divides what is still owed on sent invoices by what was billed in the last 90 days (without drafts) and multiplies by 90. It's the simple countback method, so a client who pays late shows up as a larger number. The bar's caption says the same thing for screen readers.

Nothing leaves the page. A reminder turns the button into "Reminder noted" and says so in the status line, and Remind all overdue does the same for every row still waiting. The buttons stay in place, so focus and row heights don't move.

All of it: the invoices are typed and reminders are only noted. To make it real, load the invoices from your accounting data, send each reminder to the mailer or to your accounting tool's reminder endpoint, and store when it was sent so the row can say so.

Yes. The status list is a set of buttons, the chosen one is marked as current, and the table is a real table with a caption. Each reminder button names its invoice number, and results are read out in a polite status line.

The aging labels wrap under the bar, the status list becomes a select above the table, and the due date and the reminder button fold into the client cell.