Proxy Audit Badge Widget
Component Detail
Description
Reusable inline widget that renders a subtle 'Recorded by coordinator' badge on any activity card or detail view where recorded_by_user_id differs from peer_mentor_id. Provides visual audit trail cues throughout the app for coordinators reviewing proxy-created records.
proxy-audit-badge
Summaries
The Proxy Audit Badge Widget delivers immediate compliance and accountability value by ensuring every activity record created on behalf of a peer mentor is visibly attributed to the coordinating staff member who entered it. This transparency directly reduces audit risk and supports regulatory reporting to Bufdir by making proxy-recorded data unambiguous at a glance. Organizations subject to oversight or funding scrutiny benefit from a clear, persistent visual indicator that distinguishes self-reported activities from coordinator-assisted entries, reducing the likelihood of misattributed statistics, disputed records, or compliance failures. The widget is reusable across all activity views, meaning the investment in building it once yields consistent trust signals throughout the entire application without duplicated effort.
The Proxy Audit Badge Widget is a low-complexity, shared UI component that can be built and tested in isolation from the rest of the proxy recording feature set. Its lack of external dependencies simplifies scheduling — it can be developed early and integrated incrementally into activity cards and detail views as those pages are completed. Testing scope is limited: visual rendering for both matching and differing user IDs, accessibility compliance verification against WCAG 2.2 AA contrast and screen-reader labels, and tooltip name resolution. The main delivery risk is ensuring the coordinator name lookup (resolveCoordinatorName) is available and performant at render time; coordinate with the backend team on that data availability.
Plan a short accessibility review cycle before final release.
The Proxy Audit Badge Widget is a stateless, reusable mobile UI component that conditionally renders a badge based on a comparison between recorded_by_user_id and peer_mentor_id. Core logic lives in buildBadge(), which performs the equality check and returns the appropriate badge element or null. resolveCoordinatorName() performs a lookup — likely against a local cache or in-memory user store — to display a human-readable name or initials in the tooltip. applyAccessibilityLabel() wraps the badge with an ARIA label for screen readers, ensuring WCAG 2.2 AA compliance.
The component has no service or repository dependencies, making it straightforward to unit test with mock user IDs. It should be consumed via composition in any activity card or detail view component, receiving both IDs as props. Ensure the badge style tokens are sourced from the shared design system to maintain visual consistency across all usage sites.
Responsibilities
- Render a distinct badge when recorded_by_user_id differs from peer_mentor_id
- Display coordinator name or initials in the badge tooltip
- Apply WCAG 2.2 AA accessible contrast and screen-reader label
Interfaces
buildBadge(recordedByUserId, peerMentorId)
resolveCoordinatorName(userId)
applyAccessibilityLabel(label)