Certification Expiry Badge
Component Detail
Description
A reusable badge widget that surfaces certification expiry warnings inline within peer mentor list cards, the peer mentor detail screen, and the coordinator roster view. Renders different visual states: valid (no badge), expiring-soon (amber), expired (red).
certification-expiry-badge
Summaries
The Certification Expiry Badge delivers instant visual compliance signals wherever peer mentor information is displayed — in list views, detail screens, and roster overviews. By embedding urgency indicators directly in context, coordinators can identify at-risk mentors without navigating to separate screens, accelerating response times and reducing the chance that expiring certifications are missed. The badge's consistent visual language across the application creates a coherent, professional user experience that builds coordinator confidence in the data and reduces training burden for new staff joining the programme.
This is a low-complexity reusable widget with no external dependencies, making it one of the safest and earliest deliverables in the certification feature set. It should be built and approved early so that downstream screens (peer mentor list, detail screen, coordinator roster, certifications expiring widget) can integrate it without blocking. Scope is narrow: three visual states (none, amber, red), accessible labels, and a date-based urgency computation function. Acceptance criteria must include WCAG 2.2 AA accessibility validation.
Once shipped, any change to colour thresholds or urgency logic affects all consuming screens — treat as a shared UI contract and version accordingly.
buildCertExpiryBadge(expiresAt) takes a DateTime and returns a stateless widget. computeExpiryUrgency(expiresAt) encapsulates the threshold logic: expired (past today), expiring-soon (within 30 days, configurable), or valid (no badge rendered). Thresholds should be extracted to a constants file to allow easy tuning without touching widget code. getAccessibleLabel(urgency) returns a semantic string for screen readers (e.g.
'Certification expiring in 7 days') to satisfy WCAG 2.2 AA. No BLoC dependency — this widget is purely presentational and must remain side-effect-free. Consuming widgets pass the raw expiresAt DateTime; do not pass pre-computed urgency states, as this would duplicate logic and risk inconsistency across the app.
Responsibilities
- Render expiry status as a colour-coded badge
- Accept cert expiry date and compute urgency level
- Support accessible labels for screen readers (WCAG 2.2 AA)
Interfaces
buildCertExpiryBadge(expiresAt)
computeExpiryUrgency(expiresAt)
getAccessibleLabel(urgency)