Implement the transaction-history tab in my-predictions to replace the "coming soon" placeholder

[greatest0fallt1me]

Description

In app/(dashboard)/mypredictions/page.tsx the "Transaction history" tab renders only a placeholder — the renderContent() switch returns a centered "Transaction history coming soon..." block for that case (around lines 348-357) — even though lib/mock-data.ts already exports a fully shaped allTransactions: Transaction[] array (deposits, bets, wins, withdrawals, refunds, with status, currency, and numericAmount). This issue builds the real transaction-history view from that data, matching the page's existing tabbed layout.

Requirements and context

• Replace the placeholder branch with a transaction list/table that renders allTransactions from lib/mock-data.ts, showing date, type, description, amount (using the provided amountColor), and status.
• Add type/status filtering and an empty state consistent with the rest of the dashboard; reuse the page's existing tab styling.
• Keep the existing "My Predictions" tab and stat boxes unchanged; the new view should live in a dedicated component (e.g. components/predictions/TransactionHistory.tsx) imported by the page.
• Non-functional: responsive at mobile widths, accessible table semantics or a labelled list, and pending vs completed states visually distinct (not color-only).
• Use the Transaction type from lib/types.ts so the component stays typed.

Acceptance criteria

• The "Transaction history" tab renders allTransactions instead of the "coming soon" placeholder.
• Each row shows date, type, description, amount, and status.
• At least one filter (by type or status) works, and an empty state renders when nothing matches.
• The view is a separate, typed component imported by mypredictions/page.tsx.
• Layout is responsive and status is conveyed beyond color alone.
• Tests cover rendering and filtering of the new component (>=85% lines).

Suggested execution

1. Fork the repo and create a branch — git checkout -b feature/transaction-history-tab.

2. Implement changes — app/(dashboard)/mypredictions/page.tsx, new components/predictions/TransactionHistory.tsx, reuse lib/mock-data.ts and lib/types.ts.

3. Write/extend tests — Jest + React Testing Library with pnpm; add components/predictions/__tests__/TransactionHistory.test.tsx asserting rows render and filters work.

4. Test and commit —

pnpm install
pnpm test
pnpm test:coverage
pnpm lint

Example commit message

feat(my-predictions): implement transaction-history tab from mock transaction data

Guidelines

• Aim for >=85% coverage on the new component.
• Ensure accessible semantics and non-color-only status indicators; note any follow-up needed when a real API arrives.
• Timeframe: 96 hours.