feat(mobile): Add Barcode / SKU Camera Scanner for Fast Logging

[rushikesh-bobade]

Problem Statement

High-volume sellers waste a significant amount of time manually typing in SKUs when logging new inventory. To provide a premium mobile experience (similar to ScoutApp), we need a fast way to scan shoe boxes and apparel tags.

Proposed Solution

Integrate a lightweight web-based barcode/QR scanner directly into the "Add Inventory Item" modal so mobile users can scan a physical box and have the SKU auto-fill instantly.

Acceptance Criteria

1. Library Integration: Use a robust, mobile-friendly library like html5-qrcode or @zxing/library.
2. UI Implementation: Add a "Scan Barcode" button next to the SKU input field in app/blocks/inventory-management/add-item-modal.tsx.
3. Camera Support: When clicked, open a video feed overlay requesting camera permissions.
4. Auto-fill: Upon successfully reading a standard UPC or barcode, auto-fill the SKU field and close the camera overlay.
5. Error Handling: Gracefully handle devices without cameras or denied permissions.

Technical Hints

• Ensure the scanner modal has a high z-index and works smoothly on mobile viewports.
• The library should support standard UPC-A and EAN-13 barcodes commonly found on sneaker boxes.

[vanshika-CG]

Hi @rushikesh-bobade, I'd like to work on this issue. Could you please assign this issue to me?

[github-actions]

Hi @vanshika-CG! 👋

Thank you for your interest in contributing to this repository! Please wait until a maintainer officially assigns you to this issue before opening a Pull Request.

While you wait, please consider starring ⭐ this repository to show your support! We review requests regularly and will assign it as soon as possible if it's available. Happy coding! 🚀

[rushikesh-bobade]

Hi @vanshika-CG,

Since your last PR was successfully merged, your plate is totally clear! I am officially assigning this issue to you.

This is a high-impact feature for mobile users. A couple of quick architectural tips before you dive in:

1. Library Choice: I highly recommend using html5-qrcode. It has excellent mobile browser support and handles camera permission requests very cleanly.
2. Crucial Merge Warning: We just merged PR feat(ai): AI Receipt & Invoice OCR for Inventory Onboarding (#93) #118, which heavily modified app/blocks/inventory-management/add-item-modal.tsx to add a new "Scan Receipt / Invoice" AI button.
   • Please run git pull origin main to get the latest code before you start!
   • You will need to figure out a clean UI layout to place your new "Scan Barcode" button alongside the existing AI receipt scanner button without cluttering the modal.
3. Graceful Failures: Please make sure to handle scenarios where the user denies camera permissions or is on a desktop device without a webcam (show a nice error toast!).

Let me know if you run into any issues setting up the scanner overlay.

[karrisanthoshigayatri]

Hi @rushikesh-bobade ,

This looks like an exciting feature! I'd love to work on a similar issue if one becomes available.

Approach: I'd integrate html5-qrcode into the Add Inventory modal, add a Scan Barcode button, request camera access, auto-fill the SKU after a successful scan, and gracefully handle permission denials or unsupported devices for a smooth mobile experience.

Thanks!