Invoice Kanban Board View

[Kingsman-99]

Description

The current list and table views of invoices do not provide a workflow-oriented perspective that lets creators quickly move invoices across statuses by dragging them. This issue adds a Kanban board view to /dashboard with columns for Draft, Pending, Partially Paid, Fully Paid, and Disputed, supporting drag-and-drop reordering within and between columns to trigger status transitions where the new status is a valid transition from the current one. Invalid transitions must be rejected with a toast and the card snapped back.

Technical Context

Add a view-mode toggle to app/dashboard/page.tsx that conditionally renders components/dashboard/KanbanBoard.tsx. Use @dnd-kit/core and @dnd-kit/sortable for accessible drag-and-drop. Each column maps to an invoice status; moving a card between columns triggers PATCH /api/invoices/[id] with the new status. Implement a statusTransitionGuard utility in lib/invoiceStateMachine.ts that encodes the allowed transitions and is shared with unit tests. Cards should display invoice ID, recipient count, amount, and due-date pill. Board state must be kept in sync with the server via optimistic updates that roll back on API failure. Column scroll must be independent so long columns do not overflow the viewport.

Acceptance Criteria

• Dragging an invoice card to a valid target column immediately updates the card's status optimistically and confirms via PATCH response
• Dragging to an invalid column (e.g., Draft to Fully Paid) snaps the card back to its original column and displays a toast naming the invalid transition
• Keyboard navigation (Tab to select card, arrow keys to move between columns) works correctly and passes axe accessibility checks
• Columns render independently scrollable and do not cause horizontal overflow on viewports narrower than 1280 px
• lib/invoiceStateMachine.ts has 100% branch coverage in unit tests for all defined status transitions
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[blessme247]

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

I would like to work on this issue

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

[Luchistack]

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

Hi Maintainer, I would love to work on this issue.

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

[drips-wave]

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

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

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@Luchistack's PR #549 was approved and merged by @Kingsman-99.

🏆 @Luchistack: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (837 total points). Track your full progress on GrantFox.

👏 Great work, @Luchistack! Keep contributing to Stellar-split.