Implement intercity document handling and rejection notes for contracts

apps/edr-freight-web/backoffice/src/pages/contracts/ContractRequestDetailPage.tsx

@@ -1,6 +1,7 @@
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import {
+  AlertTriangle,
   ArrowLeft,
   ArrowRight,
   Box as BoxIcon,
@@ -22,6 +23,7 @@ import {
   Users,
 } from "lucide-react";
 import {
+  Alert,
   Badge,
   Box,
   Button,
@@ -264,7 +266,8 @@ export default function ContractRequestDetailPage() {
   const showApprovalCard =
     contract.status === "PENDING_APPROVAL" ||
     contract.status === "APPROVED" ||
-    contract.status === "APPROVED_PENDING_SIGNATURE";
+    contract.status === "APPROVED_PENDING_SIGNATURE" ||
+    contract.status === "REJECTED";
 
   const showClearanceTab = CLEARANCE_REVIEW_STATUSES.includes(contract.status);
   const phasedCustoms =
@@ -428,6 +431,32 @@ export default function ContractRequestDetailPage() {
           description={statusMeta.description}
         />
 
+        {contract.status === "REJECTED" && contract.latestRejectionNote ? (
+          <Alert
+            color="red"
+            radius="md"
+            icon={<AlertTriangle size={18} />}
+            title="Rejection reason"
+          >
+            <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
+              {contract.latestRejectionNote}
+            </Text>
+          </Alert>
+        ) : null}
+
+        {contract.status === "PENDING_APPROVAL" && contract.latestSendBackNote ? (
+          <Alert
+            color="orange"
+            radius="md"
+            icon={<AlertTriangle size={18} />}
+            title="Sent back in the approval chain"
+          >
+            <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
+              {contract.latestSendBackNote}
+            </Text>
+          </Alert>
+        ) : null}
+
         <Tabs
           value={currentTab}
           onChange={(v) => setTab(v ?? "details")}