feat: add QR code for Revolut payment link

- Install react-qr-code package for QR code generation
- Replace placeholder with actual QR code component in ViewLocationCard
- QR code displays Revolut payment URL with amount, currency, and profile
- Center-aligned QR code (200x200px) in white container with border
- Extract revolutPaymentUrl to single variable for reuse in QR code and link

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

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

app/ui/ViewLocationCard.tsx

@@ -11,6 +11,7 @@ import { EncodePayment, PaymentParams } from "hub-3a-payment-encoder";
 import Link from "next/link";
 import { DocumentIcon } from "@heroicons/react/24/outline";
 import { uploadUtilBillsProofOfPayment } from "../lib/actions/locationActions";
+import QRCode from "react-qr-code";
 
 export interface ViewLocationCardProps {
     location: BillingLocation;
@@ -146,22 +147,26 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
                     : null
                 }
                 {
-                    userSettings?.enableRevolutPayment && tenantPaymentMethod === "revolut" ?
-                    <>
-                        <p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
-                        <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
-                            ToDo: QR Code goes here
-                        </label>
-                        <p className="text-center mt-1 mb-3">
-                            <Link
-                                href={`https://revolut.me/${userSettings.ownerRevolutProfileName?.replace('@', '')}?amount=${(monthlyExpense / 100).toFixed(2)}&currency=${userSettings.currency}}`}
-                                target="_blank"
-                                className="text-blue-600 underline"
-                            >
-                                {t("revolut-link-text")}
-                            </Link>
-                        </p>
-                    </>
+                    userSettings?.enableRevolutPayment && tenantPaymentMethod === "revolut" ? (() => {
+                        const revolutPaymentUrl = `https://revolut.me/${userSettings.ownerRevolutProfileName?.replace('@', '')}?amount=${(monthlyExpense / 100).toFixed(2)}&currency=${userSettings.currency}}`;
+                        return (
+                            <>
+                                <p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
+                                <div className="flex justify-center p-4 bg-white border border-gray-300 rounded-box">
+                                    <QRCode value={revolutPaymentUrl} size={200} />
+                                </div>
+                                <p className="text-center mt-1 mb-3">
+                                    <Link
+                                        href={revolutPaymentUrl}
+                                        target="_blank"
+                                        className="text-blue-600 underline"
+                                    >
+                                        {t("revolut-link-text")}
+                                    </Link>
+                                </p>
+                            </>
+                        );
+                    })()
                     : null
                 }
                 <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-0 mt-2">