[UI/UX Design] Design a UsageBilling anomaly alerts panel

[thlpkee20-wq]

Description

Sudden usage spikes surprise subscribers when the invoice arrives. Design a UsageBilling panel that surfaces anomaly alerts (day-over-day and week-over-week deltas) with an explanation and mute controls.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/pages/UsageBilling.tsx
• Mute state persists per user with a reset

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/usage-anomaly-panel
• Implement changes
  • Design an anomaly-row layout with delta chip and reason line
  • Add mute per-anomaly-type with reset control
  • Include microcopy defining anomaly thresholds
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • No anomalies, all muted, RTL deltas, screen-reader announcement
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: UsageBilling anomaly alerts panel

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours