Contract Management Summary

Track vendor contracts, renewal dates, values, and status in one browser-based registry.

Overview

This app gives procurement and finance teams a single place to monitor active vendor agreements. Browse contracts in an editable grid, filter by vendor or renewal window, get alerts for upcoming renewals, and see value breakdowns by status. Data persists locally in your browser, with Excel export for sharing. Everything runs in one self-contained HTML page.

Key features

Contract registry

• AG Grid tracker — Columns for Contract ID, Vendor, Value, Start, End, Status, Renewal Date, and Notes. Click any cell to edit inline.
• Sample portfolio — Eight contracts across cloud, logistics, security, legal, and facilities vendors with mixed statuses.
• Row highlighting — Expired contracts and renewals within 60 days are visually flagged.

Filters & alerts

• Alpine.js filters — Search by vendor name, filter by status, and narrow to renewals within 30, 60, or 90 days.
• Renewal alerts banner — Lists contracts renewing soon with days remaining, sorted by urgency.
• Clear filters — Reset all filters with one click.

Summary & grouping

• KPI cards — Total contracts, total portfolio value, active count, and renewing-soon count update live.
• Grouped summary — Group filtered results by status or vendor to see contract count and total value per group.

Reporting

• Value distribution chart — Bar chart of contract value by status for the current filtered set.
• Excel export — Download all contracts including notes as an `.xlsx` workbook via SheetJS.

Data management

• Add contracts — Create new draft entries from the header.
• Delete contracts — Remove rows with confirmation.
• localStorage — Contracts persist across browser 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 eight contracts from $8.4K to $125K with statuses Active, Renewal Pending, Expired, Draft, and Terminated. All changes save to `localStorage` under `contract-management-data`. Dark mode preference is stored separately.

Charts & reporting

The bar chart aggregates contract value by status for whatever filters are active. Excel export produces a Contracts sheet with all columns including Notes.

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.