Use this page for technical screen behavior, source references, and active Playwright coverage.
Vendor Performance Scorecard supports vendor scorecards, rankings, trend cards, comparison filters.
| ID | Section | Action | Expected Outcome | Controls |
|---|---|---|---|---|
| UC-VPSC-001 | Page Load | Navigate to /vendor-performance-scorecard | Loads with spinner, displays scorecards | Container |
| UC-VPSC-002 | Date Filter | Set from/to dates | Updates filter range | Date inputs |
| UC-VPSC-003 | Refresh | Click Refresh | LoadDataAsync reloads all data | Refresh button |
| UC-VPSC-004 | Formula Info | View algorithm | Shows weighted formula alert | Alert info |
| UC-VPSC-005 | Rankings Table | Rank column | Sequential rank number | td text-center |
| UC-VPSC-006 | Rankings Table | Vendor Name | Plain text vendor name | td |
| UC-VPSC-007 | Rankings Table | Overall Score | Bold FS-5 with color class | Strong tag |
| UC-VPSC-008 | Rankings Table | Category badge | Excellent/Good/Average/Poor | Badge |
| UC-VPSC-009 | Rankings Table | Quality Score (40%) | F1 format | td text-center |
| UC-VPSC-010 | Rankings Table | Delivery Score (30%) | F1 format | td text-center |
| UC-VPSC-011 | Rankings Table | Pricing Score (20%) | F1 format | td text-center |
| UC-VPSC-012 | Rankings Table | Payment Score (10%) | F1 format | td text-center |
| UC-VPSC-013 | Rankings Table | Defect Rate | Conditional color by threshold | Span |
| UC-VPSC-014 | Rankings Table | On-Time % | Conditional color >=95/85/below | Span |
| UC-VPSC-015 | Rankings Table | Total Spend | ₹N2 format right-aligned | td text-end |
| UC-VPSC-016 | Rankings Table | Total Orders | Center-aligned count | td text-center |
| UC-VPSC-017 | Rankings Table | Details button | ShowVendorDetails navigates | Button |
| UC-VPSC-018 | Tab | Overview tab | Shows top performers + distribution | Tab pane |
| UC-VPSC-019 | Tab | Quality tab | Quality metrics charts | Tab pane |
| UC-VPSC-020 | Tab | Delivery tab | Delivery performance charts | Tab pane |
| UC-VPSC-021 | Tab | Pricing tab | Pricing comparison charts | Tab pane |
| UC-VPSC-022 | Tab | Payment tab | Payment compliance charts | Tab pane |
| UC-VPSC-023 | Tab | Spend tab | Spend analysis charts | Tab pane |
| UC-VPSC-024 | Tab | Profitability tab | Profit breakdown charts | Tab pane |
| UC-VPSC-025 | Overview | Top 5 Performers | List with scores and spend | Card |
| UC-VPSC-026 | Overview | Performance Distribution | Progress bars by category | Card |
| UC-VPSC-027 | Overview | Score Distribution table | All 4 scores + overall | Table |
| UC-VPSC-028 | Quality | Defect/Return Rate chart | Grouped bar chart | ApexChart |
| UC-VPSC-029 | Quality | Score Comparison | Current vs Previous period | ApexChart |
| UC-VPSC-030 | Delivery | Early/OnTime/Late chart | Stacked bar chart | ApexChart |
| UC-VPSC-031 | Delivery | On-Time Rate chart | Horizontal bar chart | ApexChart |
| UC-VPSC-032 | Delivery | Average Delay chart | Days delay comparison | ApexChart |
| UC-VPSC-033 | Pricing | Unit Price comparison | Bar chart sorted by price | ApexChart |
| UC-VPSC-034 | Pricing | Market Deviation chart | Deviation % from average | ApexChart |
| UC-VPSC-035 | Pricing | Product Comparison table | Market avg, best vendor, range | Table |
| UC-VPSC-036 | Payment | On-Time Rate chart | Payment timeliness | ApexChart |
| UC-VPSC-037 | Payment | Avg Delay chart | Payment delay days | ApexChart |
| UC-VPSC-038 | Payment | Status Distribution | Early/OnTime/Late stacked | ApexChart |
| UC-VPSC-039 | Spend | Total Spend chart | Descending spend bars | ApexChart |
| UC-VPSC-040 | Spend | Order Frequency | Orders per month | ApexChart |
| UC-VPSC-041 | Spend | Avg Order Value | AOV comparison | ApexChart |
| UC-VPSC-042 | Profitability | Net Profit chart | Profit by vendor | ApexChart |
| UC-VPSC-043 | Profitability | ROI chart | ROI % comparison | ApexChart |
| UC-VPSC-044 | Profitability | Profit Breakdown | Gross/Defect/Return costs | ApexChart |
| UC-VPSC-045 | Profitability | Contribution % | Profit contribution chart | ApexChart |
| UC-VPSC-046 | Score Color | >= 80 | text-success | CSS class |
| UC-VPSC-047 | Score Color | 60-79 | text-primary | CSS class |
| UC-VPSC-048 | Score Color | 40-59 | text-warning | CSS class |
| UC-VPSC-049 | Score Color | < 40 | text-danger | CSS class |
| UC-VPSC-050 | Category Badge | Excellent | bg-success | Badge class |
| UC-VPSC-051 | Category Badge | Good | bg-primary | Badge class |
| UC-VPSC-052 | Category Badge | Average | bg-warning | Badge class |
| UC-VPSC-053 | Category Badge | Poor | bg-danger | Badge class |
| UC-VPSC-054 | Empty State | No data | Warning alert with message | Alert warning |
| UC-VPSC-055 | Navigation | Details click | Navigate to /vendors?id={id} | NavigateTo |