feat: implement US-3 - enhance print layout with professional table design

- Add comprehensive i18n support for all print preview content
- Fix next-intl context error by moving translations to server component
- Implement professional 3-column table layout with proper styling
- Add multilingual table headers (EN: #, Bill Information, 2D Barcode | HR: #, Informacije o Računu, 2D Barkod)
- Center-align index column header and optimize barcode sizing
- Hide print button and header from actual print output
- Fix hydration errors with proper date handling
- Enhanced barcode display with proper padding and sizing

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

Co-Authored-By: Claude <noreply@anthropic.com>

app/[locale]/print/[year]/[month]/page.tsx

@@ -1,6 +1,7 @@
 import { fetchBarcodeDataForPrint } from '@/app/lib/actions/printActions';
 import { notFound } from 'next/navigation';
 import { PrintPreview } from '@/app/ui/PrintPreview';
+import { getTranslations } from 'next-intl/server';
 
 interface PrintPageProps {
   params: { 
@@ -20,7 +21,7 @@ export default async function PrintPage({ params }: PrintPageProps) {
   }
 
   let printData;
-  
+
   try {
     printData = await fetchBarcodeDataForPrint(year, month);
   } catch (error) {
@@ -28,6 +29,19 @@ export default async function PrintPage({ params }: PrintPageProps) {
     notFound();
   }
 
+  // Get translations for the current locale
+  const t = await getTranslations("home-page.print-preview");
+  const translations = {
+    title: t("title"),
+    barcodesFound: t("barcodes-found"),
+    barcodeSingular: t("barcode-singular"),
+    printButton: t("print-button"),
+    printFooter: t("print-footer"),
+    tableHeaderIndex: t("table-header-index"),
+    tableHeaderBillInfo: t("table-header-bill-info"),
+    tableHeaderBarcode: t("table-header-barcode")
+  };
+
   // If no barcode data found, show empty state
   if (!printData || printData.length === 0) {
     return (
@@ -42,5 +56,5 @@ export default async function PrintPage({ params }: PrintPageProps) {
     );
   }
 
-  return <PrintPreview data={printData} year={year} month={month} />;
+  return <PrintPreview data={printData} year={year} month={month} translations={translations} />;
 }

app/ui/PrintPreview.tsx

@@ -6,58 +6,93 @@ export interface PrintPreviewProps {
   data: PrintBarcodeData[];
   year: number;
   month: number;
+  translations: {
+    title: string;
+    barcodesFound: string;
+    barcodeSingular: string;
+    printButton: string;
+    printFooter: string;
+    tableHeaderIndex: string;
+    tableHeaderBillInfo: string;
+    tableHeaderBarcode: string;
+  };
 }
 
-export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month }) => {
+export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, translations }) => {
+
   return (
-    <div className="min-h-screen p-4">
-      <h1 className="text-2xl font-bold mb-4">
-        Print Preview - {year}-{month.toString().padStart(2, '0')}
-      </h1>
-      
-      <div className="mb-4">
-        <p>Found {data.length} barcode(s) for printing</p>
+    <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">
+          {translations.title}
+        </h1>
+        <p className="text-lg text-gray-600 mb-4">
+          {year}-{month.toString().padStart(2, '0')} • {data.length} {data.length === 1 ? translations.barcodeSingular : translations.barcodesFound}
+        </p>
+        <button
+          onClick={() => window.print()}
+          className="btn btn-primary"
+        >
+          🖨️ {translations.printButton}
+        </button>
       </div>
 
-      {/* Basic table structure - will be enhanced in US-3 */}
-      <table className="w-full border-collapse border border-gray-300">
-        <thead>
-          <tr>
-            <th className="border border-gray-300 p-2">Index</th>
-            <th className="border border-gray-300 p-2">Bill Info</th>
-            <th className="border border-gray-300 p-2">Barcode</th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((item, index) => (
-            <tr key={`${item.locationName}-${item.billName}`}>
-              <td className="border border-gray-300 p-2">{index + 1}</td>
-              <td className="border border-gray-300 p-2">
-                <div>
-                  <div className="font-medium">{item.yearMonth}</div>
-                  <div>{item.locationName}</div>
-                  <div>{item.billName}</div>
-                </div>
-              </td>
-              <td className="border border-gray-300 p-2">
-                <img 
-                  src={item.barcodeImage.startsWith('data:') ? item.barcodeImage : `data:image/png;base64,${item.barcodeImage}`} 
-                  alt={`Barcode for ${item.billName}`}
-                  className="max-w-full h-auto"
-                />
-              </td>
+      {/* Print content */}
+      <div className="p-6">
+        <table className="w-full border-collapse border-2 border-gray-800">
+          <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">
+                {translations.tableHeaderIndex}
+              </th>
+              <th className="border-2 border-gray-800 px-3 py-2 text-left font-bold text-sm">
+                {translations.tableHeaderBillInfo}
+              </th>
+              <th className="border-2 border-gray-800 px-3 py-2 text-center font-bold text-sm w-64">
+                {translations.tableHeaderBarcode}
+              </th>
             </tr>
-          ))}
-        </tbody>
-      </table>
-      
-      {/* Print button - will be enhanced in US-4 */}
-      <button 
-        onClick={() => window.print()} 
-        className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-      >
-        Print
-      </button>
+          </thead>
+          <tbody>
+            {data.map((item, index) => (
+              <tr key={`${item.locationName}-${item.billName}`} className="hover:bg-gray-50">
+                <td className="border-2 border-gray-800 px-3 py-4 text-center font-mono text-sm font-medium">
+                  {(index + 1).toString().padStart(2, '0')}
+                </td>
+                <td className="border-2 border-gray-800 px-3 py-4">
+                  <div className="space-y-1">
+                    <div className="font-bold text-sm text-gray-900">
+                      📅 {item.yearMonth}
+                    </div>
+                    <div className="font-medium text-sm text-gray-800">
+                      🏠 {item.locationName}
+                    </div>
+                    <div className="text-sm text-gray-700">
+                      📋 {item.billName}
+                    </div>
+                  </div>
+                </td>
+                <td className="border-2 border-gray-800 px-3 py-1.5 text-center">
+                  <div className="flex justify-center items-center">
+                    <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"
+                      style={{ maxWidth: '270px' }}
+                    />
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+
+        {/* Print footer - only visible when printing */}
+        <div className="mt-6 text-center text-xs text-gray-500 hidden print:block">
+          <p>{translations.printFooter.replace('{date}', new Date().toLocaleDateString())}</p>
+        </div>
+      </div>
     </div>
   );
 };