Admin KPI Stat Widget
Component Detail
Description
Reusable stat card widget displaying a single KPI metric (e.g., active peer mentors, activities this month, pending reimbursements). Supports tap-to-drill-down navigation and real-time value updates. Color-coded by metric type with accessible contrast ratios per WCAG 2.2 AA.
admin-stat-widget
Summaries
The Admin KPI Stat Widget is a reusable building block that powers every key metric display across the administration interface. As a shared component, it ensures a consistent, professional visual language throughout the platform, reinforcing trust with administrators who rely on these metrics to manage programme compliance and activity. Its accessibility design — WCAG 2.2 AA compliant colour contrast — reduces legal and reputational risk for organisations subject to public sector accessibility mandates. The tap-to-drill-down interaction pattern increases engagement with programme data, enabling faster identification of issues such as expiring certifications or stalled reimbursements before they escalate.
This is a low-complexity, high-leverage component that should be prioritised early in the delivery schedule because multiple other screens depend on it. As a shared component, it blocks the Admin Dashboard Screen and any future KPI display surface until it is complete and tested. The interface is minimal — constructor with label, value, onTap, and color — making it straightforward to test in isolation with a widget test suite. Key delivery risks are accessibility compliance (colour contrast validation against WCAG 2.2 AA must be verified with an automated tool such as axe or Flutter's Semantics testing) and ensuring the setLoading(bool) state renders correctly across all supported platforms without layout jank.
AdminStatWidget is a stateless (or lightweight stateful) Flutter widget accepting label, value, onTap callback, and optional color parameter. The updateValue(newValue) and setLoading(bool) interfaces suggest it should be driven by an external ValueNotifier or equivalent reactive state — avoid local setState for value updates to prevent unnecessary full subtree rebuilds. Color-coding per metric type should use a resolved ColorScheme token rather than hardcoded hex values to support theming. Semantics widget wrapping is required for screen reader support; label and value must be merged into a meaningful Semantics label string.
As a shared component used across admin dashboard and potentially other KPI surfaces, keep it free of business logic — all data resolution stays in the consuming screen's controller layer.
Responsibilities
- Display a numeric KPI with label and optional trend indicator
- Navigate to filtered detail view on tap
- Support accessible color coding and screen reader labels
Interfaces
AdminStatWidget({required label, required value, required onTap, color})
updateValue(newValue)
setLoading(bool)