Add payment installment UI

[Kingsman-99]

Label: complexity: high
Points: 200

Description

Payers who registered an installment plan on-chain have no way to view their schedule in the app. This issue adds an installment schedule panel on the invoice detail page showing each planned payment date and amount, with the current installment highlighted.

Technical Context

Involves invoice/[id]/page.tsx and a new src/components/InstallmentPanel.tsx. Calls splitClient.getInstallmentPlan(invoiceId, publicKey) to fetch the plan. Renders a timeline of (date, amount) pairs. Highlights the next due installment based on current timestamp.

Acceptance Criteria

• Installment panel visible to payers who have a registered plan
• Each installment shows date and amount
• Next due installment is highlighted
• Past installments marked as paid if payment exists
• "No plan registered" shown if no plan exists
• Mobile responsive — works on 375px screens
• No TypeScript errors

---

[sochima2]

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

Hello Sir,

I recently came across your project and I’m very interested in contributing to the team.

I have experience working with React to build responsive and user-friendly interfaces, and I also have a solid understanding of smart contracts and blockchain fundamentals. I enjoy writing clean, scalable code and focusing on improving overall user experience.

I’m a fast learner, highly motivated, and available to get started immediately. I would appreciate the opportunity to contribute and would be glad to discuss the next steps.

Thank you for your time and consideration. I look forward to hearing from you.

Best regards,
Sochima

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

[NnamdiCyber]

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

I can deliver an excellent work on this

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

[drips-wave]

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

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

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