Certification Expiry Warning Banner
Component Detail
Description
In-app warning component shown to coordinators when a peer mentor's certification is approaching expiry. Displays days remaining and provides a direct call-to-action to prompt renewal. Used both on roster and mentor detail screens.
certification-expiry-warning-banner
Summaries
Proactive certification compliance management directly reduces coordinator workload and prevents service disruption caused by mentors with lapsed credentials. By surfacing expiry warnings at 30, 14, and 7 days before expiry, coordinators can act well before a mentor becomes unavailable, protecting program continuity and participant outcomes. This eliminates last-minute scrambles, reduces compliance gaps, and demonstrates organizational due diligence to oversight bodies. The embedded call-to-action shortens resolution time and keeps peer support coverage intact, reducing the operational and reputational risk of running the program with non-compliant staff.
This is a low-complexity mobile UI component with no backend dependencies, making it one of the lowest-risk deliverables in the certification management feature set. Development scope includes rendering three severity tiers (30d, 14d, 7d), a dismiss interaction, and a renewal tap handler. Testing must cover all three threshold states, the dismissed state, and accessibility contrast ratios. Because it has no service dependencies, it can be built and tested in isolation early in the sprint, and reused immediately once the certification data model is available.
Delivery risk is minimal provided design assets are finalized before development begins.
Mobile-only UI component rendering a severity-tiered warning banner driven by a daysRemaining integer. The getSeverityLevel(daysRemaining) interface maps day counts to low/medium/high severity tiers (30d, 14d, 7d thresholds), controlling visual styling such as background color and icon. showWarning(daysRemaining, mentorName) renders the banner with contextual copy; dismiss() hides it for the session. onRenewalPromptTap(mentorId) fires a navigation event to the renewal or contact flow, passing the mentor ID upstream.
No service or repository dependencies — all state is props-driven. The component should be stateless and driven entirely by the parent screen's data layer.
Responsibilities
- Display days-remaining countdown before certification expires
- Escalate visual severity as expiry approaches (30d, 14d, 7d thresholds)
- Provide tap action to contact or remind the peer mentor
Interfaces
showWarning(daysRemaining, mentorName)
dismiss()
onRenewalPromptTap(mentorId)
getSeverityLevel(daysRemaining)