PWA / offline shell for the merchant dashboard

[therealjhay]

ProblemThe merchant dashboard is entirely network-dependent; there is no offline shell, cached assets, or stale-while-revalidate for the app shell.

Solution

• Add a service worker (workbox) that pre-caches the app shell and runtime-caches GET API responses stale-while-revalidate for list endpoints.
• Add an offline banner (reusing offlineStore and useOnlineStatus) that reflects API reachability, not just navigator.onLine.
• Implement background-sync for payment-link creation and webhook test submissions.
• Add a manifest with icons and an install prompt for the merchant dashboard.

Acceptance Criteria

• After first load, the merchant dashboard renders offline with cached data and a banner.
• Offline-created payment links sync when connectivity returns.
• API-reachability and browser-online states never contradict for long.
• npm run build passes.

Note for Contributors: Write a clear PR description. Show the app shell loading offline and a background-synced link.

[achebejohnpaul]

Am a full-Stack Engineer focused on frontend, backend, APIs, automation, and modern web technologies. Passionate about solving real-world problems, contributing to open source, and delivering clean, scalable, review-ready solutions.

[achebejohnpaul]

Am a full-Stack Engineer focused on frontend, backend, APIs, automation, and modern web technologies. Passionate about solving real-world problems, contributing to open source, and delivering clean, scalable, review-ready solutions.

[achebejohnpaul]

Am a full-Stack Engineer focused on frontend, backend, APIs, automation, and modern web technologies. Passionate about solving real-world problems, contributing to open source, and delivering clean, scalable, review-ready solutions.

[Peculiarr7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. I’ll prioritize this immediately and ensure a reliable solution is delivered as soon as possible. Thank you!

[micmusjnr20]

I am writing to apply for the frontend task: PWA / offline shell for the merchant dashboard.

Merchants often operate in environments with unstable mobile internet or intermittent connectivity. When a merchant opens their dashboard to check incoming sales, verify transactions, or manage inventory, a blank loading screen caused by network drops results in immediate frustration and operational downtime. Building a Progressive Web App (PWA) with a resilient offline application shell ensures the core dashboard interface loads instantly regardless of network conditions, while background sync queueing handles pending merchant actions gracefully.

[Adeyemi-cmd]

Hello maintainer. i would love to work on this

[grantfox-oss]

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

Next steps:

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

Good luck! Track your progress on GrantFox.