feat: printable receipts with barcode on payment complete

- Receipt component with thermal (80mm) and full-page layout support
- Code 128 barcode from transaction number via JsBarcode
- Store name, address, line items, totals, payment info, barcode
- Print button on sale complete screen (browser print dialog)
- Email button placeholder (disabled, ready for SMTP integration)
- @media print CSS hides everything except receipt content
- Receipt data fetched from GET /transactions/:id/receipt

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

bun.lock

@@ -34,6 +34,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
+        "jsbarcode": "^3.12.3",
         "jspdf": "^4.2.1",
         "lucide-react": "^1.7.0",
         "radix-ui": "^1.4.3",
@@ -59,7 +60,7 @@
     },
     "packages/backend": {
       "name": "@lunarfront/backend",
-      "version": "0.0.1",
+      "version": "0.1.1",
       "dependencies": {
         "@fastify/cors": "^10",
         "@fastify/jwt": "^9",
@@ -842,6 +843,8 @@
 
     "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
 
+    "jsbarcode": ["jsbarcode@3.12.3", "", {}, "sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg=="],
+
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
     "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],

packages/admin/package.json

@@ -25,6 +25,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "jsbarcode": "^3.12.3",
     "jspdf": "^4.2.1",
     "lucide-react": "^1.7.0",
     "radix-ui": "^1.4.3",

packages/admin/src/app.css

@@ -113,6 +113,14 @@ body {
   background-color: var(--muted-foreground);
 }
 
+/* Print styles — only show receipt content */
+@media print {
+  body * { visibility: hidden; }
+  .print\:block, .print\:block * { visibility: visible; }
+  .print\:block { position: absolute; left: 0; top: 0; }
+  .print\:hidden { display: none !important; }
+}
+
 /* Prevent browser autofill from overriding dark theme input colors */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,

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

@@ -1,14 +1,16 @@
 import { useState } from 'react'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { usePOSStore } from '@/stores/pos.store'
+import { api } from '@/lib/api-client'
 import { posMutations, posKeys, type Transaction } from '@/api/pos'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
-import { CheckCircle } from 'lucide-react'
+import { CheckCircle, Printer, Mail } from 'lucide-react'
 import { toast } from 'sonner'
+import { POSReceipt, printReceipt } from './pos-receipt'
 
 interface POSPaymentDialogProps {
   open: boolean
@@ -61,9 +63,40 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
 
   const QUICK_AMOUNTS = [1, 5, 10, 20, 50, 100]
 
+  // Fetch full receipt data after completion
+  const { data: receiptData } = useQuery({
+    queryKey: ['pos', 'receipt', result?.id],
+    queryFn: () => api.get<{
+      transaction: Transaction & { lineItems: { description: string; qty: number; unitPrice: string; taxAmount: string; lineTotal: string; discountAmount: string }[] }
+      company: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
+      location: { name: string; phone: string | null; email: string | null; address: { street?: string; city?: string; state?: string; zip?: string } | null }
+    }>(`/v1/transactions/${result!.id}/receipt`),
+    enabled: !!result?.id,
+  })
+
+  const [showReceipt, setShowReceipt] = useState(false)
+
   if (completed && result) {
     const changeGiven = parseFloat(result.changeGiven ?? '0')
-    const roundingAdj = parseFloat(result.roundingAdjustment ?? '0')
+
+    // Receipt print view
+    if (showReceipt && receiptData) {
+      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">
+              <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>
+            <div className="print:block">
+              <POSReceipt data={receiptData} footerText="Thank you for your business!" />
+            </div>
+          </DialogContent>
+        </Dialog>
+      )
+    }
 
     return (
       <Dialog open={open} onOpenChange={() => handleDone()}>
@@ -78,26 +111,21 @@ export function POSPaymentDialog({ open, onOpenChange, paymentMethod, transactio
                 <span>Total</span>
                 <span>${parseFloat(result.total).toFixed(2)}</span>
               </div>
-              {roundingAdj !== 0 && (
+              {paymentMethod === 'cash' && changeGiven > 0 && (
-                <div className="flex justify-between text-muted-foreground">
+                <div className="flex justify-between text-lg font-bold text-green-600">
-                  <span>Rounding</span>
+                  <span>Change Due</span>
-                  <span>{roundingAdj > 0 ? '+' : ''}{roundingAdj.toFixed(2)}</span>
+                  <span>${changeGiven.toFixed(2)}</span>
                 </div>
               )}
-              {paymentMethod === 'cash' && (
+            </div>
-                <>
+
-                  <div className="flex justify-between">
+            <div className="w-full grid grid-cols-2 gap-2">
-                    <span>Tendered</span>
+              <Button variant="outline" className="h-11 gap-2" onClick={() => setShowReceipt(true)}>
-                    <span>${parseFloat(result.amountTendered ?? '0').toFixed(2)}</span>
+                <Printer className="h-4 w-4" />Receipt
-                  </div>
+              </Button>
-                  {changeGiven > 0 && (
+              <Button variant="outline" className="h-11 gap-2" disabled>
-                    <div className="flex justify-between text-lg font-bold text-green-600">
+                <Mail className="h-4 w-4" />Email
-                      <span>Change Due</span>
+              </Button>
-                      <span>${changeGiven.toFixed(2)}</span>
-                    </div>
-                  )}
-                </>
-              )}
             </div>
 
             <Button className="w-full h-12 text-base" onClick={handleDone}>

packages/admin/src/components/pos/pos-receipt.tsx

@@ -0,0 +1,197 @@
+import { useEffect, useRef } from 'react'
+import JsBarcode from 'jsbarcode'
+
+interface ReceiptLineItem {
+  description: string
+  qty: number
+  unitPrice: string
+  taxAmount: string
+  lineTotal: string
+  discountAmount?: string
+}
+
+interface ReceiptData {
+  transaction: {
+    transactionNumber: string
+    transactionType: string
+    status: string
+    subtotal: string
+    discountTotal: string
+    taxTotal: string
+    total: string
+    paymentMethod: string | null
+    amountTendered: string | null
+    changeGiven: string | null
+    roundingAdjustment: string
+    completedAt: string | null
+    createdAt: string
+    lineItems: ReceiptLineItem[]
+  }
+  company: {
+    name: string
+    phone: string | null
+    email: string | null
+    address: { street?: string; city?: string; state?: string; zip?: string } | null
+  }
+  location: {
+    name: string
+    phone: string | null
+    email: string | null
+    address: { street?: string; city?: string; state?: string; zip?: string } | null
+  }
+}
+
+interface POSReceiptProps {
+  data: ReceiptData
+  size?: 'thermal' | 'full'
+  footerText?: string
+}
+
+export function POSReceipt({ data, size = 'thermal', footerText }: POSReceiptProps) {
+  const barcodeRef = useRef<SVGSVGElement>(null)
+  const { transaction: txn, company, location } = data
+  const isThermal = size === 'thermal'
+
+  useEffect(() => {
+    if (barcodeRef.current) {
+      JsBarcode(barcodeRef.current, txn.transactionNumber, {
+        format: 'CODE128',
+        width: isThermal ? 1.5 : 2,
+        height: isThermal ? 40 : 50,
+        displayValue: true,
+        fontSize: isThermal ? 10 : 12,
+        margin: 4,
+      })
+    }
+  }, [txn.transactionNumber, isThermal])
+
+  const date = new Date(txn.completedAt ?? txn.createdAt)
+  const subtotal = parseFloat(txn.subtotal)
+  const discountTotal = parseFloat(txn.discountTotal)
+  const taxTotal = parseFloat(txn.taxTotal)
+  const total = parseFloat(txn.total)
+  const rounding = parseFloat(txn.roundingAdjustment)
+  const tendered = txn.amountTendered ? parseFloat(txn.amountTendered) : null
+  const change = txn.changeGiven ? parseFloat(txn.changeGiven) : null
+
+  const addr = location.address ?? company.address
+  const phone = location.phone ?? company.phone
+
+  return (
+    <div
+      className={`bg-white text-black font-mono ${isThermal ? 'w-[300px] text-[11px]' : 'w-full max-w-lg text-sm'} mx-auto`}
+      style={{ lineHeight: isThermal ? '1.4' : '1.6' }}
+    >
+      {/* Store header */}
+      <div className="text-center pb-2 border-b border-dashed border-gray-400">
+        <div className={`font-bold ${isThermal ? 'text-sm' : 'text-lg'}`}>{company.name}</div>
+        {location.name !== company.name && (
+          <div className="text-gray-600">{location.name}</div>
+        )}
+        {addr && (
+          <>
+            {addr.street && <div>{addr.street}</div>}
+            {(addr.city || addr.state || addr.zip) && (
+              <div>{[addr.city, addr.state].filter(Boolean).join(', ')} {addr.zip}</div>
+            )}
+          </>
+        )}
+        {phone && <div>{phone}</div>}
+      </div>
+
+      {/* Transaction info */}
+      <div className="py-2 border-b border-dashed border-gray-400">
+        <div className="flex justify-between">
+          <span>{txn.transactionNumber}</span>
+          <span>{txn.transactionType.replace('_', ' ')}</span>
+        </div>
+        <div className="flex justify-between text-gray-600">
+          <span>{date.toLocaleDateString()}</span>
+          <span>{date.toLocaleTimeString()}</span>
+        </div>
+      </div>
+
+      {/* Line items */}
+      <div className="py-2 border-b border-dashed border-gray-400">
+        {txn.lineItems.map((item, i) => (
+          <div key={i} className="py-0.5">
+            <div className="flex justify-between">
+              <span className="flex-1 pr-2">{item.description}</span>
+              <span className="tabular-nums">${parseFloat(item.lineTotal).toFixed(2)}</span>
+            </div>
+            {(item.qty > 1 || parseFloat(item.discountAmount ?? '0') > 0) && (
+              <div className="text-gray-500 pl-2">
+                {item.qty > 1 && <span>{item.qty} x ${parseFloat(item.unitPrice).toFixed(2)}</span>}
+                {parseFloat(item.discountAmount ?? '0') > 0 && (
+                  <span className="ml-2">disc -${parseFloat(item.discountAmount!).toFixed(2)}</span>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Totals */}
+      <div className="py-2 border-b border-dashed border-gray-400">
+        <div className="flex justify-between">
+          <span>Subtotal</span>
+          <span className="tabular-nums">${subtotal.toFixed(2)}</span>
+        </div>
+        {discountTotal > 0 && (
+          <div className="flex justify-between">
+            <span>Discount</span>
+            <span className="tabular-nums">-${discountTotal.toFixed(2)}</span>
+          </div>
+        )}
+        <div className="flex justify-between">
+          <span>Tax</span>
+          <span className="tabular-nums">${taxTotal.toFixed(2)}</span>
+        </div>
+        {rounding !== 0 && (
+          <div className="flex justify-between text-gray-600">
+            <span>Rounding</span>
+            <span className="tabular-nums">{rounding > 0 ? '+' : ''}{rounding.toFixed(2)}</span>
+          </div>
+        )}
+        <div className={`flex justify-between font-bold ${isThermal ? 'text-sm' : 'text-base'} pt-1`}>
+          <span>TOTAL</span>
+          <span className="tabular-nums">${total.toFixed(2)}</span>
+        </div>
+      </div>
+
+      {/* Payment */}
+      <div className="py-2 border-b border-dashed border-gray-400">
+        <div className="flex justify-between">
+          <span>Payment</span>
+          <span className="capitalize">{txn.paymentMethod?.replace('_', ' ') ?? 'N/A'}</span>
+        </div>
+        {tendered !== null && (
+          <div className="flex justify-between">
+            <span>Tendered</span>
+            <span className="tabular-nums">${tendered.toFixed(2)}</span>
+          </div>
+        )}
+        {change !== null && change > 0 && (
+          <div className="flex justify-between font-bold">
+            <span>Change</span>
+            <span className="tabular-nums">${change.toFixed(2)}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Barcode */}
+      <div className="flex justify-center py-3">
+        <svg ref={barcodeRef} />
+      </div>
+
+      {/* Footer */}
+      {footerText && (
+        <div className="text-center text-gray-500 pb-2">{footerText}</div>
+      )}
+    </div>
+  )
+}
+
+export function printReceipt() {
+  window.print()
+}