Declaration Status Badge
Component Detail
Description
Compact UI widget that displays the current status of a confidentiality declaration (pending, sent, acknowledged, expired) with appropriate color coding. Reused in driver fee lists and declaration send screens.
declaration-status-badge
Summaries
Providing immediate, at-a-glance visibility into the status of a confidentiality declaration reduces the cognitive load on coordinators and peer mentors managing multiple driver assignments. This compact visual indicator eliminates the need to open detailed views to understand whether a declaration is pending, acknowledged, or expired, accelerating decision-making and reducing the chance of overlooked compliance gaps. Its reuse across multiple screens ensures a consistent experience that staff can learn once and recognise everywhere, lowering training costs and improving operational efficiency across the platform's driver management workflows.
Low-complexity UI widget with no service or infrastructure dependencies, making it one of the lowest-risk deliverables in the declaration feature set. It can be built and reviewed independently of the declaration-send-screen and driver fee list, enabling parallel development streams. The primary delivery concern is ensuring the status enum values align exactly with those defined in the declaration-management-service and database schema — any mismatch will cause incorrect labels or missing colours. Compact and expanded display modes should be specced before implementation to avoid rework.
Include visual regression tests or design review snapshots to confirm colour contrast meets accessibility standards across all four status values.
Pure presentational widget with no stateful logic or service calls. renderStatusBadge(status) maps a declaration state enum (pending, sent, acknowledged, expired) to a styled container using getStatusLabel() and getStatusColor(). Define the status-to-colour mapping as a const map keyed on the enum to make it easy to extend. Colours must meet WCAG AA contrast ratio against both light and dark backgrounds — use the design system's semantic colour tokens rather than hardcoded hex values.
The compact mode should render as a small pill/chip; the expanded mode can include an icon alongside the label. Export the status colour map so other components (e.g., list rows) can apply consistent colouring without importing the full widget. No data model dependencies; driven entirely by props passed from parent screens.
Responsibilities
- Render status label with accessible color contrast
- Map declaration state enum to user-facing label
- Support compact and expanded display modes
Interfaces
renderStatusBadge(status)
getStatusLabel(status)
getStatusColor(status)
Relationships
Dependents (2)
Components that depend on this component
Related Data Entities (1)
Data entities managed by this component