changes

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

@@ -54,6 +54,17 @@ export interface ContractClearanceReviewSectionProps {
    * by whom, when) but hide all approve / query / finalize actions.
    */
   readOnly?: boolean;
+  /**
+   * Document approvals are locked (e.g. after all docs approved in phased flow)
+   * but queries remain available until {@link readOnly}.
+   */
+  approvalsLocked?: boolean;
+  /**
+   * ONE_TIME customs contracts use the phased milestone workflow. Hides the
+   * legacy "Finalize clearance" shortcut; booking readiness follows delivery
+   * order (import) or export release.
+   */
+  phasedCustoms?: boolean;
 }
 
 const STATUS_META: Record<
@@ -89,6 +100,8 @@ export function ContractClearanceReviewSection({
   hideSummary,
   selfClear = false,
   readOnly = false,
+  phasedCustoms = false,
+  approvalsLocked = false,
 }: ContractClearanceReviewSectionProps) {
   const [queryNotes, setQueryNotes] = useState<Record<string, string>>({});
   const [openQuery, setOpenQuery] = useState<Record<string, boolean>>({});
@@ -170,14 +183,16 @@ export function ContractClearanceReviewSection({
         subtitle={
           readOnly
             ? `Reviewed by the ${reviewerTeam} team.`
-            : "Approve each document, or open a query to tell the customer what to fix."
+            : approvalsLocked
+              ? "Documents are approved — you can still open a query if something needs fixing."
+              : "Approve each document, or open a query to tell the customer what to fix."
         }
         extra={
           <Group gap={10} wrap="nowrap" align="center">
             <Text size="xs" c="dimmed" fw={600}>
               {stats.approved}/{stats.total} approved
             </Text>
-            {!readOnly && approvableKeys.length > 0 && (
+            {!readOnly && !approvalsLocked && approvableKeys.length > 0 && (
               <Button
                 size="compact-sm"
                 color="edr-green"
@@ -221,6 +236,7 @@ export function ContractClearanceReviewSection({
                 doc={doc}
                 reviewerTeam={reviewerTeam}
                 readOnly={readOnly}
+                approvalsLocked={approvalsLocked}
                 note={queryNotes[doc.fileKey] ?? ""}
                 queryOpen={openQuery[doc.fileKey] ?? false}
                 onToggleQuery={(open) =>
@@ -241,7 +257,7 @@ export function ContractClearanceReviewSection({
         </Stack>
       </SectionCard>
 
-      {glDocs.length > 0 && (
+      {glDocs.length > 0 && !phasedCustoms && (
         <SectionCard
           icon={Upload}
           title="GL output documents"
@@ -372,8 +388,39 @@ export function ContractClearanceReviewSection({
               <CheckCircle2 size={15} />
             </ThemeIcon>
             <Text fz="12.5px" c="dimmed">
-              Clearance was finalized by the {reviewerTeam} team. This is a
-              read-only record of the approved documents.
+              {phasedCustoms
+                ? "Document review is complete. Continue customs milestones in the action panel."
+                : `Clearance was finalized by the ${reviewerTeam} team. This is a read-only record of the approved documents.`}
+            </Text>
+          </Group>
+        </Paper>
+      ) : phasedCustoms && approvalsLocked ? (
+        <Paper withBorder radius="md" p="md">
+          <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
+            <ThemeIcon variant="light" color="edr-green" radius="md" size={28}>
+              <CheckCircle2 size={15} />
+            </ThemeIcon>
+            <Text fz="12.5px" c="dimmed">
+              Document review is complete. Use the action panel for declaration, duty, and
+              transit steps — or open a query above if a customer document needs correction.
+            </Text>
+          </Group>
+        </Paper>
+      ) : phasedCustoms ? (
+        <Paper withBorder radius="md" p="md">
+          <Group gap={8} wrap="nowrap" style={{ minWidth: 0 }}>
+            <ThemeIcon
+              variant="light"
+              color={clearance.allApproved ? "edr-green" : "gray"}
+              radius="md"
+              size={28}
+            >
+              <FileCheck2 size={15} />
+            </ThemeIcon>
+            <Text fz="12.5px" c="dimmed">
+              {clearance.allApproved
+                ? "All required documents are approved. Upload declaration, duty, transit permit, and delivery order in the action panel."
+                : "Approve every required document to unlock the customs milestone steps."}
             </Text>
           </Group>
         </Paper>
@@ -450,6 +497,7 @@ function DocReviewCard({
   doc,
   reviewerTeam,
   readOnly,
+  approvalsLocked,
   note,
   queryOpen,
   onToggleQuery,
@@ -462,6 +510,7 @@ function DocReviewCard({
   doc: Freight.ContractClearanceDocument;
   reviewerTeam: string;
   readOnly: boolean;
+  approvalsLocked: boolean;
   note: string;
   queryOpen: boolean;
   onToggleQuery: (open: boolean) => void;
@@ -598,7 +647,7 @@ function DocReviewCard({
               >
                 Open query
               </Button>
-              {!isApproved && (
+              {!isApproved && !approvalsLocked && (
                 <Button
                   size="sm"
                   color="edr-green"