🖨️ Add Print Invoice Functionality

[desoga10]

Description

Add a print button that opens a print-friendly version of the invoice, optimized for physical printing without browser UI elements or unnecessary page elements.

Why This Matters

• User convenience: Direct printing without downloading PDF first
• Quick action: One-click printing for urgent needs
• Saves time: No extra steps for users who just need a physical copy
• Professional output: Clean, print-optimized layout

Current Behavior

• Users must download PDF to print
• No direct print option from browser
• Extra steps for simple task

Proposed Behavior

• Click "Print" button
• Browser print dialog opens automatically
• Print-optimized layout displays
• Clean output without navigation/buttons

Features

1. Print Button

• Location: Invoice detail page, next to "Download PDF" and "Edit"
• Icon: Printer icon (lucide-react: printer)
• Label: "Print"
• Keyboard shortcut: Works with Ctrl+P / Cmd+P

2. Print-Friendly Layout

When printing, automatically:

• Hide navigation bar
• Hide sidebar
• Hide action buttons (Edit, Delete, Print, Download)
• Remove background colors (save ink)
• Optimize spacing for paper (A4/Letter)
• Add proper margins (1 inch / 2.54 cm)
• Ensure content fits pages properly
• Add page breaks for long invoices

3. Print Styling

• Clean, professional layout
• High contrast for readability
• Company logo at top (if available)
• Invoice details clearly organized
• Line items in neat table
• Totals prominently displayed
• Footer with page numbers (for multi-page)

User Flow

1. User views invoice detail page
2. Clicks "Print" button
3. Browser print dialog opens
4. User selects printer and options
5. Clicks print
6. Invoice prints with clean layout

Design Considerations

Paper Size Support:

• Optimize for both A4 (international) and Letter (US)
• Proper margins for all paper sizes
• Content should fit without cutting off

Ink Efficiency:

• Remove/lighten background colors
• Use only essential colors
• High contrast text for readability
• Consider grayscale printing

Multi-Page Invoices:

• Proper page breaks for long item lists
• Don't split tables awkwardly
• Header/footer on each page
• Page numbers (Page 1 of 3)

Branding:

• Company logo (if available)
• Consistent with PDF export design
• Professional appearance

Acceptance Criteria

• Print button visible on invoice detail page
• Clicking print opens browser print dialog
• Navigation and buttons hidden when printing
• Content fits properly on A4/Letter paper
• Proper margins (1 inch all sides)
• Logo displays if available
• Background colors removed
• Page breaks work for long invoices
• Works in Chrome, Firefox, Safari
• Keyboard shortcut (Ctrl+P) works
• Clean, professional output

Optional Enhancements

Set Print Title:

printInvoice(): void {
  // Set document title for print job
  const originalTitle = document.title;
  document.title = `Invoice-${this.invoice.invoice_number}`;
  
  window.print();
  
  // Restore original title after print
  window.addEventListener('afterprint', () => {
    document.title = originalTitle;
  }, { once: true });
}

Print Preview Modal:

• Show preview before printing
• Let user see exactly what will print
• Adjust layout if needed

Print Options:

• Include/exclude notes
• Show/hide company logo
• Select paper size

Testing Checklist

• Print simple invoice (few items)
• Print long invoice (many items, multiple pages)
• Print invoice with logo
• Print invoice without logo
• Test in Chrome
• Test in Firefox
• Test in Safari
• Verify margins are correct
• Check page breaks don't split tables
• Test with different paper sizes
• Verify in grayscale/black & white

Edge Cases

• Invoice with no items (still prints basic info)
• Very long item descriptions (text wrapping)
• Invoice with 50+ line items (pagination)
• Missing company logo (graceful fallback)
• Special characters in content
• Different currencies and symbols

Browser Compatibility

• ✅ Chrome/Edge (window.print())
• ✅ Firefox (window.print())
• ✅ Safari (window.print())
• ⚠️ Mobile browsers (limited print support)

Priority

Medium - Convenient feature, not critical

Related Features

• Enhanced PDF Export (similar layout needs)
• Status badges (should print correctly)
• Tax calculations (ensure totals print properly)

Resources

• MDN: window.print()
• CSS Print Guide

Notes

Keep print styling simple and clean. Focus on readability and professionalism. The print output should look as good as (or better than) the PDF export.

Future Enhancements

• Batch print multiple invoices
• Print preview modal
• Custom print templates
• Save print preferences