PHEE-399: wire Payment Hub, Transfers to real Gazelle API, add Batch Detail page and update Reporting Dashboard

[Flashl3opard]

Related

Epic: PHEE-363
Closes: PHEE-399

Summary

Connects Payment Hub modules to the live Mifos Gazelle backend and adds Batch Detail page with real data.

Changes

API Integration

• paymentHub.ts — fetchMainBatches, fetchTransfers, fetchSubBatches
  wired to real Gazelle API (https://ops.mifos.gazelle.test/api/v1)
• MainBatchesTab — real batch data with loading skeleton and mock fallback
• TransfersTab — real transfers data using content response shape,
  page=0&size=50
• SubBatchesTab — batch selector dropdown, fetches sub batches per batchId

Batch Detail Page

• New page at /payment-hub/batch/:batchId
• Shows full batch info (batchId, status, amounts, timestamps)
• Sub batches table for selected batch
• Clicking any batch row in Main Batches navigates here

Reporting Dashboard

• KPI cards now show real data from API (totalBatches, totalTransactions, totalAmount)
• Donut chart uses real status breakdown from batch data
• Failed batches table shows real FAILED status batches
• Line chart groups real transfers by date

Dashboard

• KPI stat cards wired to real batch counts
• Recent Batches table shows live data
• Loading skeletons on all cards and tables

Type Updates

• MainBatch interface updated to match real API response fields
• Transfer interface updated with real API fields
• SubBatch interface added
• Null safety added across all fields

StatusBadge

• Added COMPLETED, IN_PROGRESS, FAILED uppercase variants
• Unknown/null status falls back to grey

Screenshots

[attach Payment Hub real data screenshot]
[attach Batch Detail screenshot]
[attach Reporting Dashboard screenshot]

Notes

• Tested against live Gazelle instance at ops.mifos.gazelle.test
• Mock data fallback when API unavailable
• Chrome required for development (Brave blocks self-signed certs)
• G2P Config and Vouchers remain on mock data pending backend availability

[Copilot]

Pull request overview

This PR connects the Payment Hub and Reporting UI modules to the live Gazelle backend via React Query, adds a new Batch Detail route/page, and updates dashboard/reporting widgets to render real batch/transfer data with loading states and mock fallbacks.

Changes:

• Wired Payment Hub batches/transfers/sub-batches tabs and dashboards to fetchMainBatches, fetchTransfers, and fetchSubBatches with skeleton loading and export updates.
• Added /payment-hub/batch/:batchId Batch Detail page and navigation from Main Batches rows.
• Updated domain types and mocks to match the backend response shape, and extended StatusBadge to handle new status variants.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/pages/Dashboard.tsx	Loads real batches for KPI cards + recent batches table and adds skeleton loading.
src/pages/BatchDetail.tsx	Exposes the new Batch Detail module as a page entrypoint.
src/modules/reporting/Reporting.tsx	Replaces mock KPIs/charts/tables with live batch + transfer data where available.
src/modules/payment-hub/types.ts	Updates Payment Hub data contracts to the Gazelle API shapes (MainBatch/SubBatch/Transfer).
src/modules/payment-hub/TransfersTab.tsx	Uses real transfers (content shape), updates filtering/export/table rendering.
src/modules/payment-hub/SubBatchesTab.tsx	Adds batch selector and loads sub-batches per selected batch from API.
src/modules/payment-hub/mocks/transfers.mock.ts	Updates transfer mocks to match new Transfer interface.
src/modules/payment-hub/mocks/subBatches.mock.ts	Updates sub-batch mocks to match new SubBatch interface.
src/modules/payment-hub/mocks/mainBatches.mock.ts	Updates main batch mocks to match new MainBatch interface.
src/modules/payment-hub/MainBatchesTab.tsx	Loads real main batches, updates filtering/export/table, adds row navigation to Batch Detail.
src/modules/payment-hub/BatchDetail.tsx	Implements the new Batch Detail page with batch info and sub-batches table.
src/main.tsx	Registers the new Batch Detail route.
src/lib/api/paymentHub.ts	Adjusts API wrappers for the new backend response shapes and adds sub-batch fetch.
src/components/shared/StatusBadge.tsx	Adds support for new uppercase status variants and null/unknown fallback.

Suppressed comments (2)

src/pages/Dashboard.tsx:18

• formatAmount is formatting raw totalAmount values as if they were whole currency units, but elsewhere on this page totalAmount is treated as cents (divided by 100). This causes the Recent Batches “Amount” column to be off by 100× and can mislabel K/M thresholds.

function formatAmount(n: number) {
  if (n >= 1_000_000) return `$${(n / 1_000_000).toFixed(1)}M`
  if (n >= 1_000) return `$${(n / 1_000).toFixed(0)}K`
  return `$${n}`
}

src/modules/payment-hub/TransfersTab.tsx:52

• Pagination controls are computed from filtered.length, but the UI range string uses totalCount (from totalElements). When the API is paged, this can show e.g. “1–10 of 500” while only the first page is actually loaded, and the Next button may be disabled even though more server data exists.

  const totalPages = Math.max(1, Math.ceil(filtered.length / perPage))
  const paginated = filtered.slice((page - 1) * perPage, page * perPage)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.