Multi-Column Sortable Invoice List Table

[Kingsman-99]

Description

The invoice list currently renders as a simple card grid ordered by creation date with no way to re-sort by amount, status, or due date. A sortable table view with column headers that toggle ascending and descending sort order should be added alongside the existing card view.

Technical Context

src/components/invoice/InvoiceTable.tsx (new) renders a <table> with columns for Title, Amount, Status, Recipients, Created, and Due Date. Clicking a column header calls router.replace to set ?sort=amount&order=asc in the URL. src/hooks/useInvoices.ts passes the sort parameters to src/app/api/invoices/route.ts. Column headers use aria-sort="ascending" or "descending" attributes. A view-mode toggle in src/app/invoice/page.tsx switches between table and card grid.

Acceptance Criteria

• Clicking a column header sorts the list by that column and shows a sort direction icon
• Clicking the same header a second time reverses the sort order
• Sort state is reflected in the URL and is restored when returning to the page
• The table is horizontally scrollable in its own container on screens narrower than the table width
• A view toggle button persists the user's preference (table vs card) in localStorage
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[Jessicaayegh]

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

Hi maintainer! I’d love to work on this issue if it’s still available. I have a good understanding of the requirements and would be happy to implement the solution. Thanks for considering my request!

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

[veemakama]

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

Hi, i would love to work on this

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

[Ova-Klik]

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

I'd love to work on this issue. i have resolved similar issues. i deliver fast.

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

[Mirabliss]

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

Hello i would like to work on this issue

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

[drips-wave]

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

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