[Frontend] — My Predictions Filter by Status and Outcome

[Olowodarey]

Problem
frontend/src/app/(authenticated)/my-predictions/page.tsx shows a flat list with no filtering by pending/won/lost, making history hard to review.

Requirements

• Status filter (Pending / Won / Lost / Refunded) and a text search on market title.
• Result summary chips (win rate, net P/L) above the list.
• Persist the last-used filter in the URL query.
• Tests: filters narrow correctly; summary reflects the filtered set.

Acceptance Criteria

• Users filter and summarize their prediction history. Covered by tests.

Files

• frontend/src/app/(authenticated)/my-predictions/page.tsx
• frontend/src/component/ActivePrediction.tsx
• frontend/src/lib/api.ts

[bilhokista]

I have opened #1795 for this issue.

A status filter already existed on the page, so what the PR adds is the Refunded status, the title search, the summary chips, and URL persistence. Filtering and summarising move into a new pure module, frontend/src/lib/predictions.ts, so the rules can be tested without rendering the page.

Two judgement calls I would like your view on, since both change what existing numbers mean:

The summary now describes the filtered set rather than lifetime totals. That is what the issue asks for, and it is what makes the chips useful while filtering, but it does change the meaning of the four cards at the top. I made the first card relabel itself from "Total Predictions" to "Predictions Shown" when a filter is active so the number is not misread as a lifetime count.

Win rate is won divided by settled, not by total. On the sample data that is 50% rather than 17%, and the difference matters: dividing by the total means the rate falls every time the user places a new prediction, which reads as though they are getting worse. It shows "—" rather than 0% when nothing has settled yet.

Two smaller notes. Cancelling a prediction previously removed the row from the list entirely; it is now marked Refunded, since a refund is part of the history this page exists to show. And because useSearchParams requires a Suspense boundary in the App Router, the screen moved into an inner component with the default export supplying that boundary.

On scope: the page still renders the existing MOCK_PREDICTIONS fixture. The issue lists lib/api.ts, but wiring a real endpoint is separate work with its own contract to agree, so I kept this change to filtering and presentation. The helpers are generic over the prediction shape, so swapping in real data later will not touch them. ActivePrediction.tsx turned out not to be used by this page, so it is untouched.