Purchase Order Tracking

Create, track, and analyze purchase orders with status workflow and supplier spend reporting.

Overview

This app helps procurement teams manage purchase orders from draft through receipt. Browse POs in an AG Grid, create new orders with auto-generated PO numbers, advance status through a workflow, and filter or group by supplier or status. KPI cards and a supplier spend chart support reporting; Excel export includes a status summary sheet. Everything runs in a single self-contained HTML page with data saved locally in your browser.

Key features

Purchase order grid

• AG Grid tracker — PO Number, Supplier, Amount, Date, Status, and Delivery Date columns with color-coded status.
• Sample data — Nine purchase orders across five suppliers with mixed statuses.
• Overdue highlighting — Open POs past their delivery date are flagged in the grid.

Create & edit POs

• Alpine.js form — Select supplier, enter amount, PO date, delivery date, and initial status.
• Auto PO number — Next PO number previewed before save (e.g. PO-2026-0151).
• Edit / delete — Update existing POs from the grid or remove with confirmation.

Status tracking & grouping

• Workflow actions — Submit, Approve, Mark shipped, Mark received, or Cancel the selected PO.
• Status options — Draft, Submitted, Approved, Shipped, Received, Cancelled.
• Filters — Filter by status or supplier; group summary by status or supplier showing PO count and total amount.

Summary & reporting

• KPI cards — Total POs, total spend (excl. cancelled), open orders, and overdue deliveries.
• Supplier chart — Bar chart of total spend by supplier.
• Excel export — Purchase Orders sheet plus Summary by Status sheet via SheetJS.

Data management

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

Data & persistence

Sample data includes nine POs totaling over $80K across Acme Industrial Supply, Global Components Ltd, Pacific Packaging Co, TechParts Direct, and Midwest Fasteners. State saves to `localStorage` under `purchase-order-data`.

Charts & reporting

The bar chart aggregates non-cancelled PO amounts by supplier. Excel export includes full PO detail and a per-status count and amount summary.

Built with

Tailwind CSS (CDN), AG Grid Community, Alpine.js, Chart.js, and SheetJS — 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.