next slice

client/src/modules/purchasing/PurchaseDetailPage.tsx

@@ -21,6 +21,7 @@ export function PurchaseDetailPage() {
   const [isSavingReceipt, setIsSavingReceipt] = useState(false);
   const [status, setStatus] = useState("Loading purchase order...");
   const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
+  const [isOpeningPdf, setIsOpeningPdf] = useState(false);
 
   const canManage = user?.permissions.includes("purchasing.write") ?? false;
   const canReceive = canManage && (user?.permissions.includes(permissions.inventoryWrite) ?? false);
@@ -158,6 +159,28 @@ export function PurchaseDetailPage() {
     }
   }
 
+  async function handleOpenPdf() {
+    if (!token) {
+      return;
+    }
+
+    setIsOpeningPdf(true);
+    setStatus("Rendering purchase order PDF...");
+
+    try {
+      const blob = await api.getPurchaseOrderPdf(token, activeDocument.id);
+      const objectUrl = URL.createObjectURL(blob);
+      window.open(objectUrl, "_blank", "noopener,noreferrer");
+      window.setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
+      setStatus("Purchase order PDF ready.");
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to render purchase order PDF.";
+      setStatus(message);
+    } finally {
+      setIsOpeningPdf(false);
+    }
+  }
+
   return (
     <section className="space-y-4">
       <div className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
@@ -174,6 +197,14 @@ export function PurchaseDetailPage() {
             <Link to="/purchasing/orders" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
               Back to purchase orders
             </Link>
+            <button
+              type="button"
+              onClick={handleOpenPdf}
+              disabled={isOpeningPdf}
+              className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {isOpeningPdf ? "Rendering PDF..." : "Open PDF"}
+            </button>
             {canManage ? (
               <Link to={`/purchasing/orders/${activeDocument.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">
                 Edit purchase order