Accounts Receivable & Payable

Track customer invoices and vendor bills, monitor aging buckets, and analyze outstanding balances.

Overview

This app helps finance teams manage both sides of working capital — money owed to you (AR) and money you owe (AP). Browse invoices and bills in an AG Grid, filter by aging bucket and status, update payment status, and review KPI cards for total due and overdue amounts. A grouped bar chart compares AR and AP by aging bucket; Excel import/export and a PDF aging report support month-end close. Everything runs in a single self-contained HTML page with data saved locally in your browser.

Key features

Invoice & bill grid

• AG Grid tracker — Number, type (AR/AP), party, amount, due date, status, and aging bucket columns with color-coded status and bucket labels.
• Sample data — Eleven invoices and bills across customers and vendors with mixed statuses (Open, Overdue, Paid, Partial).
• Overdue highlighting — Open items past their due date are flagged in the grid.

Aging & status workflow

• Aging buckets — Current, 31–60, 61–90, and 90+ days computed from a fixed reference date.
• Alpine.js filters — Filter by type (AR/AP), aging bucket, status, or search by customer/vendor name.
• Aging summary panel — Count and total amount per bucket for the current filter set.
• Status actions — Mark paid, record partial payment, or reopen a closed invoice on the selected row.

Summary metrics

• KPI cards — Total due, overdue amount, AR outstanding, and AP outstanding update live from open and partial records.

Import, export & reporting

• Excel import — Load invoices from a spreadsheet; new rows are merged into the grid.
• Excel export — Download all invoices plus an aging summary sheet via SheetJS.
• PDF aging report — jsPDF report with summary table and per-bucket totals.
• Add invoice — Create new AR or AP records with auto-generated invoice numbers.

Data management

• localStorage — All invoices and dark-mode preference persist across sessions.
• Reset data — Restore the sample dataset with confirmation.
• Dark mode — Toggle light/dark theme; AG Grid and Chart.js adapt; preference is remembered.

Data & persistence

Sample data includes eleven AR and AP records spanning customers such as Northwind Trading and vendors like Acme Industrial Supply. State saves to `localStorage` under `accounts-receivable-data` and `accounts-receivable-dark`.

Charts & reporting

The grouped bar chart compares AR and AP outstanding amounts across the four aging buckets. Excel export includes full invoice detail and a per-bucket summary; the PDF report mirrors the aging summary for printing or sharing.

Built with

Tailwind CSS (CDN), AG Grid Community, Alpine.js, Chart.js, SheetJS, and jsPDF — all loaded from CDN in a single HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.