finilize gl

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

@@ -0,0 +1,128 @@
+import type { ReactNode } from "react";
+import { Badge, Stack, Tabs, Text } from "@mantine/core";
+import { AlertTriangle, FileText, ShieldAlert } from "lucide-react";
+import type { Freight } from "@edr/types";
+
+import { SectionCard } from "@/components/bookings/detail/SectionCard";
+import { AssignRiskCard } from "@/components/contracts/gl-actions/AssignRiskCard";
+import { IncidentReportCard } from "@/components/contracts/gl-actions/IncidentReportCard";
+import { ClearanceUploadedDocumentsPanel } from "@/components/contracts/ClearanceUploadedDocumentsPanel";
+
+export interface ClearanceOpsTabsProps {
+  bookingId: string | undefined;
+  milestones?: Freight.IClearanceMilestone[];
+  /** When false, only the clearance tab content is rendered (no tab bar). */
+  showOpsTabs?: boolean;
+  clearanceTab: ReactNode;
+  /** Phased customs workflow files — enables the Uploaded documents tab. */
+  workflowFiles?: Freight.ClearanceWorkflowFile[];
+  showWorkflowFilesTab?: boolean;
+  tradeDirection?: string;
+  onViewFile?: (file: { name: string; url: string }) => void;
+  onDownloadFile?: (file: { id: string; name: string }) => void;
+}
+
+function findMilestone(
+  milestones: Freight.IClearanceMilestone[] | undefined,
+  code: string,
+): Freight.IClearanceMilestone | undefined {
+  return milestones?.find((m) => m.milestoneCode === code);
+}
+
+/**
+ * Document Clearance detail layout: primary clearance workflow plus optional
+ * uploaded documents, post-booking risk assignment, and incident reporting tabs.
+ */
+export function ClearanceOpsTabs({
+  bookingId,
+  milestones,
+  showOpsTabs = true,
+  clearanceTab,
+  workflowFiles = [],
+  showWorkflowFilesTab = false,
+  tradeDirection = "IMPORT",
+  onViewFile,
+  onDownloadFile,
+}: ClearanceOpsTabsProps) {
+  const riskMs = findMilestone(milestones, "RISK_ASSIGNED");
+  const hasOps = Boolean(bookingId);
+  const isExport = tradeDirection === "EXPORT";
+  const uploadedDocCount = workflowFiles.filter((f) => {
+    if (!f.file) return false;
+    if (isExport) return f.category !== "duty";
+    return true;
+  }).length;
+  const showDocuments = showWorkflowFilesTab && Boolean(onViewFile);
+  const hasTabs = (showOpsTabs && hasOps) || showDocuments;
+
+  if (!hasTabs) {
+    return <>{clearanceTab}</>;
+  }
+
+  return (
+    <Tabs defaultValue="clearance" keepMounted={false}>
+      <Tabs.List mb="md">
+        <Tabs.Tab value="clearance">Clearance</Tabs.Tab>
+        {showDocuments ? (
+          <Tabs.Tab
+            value="documents"
+            leftSection={<FileText size={14} />}
+            rightSection={
+              uploadedDocCount > 0 ? (
+                <Badge size="xs" variant="light" color="edr-green" circle>
+                  {uploadedDocCount}
+                </Badge>
+              ) : undefined
+            }
+          >
+            Uploaded documents
+          </Tabs.Tab>
+        ) : null}
+        {showOpsTabs && riskMs ? (
+          <Tabs.Tab value="risk" leftSection={<ShieldAlert size={14} />}>
+            Risk assignment
+          </Tabs.Tab>
+        ) : null}
+        {showOpsTabs && bookingId ? (
+          <Tabs.Tab value="incidents" leftSection={<AlertTriangle size={14} />}>
+            Incidents
+          </Tabs.Tab>
+        ) : null}
+      </Tabs.List>
+
+      <Tabs.Panel value="clearance">{clearanceTab}</Tabs.Panel>
+
+      {showDocuments ? (
+        <Tabs.Panel value="documents">
+          <ClearanceUploadedDocumentsPanel
+            files={workflowFiles}
+            tradeDirection={tradeDirection}
+            onView={onViewFile!}
+            onDownload={onDownloadFile}
+          />
+        </Tabs.Panel>
+      ) : null}
+
+      {showOpsTabs && riskMs && bookingId ? (
+        <Tabs.Panel value="risk">
+          <SectionCard icon={ShieldAlert} title="Customs risk" accent="edr-green">
+            <AssignRiskCard bookingId={bookingId} milestone={riskMs} />
+          </SectionCard>
+        </Tabs.Panel>
+      ) : null}
+
+      {showOpsTabs && bookingId ? (
+        <Tabs.Panel value="incidents">
+          <SectionCard icon={AlertTriangle} title="Incident reports" accent="edr-green">
+            <Stack gap="sm">
+              <Text size="sm" c="dimmed">
+                Log container or seal issues discovered during clearance handling.
+              </Text>
+              <IncidentReportCard bookingId={bookingId} />
+            </Stack>
+          </SectionCard>
+        </Tabs.Panel>
+      ) : null}
+    </Tabs>
+  );
+}