Add invoice payment source tracker

[Kingsman-99]

Label: complexity: high
Points: 200

Description

The payment list shows amounts but not which portion of the invoice each payment covered. This issue adds a visual payment source breakdown on the invoice detail page showing a stacked bar where each payer's contribution is colour-coded and labelled with their truncated address.

Technical Context

Involves invoice/[id]/page.tsx and a new src/components/PaymentSourceBar.tsx. Aggregate invoice.payments by payer address. Render a stacked horizontal bar using Tailwind flex with each segment's width proportional to contribution. Assign colours from a fixed palette.

Acceptance Criteria

• Stacked bar shows each payer's contribution colour-coded
• Hovering a segment shows payer address and amount tooltip
• Legend below bar lists each payer with truncated address
• Unfunded portion shown as grey segment
• Works correctly for single and multiple payers
• Mobile responsive — works on 375px screens
• No TypeScript errors

---

[Awointa]

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

Hi, I’m interested in this issue. I have experience building React/Next.js UI components for financial dashboards, including data aggregation and visualization features like charts, breakdown bars, and responsive layouts.

I can implement the payment source tracker by aggregating invoice payments by payer address, creating a reusable PaymentSourceBar component, and rendering a stacked horizontal bar with proportional segments, color mapping, tooltips, and a legend. I’ll also ensure it handles edge cases like single/multiple payers, includes the unfunded portion, and is fully responsive and TypeScript-safe.

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

[janipauwels-sys]

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

i would like to work on this because i can implement this assign me

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

[drips-wave]

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

🧑‍💻 @janipauwels-sys: 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 @janipauwels-sys as part of the Stellar Wave Program's 5th Wave 🥳

😎 @janipauwels-sys: 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.