Design and add an accessible APR/utilization trend chart to the credit line detail view

[greatest0fallt1me]

Description

This is a UI/UX issue. Creditra shows credit metrics (limit, utilized, APR, risk score) but no historical trend visualization, while the risk score already references a trend. Add a small, accessible line/area chart (sparkline-style) for utilization or risk over time on the credit line detail/card, grounded in the design tokens.

Requirements and Context

• Render a lightweight SVG trend chart using the blue/green token scales, with gridlines/axis labels meeting non-text contrast.
• Provide an accessible alternative: role="img" with a summary aria-label and an associated data table (visually hidden or toggle) per WCAG 1.1.1.
• Ensure the chart is responsive (scales to container) and animates in respecting reduced-motion.
• Source data from MOCK_CREDIT_LINES transactions in src/data/mockData.ts.
• 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 feature/credit-trend-chart

2. Implement changes
   • New src/components/TrendChart.tsx
   • src/pages/CreditLines.tsx (embed in card) + CreditLines.css
3. Test and commit
   • npm run test
   • Verify screen-reader summary + data table
   • Include screenshots in the PR

Example commit message

feat: add accessible utilization/risk trend chart

Acceptance Criteria

• Chart scales responsively to its container
• Accessible summary + data-table alternative provided
• Colors/axes meet non-text contrast
• Entry animation respects reduced-motion

Guidelines

• Data viz/charts; WCAG 2.1 AA: 1.1.1, 1.4.11
• Clear documentation and inline comments
• Timeframe: 96 hours