From 9a02124e18b1c1da1917800a28dd125daedf98bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=8D?= <nikola.derezic@gmail.com>
Date: Sun, 14 Sep 2025 21:44:04 +0200
Subject: [PATCH] feat: implement US-4 - complete print optimization with CSS
 media queries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add comprehensive CSS print media queries for A4 paper optimization
- Implement 69.6mm barcode width specification (20% larger than original 58mm)
- Apply B&W print color optimization forcing all elements to black/white
- Add page break handling to prevent table rows from splitting across pages
- Fix table cropping issue by removing excessive width and reducing container padding
- Optimize print layout with zero padding for maximum table space utilization
- Ensure header/button elements hidden from print output with proper CSS

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/ui/PrintPreview.tsx | 70 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 65 insertions(+), 5 deletions(-)

diff --git a/app/ui/PrintPreview.tsx b/app/ui/PrintPreview.tsx
index ff38b52..b96be36 100644
--- a/app/ui/PrintPreview.tsx
+++ b/app/ui/PrintPreview.tsx
@@ -21,7 +21,66 @@ export interface PrintPreviewProps {
 export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, translations }) => {
 
   return (
-    <div className="min-h-screen bg-white">
+    <>
+      {/* Print-specific CSS styles */}
+      <style jsx>{`
+        @media print {
+          @page {
+            size: A4;
+            margin: 1in;
+          }
+
+          body {
+            -webkit-print-color-adjust: exact !important;
+            color-adjust: exact !important;
+            print-color-adjust: exact !important;
+          }
+
+          .print-barcode-img {
+            width: 69.6mm !important;
+            max-width: 69.6mm !important;
+            height: auto !important;
+            max-height: none !important;
+          }
+
+          .print-table {
+            page-break-inside: avoid;
+          }
+
+          .print-container {
+            padding: 0 !important;
+          }
+
+          .print-table tr {
+            page-break-inside: avoid;
+            page-break-after: auto;
+          }
+
+          .print-table thead {
+            display: table-header-group;
+          }
+
+          /* Optimize for B&W printing */
+          * {
+            color: black !important;
+            background: white !important;
+            box-shadow: none !important;
+            text-shadow: none !important;
+          }
+
+          .print-table th,
+          .print-table td {
+            border: 2px solid black !important;
+            background: white !important;
+          }
+
+          .print-table thead tr {
+            background: #f5f5f5 !important;
+          }
+        }
+      `}</style>
+
+      <div className="min-h-screen bg-white">
       {/* Header section - hidden in print */}
       <div className="p-6 border-b border-gray-200 print:hidden">
         <h1 className="text-3xl font-bold text-gray-900 mb-2">
@@ -39,8 +98,8 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
       </div>
 
       {/* Print content */}
-      <div className="p-6">
-        <table className="w-full border-collapse border-2 border-gray-800">
+      <div className="p-6 print-container">
+        <table className="w-full border-collapse border-2 border-gray-800 print-table">
           <thead>
             <tr className="bg-gray-100">
               <th className="border-2 border-gray-800 px-3 py-2 text-center font-bold text-sm w-16">
@@ -78,7 +137,7 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
                     <img
                       src={item.barcodeImage.startsWith('data:') ? item.barcodeImage : `data:image/png;base64,${item.barcodeImage}`}
                       alt={`Barcode for ${item.billName}`}
-                      className="max-h-28 w-auto border border-gray-300 rounded"
+                      className="max-h-28 w-auto border border-gray-300 rounded print-barcode-img"
                       style={{ maxWidth: '270px' }}
                     />
                   </div>
@@ -93,6 +152,7 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
           <p>{translations.printFooter.replace('{date}', new Date().toLocaleDateString())}</p>
         </div>
       </div>
-    </div>
+      </div>
+    </>
   );
 };
\ No newline at end of file