Claim Status Badge
Component Detail
Description
Compact, reusable chip widget that renders the current status of a claim (draft, submitted, approved, rejected, exported) with a distinct color per state. Used in both the coordinator review queue list and the peer mentor claim history screen.
claim-status-badge
Summaries
The Claim Status Badge is a small but high-impact visual component that gives all users — peer mentors and coordinators alike — an immediate, colour-coded understanding of where any claim stands in the approval process. By standardising how statuses are displayed across every screen in the application, it eliminates confusion and reduces the number of support queries asking 'what does this status mean?' Consistent visual language across the product strengthens brand quality and reduces cognitive load, contributing directly to user retention and satisfaction. As a shared component, its value compounds across every screen it appears on without additional development cost.
As a shared, low-complexity component with no external dependencies, the Claim Status Badge carries essentially zero delivery risk and can be developed very early in the project to unblock other teams. It should be delivered before the coordinator review queue and peer mentor claim history screens, both of which depend on it. Testing requirements are limited: verify correct colour and label for all five statuses (draft, submitted, approved, rejected, exported), confirm sufficient contrast ratios for accessibility compliance, and validate both compact and expanded display modes. Its shared nature means any breaking change to the status enum must be coordinated across all consuming screens.
This shared UI widget exposes build(status, mode) as the primary entry point, delegating to getStatusColor(status) and getStatusLabel(status) for the display mapping. It must handle the full claim status enum — draft, submitted, approved, rejected, exported — with a distinct colour per value. Two rendering modes are supported: compact for list views and expanded for detail screens. Accessibility compliance requires sufficient contrast ratios on all colour/label combinations per WCAG standards.
There are no external dependencies, making it trivially testable in isolation. Since it is shared across multiple screens, any changes to the status enum must trigger updates here first to maintain consistency across all consumer contexts.
Responsibilities
- Map claim status enum to display label and color
- Render accessible colored badge with sufficient contrast
- Support both compact (list) and expanded (detail) display modes
Interfaces
build(status, mode)
getStatusColor(status)
getStatusLabel(status)