Invoice QR Print Sheet Generator

[Kingsman-99]

Description

Vendors at events or markets need to print multiple invoice payment QR codes on a single A4 sheet to hand out or post for customers. This issue adds a QR print sheet generator accessible from the invoice list and individual invoice pages that lets creators select up to 12 invoices, arrange QR codes in a configurable grid (2x2, 3x3, or 2x6), optionally add invoice title and amount labels beneath each code, and produce a browser-printable layout with a single print action.

Technical Context

Create components/invoice/QRPrintSheet.tsx as a purely printable React component that renders QR codes using the existing InvoiceQR component for each selected invoice. Use @media print CSS to hide the rest of the UI and render the grid at 300 dpi-appropriate sizes. Build a QRPrintSheetModal that opens from a "Print QR Sheet" button in the invoice list toolbar; the modal lets users select invoices (up to 12), choose grid layout, and toggle label visibility. The underlying QR data URL generation should be pre-computed server-side via app/api/invoices/qr-batch/route.ts using qrcode to avoid layout shifts during print. Use window.print() from a dedicated print frame rather than the main page.

Acceptance Criteria

• Selecting more than 12 invoices shows a validation error and disables the generate button
• All three grid layouts (2x2, 3x3, 2x6) render QR codes at correct proportional sizes with no code clipping when printed to A4
• Labels beneath each QR code correctly display the invoice title and amount when toggled on
• The print action triggers the browser's native print dialog with the sheet as the only visible content (no nav, no sidebars)
• QR codes in the print sheet are scannable and resolve to the correct invoice URL when tested with a mobile device scanner
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[ebubeb683-ship-it]

Hello boss, Please assign this issue to me. i checked it out and im confident i will solve it
my eta is 4 hours

[canicefavour]

Description

Label: complexity: high Points: 200

Description
Vendors at events or markets need to print multiple invoice payment QR codes on a single A4 sheet to hand out or post for customers. This issue adds a QR print sheet generator accessible from the invoice list and individual invoice pages that lets creators select up to 12 invoices, arrange QR codes in a configurable grid (2x2, 3x3, or 2x6), optionally add invoice title and amount labels beneath each code, and produce a browser-printable layout with a single print action.

Technical Context
Create components/invoice/QRPrintSheet.tsx as a purely printable React component that renders QR codes using the existing InvoiceQR component for each selected invoice. Use @media print CSS to hide the rest of the UI and render the grid at 300 dpi-appropriate sizes. Build a QRPrintSheetModal that opens from a "Print QR Sheet" button in the invoice list toolbar; the modal lets users select invoices (up to 12), choose grid layout, and toggle label visibility. The underlying QR data URL generation should be pre-computed server-side via app/api/invoices/qr-batch/route.ts using qrcode to avoid layout shifts during print. Use window.print() from a dedicated print frame rather than the main page.

Acceptance Criteria
Selecting more than 12 invoices shows a validation error and disables the generate button
All three grid layouts (2x2, 3x3, 2x6) render QR codes at correct proportional sizes with no code clipping when printed to A4
Labels beneath each QR code correctly display the invoice title and amount when toggled on
The print action triggers the browser's native print dialog with the sheet as the only visible content (no nav, no sidebars)
QR codes in the print sheet are scannable and resolve to the correct invoice URL when tested with a mobile device scanner
All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts