Standardize the Credit Lines status badge system using STATUS_COLOR with WCAG-safe contrast

[greatest0fallt1me]

Description

This is a UI/UX issue. The StatusBadge is duplicated in both src/pages/Dashboard.tsx and src/pages/CreditLines.tsx, each reading STATUS_COLOR from src/utils/tokens.ts, where every status uses color: COLOR.text on low-opacity tinted backgrounds (e.g. Defaulted at rgba(248,81,73,0.15)). This risks failing 4.5:1 contrast and means badge styling is unmaintained across two copies. Extract one accessible badge component.

Requirements and Context

• Create a single StatusBadge component consumed by Dashboard and Credit Lines.
• Recompute STATUS_COLOR so each badge's text meets 4.5:1 against its tint, and add a non-color cue (the existing dot can carry a shape/label) for Active/Suspended/Defaulted/Closed.
• Document badge usage in the design-system docs alongside the button variants.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b task/status-badge-component

2. Implement changes
   • New src/components/StatusBadge.tsx
   • src/pages/Dashboard.tsx, src/pages/CreditLines.tsx (use shared component)
   • src/utils/tokens.ts (STATUS_COLOR contrast fix)
3. Test and commit
   • npm run test
   • Verify contrast for all four statuses
   • Include screenshots in the PR

Example commit message

task: extract accessible shared StatusBadge component

Acceptance Criteria

• Single StatusBadge used by both pages
• All status text meets 4.5:1 against its background
• Status distinguishable without color
• Usage documented in design-system docs

Guidelines

• WCAG 2.1 AA: 1.4.1, 1.4.3; design-token consistency
• Clear documentation and inline comments
• Timeframe: 96 hours