Make InvoicesTab download produce a real file and handle download errors

[Jagadeeshftw]

📌 Description

InvoicesTab (src/features/settings/components/billing/InvoicesTab.tsx) has a handleDownloadInvoice() that sets link.href = '#' and never downloads a real PDF, with no error handling and a table that overflows on mobile.

💡 Why it matters: Users click "Download" and nothing usable happens.

🧩 Requirements and context

• Fetch the real invoice file from the API and trigger a download.
• Show a loading state on the row and an error message on failure.
• Make the invoice table responsive on small screens.

Non-functional requirements

• Must be secure, tested, and documented.
• Should be efficient and easy to review.

🛠️ Suggested execution

1. Fork the repo and create a branch

git checkout -b fix/invoices-download

2. Implement changes

• Write/modify the relevant source: src/features/settings/components/billing/InvoicesTab.tsx
• Write comprehensive tests: src/features/settings/components/billing/InvoicesTab.test.tsx
• Add documentation: inline TSDoc
• Include TSDoc doc comments
• Validate security assumptions: use object URLs and revoke them

3. Test and commit

• Run tests:

npm run test

• Cover edge cases: download success, download error, mobile layout
• Include test output and security notes in the PR description.

Example commit message

fix(billing): real invoice download with error handling

✅ Acceptance criteria

• Download fetches and saves a real file
• Loading + error states present
• Table responsive on mobile
• Tests cover success/error

🔒 Security notes

Create and revoke object URLs; never trust unsanitized filenames.

📋 Guidelines

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

[ekwe7]

I'd love to take on this issue. I have experience building production-ready applications and contributing through GitHub workflows. I'll deliver a reliable, well-tested solution with clean, maintainable code

[Glam26]

I'd love to work on this issue.

I enjoy tackling infrastructure and reliability-focused tasks, and this combines both in a way that's interesting. My approach will be to keep the implementation simple, well-documented, and easy to maintain while ensuring the acceptance criteria are fully covered.

I'll provide clear commits, tests for critical paths and edge cases, and regular progress updates throughout development.

[444notdotun]

Hi,

With 4 years of hands-on experience across backend, frontend, and smart contract development, I'm confident I can complete this task quickly and to a high standard. I've reviewed the requirements in detail and fully understand what's needed.

My focus is on writing clean, efficient, and maintainable code backed by thorough testing and industry best practices. I'll ensure the solution is production-ready and delivered on time.

I expect to have my PR ready in less than 10 hours.

[444notdotun]

Hi,

With 4 years of hands-on experience across backend, frontend, and smart contract development, I'm confident I can complete this task quickly and to a high standard. I've reviewed the requirements in detail and fully understand what's needed.

My focus is on writing clean, efficient, and maintainable code backed by thorough testing and industry best practices. I'll ensure the solution is production-ready and delivered on time.

I expect to have my PR ready in less than 10 hours.

[OTimileyin]

I'd like to take this on. Right now handleDownloadInvoice() sets link.href = '#' and never downloads a real file, there's no error handling, and the table overflows on mobile — so clicking "Download" does nothing usable.

Plan: fetch the real invoice file from the API and trigger a download via a created object URL, revoking it afterward (and never trusting an unsanitized filename) per the security note. I'll add a per-row loading state while the fetch is in flight and a clear error message on failure, and make the invoice table responsive on small screens so it no longer overflows. I'll add tests in InvoicesTab.test.tsx covering the success path, the download-error path, and the mobile/responsive layout, with TSDoc on the download handler, and confirm coverage meets the 95% threshold with typecheck/lint/test passing.

I can have a PR up well within the 96-hour window.

[leocagli]

I've looked into this and I'm confident I can implement it. Could you assign me?

[grantfox-oss]

🦊 GrantFox — @OTimileyin has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #191)
2. Your PR will be reviewed by the Grainlify maintainers

Good luck! Track your progress on GrantFox.