critical priority low complexity frontend pending frontend specialist Tier 0

Acceptance Criteria

Widget is named `CertificationStatusBadge` and located at `lib/widgets/certification_status_badge.dart`
Accepts required `DateTime expiryDate` and optional `CertificationStatusBadgeSize size` (enum: compact, full) parameter, defaulting to full
Derives visual state from expiry date at render time: active (>30 days remaining), expiring_soon (1–30 days), expired (0 or past)
Each state uses distinct design token color pairs: background and foreground tokens — no hardcoded hex strings anywhere in the file
Pill shape is achieved via `BorderRadius.circular` using a design token radius value
Compact variant shows only a status indicator dot or short label; full variant shows the status label text and optionally days remaining
Typography uses design token text styles (e.g., `AppTextStyles.labelSmall`)
Widget is stateless (`StatelessWidget`) — all state is derived from the expiryDate prop
Widget renders correctly in both light and dark theme contexts using the design token system

Technical Requirements

frameworks
Flutter
data models
CertificationStatus (enum)
CertificationStatusBadgeSize (enum: compact, full)
performance requirements
Widget must be const-constructible when possible to enable Flutter's widget tree optimization
ui components
Container (pill shape with BorderRadius)
Text (status label, AppTextStyles token)
Row (dot + label for full variant)

Execution Context

Execution Tier
Tier 0

Tier 0 - 440 tasks

Implementation Notes

Create a private `_statusConfig(DateTime expiry)` method that returns a `_BadgeConfig` record (or small data class) containing `{Color background, Color foreground, String label, int daysRemaining}` — this separates the state-derivation logic from the layout code and makes it independently testable. Reference design tokens via the project's `AppColors` and `AppTextStyles` classes (e.g., `AppColors.certValid`, `AppColors.certExpiringSoon`, `AppColors.certExpired`). If these token names don't yet exist, add them to the design token file and use them consistently. For the HLF certification use case (primary driver of this widget per workshop notes), ensure the 'expiring_soon' state is visually prominent enough to motivate enrollment action.

Testing Requirements

Widget tests using flutter_test and `WidgetTester`. Test: (1) active state renders with active-color token and correct label, (2) expiring_soon state renders with warning-color token, (3) expired state renders with error-color token, (4) compact size renders without verbose label text, (5) full size renders with days-remaining text, (6) no hex color literals appear in the widget file (enforce via code review/grep). Use `find.byType(Container)` and inspect decoration to verify color token usage.

Component
Certification Status Badge
ui low
Epic Risks (2)
medium impact medium prob dependency

The org labels system may not yet have label keys defined for peer mentor detail screen terminology (role labels, section headings), requiring additions to the label key registry that must be coordinated with the admin configuration team.

Mitigation & Contingency

Mitigation: Audit existing label keys in the terminology system before starting OrgLabelsProvider integration. Submit required new label keys for admin configuration in parallel with component implementation.

Contingency: If label keys are not available at integration time, use hardcoded English fallbacks with a clear TODO for admin configuration, ensuring the widget renders correctly while keys are being provisioned.

high impact low prob technical

The design token semantic colors (warning, error surface) may not meet WCAG 2.2 AA 4.5:1 contrast ratio when rendered on the app's background surface tokens, requiring design system changes that affect the entire app.

Mitigation & Contingency

Mitigation: Run contrast ratio validation on the token palette during Epic 1 design token implementation. Flag any failing pairs to the design system owner before building UI components that depend on them.

Contingency: If tokens fail contrast requirements, define supplementary high-contrast override tokens specific to alert and badge contexts that meet AA without modifying the global palette.