feat: add PdfPreviewModal component and integrate into DocumentsTab for centralized PDF viewing

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 ? (
+          isImage ? (
-            <iframe
-              src={previewFile.url}
-              title={
-                preview?.documentKey ??
-                t("review.documents.previewFallback", "document")
-              }
-              style={{ width: "100%", height: "80vh", border: "none" }}
-            />
-          ) : isImage ? (
             <img
               src={previewFile.url}
               alt={

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";

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