Xero Invoice Age Highlighter

WHAT IT DOES

This userscript transforms your Xero invoices list into a visual aging dashboard. It reads each invoice's date and amount, calculates how many days have passed since the invoice date, and applies color-coded highlighting to every row. The color system uses a five-tier gradient: green for current invoices (0-14 days), yellow for aging (15-30 days), orange for overdue (31-60 days), red for late (61-90 days), and dark red for very late (91+ days). Each invoice displays a compact badge showing the exact day count and label. Beyond individual highlighting, the script provides a summary panel showing total outstanding amount, number of unpaid invoices, and average age across all invoices. An age distribution bar visually displays the percentage of invoices in each age category, giving you an instant snapshot of your receivables health. This helps finance teams prioritize collections, identify problematic accounts, and forecast cash flow more effectively.

WHERE IT RUNS

The script runs on all Xero web application pages at *.xero.com/*, with automatic detection of invoice list views including the main invoices screen, overdue invoices view, and any page displaying invoice tables. It works across all Xero interfaces by using multiple selector strategies to find invoice rows, dates, and amounts. The script detects dynamic content loading and re-applies highlighting whenever the invoice list changes, including after filtering, sorting, or pagination. It runs across the entire Xero domain, ensuring coverage whether you're reviewing all invoices, filtering by contact, or viewing a specific invoice aging report.

HOW TO USE

Install the script via the BotGentz extension and navigate to any invoice list in Xero. The highlighting will apply automatically to all unpaid invoice rows. Each row gets a subtle background tint and a colored left border matching the age category, along with a badge on the invoice number showing the exact days and label. The summary panel appears above your invoice list showing total outstanding, invoice count, and average age, plus a color-coded count of invoices in each age bracket. The distribution bar provides a visual breakdown of your aging profile. Use the panel controls to toggle any feature on or off, adjust the day thresholds for each color category, or reset to defaults. The thresholds are fully customizable to match your business's payment terms and collections schedule.

THE MECHANISM - DATE PARSING, AGGREGATION, AND VISUAL AGING

This script works by parsing invoice dates using a cascading selector strategy that identifies Xero's date elements through various selectors including .date, .invoice-date, .due-date, and data-test attributes. It then calculates the age in days by comparing the invoice date against the current system date. For each unpaid invoice, the script maps the age to a color using user-defined thresholds. The highlighting is applied via inline styles on each row (background and border-left) which override the page's default styling without breaking the layout. The badge is inserted into the invoice number cell using DOM manipulation. For summary metrics, the script aggregates total outstanding amount by summing invoice amounts, counts total invoices, calculates average age, and buckets invoices into age categories. The distribution bar uses percentage-based width calculations to render a stacked horizontal bar with each segment colored according to the age category. All DOM operations are batched and throttled to ensure smooth performance even with large invoice lists. The script excludes paid invoices from highlighting and metrics, focusing only on outstanding receivables.

THE PANEL

The control panel appears as a floating, draggable element that you can position anywhere on the Xero page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions. Release the panel near any edge and it snaps into place, keeping your workspace organized. Click the panel header to collapse it into a small bubble showing only the chart emoji (📈), minimizing distraction while keeping controls accessible. Drag from the bubble to restore the full panel. The panel automatically resizes to fit its content and includes all setting toggles, threshold inputs, action buttons, and a color legend. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within Xero, with highlighting updating automatically as you move between views.

PLEASE NOTE

This script requires the free BotGentz extension to function. It is designed for Xero users managing accounts receivable who need visual cues to prioritize collections. The script reads only visible invoice data from the DOM - it does not access Xero's API, your account credentials, or any sensitive information. All settings (threshold values, toggle states) are stored locally using GM_setValue and never leave your browser. The script does not modify your Xero data - it only enhances the visual presentation of the invoice list. All age calculations are performed client-side using your system's current date and time, so results may vary slightly depending on your timezone. If Xero updates its website structure, the script may need to be updated to match new selectors; check for updates if the highlighting stops working.