feat: migrate PDF417 barcode generation to zxing-wasm/writer

Replace custom PDF417 generation (generateBarcode/renderBarcode) with zxing-wasm's writeBarcode for improved reliability and smaller codebase. Updated all 4 components (BillEditForm, PrintPreview, ViewBillCard, ViewLocationCard) to use new Pdf417BarcodeWasm component with ecLevel 5 for error correction.

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-12-20 08:46:38 +01:00
parent 9679246f62
commit b8afb2ef0d
7 changed files with 86 additions and 22 deletions

View File

@@ -0,0 +1,76 @@
'use client';
import { useState, useEffect, FC } from 'react';
import { writeBarcode, prepareZXingModule, type WriterOptions } from 'zxing-wasm/writer';
// Configure WASM file location for writer
prepareZXingModule({
overrides: {
locateFile: (path, prefix) => {
if (path.endsWith('.wasm')) {
return window.location.origin + '/zxing_writer.wasm';
}
return prefix + path;
}
}
});
export const Pdf417BarcodeWasm: FC<{ hub3aText: string, className?: string }> = ({ hub3aText, className }) => {
const [barcodeDataUrl, setBarcodeDataUrl] = useState<string | undefined>(undefined);
const [error, setError] = useState<string | undefined>(undefined);
useEffect(() => {
const generateBarcode = async () => {
try {
setError(undefined);
setBarcodeDataUrl(undefined);
const writerOptions: WriterOptions = {
format: 'PDF417',
ecLevel: "5",
scale: 2,
};
const result = await writeBarcode(hub3aText, writerOptions);
// Convert PNG blob to data URL
const reader = new FileReader();
reader.onloadend = () => {
setBarcodeDataUrl(reader.result as string);
};
reader.readAsDataURL(result.image as Blob);
} catch (err) {
console.error('Failed to generate PDF417 barcode:', err);
setError('Failed to generate barcode');
}
};
if (hub3aText) {
generateBarcode();
}
}, [hub3aText]);
// Show error state
if (error) {
return (
<div style={{ width: "350px", height: "92px" }} className="flex items-center justify-center">
<span className="text-error text-sm">{error}</span>
</div>
);
}
// Don't render until barcode is generated (prevents hydration mismatch)
if (!barcodeDataUrl) {
return (
<div style={{ width: "350px", height: "92px" }} className="flex items-center justify-center">
<span className="loading loading-spinner loading-lg"></span>
</div>
);
}
return (
// eslint-disable-next-line @next/next/no-img-element
<img src={barcodeDataUrl} alt="PDF417 Barcode" className={className} />
);
}