[FE-20] Add PWA support and in-app camera QR scanning for mobile field work

[yusuftomilola]

Overview

Field work (audits, check-in/out, lookups) happens on phones next to physical equipment. Competitors ship native apps; a PWA with camera QR scanning covers most of that value at a fraction of the cost.

What to Build

1. PWA: web manifest (name, icons, theme), installability, service worker with sensible caching (app shell cached; API network-first) — Next.js 15 conventions
2. Camera scanning: a scan button (topbar on mobile + check-in/out and audit pages) opening a camera view using BarcodeDetector where available with a JS fallback library; decoded asset QR navigates to /scan/[assetId] ([FE-14])
3. Mobile polish on core flows: assets list, asset detail, check-in/out usable at 375px width

Conventions to Follow

• API calls: add a typed client in frontend/lib/api/ (see frontend/lib/api/assets.ts for the pattern) — never call axios directly from components
• Data fetching: TanStack Query hooks in frontend/lib/query/hooks/ with keys registered in frontend/lib/query/keys.ts
• UI: reuse frontend/components/ui/ (button, input, confirm-dialog, toast) and the badge/modal patterns in frontend/components/assets/
• Route goes under frontend/app/(dashboard)/ and gets a sidebar entry in frontend/components/layout/sidebar.tsx
• Forms: React Hook Form + Zod resolver, matching the existing create-asset modal

References

• Blocked by [FE-14]; pairs with existing open issue [BE-69] (QR generation)
• Note: 19b5baa (mobile drawer nav) existed pre-reset — reuse ideas via git show 19b5baa

Acceptance Criteria

• App installable on Android/iOS with correct icon and name
• Scanning a printed asset QR with the in-app camera opens the right asset
• Camera permission denial handled gracefully with manual-entry fallback
• Core flows fully usable on a phone-sized viewport

[peternnadi1999]

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

Hi, I’d like to work on this issue. I can implement the PWA foundation with a proper manifest, icons, installability, and service-worker caching following the project’s Next.js conventions.

I’ll also build the in-app QR scanning experience using BarcodeDetector where supported, with a JavaScript fallback for unsupported browsers. The scanner will be accessible from the mobile topbar and relevant field-work flows, decode asset QR codes, and navigate users to the appropriate asset route.

I’ll handle camera permission denial gracefully with a manual-entry fallback and ensure the assets list, asset detail, and check-in/out flows are polished and usable at mobile widths such as 375px. I’ll follow the project’s existing component, API, and TanStack Query conventions throughout the implementation.

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

[Fahmedo]

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

I'd like to build this.

Field work (audits, check-in/out, lookups) happens on phones next to physical equipment. Competitors ship native apps; a PWA with camera QR scanning covers most of that value at a fraction of the cost.

I'll make sure each of these is covered:

• App installable on Android/iOS with correct icon and name
• Scanning a printed asset QR with the in-app camera opens the right asset
• Camera permission denial handled gracefully with manual-entry fallback
• Core flows fully usable on a phone-sized viewport

I'll keep you posted on progress as I go.

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

[drips-wave]

Congratulations, @Fahmedo! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @Fahmedo: 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!

@Fahmedo's PR #1367 was approved and merged by @yusuftomilola.

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

👏 Great work, @Fahmedo! Keep contributing to DistinctCodes.

[drips-wave]

This issue has been completed by @Fahmedo as part of the Stellar Wave Program's 8th Wave 🥳

😎 @Fahmedo: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.