InvoiceStatus Widget

Shows a colored tag with the invoice status. Green for "Paid", red for "Overdue", grey for "Draft", and so on.

Usage

In your index.ts, import the widget:

import "../../widgets/invoice-status";

In your template.hbs, use the partial:

{{> InvoiceStatus}}

That is it. The widget reads the status field from the document data and picks the right color automatically.

How it works

The widget registers a helper called computeInvoiceStatus. This helper takes the raw status string and returns an object with the display label and tag color.

Here is the status-to-color mapping:

Status	Tag Color	Displayed As
received	Green	Paid
partially_paid	Blue	Partially Paid
payment_pending	Orange	Unpaid
overdue	Red	Overdue
draft	Grey	Draft
sent	Blue	Sent
cancelled	Red	Cancelled
refunded	Purple	Refunded

The widget's HTML looks roughly like this:

<span class="invoice-status-tag" style="background-color: #2ecc71; color: white;">
  Paid
</span>

Customization

The widget reads the customLabels object from the API data. If the business has set custom labels for statuses, those take priority over the defaults.

For example, if the API response includes:

{
  "customLabels": {
    "paid": "Payment Received"
  }
}

Then the tag will show "Payment Received" instead of "Paid".