From 515d59fb532abc7df52a1b471659f1f749e8dde0 Mon Sep 17 00:00:00 2001
From: Nathnael <nathnael@example.com>
Date: Fri, 3 Jul 2026 08:35:57 +0000
Subject: [PATCH] fix: file preview

---
 .../pages/customers/CustomerDetailPage.tsx    | 62 ++++++++++++++-----
 .../src/pages/settings/TabDocuments.tsx       | 25 ++++----
 2 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx b/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
index f94f97c71..7f62ea3f5 100644
--- a/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx
@@ -18,6 +18,7 @@ import {
   ArrowRight,
   Banknote,
   Download,
+  Eye,
   FileText,
   IdCard,
   LayoutGrid,
@@ -55,7 +56,12 @@ import type {
   CustomerPayment,
 } from "@/types/customer";
 import type { Invoice } from "@/types/invoice";
-import { DataTable, usePagination, type ColumnDef } from "@edr/ui-common";
+import {
+  DataTable,
+  useFileViewer,
+  usePagination,
+  type ColumnDef,
+} from "@edr/ui-common";
 
 function InfoField({ label, value }: { label: string; value?: string | null }) {
   return (
@@ -83,6 +89,7 @@ function tableStatus(query: { isLoading: boolean; isError: boolean }) {
 export default function CustomerDetailPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const { view, viewer } = useFileViewer();
 
   const { data: company, isLoading } = useQuery(
     api.customers.getById.queryOptions({
@@ -315,20 +322,37 @@ export default function CustomerDetailPage() {
         header: "",
         meta: { headerClassName: "text-right", cellClassName: "text-right" },
         cell: ({ row }) => (
-          <ActionIcon
-            component="a"
-            href={fileViewUrl(row.original.id, true)}
-            variant="subtle"
-            color="gray"
-            aria-label="Download"
-            data-stop-row-click
-          >
-            <Download size={16} />
-          </ActionIcon>
+          <Group gap={4} justify="flex-end" wrap="nowrap">
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              aria-label="View"
+              data-stop-row-click
+              onClick={() =>
+                view({
+                  name: row.original.name,
+                  url: fileViewUrl(row.original.id),
+                  mimeType: row.original.mimeType,
+                })
+              }
+            >
+              <Eye size={16} />
+            </ActionIcon>
+            <ActionIcon
+              component="a"
+              href={fileViewUrl(row.original.id, true)}
+              variant="subtle"
+              color="gray"
+              aria-label="Download"
+              data-stop-row-click
+            >
+              <Download size={16} />
+            </ActionIcon>
+          </Group>
         ),
       },
     ],
-    [],
+    [view],
   );
 
   const paymentColumns: ColumnDef<CustomerPayment>[] = useMemo(
@@ -661,9 +685,15 @@ export default function CustomerDetailPage() {
                           <Group key={f.url} gap={6} wrap="nowrap">
                             <Paperclip size={13} className="text-edr-muted" />
                             <Anchor
-                              href={f.url}
-                              target="_blank"
-                              rel="noopener noreferrer"
+                              component="button"
+                              type="button"
+                              onClick={() =>
+                                view({
+                                  name: f.name,
+                                  url: f.url,
+                                  mimeType: f.mimeType,
+                                })
+                              }
                               size="xs"
                             >
                               {f.name}
@@ -736,6 +766,8 @@ export default function CustomerDetailPage() {
           </Box>
         </Tabs.Panel>
       </Tabs>
+
+      {viewer}
     </PageContainer>
   );
 }
diff --git a/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx b/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx
index 6fbcbe911..b904d7eba 100644
--- a/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx
+++ b/apps/edr-freight-web/portal/src/pages/settings/TabDocuments.tsx
@@ -1,8 +1,9 @@
+import { fileViewUrl } from "@/constants/apiConfig";
 import { api } from "@/services/api";
 import { companiesService } from "@/services/companies.service";
 import { getMinFiles } from "@/types/fileUploadSettings";
 import type { ProfileResponse } from "@/types/profile";
-import { SmartFileInput } from "@edr/ui-common";
+import { SmartFileInput, useFileViewer } from "@edr/ui-common";
 import {
   Anchor,
   Button,
@@ -51,6 +52,7 @@ export default function TabDocuments({
   onContinue,
 }: TabDocumentsProps) {
   const queryClient = useQueryClient();
+  const { view, viewer } = useFileViewer();
   const [documentFiles, setDocumentFiles] = useState<
     Record<string, File | File[] | null>
   >({});
@@ -73,13 +75,16 @@ export default function TabDocuments({
   );
 
   const existingFilesByKey = useMemo(() => {
-    const map: Record<string, { name: string; url: string; size?: number }[]> =
-      {};
+    const map: Record<
+      string,
+      { name: string; url: string; size?: number; mimeType?: string | null }[]
+    > = {};
     for (const doc of docsQuery.data ?? []) {
       (map[doc.code] ??= []).push({
         name: doc.name,
-        url: doc.url,
+        url: fileViewUrl(doc.id),
         size: doc.size,
+        mimeType: doc.mimeType,
       });
     }
     return map;
@@ -163,6 +168,7 @@ export default function TabDocuments({
             errors={fieldErrors}
             uploadedKeys={uploadedKeys}
             existingFiles={existingFilesByKey}
+            onViewFile={view}
           />
         )}
 
@@ -252,14 +258,9 @@ export default function TabDocuments({
                 {p.licenseFiles.map((f) => (
                   <Group key={f.url} gap={6} wrap="nowrap">
                     <Paperclip size={13} className="text-edr-muted" />
-                    <Anchor
-                      href={f.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      size="xs"
-                    >
+                    <Text component="button" type="button" size="xs">
                       {f.name}
-                    </Anchor>
+                    </Text>
                   </Group>
                 ))}
               </Stack>
@@ -267,6 +268,8 @@ export default function TabDocuments({
           </Stack>
         </Card>
       )}
+
+      {viewer}
     </>
   );
 }