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

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