fix: file preview

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