[FEATURE] Frontend Integration — Connect web UI to real API replacing mock data

[gelluisaac]

Description

Update the web frontend to call the real backend API instead of using in-memory mock data.
This is the final integration step that makes the dashboard fully functional.

Tasks

• Update web/src/api/loyalty.ts to make real HTTP calls to /api/v1/loyalty/*
• Update web/src/api/transactions.ts to make real HTTP calls to /api/v1/transactions/*
• Add API client module web/src/api/client.ts with:
  • Base URL configuration
  • Auth token management (JWT storage, auto-refresh)
  • Error handling and retry logic
  • Request/response type matching lib/types.ts
• Update FraudDetectionPanel.tsx to fetch from /api/v1/fraud/*
• Update ModelMonitoringDashboard.tsx to fetch from /api/v1/monitoring/*
• Add WebSocket client hook useWebSocket.ts for real-time data
• Handle loading, error, and empty states throughout
• Add environment variable VITE_API_BASE_URL for configurable API URL
• Update tests to use mock API responses

Acceptance Criteria

• All dashboard components render with real data from the API
• Loading states show appropriate spinners/placeholders
• Error states show meaningful messages with retry options
• Authentication flow works (login page to token to API calls)
• Tests pass with mocked API calls

Labels

enhancement, frontend, integration

[OluwapelumiElisha]

@OluwapelumiElisha has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

Hello,

I would like to work on this issue.

My approach will be to replace the existing mock-data implementation with fully integrated API communication while maintaining type safety, reliability, and a smooth user experience. The goal is to ensure that all dashboard components consume real backend data and support production-ready authentication, error handling, and real-time updates.

As part of this work, I will:

Update web/src/api/loyalty.ts to communicate with the /api/v1/loyalty/* endpoints.
Update web/src/api/transactions.ts to communicate with the /api/v1/transactions/* endpoints.
Create a reusable web/src/api/client.ts module that provides:
Configurable API base URL support via VITE_API_BASE_URL.
JWT authentication token management.
Automatic token refresh handling where applicable.
Centralized error handling and retry mechanisms.
Strong TypeScript typing aligned with lib/types.ts.
Integrate FraudDetectionPanel.tsx with the /api/v1/fraud/* endpoints.
Integrate ModelMonitoringDashboard.tsx with the /api/v1/monitoring/* endpoints.
Implement a reusable useWebSocket.ts hook to support real-time updates where required.
Add robust loading, error, and empty states across all affected dashboard views.
Verify that the authentication flow works seamlessly from login through authenticated API requests.
Update existing tests and add new test coverage using mocked API responses to ensure reliability and maintainability.
Review TypeScript types and improve type safety where necessary.
Validate performance and user experience to avoid regressions during the integration process.

Upon completion, all dashboard components will render live data from the backend API, authentication will function correctly, loading and error states will be properly handled, and the application will have comprehensive test coverage with mocked API responses to satisfy the acceptance criteria.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @OluwapelumiElisha to this issue.

[0xdevmes]

@0xdevmes has applied to work on this issue as part of the Stellar Wave Program's 5th wave.

I'm interested in this.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @0xdevmes to this issue.

[drips-wave]

Congratulations, @0xdevmes! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 2, 2026.

🧑‍💻 @0xdevmes: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @0xdevmes as part of the Stellar Wave Program's 5th Wave 🥳

😎 @0xdevmes: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.