finilize gl

apps/edr-freight-web/backoffice/src/components/contracts/PhasedUploadedFileRow.tsx

@@ -0,0 +1,94 @@
+import { Badge, Box, Button, Group, Paper, Text, ThemeIcon, Tooltip } from "@mantine/core";
+import { Download, Eye, FileText } from "lucide-react";
+import { isViewable } from "@edr/ui-common";
+
+import { fileViewUrl } from "@/constants/apiConfig";
+
+export interface PhasedUploadedFileRowProps {
+  label: string;
+  file: { id: string; name: string };
+  onView?: (file: { name: string; url: string }) => void;
+  onDownload?: (file: { id: string; name: string }) => void;
+  compact?: boolean;
+}
+
+/** Inline preview row for a phased customs upload (declaration, transit permit, DO, etc.). */
+export function PhasedUploadedFileRow({
+  label,
+  file,
+  onView,
+  onDownload,
+  compact = false,
+}: PhasedUploadedFileRowProps) {
+  const viewUrl = fileViewUrl(file.id);
+  const canPreview = isViewable({ name: file.name, url: viewUrl });
+
+  return (
+    <Paper
+      withBorder
+      radius="md"
+      p={compact ? "xs" : "sm"}
+      style={{
+        borderColor: "var(--mantine-color-edr-green-3)",
+        background:
+          "linear-gradient(135deg, var(--mantine-color-edr-green-0) 0%, #FFFFFF 75%)",
+      }}
+    >
+      <Group justify="space-between" wrap="nowrap" align="center">
+        <Group gap={10} wrap="nowrap" style={{ minWidth: 0 }}>
+          <ThemeIcon variant="light" color="edr-green" radius="md" size={compact ? 32 : 36}>
+            <FileText size={compact ? 15 : 17} />
+          </ThemeIcon>
+          <Box style={{ minWidth: 0 }}>
+            <Text size="sm" fw={600} truncate>
+              {label}
+            </Text>
+            <Group gap={6} wrap="nowrap" mt={2}>
+              <Badge size="xs" variant="light" color="edr-green" radius="sm">
+                Uploaded
+              </Badge>
+              <Text size="xs" c="dimmed" truncate>
+                {file.name}
+              </Text>
+            </Group>
+          </Box>
+        </Group>
+        <Group gap={6} wrap="nowrap">
+          {canPreview && onView ? (
+            <Tooltip label="Preview">
+              <Button
+                size="compact-xs"
+                variant="default"
+                radius="md"
+                leftSection={<Eye size={13} />}
+                onClick={() => onView({ name: file.name, url: viewUrl })}
+              >
+                View
+              </Button>
+            </Tooltip>
+          ) : null}
+          {onDownload ? (
+            <Tooltip label="Download">
+              <Button
+                size="compact-xs"
+                variant="light"
+                radius="md"
+                leftSection={<Download size={13} />}
+                onClick={() => onDownload({ id: file.id, name: file.name })}
+              >
+                Download
+              </Button>
+            </Tooltip>
+          ) : null}
+        </Group>
+      </Group>
+    </Paper>
+  );
+}
+
+export function findWorkflowFile(
+  files: Array<{ code: string; file: { id: string; name: string } | null }> | undefined,
+  code: string,
+): { id: string; name: string } | null {
+  return files?.find((f) => f.code === code)?.file ?? null;
+}