add file viewer functionality across various components

- Implemented a shared file viewer modal using `useFileViewer` hook to allow inline viewing of documents (images, PDFs, videos, etc.) across the application.
- Updated `ContractClearanceReviewSection`, `ContractRequestDetailPage`, `ContractViewPage`, and booking-related components to utilize the new file viewer for document previews.
- Added "Approve all" button in `ContractClearanceReviewSection` to bulk approve documents.
- Enhanced document action buttons to include view and download options based on file type.
- Introduced `isViewable` utility to determine if a file can be previewed inline.
- Created `FileViewer` component to handle rendering of various file types and added appropriate fallback for unsupported formats.

apps/edr-freight-web/backoffice/src/hooks/contracts/useContracts.ts

@@ -227,6 +227,29 @@ export function useContractClearanceMutations(
     onError: () => toast.error("Could not update document"),
   });
 
+  // Approve every still-pending customer document in one click. There is no
+  // server-side bulk endpoint, so fan out the single-document review calls and
+  // refresh once after they all settle.
+  const approveAll = useMutation({
+    mutationFn: async (fileKeys: string[]) => {
+      const review = selfClear
+        ? contractsService.opsReviewClearanceDocument
+        : contractsService.reviewClearanceDocument;
+      await Promise.all(
+        fileKeys.map((fileKey) =>
+          review(contractId, { fileKey, status: "APPROVED" }),
+        ),
+      );
+    },
+    onSuccess: (_d, fileKeys) => {
+      toast.success(
+        `${fileKeys.length} document${fileKeys.length === 1 ? "" : "s"} approved`,
+      );
+      refresh();
+    },
+    onError: () => toast.error("Could not approve all documents"),
+  });
+
   const uploadOutputDocuments = useMutation({
     mutationFn: (files: Record<string, File | null>) =>
       contractsService.uploadClearanceOutput(contractId, files),
@@ -256,7 +279,7 @@ export function useContractClearanceMutations(
       ),
   });
 
-  return { reviewDocument, uploadOutputDocuments, finalizeClearance };
+  return { reviewDocument, approveAll, uploadOutputDocuments, finalizeClearance };
 }
 
 /** Complete a post-booking GL milestone. */

apps/edr-freight-web/backoffice/src/hooks/useFileViewer.tsx

@@ -0,0 +1,24 @@
+import { useCallback, useState } from "react";
+import { FileViewerModal, type ViewableFile } from "@edr/ui-common";
+
+/**
+ * Drives a single shared {@link FileViewerModal} for a page. Call `view(file)`
+ * from any file row to open the document inline (pdf / image / video / office /
+ * text); render `viewer` once near the page root.
+ *
+ *   const { view, viewer } = useFileViewer();
+ *   <Button onClick={() => view({ name, url, mimeType })}>View</Button>
+ *   {viewer}
+ */
+export function useFileViewer() {
+  const [file, setFile] = useState<ViewableFile | null>(null);
+
+  const view = useCallback((f: ViewableFile) => setFile(f), []);
+  const close = useCallback(() => setFile(null), []);
+
+  const viewer = (
+    <FileViewerModal open={file !== null} file={file} onClose={close} />
+  );
+
+  return { view, close, viewer };
+}