From 4f96a018cdfe2cde17be0dd0ab04ee7f2ca5d0e7 Mon Sep 17 00:00:00 2001
From: THE-CHEMIST <joashgideon02@gmail.com>
Date: Mon, 27 Apr 2026 18:39:14 +0000
Subject: [PATCH] feat: add QR code generation for vaccination records

- Add QRCodeModal component using qrcode library
- Add 'Show QR' button to each NFTCard
- Wire up PatientDashboard to show modal with verify URL
- QR encodes /verify?wallet=G...&token=TOKEN_ID
- Support PNG download from modal
- Fix pre-existing syntax error in RecordDetailModal
---
 frontend/package.json                         |  9 +--
 frontend/src/components/NFTCard.jsx           | 16 +++++-
 frontend/src/components/QRCodeModal.jsx       | 57 +++++++++++++++++++
 frontend/src/components/RecordDetailModal.jsx |  2 +-
 frontend/src/pages/PatientDashboard.jsx       | 17 +++++-
 5 files changed, 94 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/QRCodeModal.jsx

diff --git a/frontend/package.json b/frontend/package.json
index 6341394..69564a8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,13 +3,14 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0",
     "@stellar/freighter-api": "^2.0.0",
     "@stellar/stellar-sdk": "^12.0.0",
     "i18next": "^23.11.5",
-    "react-i18next": "^14.1.2"
+    "qrcode": "^1.5.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.2",
+    "react-router-dom": "^6.22.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
diff --git a/frontend/src/components/NFTCard.jsx b/frontend/src/components/NFTCard.jsx
index a559bfa..d2721e2 100644
--- a/frontend/src/components/NFTCard.jsx
+++ b/frontend/src/components/NFTCard.jsx
@@ -1,6 +1,6 @@
 import CopyButton from './CopyButton';
 
-export default function NFTCard({ record, onClick }) {
+export default function NFTCard({ record, onClick, onShowQR }) {
   const { t } = useTranslation();
 
   return (
@@ -39,6 +39,20 @@ export default function NFTCard({ record, onClick }) {
       <p style={{ color: '#94a3b8', fontSize: '0.8rem', marginTop: '0.25rem' }}>
         Issuer: {record.issuer?.slice(0, 8)}…{record.issuer?.slice(-4)}
       </p>
+      {onShowQR && (
+        <button
+          onClick={(e) => { e.stopPropagation(); onShowQR(record); }}
+          aria-label={`Show QR code for ${record.vaccine_name} token ${record.token_id}`}
+          style={{
+            marginTop: '0.75rem', padding: '0.35rem 0.9rem',
+            background: '#0f172a', color: '#38bdf8',
+            border: '1px solid #38bdf8', borderRadius: 6,
+            cursor: 'pointer', fontSize: '0.8rem',
+          }}
+        >
+          Show QR
+        </button>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/components/QRCodeModal.jsx b/frontend/src/components/QRCodeModal.jsx
new file mode 100644
index 0000000..930c3d4
--- /dev/null
+++ b/frontend/src/components/QRCodeModal.jsx
@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+import QRCode from 'qrcode';
+
+export default function QRCodeModal({ url, onClose }) {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      QRCode.toCanvas(canvasRef.current, url, { width: 256, margin: 2 });
+    }
+  }, [url]);
+
+  const handleDownload = () => {
+    const link = document.createElement('a');
+    link.download = 'vaccination-qr.png';
+    link.href = canvasRef.current.toDataURL('image/png');
+    link.click();
+  };
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label="Vaccination QR Code"
+      onClick={onClose}
+      style={{
+        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000,
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          background: '#1e293b', borderRadius: 12, padding: '1.5rem',
+          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem',
+        }}
+      >
+        <h3 style={{ color: '#e2e8f0', margin: 0 }}>Vaccination QR Code</h3>
+        <canvas ref={canvasRef} style={{ borderRadius: 8 }} />
+        <div style={{ display: 'flex', gap: '0.75rem' }}>
+          <button
+            onClick={handleDownload}
+            style={{ padding: '0.5rem 1.25rem', background: '#0ea5e9', color: '#fff', border: 'none', borderRadius: 8, cursor: 'pointer' }}
+          >
+            Download PNG
+          </button>
+          <button
+            onClick={onClose}
+            style={{ padding: '0.5rem 1.25rem', background: '#334155', color: '#e2e8f0', border: 'none', borderRadius: 8, cursor: 'pointer' }}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/RecordDetailModal.jsx b/frontend/src/components/RecordDetailModal.jsx
index eab7a9f..7a0d20b 100644
--- a/frontend/src/components/RecordDetailModal.jsx
+++ b/frontend/src/components/RecordDetailModal.jsx
@@ -88,7 +88,7 @@ export default function RecordDetailModal({ record, onClose }) {
               <CopyButton text={record.tx_hash} label="transaction hash" />
             </p>
           </div>
-        ))}
+        )}
         <div style={{ marginTop: '1.5rem' }}>
           {explorerUrl ? (
             <a
diff --git a/frontend/src/pages/PatientDashboard.jsx b/frontend/src/pages/PatientDashboard.jsx
index f3b9864..f41791e 100644
--- a/frontend/src/pages/PatientDashboard.jsx
+++ b/frontend/src/pages/PatientDashboard.jsx
@@ -6,6 +6,7 @@ import NFTCard from '../components/NFTCard';
 import NFTCardSkeleton from '../components/NFTCardSkeleton';
 import RecordDetailModal from '../components/RecordDetailModal';
 import CopyButton from '../components/CopyButton';
+import QRCodeModal from '../components/QRCodeModal';
 
 const styles = {
   page: { maxWidth: 700, width: '100%', margin: '2rem auto', padding: '0 1rem', boxSizing: 'border-box' },
@@ -23,6 +24,7 @@ export default function PatientDashboard() {
   const { publicKey, connect } = useAuth();
   const { fetchRecords, loading } = useVaccination();
   const [records, setRecords] = useState([]);
+  const [qrRecord, setQrRecord] = useState(null);
   const { currentItems, page, totalPages, goTo, reset, total } = usePagination(records);
 
   const load = useCallback(() => {
@@ -73,7 +75,20 @@ export default function PatientDashboard() {
         </div>
       )}
 
-      {currentItems.map((r) => <NFTCard key={r.token_id} record={r} />)}
+      {currentItems.map((r) => (
+        <NFTCard
+          key={r.token_id}
+          record={r}
+          onShowQR={setQrRecord}
+        />
+      ))}
+
+      {qrRecord && (
+        <QRCodeModal
+          url={`${window.location.origin}/verify?wallet=${encodeURIComponent(publicKey)}&token=${encodeURIComponent(qrRecord.token_id)}`}
+          onClose={() => setQrRecord(null)}
+        />
+      )}
 
       {totalPages > 1 && (
         <nav aria-label="Pagination" style={styles.controls}>