feat: receipt PDF save and print via html2pdf.js

- Save PDF button downloads receipt directly
- Print button opens PDF in new window and triggers print dialog
- Replaces previous window.print() approach that lost styles
- Receipt generated on demand from transaction data, no file storage needed

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/admin/src/components/pos/pos-payment-dialog.tsx

@@ -10,7 +10,7 @@ import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
 import { CheckCircle, Printer, Mail } from 'lucide-react'
 import { toast } from 'sonner'
-import { POSReceipt, printReceipt } from './pos-receipt'
+import { POSReceipt, downloadReceiptPDF, printReceiptPDF } from './pos-receipt'
 
 interface POSPaymentDialogProps {
   open: boolean
@@ -98,13 +98,18 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
       return (
         <Dialog open={open} onOpenChange={() => { setShowReceipt(false); handleDone() }}>
           <DialogContent className="max-w-sm max-h-[90vh] overflow-y-auto print:max-w-none print:max-h-none print:overflow-visible print:shadow-none print:border-none">
-            <div className="print:hidden flex justify-between items-center mb-2">
+            <div className="flex justify-between items-center mb-2">
               <Button variant="ghost" size="sm" onClick={() => setShowReceipt(false)}>Back</Button>
-              <Button size="sm" onClick={printReceipt} className="gap-2">
-                <Printer className="h-4 w-4" />Print
-              </Button>
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm" onClick={() => downloadReceiptPDF(result.transactionNumber)} className="gap-2">
+                  Save PDF
+                </Button>
+                <Button size="sm" onClick={() => printReceiptPDF(result.transactionNumber)} className="gap-2">
+                  <Printer className="h-4 w-4" />Print
+                </Button>
+              </div>
             </div>
-            <div className="print:block">
+            <div id="pos-receipt-print">
               <POSReceipt data={receiptData} config={receiptConfig} />
             </div>
           </DialogContent>