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 ( +
+
e.stopPropagation()} + style={{ + background: '#1e293b', borderRadius: 12, padding: '1.5rem', + display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem', + }} + > +

Vaccination QR Code

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

- ))} + )}
{explorerUrl ? ( )} - {currentItems.map((r) => )} + {currentItems.map((r) => ( + + ))} + + {qrRecord && ( + setQrRecord(null)} + /> + )} {totalPages > 1 && (