feat: add QR code generation for vaccination records

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>
+  );
+}

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

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' },
@@ -79,7 +80,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}>