fix issue

apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx

@@ -14,6 +14,7 @@ import {
   Text,
   Textarea,
   ThemeIcon,
+  Timeline,
   Tooltip,
 } from "@mantine/core";
 import {
@@ -24,6 +25,7 @@ import {
   FileCheck2,
   FileText,
   MessageSquareWarning,
+  RefreshCw,
   Upload,
 } from "lucide-react";
 import toast from "react-hot-toast";
@@ -458,6 +460,76 @@ export function ClearanceReviewSection({
   );
 }
 
+const EVENT_META: Record<
+  Freight.ClearanceDocumentEvent["type"],
+  { color: string; icon: typeof Upload; label: (byName: string | null) => string }
+> = {
+  UPLOADED: {
+    color: "blue",
+    icon: Upload,
+    label: (n) => `Uploaded by ${n ?? "customer"}`,
+  },
+  RESUBMITTED: {
+    color: "blue",
+    icon: RefreshCw,
+    label: (n) => `Re-submitted by ${n ?? "customer"}`,
+  },
+  QUERIED: {
+    color: "red",
+    icon: MessageSquareWarning,
+    label: (n) => `Query opened by ${n ?? "staff"}`,
+  },
+  APPROVED: {
+    color: "edr-green",
+    icon: CheckCircle2,
+    label: (n) => `Approved by ${n ?? "staff"}`,
+  },
+};
+
+/** Per-document audit trail: uploads, amendment responses, queries, approval. */
+function DocHistoryTimeline({
+  history,
+}: {
+  history: Freight.ClearanceDocumentEvent[];
+}) {
+  return (
+    <Timeline
+      mt="sm"
+      ml={4}
+      bulletSize={20}
+      lineWidth={2}
+      active={history.length - 1}
+      color="gray"
+    >
+      {history.map((ev, i) => {
+        const meta = EVENT_META[ev.type];
+        const Icon = meta.icon;
+        return (
+          <Timeline.Item
+            key={`${ev.type}:${ev.at}:${i}`}
+            color={meta.color}
+            bullet={<Icon size={11} />}
+            title={
+              <Text fz="12.5px" fw={600} c="edr-text" lh={1.3}>
+                {meta.label(ev.byName)}
+              </Text>
+            }
+          >
+            <Text fz="11px" c="dimmed">
+              {formatDateTime(ev.at)}
+            </Text>
+            {ev.note ? (
+              <Text fz="11.5px" c="red.8" mt={2}>
+                {ev.note}
+              </Text>
+            ) : null}
+          </Timeline.Item>
+        );
+      })}
+    </Timeline>
+  );
+}
+
 function StatPill({
   color,
   label,
@@ -551,11 +623,6 @@ function DocReviewCard({
             <Text fz="12px" c="edr-muted" truncate>
               {hasFile ? doc.file!.name : "Not uploaded by customer"}
             </Text>
-            {hasFile && doc.uploadedAt ? (
-              <Text fz="11px" c="dimmed">
-                Uploaded {formatDateTime(doc.uploadedAt)}
-              </Text>
-            ) : null}
           </Box>
         </Group>
 
@@ -607,11 +674,8 @@ function DocReviewCard({
         </Group>
       </Group>
 
-      {doc.reviewedAt && (status === "APPROVED" || status === "QUERIED") && (
-        <Text fz="11.5px" c="dimmed" mt={6}>
-          {status === "APPROVED" ? "Approved" : "Queried"} by{" "}
-          {doc.reviewedByName ?? "staff"} · {formatDateTime(doc.reviewedAt)}
-        </Text>
+      {(doc.history?.length ?? 0) > 0 && (
+        <DocHistoryTimeline history={doc.history!} />
       )}
 
       {status === "QUERIED" && doc.note && (