# XWUIOpsCommercialInvoicesPage

The OPFlow Commercial Invoices ledger: an `XWUIShellPage` wrapping a 9-column `XWUIDataGrid` (Invoice # / Linked To / Client / Total incl. VAT / Remaining / Due Date / Sent / Payment / Actions), with a "+ New Invoice" toolbar CTA and a filter row of search plus an "All Statuses" dropdown and a dual start/end date range. Linked To tags each row as a Project or Deal; Remaining renders "--" when null or zero; Due Date flows through `XWUIDisplayDueDate` so an "Nd overdue" warning is computed at runtime; Sent (`sent` / `draft`) and Payment (`paid` / `unpaid`) render as status badges. Use it as the granular accounts-receivable view for billing operators.

## Basic Usage

Seeds the invoice ledger with six rows mixing Paid/Unpaid and Sent/Draft so the overdue badge, orange Remaining cell, and Project/Deal Linked-To tags all appear.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Invoices ledger with six SAR invoices (Paid/Unpaid, Sent/Draft, Project and Deal links) including two draft-overdue rows that exercise the "Nd overdue" badge.
```

## Overdue Collections

A collections worklist where every invoice is unpaid and past due, so each row stamps its own "Nd overdue" warning.

```example
file: examples/OverdueCollections.ts
html: examples/OverdueCollections.html
title: Overdue Collections
description: Five unpaid invoices with positive Remaining balances and past due dates across SPL, SAFF, Formula E, and GEA, every row showing an "Nd overdue" warning.
```

## Month-End Settled

A clean monthly-close batch where every invoice is Paid and Sent with a zero Remaining.

```example
file: examples/MonthEndSettled.ts
html: examples/MonthEndSettled.html
title: Month-End Settled
description: Four fully-settled invoices (all Paid + Sent, Remaining "--") mixing Project and Deal links for the month-end reconciliation view.
```

```api
```