Supplier Scorecards

Track vendor delivery, quality, and price performance in one scorecard dashboard.

Overview

Supplier Scorecards is a single-page browser app for procurement and vendor management teams who need to compare suppliers, spot underperformers, and maintain a living scorecard register. It uses AG-Grid for the register, Alpine.js for metric editing, SheetJS for Excel import/export, and Chart.js for visual comparisons — all in one HTML file.

Key features

Scorecard register

• AG-Grid with Supplier Name, On-time Delivery %, Quality Score, Price Score, Total Score, Rating, and Status
• Total Score = average of on-time %, quality × 10, and price × 10 (0–100 scale)
• Rows grouped by category (Raw Materials, IT Services, Logistics, Packaging)
• Click a row or Edit to load the form

Metric scoring form

• Alpine.js form to add or edit suppliers
• Edit on-time delivery % (0–100), quality (1–10), and price (1–10)
• Total score and star rating update live as you type
• Status: Preferred, Approved, Probation, Inactive

Filters & summary

• Filter by category or status
• Four summary cards: average on-time %, quality, price, and total score
• Cards reflect the currently filtered supplier set

Ratings & import/export

• 1–10 star rating derived from total score
• Import Excel/CSV to replace the register (with confirmation)
• Export current scorecards to `supplier-scorecards-export.xlsx`

Charts & theme

• Bar chart comparing total scores across suppliers
• Radar chart comparing on-time, quality, and price metrics
• Dark mode with saved preference
• Data persists in localStorage

Data & persistence

• 8 sample suppliers pre-loaded across four categories
• Stored in localStorage (`supplierScorecards_v1`)
• Import replaces all rows after confirmation

Built with

Tailwind CSS, Alpine.js, AG-Grid Community, Chart.js, and SheetJS — all from CDN in a single HTML page.

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