Refactor: Replace barcodeImage with hub3aText in BillEditForm

- Changed from storing base64-encoded bitmap to decoded HUB-3A payment string
- Implemented migration logic to convert legacy barcodeImage to hub3aText on component mount
- Updated state management to use hub3aText instead of barcodeImage
- Replaced image display with Pdf417Barcode component for consistent rendering
- Added error handling for migration promise
- Updated useEffect dependencies to prevent stale closures
- More efficient storage and easier to work with payment data going forward

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

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

app/ui/BillEditForm.tsx

@@ -2,13 +2,14 @@
 
 import { DocumentIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Bill, BilledTo, BillingLocation } from "../lib/db-types";
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
 import { useFormState } from "react-dom";
 import { updateOrAddBill } from "../lib/actions/billActions";
 import Link from "next/link";
 import { formatYearMonth } from "../lib/format";
-import { DecodeResult, findDecodePdf417 } from "../lib/pdf/barcodeDecoder";
+import { decodeFromImage, DecodeResult, findDecodePdf417 } from "../lib/pdf/barcodeDecoder";
 import { useLocale, useTranslations } from "next-intl";
+import { Pdf417Barcode } from "./Pdf417Barcode";
 
 // Next.js does not encode an utf-8 file name correctly when sending a form with a file attachment
 // This is a workaround for that
@@ -29,7 +30,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
     const t = useTranslations("bill-edit-form");
     const locale = useLocale();
 
-    const { _id: billID, name, paid, billedTo = BilledTo.Tenant, attachment, notes, payedAmount: initialPayedAmount, barcodeImage: initialBarcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
+    const { _id: billID, name, paid, billedTo = BilledTo.Tenant, attachment, notes, payedAmount: initialPayedAmount } = bill ?? { _id: undefined, name: "", paid: false, notes: "" };
 
     const { yearMonth: { year: billYear, month: billMonth }, _id: locationID } = location;
 
@@ -42,9 +43,29 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
     const [isPaid, setIsPaid] = React.useState<boolean>(paid);
     const [billedToValue, setBilledToValue] = React.useState<BilledTo>(billedTo);
     const [payedAmount, setPayedAmount] = React.useState<string>(initialPayedAmount ? `${initialPayedAmount / 100}` : "");
-    const [ barcodeImage, setBarcodeImage ] = React.useState<string | undefined>(initialBarcodeImage);
+
+    // legacy support - to be removed
+    const [hub3aText, setHub3aText] = React.useState<string | undefined>(bill?.hub3aText);
     const [barcodeResults, setBarcodeResults] = React.useState<Array<DecodeResult> | null>(null);
 
+    useEffect(() => {
+        // migrating the legacy `barcodeImage` field to `hub3aText`
+        // by converting it to `hub3aText`
+        if (!hub3aText && bill?.barcodeImage) {
+            decodeFromImage(bill.barcodeImage).then(results => {
+                if (results && results.length > 0) {
+                    const {
+                        hub3aText: decodedHub3aText,
+                    } = results[0];
+
+                    setHub3aText(decodedHub3aText);
+                }
+            }).catch(error => {
+                console.error('Failed to migrate barcodeImage to hub3aText:', error);
+            });
+        }
+    }, [bill?.barcodeImage, hub3aText]);
+
 
     const billedTo_handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setBilledToValue(event.target.value as BilledTo);
@@ -62,7 +83,6 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
         setIsScanningPDF(true);
 
         setPayedAmount("");
-        setBarcodeImage(undefined);
         setBarcodeResults(null);
 
         const results = await findDecodePdf417(event);
@@ -71,18 +91,17 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
 
             if (results.length === 1) {
                 const {
-                    barcodeImage,
+                    hub3aText,
                     billInfo
                 } = results[0];
 
                 setPayedAmount(`${billInfo.amount / 100}`);
-                setBarcodeImage(barcodeImage);
+                setHub3aText(hub3aText);
             } else {
                 setPayedAmount("");
-                setBarcodeImage(undefined);
                 setBarcodeResults(results);
+                setHub3aText(undefined);
             }
-
         }
 
         setIsScanningPDF(false);
@@ -90,7 +109,7 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
 
     const handleBarcodeSelectClick = (result: DecodeResult) => {
         setPayedAmount(`${result.billInfo.amount / 100}`);
-        setBarcodeImage(result.barcodeImage);
+        setHub3aText(result.hub3aText);
         setBarcodeResults(null);
     }
 
@@ -188,12 +207,12 @@ export const BillEditForm:FC<BillEditFormProps> = ({ location, bill }) => {
                             ))}
                     </div>
 
-                <input type="hidden" name="barcodeImage" value={barcodeImage} />
+                    <input type="hidden" name="hub3aText" value={hub3aText} />
                     {
-                    barcodeImage ?
+                        hub3aText ?
                             <div className="form-control p-1">
                                 <label className="cursor-pointer label p-2 grow bg-white">
-                            <img src={barcodeImage} className="grow sm:max-w-[350px]" alt="2D Barcode" />
+                                    <Pdf417Barcode hub3aText={hub3aText} />
                                 </label>
                                 <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
                             </div> : null