[FE:] Build the Payment Summary cards

[dinahmaccodes]

[FE:] Build the Payment Summary cards

Tier: 🔴 Hard (200 pts)

Description:

A row of summary cards at the top of the Payment History page. Cards: Total Payments, Total Value (sum in XLM or token), Pending Payments, Released Payments. Same style as the dashboard summary cards (Issue #23). Mock data.

Design Reference:
Here is the link to the design: Figma Design. Use it as inspo for the frontend. Then message me personally for edit access for design issues.

File locations:

• Component → frontend/src/pages/Payments/PaymentSummaryCards/PaymentSummaryCards.tsx
• Styles → use Tailwind utility classes and shared tokens
• Import and render at the top of frontend/src/pages/Payments/PaymentHistory/PaymentHistory.tsx

Acceptance Criteria:

• 4 summary cards in a responsive row
• Each card: icon, count/value, and label
• Responsive (2×2 on mobile)
• Screenshot included in PR

Verification Alignment:
Where payment/shipment trust data is displayed, include verification-aware UI states (verified, pending, mismatch, unavailable) and show chain-linkage fields (txHash or current backend equivalent).

Note

Same style as Issue #23 — These cards should match the metric cards from the Company Dashboard. Coordinate on card styling if #23 is in progress.

PR Checklist:

• PaymentSummaryCards created at frontend/src/pages/Payments/PaymentSummaryCards/PaymentSummaryCards.tsx
• Any images/assets placed in frontend/public/images/
• Screenshot attached to the PR
• PR description explains your approach
• cd frontend && pnpm run lint — no errors show up after your changes
• cd frontend && pnpm run build — builds successfully after your changes
• cd frontend && pnpm run test — all tests pass after your changes

Reference: Read CONTRIBUTING.md before starting.

⭐ Enjoying this issue? Star the Navin repository — it helps the project grow and supports open-source development!

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[mikevill20]

@mikevill20 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello Maintainer, please assign this issue to me.

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

[jahrulezfrancis]

@jahrulezfrancis has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I'd love to work on building the Payment Summary cards for the Payment History page.

I'll create four summary cards (Total Payments, Total Value, Pending Payments, Released Payments) with icons, counts/values, and labels using mock data. I'll match the styling from the Company Dashboard cards (Issue #23) and ensure responsive layout (4 on desktop, 2×2 on mobile).

ETA: 2–3 hours.

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

[DeborahOlaboye]

@DeborahOlaboye has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’d like to work on this issue. I’m a blockchain and full-stack developer with years of experience and a very good understanding of building systems.

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

[Henrichy]

@Henrichy has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’d like to apply for FE: Build the Payment Summary Cards in Navin-xmr/navin-frontend.

I have experience building responsive, reusable dashboard metric components and ensuring visual consistency across pages. For this task, I’ll implement PaymentSummaryCards.tsx with four cards (Total Payments, Total Value, Pending Payments, Released Payments), matching the styling from Issue #23 to maintain design consistency.

The layout will be fully responsive (4-column on desktop, 2×2 grid on mobile), include icons, formatted values, and clear labels using mock data. I’ll ensure clean CSS structure, lint/build/test compliance, and attach a proper screenshot with a well-documented PR.

Looking forward to contributing 🚀

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

[SamixYasuke]

@SamixYasuke has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

hello maintainer, I'd like to work on this task, thanks

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

[Gbangbolaoluwagbemiga]

@Gbangbolaoluwagbemiga has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

GM GM fam, I have thoroughly gone through this issue and would love to pick it up.

I am a smart contract developer with 5years experience and have worked on a similar issue, will also provide a working demo to see the changes.

Look forward to hoping on this.

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

[blessme247]

@blessme247 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I would like to solve this issue

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

[OluwapelumiElisha]

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

Subject: Application for #78 – Build the Payment Summary Cards

Hello Maintainers,

I’m excited to work on issue #78 – Build the Payment Summary Cards. The task aligns with my experience creating responsive, visually consistent summary cards and dashboards in React projects. My goal is to implement the four summary cards — Total Payments, Total Value, Pending Payments, and Released Payments — at the top of the Payment History page, using mock data as a placeholder for now.

I plan to follow the styling of the dashboard summary cards from Issue #23 to ensure visual consistency across the app. Each card will include an icon, a numeric count/value, and a descriptive label. The layout will be fully responsive, displaying in a single row on desktop and 2×2 on mobile screens. I will also ensure accessibility considerations such as semantic markup and readable text for screen readers.

The implementation will include:

A new PaymentSummaryCards.tsx component in frontend/src/pages/Payments/PaymentSummaryCards/ with an associated CSS file.

Integration of the component into PaymentHistory.tsx at the top of the page.

Responsive styling and layout adjustments to match the Figma design reference.

Screenshots demonstrating correct rendering across desktop and mobile, included in the PR.

Verification that linting, build, and tests run cleanly (pnpm run lint, pnpm run build, pnpm run test).

I will coordinate with the team regarding icon selection and final card styling if Issue #23 is still in progress to maintain a cohesive UI. I’m confident this approach will produce a clean, maintainable, and visually consistent implementation for the Payment History page.

Looking forward to contributing!

Best regards,
Elisha

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

[AYo101o]

@AYo101o has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi, I'd like to take on this issue. I have solid experience with React and TypeScript and I'm comfortable building responsive card components with mock data. I'll follow the file structure outlined, match the design, and make sure lint, build, and tests all pass before submitting.

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

[drips-wave]

Congratulations, @AYo101o! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @AYo101o: 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 🌊