Refactor: Complete barcodeImage removal and hub3aText migration

This commit completes the migration from storing bitmap barcodes to using
decoded HUB-3A text strings, removing all legacy code while maintaining
backward compatibility during the transition period.

Database & Server Actions:
- billActions: Removed commented legacy barcodeImage code
- locationActions: Updated field references in projections
- monthActions: Use hub3aText when copying bills to new months
- printActions: Support both hub3aText and barcodeImage during migration
  - Added @deprecated annotation to barcodeImage field
  - Filter includes bills with either field
  - Pass both fields to support gradual migration

Barcode Decoder:
- Removed barcodeImage field from DecodeResult type
- Deleted copyBarcodeImage() function (58 lines)
  - No longer generating bitmaps during decode
  - Barcodes now generated on-demand from hub3aText
- Cleaner separation: decoder extracts text, component renders barcode

UI Components:
- Pdf417Barcode: Added optional className prop for styling flexibility
  - Removed unnecessary wrapper div
  - Conditional styling (use className or default dimensions)
- PrintPreview: Use Pdf417Barcode component with fallback to legacy barcodeImage
- ViewBillCard: Major cleanup and migration support
  - Removed unused imports (React, updateOrAddBill, useLocale)
  - Removed unused middleware function
  - Removed unused variables and hidden input
  - Prefer hub3aText with Pdf417Barcode, fallback to barcodeImage
  - Clear legacy support comments

Migration Strategy:
All rendering code now follows the pattern:
1. Prefer hub3aText (new field) when available
2. Fallback to barcodeImage (legacy field) if needed
3. Clear comments marking legacy support code
4. Allows gradual migration without breaking existing bills

Benefits:
- More efficient storage (text vs base64 bitmap)
- Barcodes generated on-demand (not stored)
- Cleaner, more maintainable code
- Consistent use of Pdf417Barcode component
- Removed ~60 lines of unused code

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

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

app/ui/Pdf417Barcode.tsx

@@ -5,7 +5,7 @@ import { generateBarcode } from '../lib/pdf/pdf417';
 import { renderBarcode } from '../lib/pdf/renderBarcode';
 import { EncodePayment, PaymentParams } from 'hub-3a-payment-encoder';
     
-export const Pdf417Barcode:FC<{hub3aText:string}> = ({hub3aText: hub3a_text}) => {
+export const Pdf417Barcode:FC<{hub3aText:string, className?: string}> = ({hub3aText: hub3a_text, className}) => {
     const [bitmapData, setBitmapData] = useState<string | undefined>(undefined);
 
     useEffect(() => {
@@ -24,8 +24,6 @@ export const Pdf417Barcode:FC<{hub3aText:string}> = ({hub3aText: hub3a_text}) =>
     }
 
     return (
-        <div>
-            <img src={bitmapData} style={{ width: "350px", height: "92px" }} />
-        </div>
+        <img src={bitmapData} className={className} style={className ? undefined : { width: "350px", height: "92px" }} />
     );
 }

app/ui/PrintPreview.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { PrintBarcodeData } from '../lib/actions/printActions';
+import { Pdf417Barcode } from './Pdf417Barcode';
 
 export interface PrintPreviewProps {
   data: PrintBarcodeData[];
@@ -141,12 +142,21 @@ export const PrintPreview: React.FC<PrintPreviewProps> = ({ data, year, month, t
                 </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 print-barcode-img"
-                      style={{ maxWidth: '270px' }}
-                    />
+                    {
+                    item.hub3aText ?
+                        <Pdf417Barcode hub3aText={item.hub3aText} className="max-h-28 w-auto border border-gray-300 rounded print-barcode-img" />
+                        : (
+                          // LEGACY SUPPORT ... untill all bills have been migrated
+                          item.barcodeImage ?
+                            <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 print-barcode-img"
+                              style={{ maxWidth: '270px' }}
+                            /> : null
+                        )
+                    }
+
                   </div>
                 </td>
               </tr>

app/ui/ViewBillCard.tsx

@@ -2,20 +2,11 @@
 
 import { DocumentIcon, CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
 import { Bill, BillingLocation } from "../lib/db-types";
-import React, { FC } from "react";
-import { updateOrAddBill } from "../lib/actions/billActions";
+import { FC } from "react";
 import Link from "next/link";
 import { formatYearMonth } from "../lib/format";
-import { useLocale, useTranslations } from "next-intl";
-
-// 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
-const updateOrAddBillMiddleware = (locationId: string, billId:string|undefined, billYear:number|undefined, billMonth:number|undefined, prevState:any, formData: FormData) => {
-    // URL encode the file name of the attachment so it is correctly sent to the server
-    const billAttachment = formData.get('billAttachment') as File;
-    formData.set('billAttachment', billAttachment, encodeURIComponent(billAttachment.name));
-    return updateOrAddBill(locationId, billId, billYear, billMonth, prevState, formData);
-}
+import { useTranslations } from "next-intl";
+import { Pdf417Barcode } from "./Pdf417Barcode";
 
 export interface ViewBillCardProps {
     location: BillingLocation,
@@ -25,11 +16,9 @@ export interface ViewBillCardProps {
 export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
 
     const t = useTranslations("bill-edit-form");
-    const locale = useLocale();
 
-    const { _id: billID, name, paid, attachment, notes, payedAmount, barcodeImage } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
-
-    const { yearMonth:{year: billYear, month: billMonth}, _id: locationID } = location;
+    const { _id: billID, name, paid, attachment, notes, payedAmount, barcodeImage, hub3aText } = bill ?? { _id:undefined, name:"", paid:false, notes:"" };
+    const { _id: locationID } = location;
 
 
     return(
@@ -48,7 +37,6 @@ export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
                 <span className="font-bold uppercase">{t("payed-amount")}</span>
                 <span className="text-right inline-block grow">{payedAmount ? payedAmount/100 : ""}</span>
             </p>
-            <input type="hidden" name="barcodeImage" value={barcodeImage} />
             {
                 notes ?
                         <span className="textarea textarea-bordered max-w-[400px] w-full grow">
@@ -71,13 +59,23 @@ export const ViewBillCard:FC<ViewBillCardProps> = ({ location, bill }) => {
                 : null
             }
             {
-                barcodeImage ?
-                <div className="p-1">
-                    <label className="label p-2 grow bg-white">
-                        <img src={barcodeImage} className="grow sm:max-w-[350px]" alt="2D Barcode" />
-                    </label>
-                    <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
-                </div> : null
+                hub3aText ?
+                    <div className="form-control p-1">
+                        <label className="cursor-pointer label p-2 grow bg-white">
+                            <Pdf417Barcode hub3aText={hub3aText} />
+                        </label>
+                        <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
+                    </div> : 
+                    (
+                        // LEGACY SUPPORT ... untill all bills have been migrated
+                        barcodeImage ?
+                        <div className="p-1">
+                            <label className="label p-2 grow bg-white">
+                                <img src={barcodeImage} className="grow sm:max-w-[350px]" alt="2D Barcode" />
+                            </label>
+                            <p className="text-xs my-1">{t.rich('barcode-disclaimer', { br: () => <br /> })}</p>
+                        </div> : null
+                    )
             }
 
             <div className="text-right">