add clearance history and operations history endpoints, update UI components for history view

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

@@ -15,8 +15,10 @@ import {
 } from "@mantine/core";
 import {
   ArrowRight,
+  CheckCircle,
   ChevronRight,
   FileText,
+  History,
   Inbox,
   LayoutGrid,
   RefreshCw,
@@ -36,15 +38,20 @@ import {
 } from "@edr/ui-common";
 import type { Freight } from "@edr/types";
 
+import { ContractStatusBadge } from "@/components/contracts/ContractStatusBadge";
 import { PageContainer } from "@/components/page/PageContainer";
 import { PageHeader } from "@/components/page/PageHeader";
 import { KpiStrip } from "@/components/page/KpiStrip";
 import { bookingTable } from "@/components/bookings/booking-ui.styles";
 import {
+  useContractClearanceHistory,
   useContractClearanceQueue,
+  useOpsClearanceHistory,
   useOpsClearanceQueue,
 } from "@/hooks/contracts/useContracts";
 
+type PageTab = "queue" | "history";
+
 type ViewMode = "table" | "cards";
 
 interface ClearanceRow {
@@ -56,6 +63,7 @@ interface ClearanceRow {
   originLabel: string;
   destinationLabel: string;
   contractKind: string;
+  status: string;
 }
 
 function yardLabel(
@@ -83,6 +91,7 @@ function toClearanceRow(contract: Freight.IContract): ClearanceRow {
     originLabel: yardLabel(first?.originYard),
     destinationLabel: yardLabel(last?.destinationYard),
     contractKind: contract.contractKind,
+    status: contract.status,
   };
 }
 
@@ -119,13 +128,19 @@ export default function ContractClearanceListPage({
   const navigate = useNavigate();
   const [query, setQuery] = useState("");
   const [view, setView] = useState<ViewMode>("table");
+  const [pageTab, setPageTab] = useState<PageTab>("queue");
   const { pagination, setPagination } = usePagination({ pageSize: 10 });
 
-  const glQueue = useContractClearanceQueue(!opsMode);
-  const opsQueue = useOpsClearanceQueue(opsMode);
+  const isHistory = pageTab === "history";
+
+  const glQueue = useContractClearanceQueue(!opsMode && !isHistory);
+  const opsQueue = useOpsClearanceQueue(opsMode && !isHistory);
+  const glHistory = useContractClearanceHistory(!opsMode && isHistory);
+  const opsHistory = useOpsClearanceHistory(opsMode && isHistory);
+
   const { data, isLoading, isError, isFetching, refetch } = opsMode
-    ? opsQueue
-    : glQueue;
+    ? (isHistory ? opsHistory : opsQueue)
+    : (isHistory ? glHistory : glQueue);
 
   const allRows = useMemo(
     () => (data?.items ?? []).map(toClearanceRow),
@@ -229,11 +244,14 @@ export default function ContractClearanceListPage({
       {
         id: "status",
         header: () => <span className={bookingTable.headerCell}>Status</span>,
-        cell: () => (
-          <Badge size="sm" variant="light" color="edr-green" radius="sm">
-            Under review
-          </Badge>
-        ),
+        cell: ({ row }) =>
+          isHistory ? (
+            <ContractStatusBadge status={row.original.status} />
+          ) : (
+            <Badge size="sm" variant="light" color="edr-green" radius="sm">
+              Under review
+            </Badge>
+          ),
       },
       {
         id: "go",
@@ -261,11 +279,11 @@ export default function ContractClearanceListPage({
           meta={
             <Badge
               variant="light"
-              color="edr-green"
+              color={isHistory ? "gray" : "edr-green"}
               radius="sm"
-              leftSection={<ShieldCheck size={13} />}
+              leftSection={isHistory ? <History size={13} /> : <ShieldCheck size={13} />}
             >
-              {counts.all} awaiting review
+              {isHistory ? `${counts.all} completed` : `${counts.all} awaiting review`}
             </Badge>
           }
           action={
@@ -282,28 +300,53 @@ export default function ContractClearanceListPage({
           }
         />
 
+        <Group>
+          <SegmentedControl
+            size="sm"
+            radius="md"
+            value={pageTab}
+            onChange={(v) => {
+              setPageTab(v as PageTab);
+              setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+            }}
+            data={[
+              {
+                value: "queue",
+                label: (
+                  <Group gap={6} wrap="nowrap">
+                    <Inbox size={15} />
+                    <Box visibleFrom="xs">Queue</Box>
+                  </Group>
+                ),
+              },
+              {
+                value: "history",
+                label: (
+                  <Group gap={6} wrap="nowrap">
+                    <History size={15} />
+                    <Box visibleFrom="xs">History</Box>
+                  </Group>
+                ),
+              },
+            ]}
+          />
+        </Group>
+
         <KpiStrip
           loading={isLoading}
-          items={[
-            {
-              label: "Awaiting review",
-              value: counts.all,
-              icon: Inbox,
-              color: "edr-green",
-            },
-            {
-              label: "Import",
-              value: counts.import,
-              icon: Truck,
-              color: "edr-green",
-            },
-            {
-              label: "Export",
-              value: counts.export,
-              icon: ShipWheel,
-              color: "gray",
-            },
-          ]}
+          items={
+            isHistory
+              ? [
+                  { label: "Total cleared", value: counts.all, icon: CheckCircle, color: "edr-green" },
+                  { label: "Import", value: counts.import, icon: Truck, color: "edr-green" },
+                  { label: "Export", value: counts.export, icon: ShipWheel, color: "gray" },
+                ]
+              : [
+                  { label: "Awaiting review", value: counts.all, icon: Inbox, color: "edr-green" },
+                  { label: "Import", value: counts.import, icon: Truck, color: "edr-green" },
+                  { label: "Export", value: counts.export, icon: ShipWheel, color: "gray" },
+                ]
+          }
         />
 
         <Card p={0} withBorder shadow="sm" radius="lg">
@@ -401,6 +444,7 @@ export default function ContractClearanceListPage({
                 rows={pagedRows}
                 loading={isLoading}
                 onOpen={openDetail}
+                isHistory={isHistory}
               />
             )}
           </Stack>
@@ -414,10 +458,12 @@ function ClearanceCardGrid({
   rows,
   loading,
   onOpen,
+  isHistory = false,
 }: {
   rows: ClearanceRow[];
   loading: boolean;
   onOpen: (id: string) => void;
+  isHistory?: boolean;
 }) {
   if (loading) {
     return (
@@ -449,7 +495,7 @@ function ClearanceCardGrid({
       }}
     >
       {rows.map((r) => (
-        <ClearanceCard key={r.id} row={r} onOpen={() => onOpen(r.id)} />
+        <ClearanceCard key={r.id} row={r} onOpen={() => onOpen(r.id)} isHistory={isHistory} />
       ))}
     </Box>
   );
@@ -458,9 +504,11 @@ function ClearanceCardGrid({
 function ClearanceCard({
   row,
   onOpen,
+  isHistory = false,
 }: {
   row: ClearanceRow;
   onOpen: () => void;
+  isHistory?: boolean;
 }) {
   return (
     <Card
@@ -497,8 +545,8 @@ function ClearanceCard({
             </Group>
           </Box>
         </Group>
-        <Badge size="sm" variant="light" color="edr-green" radius="sm">
-          Under review
+        <Badge size="sm" variant="light" color={isHistory ? "gray" : "edr-green"} radius="sm">
+          {isHistory ? "Cleared" : "Under review"}
         </Badge>
       </Group>