From 773456c2560b4587cbd79e1db96bfa377168dca2 Mon Sep 17 00:00:00 2001
From: Marshal <marshal@example.com>
Date: Mon, 27 Jul 2026 05:07:09 +0000
Subject: [PATCH] refactor DocReviewAlertButton and FreightDashboardHeader
 comments for clarity and accuracy

---
 .../layout/FreightDashboardHeader.tsx         |  4 +--
 .../bookingWindows/DocReviewAlertButton.tsx   | 32 +++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
index 2ad4e1f28..831e1bc1b 100644
--- a/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx
@@ -116,8 +116,8 @@ const FreightDashboardHeader = ({
         </Group>
 
         {/* Right: actions + avatar. The doc-review alarm leads the group — it
-            only renders in the last half of a review phase that still has
-            undecided requests, so it never competes for space otherwise. */}
+            renders only during a review phase that still has undecided
+            requests, so it never competes for space otherwise. */}
         <Group gap={10} wrap="nowrap" align="center">
           <DocReviewAlertButton />
 
diff --git a/apps/edr-freight-web/backoffice/src/features/bookingWindows/DocReviewAlertButton.tsx b/apps/edr-freight-web/backoffice/src/features/bookingWindows/DocReviewAlertButton.tsx
index 16af5b6ab..058617d3b 100644
--- a/apps/edr-freight-web/backoffice/src/features/bookingWindows/DocReviewAlertButton.tsx
+++ b/apps/edr-freight-web/backoffice/src/features/bookingWindows/DocReviewAlertButton.tsx
@@ -36,11 +36,12 @@ function formatRemaining(ms: number): string {
 }
 
 /**
- * Header alarm for the document-review deadline. Appears only once the review
- * phase is half spent AND requests are still undecided — everything still
- * pending when the clock runs out is expired automatically, so this is the last
- * call to accept or reject. Clicking opens the booking requests already
- * filtered to those undecided import requests.
+ * Header alarm for the document-review deadline. Runs for the whole review
+ * phase — from the moment it opens until the clock runs out — whenever requests
+ * are still undecided. Everything left pending at the deadline is expired
+ * automatically, so staff get the full window to accept or reject rather than
+ * only its back half. Clicking opens the booking requests already filtered to
+ * those undecided requests.
  */
 export default function DocReviewAlertButton() {
   const navigate = useNavigate();
@@ -67,10 +68,12 @@ export default function DocReviewAlertButton() {
   }, [deadlineMs]);
 
   if (!alert) return null;
-  // Half the review phase has to be gone before staff are alarmed — a 30-minute
-  // review warns with 15 minutes left.
-  const halfMs = (Math.max(alert.docReviewMinutes, 1) * 60_000) / 2;
-  if (remaining <= 0 || remaining > halfMs) return null;
+  // Alarm for the WHOLE review phase, from the moment it opens: anything still
+  // undecided when the clock runs out is expired automatically, so staff need
+  // the full window to act, not the back half of it. The endpoint only returns
+  // a schedule that is in DOC_REVIEW with undecided requests behind it, so the
+  // remaining check just hides the pill once the deadline passes.
+  if (remaining <= 0) return null;
 
   const requestLabel = alert.pendingCount === 1 ? "request" : "requests";
 
@@ -85,7 +88,16 @@ export default function DocReviewAlertButton() {
       <UnstyledButton
         onClick={() => navigate(pendingRequestsHref(alert.tradeDirection))}
         aria-label={`${alert.pendingCount} import booking ${requestLabel} awaiting a decision — document review ends in ${formatRemaining(remaining)}`}
-        className="group flex h-9 shrink-0 items-center gap-2 rounded-full border border-red-600/60 bg-red-600 pl-2.5 pr-2 text-white shadow-[0_2px_10px_rgba(220,38,38,0.35)] transition-transform hover:scale-[1.02] hover:bg-red-700"
+        className="group flex h-9 shrink-0 items-center gap-2 rounded-full pl-2.5 pr-2 transition-transform hover:scale-[1.02]"
+        // Inline, not Tailwind: Mantine's UnstyledButton resets the background
+        // in unlayered CSS, which beats a `@layer utilities` class whatever its
+        // specificity — `bg-red-600` alone renders the pill white.
+        style={{
+          background: "var(--mantine-color-red-6)",
+          border: "1px solid var(--mantine-color-red-7)",
+          color: "#fff",
+          boxShadow: "0 2px 10px rgba(220, 38, 38, 0.35)",
+        }}
       >
         {/* Live dot: a ping ring behind a solid core, so the pill reads as
             active without animating the whole chip. */}