Certification Status Badge
Component Detail
Description
Reusable widget rendering a pill-shaped badge indicating a peer mentor's certification state: active, paused, or expired. Uses design token color system (success, warning, error tokens) for consistent visual language. Auto-derives display state from expiry date passed as a prop.
certification-status-badge
Summaries
The Certification Status Badge is a shared visual indicator that communicates a peer mentor's certification health across multiple surfaces in the platform. By providing a consistent, immediately recognizable signal — green for active, amber for expiring soon, red for expired — it reduces the cognitive load on coordinators managing large mentor rosters and ensures compliance risks are never missed due to inconsistent UI. As a reusable component, it also reduces development and maintenance cost across every screen that needs certification visibility, delivering compound value each time a new feature is built that references mentor status.
Being a shared component with no external dependencies, this is an ideal early-sprint deliverable that unblocks multiple downstream components including the Peer Mentor Profile Header and any future list views that display mentor status. Low complexity means it can be built and reviewed quickly. Reusability is its main value: once shipped, other teams or feature tracks can consume it without rework. Testing scope is well-defined — three status states, two size variants, expiry date edge cases (null, today, past, future), and semantic label verification for accessibility.
Flag this as a foundational piece in the component library and ensure it is documented and reviewed before dependent components begin development.
Stateless Flutter widget with a well-defined interface: `MentorStatus status`, optional `DateTime? expiryDate`, and `BadgeSize size`. The `_deriveDisplayState` method computes the visual state from expiry date — implement a threshold constant (e.g., 30 days) for 'expiring-soon' rather than hardcoding. Map derived states to design token color references (`colorSuccess`, `colorWarning`, `colorError`) sourced from the shared token package; never use raw hex values.
`_resolveSemanticLabel` must return localized strings for screen reader consumption. Pill shape is achieved via `BorderRadius.circular` with token-based padding. Widget tests should cover all three status enum values, both badge sizes, null expiry, and past/future expiry date boundary conditions.
Responsibilities
- Render status label with appropriate design token color
- Accept expiry date and derive visual state (active/expiring-soon/expired)
- Provide accessible semantic label for screen readers
- Support compact and full display sizes
Interfaces
CertificationStatusBadge({required MentorStatus status, DateTime? expiryDate, BadgeSize size})
build(BuildContext context)
_deriveDisplayState(DateTime? expiryDate)
_resolveSemanticLabel(MentorStatus status)
Relationships
Dependents (2)
Components that depend on this component