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">

package-lock.json

@@ -34,6 +34,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-infinite-scroll-component": "^6.1.0",
+        "react-qr-code": "^2.0.18",
         "react-toastify": "^10.0.6",
         "tailwindcss": "^3.4.0",
         "typescript": "5.2.2",
@@ -7025,6 +7026,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/qr.js": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
+      "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -7083,6 +7089,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-qr-code": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.18.tgz",
+      "integrity": "sha512-v1Jqz7urLMhkO6jkgJuBYhnqvXagzceg3qJUWayuCK/c6LTIonpWbwxR1f1APGd4xrW/QcQEovNrAojbUz65Tg==",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "qr.js": "0.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-toastify": {
       "version": "10.0.6",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",

package.json

@@ -36,6 +36,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-qr-code": "^2.0.18",
     "react-toastify": "^10.0.6",
     "tailwindcss": "^3.4.0",
     "typescript": "5.2.2",