fix: add vat to the settings, and docs to the profile

apps/edr-freight-web/backoffice/src/pages/customers/CustomerDetailPage.tsx

@@ -164,25 +164,85 @@ export default function CustomerDetailPage() {
       {
         id: "type",
         header: "Role",
-        cell: ({ row }) => <ProfileTypeBadge type={row.original.type} />,
-      },
-      {
-        id: "reference",
-        header: "Reference",
         cell: ({ row }) => (
-          <Text size="sm" fw={600} c="edr-text">
-            {row.original.reference}
-          </Text>
+          <div className="space-y-2">
+            <ProfileTypeBadge type={row.original.type} />
+
+            <Text size="sm" fw={600} c="edr-text">
+              {row.original.reference}
+            </Text>
+          </div>
         ),
       },
       {
-        id: "businessLicense",
-        header: "Business license",
-        cell: ({ row }) => (
-          <Text size="sm" c="dimmed">
-            {row.original.businessLicense || "—"}
-          </Text>
-        ),
+        id: "licenseFiles",
+        header: "License documents",
+        cell: ({ row }) => {
+          const files = row.original.licenseFiles ?? [];
+          if (files.length === 0) {
+            return (
+              <Text size="sm" c="dimmed">
+                —
+              </Text>
+            );
+          }
+          return (
+            <Stack gap={4}>
+              {files.map((f) => (
+                <Group key={f.id} gap={6} wrap="nowrap">
+                  <ActionIcon
+                    size="sm"
+                    variant="subtle"
+                    color="gray"
+                    aria-label={`View ${f.name}`}
+                    onClick={() =>
+                      view({
+                        name: f.name,
+                        url: fileViewUrl(f.id),
+                        mimeType: f.mimeType,
+                      })
+                    }
+                  >
+                    <Eye size={14} />
+                  </ActionIcon>
+                  <Anchor
+                    component="button"
+                    type="button"
+                    size="xs"
+                    lineClamp={1}
+                    onClick={() =>
+                      view({
+                        name: f.name,
+                        url: fileViewUrl(f.id),
+                        mimeType: f.mimeType,
+                      })
+                    }
+                    style={{
+                      maxWidth: 170,
+                      textAlign: "left",
+                      textDecoration:
+                        f.status === "pending_remove"
+                          ? "line-through"
+                          : undefined,
+                    }}
+                  >
+                    {f.name}
+                  </Anchor>
+                  {f.status === "pending_add" && (
+                    <Badge size="xs" color="yellow" variant="light">
+                      Pending
+                    </Badge>
+                  )}
+                  {f.status === "pending_remove" && (
+                    <Badge size="xs" color="red" variant="light">
+                      Removing
+                    </Badge>
+                  )}
+                </Group>
+              ))}
+            </Stack>
+          );
+        },
       },
       {
         id: "status",
@@ -210,7 +270,7 @@ export default function CustomerDetailPage() {
         ),
       },
     ],
-    [],
+    [view],
   );
 
   const bookingColumns: ColumnDef<CustomerBooking>[] = useMemo(
@@ -504,9 +564,8 @@ export default function CustomerDetailPage() {
         ]}
         backTo="/dashboard/customers"
         title={company.name}
-        subtitle={`TIN ${company.tin}${
-          company.country ? ` · ${company.country}` : ""
-        }`}
+        subtitle={`TIN ${company.tin}${company.country ? ` · ${company.country}` : ""
+          }`}
         meta={
           <Group gap="xs" wrap="nowrap">
             <CompanyTypeBadge type={company.type} />
@@ -620,7 +679,7 @@ export default function CustomerDetailPage() {
                   <ProfileChips profiles={company.companyProfiles} />
                 </Group>
                 <Box style={{ overflowX: "auto" }} w="100%">
-                  <Box miw={860}>
+                  <Box miw={1040}>
                     <DataTable
                       columns={profileColumns}
                       data={company.companyProfiles}
@@ -647,9 +706,9 @@ export default function CustomerDetailPage() {
               error={
                 bookingsQuery.isError
                   ? {
-                      message: "Failed to load bookings.",
-                      onRetry: () => void bookingsQuery.refetch(),
-                    }
+                    message: "Failed to load bookings.",
+                    onRetry: () => void bookingsQuery.refetch(),
+                  }
                   : undefined
               }
             />
@@ -669,9 +728,9 @@ export default function CustomerDetailPage() {
                 error={
                   documentsQuery.isError
                     ? {
-                        message: "Failed to load documents.",
-                        onRetry: () => void documentsQuery.refetch(),
-                      }
+                      message: "Failed to load documents.",
+                      onRetry: () => void documentsQuery.refetch(),
+                    }
                     : undefined
                 }
               />
@@ -750,9 +809,9 @@ export default function CustomerDetailPage() {
               error={
                 paymentsQuery.isError
                   ? {
-                      message: "Failed to load payments.",
-                      onRetry: () => void paymentsQuery.refetch(),
-                    }
+                    message: "Failed to load payments.",
+                    onRetry: () => void paymentsQuery.refetch(),
+                  }
                   : undefined
               }
             />
@@ -773,9 +832,9 @@ export default function CustomerDetailPage() {
                 error={
                   invoicesQuery.isError
                     ? {
-                        message: "Failed to load invoices.",
-                        onRetry: () => void invoicesQuery.refetch(),
-                      }
+                      message: "Failed to load invoices.",
+                      onRetry: () => void invoicesQuery.refetch(),
+                    }
                     : undefined
                 }
                 pagination={{