"[UI/UX Design] Define ineligible settlement reason layout and remediation CTAs in SettlementModal"

[1nonlypiece]

[UI/UX Design] Define ineligible settlement reason layout and remediation CTAs in SettlementModal

Description

SettlementModal.tsx accepts an ineligibleReason string for the ineligible state but does not specify how reasons map to next-step actions. Design a structured ineligible layout that pairs each reason category (not matured, already settled, disputed) with a clear remediation CTA and links back to the commitment details page at src/app/commitments/[id]/page.tsx.

Requirements and context

• Must be secure, tested, and documented
• Should be efficient and easy to review
• Cover the reason set surfaced by the settle endpoint at src/app/api/commitments/[id]/settle/route.ts
• Differentiate temporary (not matured) from terminal (already settled) reasons visually
• Provide a primary "Return to dashboard" action wired to onReturnToDashboard
• Ensure reason text is announced and not conveyed by color alone

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/settlement-ineligible-reasons
• Implement changes
  • Update the ineligible branch markup in SettlementModal.tsx
  • Add render tests for each reason category under tests/
  • Document reason-to-CTA mapping in docs/error-handling.md
  • Add validation that unknown reasons fall back to a safe default message
• Test and commit
  • Run tests, cover edge cases
  • Include test output and notes

Example commit message

feat: structure ineligible settlement reasons with remediation CTAs

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours