Add ContractCourtBadge component and integrate into contract pages

- Introduced ContractCourtBadge to display the responsible party for contract actions.
- Updated ContractStatusBadge to include new court badge.
- Enhanced ClearanceDocumentsPage with additional filters for trade direction, freight type, and ownership.
- Modified ContractRequestDetailPage and ContractRequestsPage to utilize ContractCourtBadge.

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

@@ -99,16 +99,20 @@ export function ContractMilestonesTimeline({
       });
     }
 
+    // Every acted approval step, not just hazardous ones — this is the one
+    // place the approval-time record shows up in the page's main content
+    // (the sidebar's ContractApprovalStepsCard has the same times, but only
+    // there, and only while the chain is still actionable).
     for (const step of contract.approvalSteps ?? []) {
-      if (!(step.requiredRole in HAZARDOUS_APPROVAL_ROLE_PERMISSION)) continue;
       if (!step.actedAt) continue;
+      const hazard = step.requiredRole in HAZARDOUS_APPROVAL_ROLE_PERMISSION;
       items.push({
-        key: `hazard-${step.id}`,
+        key: `step-${step.id}`,
         at: step.actedAt,
-        title: CONTRACT_APPROVAL_ROLE_LABELS[step.requiredRole] ?? step.requiredRole,
-        detail: step.status === "REJECTED" ? "Rejected" : "Approved",
-        color: step.status === "REJECTED" ? "red" : "orange",
-        icon: Flame,
+        title: `${CONTRACT_APPROVAL_ROLE_LABELS[step.requiredRole] ?? step.requiredRole} ${step.status === "REJECTED" ? "rejected" : "approved"}`,
+        detail: step.note ?? undefined,
+        color: step.status === "REJECTED" ? "red" : hazard ? "orange" : "edr-green",
+        icon: hazard ? Flame : ShieldCheck,
       });
     }
 

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

@@ -1,9 +1,10 @@
 import { Badge, Group } from "@mantine/core";
-import { Repeat } from "lucide-react";
+import { Building2, Repeat, UserRound } from "lucide-react";
 
 import {
   CONTRACT_STATUS_COLOR,
   CONTRACT_STATUS_STYLES,
+  contractCourt,
 } from "@/features/contracts/contract-status.config";
 
 interface ContractStatusBadgeProps {
@@ -69,3 +70,42 @@ export function ContractStatusBadge({
     </Group>
   );
 }
+
+/** Whose court the contract sits in: customer, EDR, or nobody ("—"). */
+export function ContractCourtBadge({ status }: { status: string }) {
+  const court = contractCourt(status);
+  if (!court) {
+    return (
+      <span className="text-sm text-muted-foreground" title="No party is awaited">
+        —
+      </span>
+    );
+  }
+  const isCustomer = court === "customer";
+  return (
+    <Badge
+      color={isCustomer ? "orange" : "edr-green"}
+      variant="light"
+      size="sm"
+      radius="md"
+      tt="uppercase"
+      fw={600}
+      leftSection={
+        isCustomer ? <UserRound size={12} /> : <Building2 size={12} />
+      }
+      title={
+        isCustomer
+          ? "Waiting on the customer to act"
+          : "Waiting on EDR staff to act"
+      }
+      style={{
+        fontSize: "0.7rem",
+        letterSpacing: "0.05em",
+        display: "inline-flex",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {isCustomer ? "With customer" : "With EDR"}
+    </Badge>
+  );
+}