[UI/UX Design] Design a Merchant Dashboard revenue-split-by-plan panel

[thlpkee20-wq]

Description

MerchantDashboard shows total revenue but not how it splits across plans. Design a stacked-bar or ranked-list panel that shows share per plan with delta versus previous period.

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/components/MerchantDashboard.tsx
• Chart passes 3:1 non-text contrast; provides data-table equivalent

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/revenue-split-panel
• Implement changes
  • Design a stacked-bar variant plus ranked-list fallback
  • Add per-segment delta chips with polite live region
  • Include colorblind-safe palette and pattern fills
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • Single-plan case, many-plans case, RTL, screen-reader summary
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: revenue split by plan panel

Guidelines

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