feat(transfers): wire transfers page to real API with shared UI

[DeEvelyn]

Summary

Closes #1293
Closes #1292
Closes #1295
Closes #1294

Replaces the hardcoded MOCK_TRANSFERS array in the transfers page with real backend data via React Query, wires the Approve/Reject buttons to actual API calls, and swaps inline-styled markup for the shared Badge component.

Why

The transfers page was the only data page in the dashboard rendering a hardcoded mock array — it never called the real /transfers API. The Approve/Reject buttons had no onClick handlers, so clicking them did nothing. The page also used raw inline style={{...}} objects instead of the shared Badge component used everywhere else. This made the page non-functional and visually inconsistent with the rest of the app.

What was built

frontend/lib/api/transfers.ts:

Export	What it contains
TransferStatus enum	Mirror of backend TransferStatus for type-safe filtering
AssetTransfer interface	Typed response shape matching the backend entity
TransferListResponse / TransferListFilters	Pagination types consistent with other API modules
transferApiClient	Methods for getTransfers, getTransfer, approveTransfer, rejectTransfer, cancelTransfer, completeTransfer

frontend/lib/query/hooks/useTransfers.ts:

Hook	What it does
useTransfers(filters)	React Query hook for GET /transfers with pagination
useTransfer(id)	React Query hook for single transfer detail
useApproveTransfer()	Mutation hook; invalidates transfers.all on success
useRejectTransfer()	Mutation hook with { id, data: { reason } } input
useCancelTransfer()	Mutation hook; invalidates transfers.all on success

frontend/lib/query/keys.ts — Added transfers key namespace with all, lists, list(filters), and detail(id).

frontend/app/(dashboard)/transfers/page.tsx:

Change	Detail
Data source	useTransfers() replaces MOCK_TRANSFERS state
Approve button	Calls approveMutation.mutate(id) with loading state
Reject button	Opens ConfirmDialog; calls rejectMutation.mutate() with reason
Status badge	Uses shared Badge component instead of raw span with inline styles
Loading state	Shows loading message while data is in flight
Removed	MOCK_TRANSFERS array, my-requests tab (was filtering by hardcoded "u1")

Integration changes outside transfers/

• frontend/lib/query/keys.ts — Added transfers query-key namespace. No existing keys modified.
• frontend/lib/api/transfers.ts — New file, no existing files modified.
• frontend/lib/query/hooks/useTransfers.ts — New file, no existing files modified.

No existing files modified beyond keys.ts and the page itself, so regression risk is low.

Acceptance criteria coverage

• The transfers page reflects real backend data, not a hardcoded array (useTransfers() hook replaces MOCK_TRANSFERS)
• Clicking Approve/Reject actually calls the backend and updates the UI (approveMutation / rejectMutation with onSuccess invalidation)
• The page uses the app's shared UI components (Badge replaces inline-styled span)

Test plan

• npm run build in frontend/ — succeeds (no new type errors)
• npm test — not run per instruction

Env vars / Notes

No new environment variables. The page depends on the existing api axios instance configured in frontend/lib/api.ts, which must point to a backend with the /transfers endpoints available.

[vercel]

@develyn is attempting to deploy a commit to the naijabuz's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@DeEvelyn 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

[yusuftomilola]

No merge conflicts with main. Wiring transfers page to the real API with shared UI looks solid - approving.