From 4d87d41e55adb46131277b41899a1770ad48cb99 Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Wed, 19 Aug 2026 08:48:50 +0000
Subject: [PATCH] feat: add PdfPreviewModal component and integrate into
 DocumentsTab for centralized PDF viewing

---
 .../components/DocumentsTab.tsx               | 26 +++++++-----
 libs/ui/src/index.ts                          |  1 +
 libs/ui/src/lib/feedback/PdfPreviewModal.tsx  | 40 +++++++++++++++++++
 3 files changed, 56 insertions(+), 11 deletions(-)
 create mode 100644 libs/ui/src/lib/feedback/PdfPreviewModal.tsx

diff --git a/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx b/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx
index 979ab44a8..7d55d4bce 100644
--- a/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx
+++ b/apps/backoffice/src/app/features/license-review/components/DocumentsTab.tsx
@@ -34,6 +34,7 @@ import {
   type DocumentRequirement,
 } from "@ema-platform/api";
 import { notifications } from "@mantine/notifications";
+import { PdfPreviewModal } from "@ema-platform/ui";
 
 interface DocumentsTabProps {
   applicationId: string;
@@ -441,8 +442,20 @@ export function DocumentsTab({
         );
       })}
 
+      <PdfPreviewModal
+        opened={Boolean(preview) && isPdf}
+        onClose={() => setPreview(null)}
+        url={previewFile?.url ?? ""}
+        title={
+          preview
+            ? localized(requirementByKey.get(preview.documentKey)?.name) ||
+              preview.documentKey
+            : ""
+        }
+      />
+
       <Drawer
-        opened={Boolean(preview)}
+        opened={Boolean(preview) && !isPdf}
         onClose={() => setPreview(null)}
         position="right"
         size="xl"
@@ -458,16 +471,7 @@ export function DocumentsTab({
         returnFocus
       >
         {previewFile?.url ? (
-          isPdf ? (
-            <iframe
-              src={previewFile.url}
-              title={
-                preview?.documentKey ??
-                t("review.documents.previewFallback", "document")
-              }
-              style={{ width: "100%", height: "80vh", border: "none" }}
-            />
-          ) : isImage ? (
+          isImage ? (
             <img
               src={previewFile.url}
               alt={
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index 7b0b484c0..422e9d656 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -1,6 +1,7 @@
 export * from "./lib/input/BilingualInput";
 export * from "./lib/input/AmharicDatePicker";
 export * from "./lib/feedback/ConfirmModal";
+export * from "./lib/feedback/PdfPreviewModal";
 export * from "./lib/feedback/ModalFooter";
 export * from "./lib/feedback/ApiErrorAlert";
 export * from "./lib/feedback/notify";
diff --git a/libs/ui/src/lib/feedback/PdfPreviewModal.tsx b/libs/ui/src/lib/feedback/PdfPreviewModal.tsx
new file mode 100644
index 000000000..91e043c88
--- /dev/null
+++ b/libs/ui/src/lib/feedback/PdfPreviewModal.tsx
@@ -0,0 +1,40 @@
+import { Modal } from '@mantine/core';
+
+interface PdfPreviewModalProps {
+  opened: boolean;
+  onClose: () => void;
+  url: string;
+  title?: string;
+}
+
+/**
+ * The one place a PDF gets opened anywhere in the app. Never `window.open` /
+ * `target="_blank"` a PDF directly — route it through this modal instead, so
+ * the reviewer never loses their place to a new tab.
+ */
+export function PdfPreviewModal({
+  opened,
+  onClose,
+  url,
+  title = 'Document',
+}: PdfPreviewModalProps) {
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={title}
+      size="80%"
+      centered
+      trapFocus
+      returnFocus
+    >
+      {url && (
+        <iframe
+          src={url}
+          title={title}
+          style={{ width: '100%', height: '85vh', border: 'none' }}
+        />
+      )}
+    </Modal>
+  );
+}