Implement live payment summary dashboard card with real-time aggregation, top-payer leaderboard, and chart

[Kingsman-99]

Description

Build a live payment summary card for the invoice detail page that uses the PaymentAggregator SDK class to display real-time funded totals, an animated progress bar, a top-payer leaderboard, and a mini bar chart of payment distribution — all updating without page refresh as new payments arrive.

Acceptance Criteria

• Create src/components/PaymentSummaryCard.tsx accepting an invoiceId: string prop
• On mount, fetches full invoice and initialises PaymentAggregator with existing payments
• Subscribes to new payment events via the existing polling/watcher mechanism; calls aggregator.applyPayment on each new event
• Displays: total funded (formatted with token decimals), animated progress bar (0–100%), payment count, time of last payment
• Top-payer leaderboard: shows top 5 payers with truncated addresses, amounts, and rank badges (🥇🥈🥉 for top 3)
• Mini bar chart (no external chart library — use CSS/SVG only) showing each payer's share as a proportional bar
• Progress bar animates smoothly on value change using CSS transitions (no layout thrash)
• Card is fully responsive; on mobile, leaderboard collapses to top 3 only
• Skeleton loading state shown while initial data loads
• Unit tests: aggregator subscription wired correctly, top-payer list sorted, progress capped at 100%

Context

• Invoice detail page: src/app/invoice/[id]/page.tsx
• SDK PaymentAggregator from split-sdk issue Build WalletConnect integration #10
• Do not use Chart.js, Recharts, or any charting library — SVG/CSS only