feat(fwc26): hover/focus PreviewCard on BillingHistory

[obafemimathew01-hue]

feat(fwc26): Hover-triggered PreviewCard on BillingHistory with keyboard-accessible alternative

Summary

Implements the GrantFox FWC26 UI/UX requirement: each transaction row on the new Billing
History page reveals a compact floating preview card on hover or keyboard focus, surfacing
on-chain details without navigating away.

Changes

src/components/PreviewCard.tsx

Extended PreviewCardData with 7 billing-specific fields: txHash, network, confirmations, type,
amount, direction, and timestamp. A isBillingCard flag auto-selects the billing layout when any
of those fields are present — existing dashboard callers are unaffected.

src/pages/BillingHistory.tsx (new)
Billing history page at /billing/history. Renders a responsive, filterable transaction table
(filter by type, status, direction, and free-text search). Each row's description cell is
wrapped in a PreviewCard trigger that opens on hover or focus and shows the tx hash, network,
confirmation count, direction badge, USDC amount, and timestamp.

src/App.tsx

Registered the /billing/history route, added a NavLink in the primary nav, and added page
title/description map entries.

docs/BillingHistoryPreview.md (new)
Full API reference for the new PreviewCardData billing fields, BillingHistory exports, WCAG
compliance table, design-token usage, and responsive notes.

Accessibility (WCAG 2.1 AA)

┌────────────────────┬──────────────────────────────────────────────────────────────────────┐
│ Criterion │ How it's met │
├────────────────────┼──────────────────────────────────────────────────────────────────────┤
│ 1.4.1 Use of Color │ Direction shown as text badge ("↑ credit" / "↓ debit"), not colour │
│ │ alone; StatusBadge adds texture pattern │
├────────────────────┼──────────────────────────────────────────────────────────────────────┤
│ 2.1.1 Keyboard │ All triggers are tabIndex={0} role="button"; Tab opens preview, │
│ │ Escape closes and restores focus │
├─────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ 2.4.3 Focus Order │ suppressNextFocus guard prevents Escape → focus from │
│ │ immediately re-opening the panel │
├─────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ 4.1.2 Name, Role, Value │ Trigger: aria-label, aria-describedby. Panel: role="tooltip", │
│ │ aria-label │
├─────────────────────────┼─────────────────────────────────────────────────────────────────┤
│ 4.1.3 Status Messages │ Filter changes announced via role="status" aria-live="polite" │
└─────────────────────────┴─────────────────────────────────────────────────────────────────┘

Tests

56 new focused tests, all passing:

• src/components/PreviewCard.test.tsx — 25 tests covering shared behaviour, dashboard mode, and
  billing mode (FWC26)
• src/pages/BillingHistory.test.tsx — 31 tests covering page structure, hover/focus
  integration, all filter variants, empty state, ARIA semantics, and table content

Test Files 2 passed (2)
Tests 56 passed (56)

What was not changed

No existing tests were broken. Pre-existing failures in ApiCard, EmptyState, and FiltersSidebar
are unrelated to this PR.
closes #709

[drips-wave]

@obafemimathew01-hue Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[greatest0fallt1me]

Merged into main via admin resolver (-X theirs).

[greatest0fallt1me]

Green across the board — merging. Thanks!