Review
Bloomtrace cold-chain audit report embed
Bloomtrace is a wholesale cut-flower marketplace. Buyers need to review third-party cold-chain audit HTML reports (temp logger export pages from ChillProof Labs and FrostLink) without leaving the lot detail screen. This PR adds a ReportViewer that loads the vendor's hosted report URL in an iframe sized to the panel, with a fallback link if the embed fails to load.
ReactTier 2securityiframesandboxthird-party
Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.
components/lots/ColdChainReportViewer.tsx+24-0
| 1 | 1 | import { useState } from "react"; | |
| 2 | 2 | import type { ColdChainAudit } from "@/lib/lots/audits"; | |
| 3 | 3 | ||
| 4 | 4 | type Props = { audit: ColdChainAudit }; | |
| 5 | 5 | ||
| 6 | + | export function ColdChainReportViewer({ audit }: Props) { | |
| 7 | + | const [failed, setFailed] = useState(false); | |
| 8 | + | ||
| 9 | + | if (failed) { | |
| 10 | + | return ( | |
| 11 | + | <p className="report-fallback"> | |
| 12 | + | Embed unavailable.{" "} | |
| 13 | + | <a href={audit.reportHtmlUrl} target="_blank" rel="noopener noreferrer"> | |
| 14 | + | Open {audit.labName} report | |
| 15 | + | </a> | |
| 16 | + | </p> | |
| 17 | + | ); | |
| 18 | + | } | |
| 19 | + | ||
| 20 | + | return ( | |
| 21 | + | <iframe | |
| 22 | + | className="cold-chain-report" | |
| 23 | + | title={`${audit.labName} cold-chain audit`} | |
| 24 | + | src={audit.reportHtmlUrl} | |
| 25 | + | // Labs ship interactive temp charts — leave the frame unrestricted | |
| 26 | + | onError={() => setFailed(true)} | |
| 27 | + | /> | |
| 28 | + | ); | |
| 29 | + | } |