Add PDF417 barcode rendering component

Implements client-side PDF417 barcode rendering with React component. Uses useEffect to prevent hydration mismatch by generating barcodes only after component mount. Integrates barcode display in location cards. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-22 14:22:57 +01:00
parent fe980723c0
commit 371333802a
3 changed files with 103 additions and 0 deletions
--- a/app/ui/Pdf417Barcode.tsx
+++ b/app/ui/Pdf417Barcode.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { generateBarcode } from '../lib/pdf/pdf417';
+import { renderBarcode } from '../lib/pdf/renderBarcode';
+import { EncodePayment } from 'hub-3a-payment-encoder';
+
+export const Pdf417Barcode = () => {
+    const [bitmapData, setBitmapData] = useState<string | undefined>(undefined);
+
+    useEffect(() => {
+
+        const paymentParams = {
+            Iznos:"123,66",  // NOTE: use comma, not period!
+            ImePlatitelja:"Ivan Horvat",
+            AdresaPlatitelja:"Ilica 23",
+            SjedistePlatitelja:"10000 Zagreb",
+            Primatelj:"VODOOPSKRBA I ODV. D.O.O.",
+            AdresaPrimatelja:"FOLNEGOVIĆEVA 1",
+            SjedistePrimatelja:"ZAGREB",
+            IBAN:"HR8924020061100679445",
+            ModelPlacanja: "HR00",  // MUST contain "HR" prefix!
+            PozivNaBroj:"2025-05",
+            SifraNamjene:"",
+            OpisPlacanja:"Budakova Režije",
+        };
+
+        
+        const hub3a_text = EncodePayment(paymentParams);
+
+        const barcodeMatrix = generateBarcode(hub3a_text);
+        const bitmap = renderBarcode(barcodeMatrix, 2, 2);
+        setBitmapData(bitmap);
+    }, []);
+
+    // Don't render until bitmap is generated (prevents hydration mismatch)
+    if (!bitmapData) {
+        return (
+            <div style={{ width: "350px", height: "92px" }} className="flex items-center justify-center">
+                <span className="loading loading-spinner loading-lg"></span>
+            </div>
+        );
+    }
+
+    return (
+        <div>
+            <img src={bitmapData} style={{ width: "350px", height: "92px" }} />
+        </div>
+    );
+}