From 8a2b9306dceab70ba272fc566ab184265745fef5 Mon Sep 17 00:00:00 2001
From: Marshal <marshal@example.com>
Date: Thu, 20 Aug 2026 03:59:14 +0000
Subject: [PATCH] feat(bookings): show per-document upload/review audit and
 download icon on clearance detail

---
 .../detail/ClearanceReviewSection.tsx         | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx b/apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx
index 501e074e2..e4e78f462 100644
--- a/apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/bookings/detail/ClearanceReviewSection.tsx
@@ -31,6 +31,7 @@ import type { Freight } from "@edr/types";
 import { isViewable } from "@edr/ui-common";
 
 import { SectionCard } from "./SectionCard";
+import { formatDateTime } from "@/lib/format";
 import { bookingsService } from "@/services/bookings.service";
 import {
   downloadBookingFile,
@@ -550,6 +551,11 @@ 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>
 
@@ -578,9 +584,36 @@ function DocReviewCard({
                 </Button>
               </Tooltip>
             )}
+          {hasFile && (
+            <Tooltip label="Download">
+              <Box
+                component="button"
+                type="button"
+                onClick={() =>
+                  void downloadBookingFile(doc.file!.id, doc.file!.name)
+                }
+                c="edr-green"
+                style={{
+                  display: "flex",
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                }}
+              >
+                <Download size={15} />
+              </Box>
+            </Tooltip>
+          )}
         </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>
+      )}
+
       {status === "QUERIED" && doc.note && (
         <Alert
           mt="sm"