feat: fix the settings preview for the business licence and changes request to the approval

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

@@ -1,6 +1,7 @@
 import {
   ActionIcon,
   Anchor,
+  Badge,
   Box,
   Button,
   Card,
@@ -684,12 +685,12 @@ export default function CustomerDetailPage() {
                   </Text>
                   <Stack gap="md">
                     {licenseProfiles.map((p) => (
-                      <Stack key={p.id} gap={4}>
+                      <Stack key={p.id} gap={6}>
                         <Text size="sm" fw={600} c="edr-text">
                           {humanize(p.type)} · {p.reference}
                         </Text>
                         {(p.licenseFiles ?? []).map((f) => (
-                          <Group key={f.url} gap={6} wrap="nowrap">
+                          <Group key={f.id} gap={8} wrap="nowrap">
                             <Paperclip size={13} className="text-edr-muted" />
                             <Anchor
                               component="button"
@@ -697,16 +698,37 @@ export default function CustomerDetailPage() {
                               onClick={() =>
                                 view({
                                   name: f.name,
-                                  url: f.url,
+                                  url: fileViewUrl(f.id),
                                   mimeType: f.mimeType,
                                 })
                               }
                               size="xs"
+                              style={{
+                                textDecoration:
+                                  f.status === "pending_remove"
+                                    ? "line-through"
+                                    : undefined,
+                              }}
                             >
                               {f.name}
                             </Anchor>
+                            {f.status === "pending_add" && (
+                              <Badge size="xs" color="yellow" variant="light">
+                                Pending approval
+                              </Badge>
+                            )}
+                            {f.status === "pending_remove" && (
+                              <Badge size="xs" color="red" variant="light">
+                                Removal pending
+                              </Badge>
+                            )}
                           </Group>
                         ))}
+                        {(p.licenseFiles ?? []).length === 0 && (
+                          <Text size="xs" c="dimmed">
+                            No license documents.
+                          </Text>
+                        )}
                       </Stack>
                     ))}
                   </Stack>