Skip to content

Add collateral value trend sparkline to CollateralCardΒ #863

Description

@teslims2

Description

CollateralCard shows a single appraised value. Add a tiny sparkline showing the last 3 appraisal values to indicate trend.

This is a frontend task in the Next.js 14 + Tailwind CSS codebase. All UI changes must respect the existing design token system, support both light and dark mode, and meet WCAG AA contrast requirements. New or modified components should be covered by React Testing Library unit tests.

Acceptance Criteria

  • Sparkline renders when β‰₯2 appraisal history values exist
  • Up trend: green; down trend: red; flat: neutral
  • Sparkline uses the same canvas/SVG approach as HistoryChart
  • Hidden (not rendered) when only 1 appraisal exists
  • Accessible: aria-label describes the trend direction
  • All existing CI checks pass with the change applied

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions