mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 04:08:11 +00:00
506 lines
16 KiB
TypeScript
506 lines
16 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Box,
|
|
Card,
|
|
Group,
|
|
Select,
|
|
Stack,
|
|
Tabs,
|
|
Text,
|
|
TextInput,
|
|
ThemeIcon,
|
|
} from "@mantine/core";
|
|
import { useDebouncedValue } from "@mantine/hooks";
|
|
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
|
import {
|
|
ArrowRight,
|
|
FileText,
|
|
Inbox,
|
|
RefreshCw,
|
|
Repeat,
|
|
Search,
|
|
User,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useCallback, useMemo, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
|
|
import { bookingTable } from "@/components/bookings/booking-ui.styles";
|
|
import { ContractStatusBadge } from "@/components/contracts/ContractStatusBadge";
|
|
import { PageContainer, PageHeader } from "@/components/page";
|
|
import {
|
|
toContractListRow,
|
|
type ContractListRow,
|
|
} from "@/features/contracts/mapContractListRow";
|
|
import { bookingsService } from "@/services/bookings.service";
|
|
import { contractsService } from "@/services/contracts.service";
|
|
import type { BookingDetail } from "@/types/booking";
|
|
import {
|
|
Badge,
|
|
DataTable,
|
|
DataTableFooter,
|
|
usePagination,
|
|
type ColumnDef,
|
|
} from "@edr/ui-common";
|
|
|
|
/**
|
|
* Operations "Clearance Documents" hub — worklist for clearance-document
|
|
* review on contracts WITHOUT customs clearing (self-clearance):
|
|
* Contracts tab = contract-level review (one-time flow), General tab =
|
|
* per-booking review under GENERAL non-customs contracts. Rows deep-link to
|
|
* the existing review detail pages; search / status filter / pagination are
|
|
* all server-side.
|
|
*/
|
|
|
|
type HubTab = "contracts" | "general";
|
|
|
|
const PAGE_SIZE = 10;
|
|
|
|
/** Status filter options for the Contracts tab (values = `statuses` param). */
|
|
const CONTRACT_STATUS_OPTIONS = [
|
|
{
|
|
value: [
|
|
"AWAITING_CLEARANCE_DOCUMENTS",
|
|
"CLEARANCE_UNDER_REVIEW",
|
|
"CLEARANCE_READY_FOR_BOOKING",
|
|
"FULLY_EXECUTED",
|
|
"CONTRACT_ACTIVE",
|
|
"ACTIVE_SHIPMENT_IN_PROGRESS",
|
|
"CONTRACT_CLOSED",
|
|
"CANCELLED",
|
|
].join(","),
|
|
label: "All statuses",
|
|
},
|
|
{ value: "AWAITING_CLEARANCE_DOCUMENTS", label: "Awaiting documents" },
|
|
{ value: "CLEARANCE_UNDER_REVIEW", label: "Under review" },
|
|
{ value: "CLEARANCE_READY_FOR_BOOKING", label: "Ready for booking" },
|
|
{ value: "FULLY_EXECUTED,CONTRACT_ACTIVE", label: "Finalized" },
|
|
{
|
|
value: "ACTIVE_SHIPMENT_IN_PROGRESS,CONTRACT_CLOSED",
|
|
label: "In progress / closed",
|
|
},
|
|
{ value: "CANCELLED", label: "Cancelled" },
|
|
];
|
|
|
|
/** Status filter options for the General (per-booking) tab. */
|
|
const BOOKING_STATUS_OPTIONS = [
|
|
{
|
|
value: "AWAITING_DOCUMENTS,DOCUMENTS_UNDER_REVIEW,CLEARANCE_READY",
|
|
label: "All statuses",
|
|
},
|
|
{ value: "AWAITING_DOCUMENTS", label: "Awaiting documents" },
|
|
{ value: "DOCUMENTS_UNDER_REVIEW", label: "Under review" },
|
|
{ value: "CLEARANCE_READY", label: "Clearance ready" },
|
|
];
|
|
|
|
export default function ClearanceDocumentsPage() {
|
|
const navigate = useNavigate();
|
|
const [hubTab, setHubTab] = useState<HubTab>("contracts");
|
|
const [query, setQuery] = useState("");
|
|
const [debouncedQuery] = useDebouncedValue(query, 300);
|
|
const [contractStatuses, setContractStatuses] = useState(
|
|
CONTRACT_STATUS_OPTIONS[0].value,
|
|
);
|
|
const [bookingStatuses, setBookingStatuses] = useState(
|
|
BOOKING_STATUS_OPTIONS[0].value,
|
|
);
|
|
const { pagination, setPagination } = usePagination({ pageSize: PAGE_SIZE });
|
|
|
|
const search = debouncedQuery.trim() || undefined;
|
|
|
|
const resetPage = useCallback(() => {
|
|
setPagination({ pageIndex: 0, pageSize: PAGE_SIZE });
|
|
}, [setPagination]);
|
|
|
|
const page = pagination.pageIndex + 1;
|
|
|
|
const contractsQuery = useQuery({
|
|
queryKey: [
|
|
"clearance-documents",
|
|
"contracts",
|
|
contractStatuses,
|
|
page,
|
|
search,
|
|
],
|
|
queryFn: () =>
|
|
contractsService.getOpsClearanceQueue({
|
|
page,
|
|
pageSize: PAGE_SIZE,
|
|
statuses: contractStatuses,
|
|
search,
|
|
}),
|
|
enabled: hubTab === "contracts",
|
|
placeholderData: keepPreviousData,
|
|
});
|
|
|
|
const generalQuery = useQuery({
|
|
queryKey: ["clearance-documents", "general", bookingStatuses, page, search],
|
|
queryFn: () =>
|
|
bookingsService.list({
|
|
statuses: bookingStatuses,
|
|
bookingType: "GENERAL_CONTRACT",
|
|
customsClearingEnabled: "false",
|
|
page,
|
|
pageSize: PAGE_SIZE,
|
|
search,
|
|
}),
|
|
enabled: hubTab === "general",
|
|
placeholderData: keepPreviousData,
|
|
});
|
|
|
|
const contractRows = useMemo(
|
|
() => (contractsQuery.data?.items ?? []).map(toContractListRow),
|
|
[contractsQuery.data?.items],
|
|
);
|
|
const bookingRows = generalQuery.data?.items ?? [];
|
|
|
|
const contractColumns: ColumnDef<ContractListRow>[] = useMemo(
|
|
() => [
|
|
{
|
|
id: "contract",
|
|
header: () => <span className={bookingTable.headerCell}>Customer</span>,
|
|
cell: ({ row }) => {
|
|
const c = row.original;
|
|
return (
|
|
<div className="flex items-center gap-3 py-1.5">
|
|
<div className={bookingTable.rowIcon}>
|
|
<User className="size-4" strokeWidth={1.75} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="truncate font-medium text-foreground">
|
|
{c.customerLabel}
|
|
</p>
|
|
<p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
|
|
<FileText className="size-3 shrink-0 opacity-70" />
|
|
{c.reference}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "route",
|
|
header: () => <span className={bookingTable.headerCell}>Route</span>,
|
|
cell: ({ row }) => {
|
|
const c = row.original;
|
|
return (
|
|
<div className="space-y-1 py-1">
|
|
<div className="flex items-center gap-1.5 text-sm font-medium text-foreground">
|
|
<span className="max-w-[8rem] truncate">{c.originLabel}</span>
|
|
<ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
|
|
<span className="max-w-[8rem] truncate">
|
|
{c.destinationLabel}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-1.5">
|
|
<Badge
|
|
variant="outline"
|
|
className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase backdrop-blur-sm"
|
|
>
|
|
{c.tradeDirection}
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="h-5 bg-muted/40 px-1.5 text-[10px] font-medium"
|
|
>
|
|
{c.freightType}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "kind",
|
|
header: () => <span className={bookingTable.headerCell}>Kind</span>,
|
|
cell: ({ row }) => (
|
|
<Badge
|
|
variant="outline"
|
|
className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase"
|
|
>
|
|
{row.original.contractKind === "GENERAL" ? (
|
|
<span className="inline-flex items-center gap-1">
|
|
<Repeat className="size-3" /> General
|
|
</span>
|
|
) : (
|
|
"One-time"
|
|
)}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
id: "status",
|
|
size: 200,
|
|
minSize: 180,
|
|
header: () => <span className={bookingTable.headerCell}>Status</span>,
|
|
cell: ({ row }) => (
|
|
<div className="py-1">
|
|
<ContractStatusBadge
|
|
status={row.original.status}
|
|
isRenewal={row.original.isRenewal}
|
|
/>
|
|
</div>
|
|
),
|
|
meta: {
|
|
headerClassName: "min-w-[11rem]",
|
|
cellClassName: "min-w-[11rem]",
|
|
},
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
const bookingColumns: ColumnDef<BookingDetail>[] = useMemo(
|
|
() => [
|
|
{
|
|
id: "booking",
|
|
header: () => <span className={bookingTable.headerCell}>Customer</span>,
|
|
cell: ({ row }) => {
|
|
const b = row.original;
|
|
const customer = b.isGovernment
|
|
? (b.governmentInstitution ?? "Government")
|
|
: (b.company?.name ?? "—");
|
|
return (
|
|
<div className="flex items-center gap-3 py-1.5">
|
|
<div className={bookingTable.rowIcon}>
|
|
<User className="size-4" strokeWidth={1.75} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="truncate font-medium text-foreground">
|
|
{customer}
|
|
</p>
|
|
<p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
|
|
<FileText className="size-3 shrink-0 opacity-70" />
|
|
{b.reference}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "contractRef",
|
|
header: () => <span className={bookingTable.headerCell}>Contract</span>,
|
|
cell: ({ row }) => (
|
|
<Text size="sm">{row.original.contractReference ?? "—"}</Text>
|
|
),
|
|
},
|
|
{
|
|
id: "shipment",
|
|
header: () => <span className={bookingTable.headerCell}>Shipment</span>,
|
|
cell: ({ row }) => {
|
|
const b = row.original;
|
|
return (
|
|
<div className="flex gap-1.5 py-1">
|
|
<Badge
|
|
variant="outline"
|
|
className="h-5 border-border/50 bg-background/50 px-1.5 text-[10px] font-medium uppercase backdrop-blur-sm"
|
|
>
|
|
{b.tradeDirection ?? "—"}
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="h-5 bg-muted/40 px-1.5 text-[10px] font-medium"
|
|
>
|
|
{b.freightType ?? "—"}
|
|
</Badge>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "status",
|
|
size: 200,
|
|
minSize: 180,
|
|
header: () => <span className={bookingTable.headerCell}>Status</span>,
|
|
cell: ({ row }) => (
|
|
<div className="py-1">
|
|
<BookingStatusBadge status={row.original.status} />
|
|
</div>
|
|
),
|
|
meta: {
|
|
headerClassName: "min-w-[11rem]",
|
|
cellClassName: "min-w-[11rem]",
|
|
},
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
|
|
const isContracts = hubTab === "contracts";
|
|
const activeQuery = isContracts ? contractsQuery : generalQuery;
|
|
const total = activeQuery.data?.total ?? 0;
|
|
const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
|
|
const showEmpty =
|
|
!activeQuery.isLoading &&
|
|
!activeQuery.isError &&
|
|
(isContracts ? contractRows.length : bookingRows.length) === 0;
|
|
const tableStatus = activeQuery.isLoading
|
|
? "loading"
|
|
: activeQuery.isError
|
|
? "error"
|
|
: "success";
|
|
|
|
const statusOptions = isContracts
|
|
? CONTRACT_STATUS_OPTIONS
|
|
: BOOKING_STATUS_OPTIONS;
|
|
const statusValue = isContracts ? contractStatuses : bookingStatuses;
|
|
const setStatusValue = isContracts ? setContractStatuses : setBookingStatuses;
|
|
|
|
return (
|
|
<PageContainer>
|
|
<Stack gap="lg">
|
|
<PageHeader
|
|
title="Clearance Documents"
|
|
subtitle="Operations review of customer clearance documents for contracts without customs clearing."
|
|
action={
|
|
<ActionIcon
|
|
variant="default"
|
|
size="lg"
|
|
radius="md"
|
|
loading={activeQuery.isFetching}
|
|
onClick={() => void activeQuery.refetch()}
|
|
aria-label="Refresh"
|
|
>
|
|
<RefreshCw size={16} />
|
|
</ActionIcon>
|
|
}
|
|
/>
|
|
|
|
<Tabs
|
|
value={hubTab}
|
|
onChange={(v) => {
|
|
setHubTab((v as HubTab) ?? "contracts");
|
|
resetPage();
|
|
}}
|
|
>
|
|
<Tabs.List>
|
|
<Tabs.Tab value="contracts">Contracts</Tabs.Tab>
|
|
<Tabs.Tab value="general">General</Tabs.Tab>
|
|
</Tabs.List>
|
|
</Tabs>
|
|
|
|
<Card p={0}>
|
|
<Stack gap={0}>
|
|
<Box px="md" pt="md" pb="sm" w="100%">
|
|
<Group justify="space-between" gap="md" wrap="wrap">
|
|
<TextInput
|
|
placeholder={
|
|
isContracts
|
|
? "Search reference or customer…"
|
|
: "Search booking, contract or customer…"
|
|
}
|
|
leftSection={<Search size={18} />}
|
|
value={query}
|
|
onChange={(e) => {
|
|
setQuery(e.target.value);
|
|
resetPage();
|
|
}}
|
|
rightSection={
|
|
query && (
|
|
<ActionIcon
|
|
size="sm"
|
|
color="gray"
|
|
radius="md"
|
|
variant="transparent"
|
|
onClick={() => {
|
|
setQuery("");
|
|
resetPage();
|
|
}}
|
|
>
|
|
<X size={16} />
|
|
</ActionIcon>
|
|
)
|
|
}
|
|
style={{ flex: 1, minWidth: "200px" }}
|
|
radius="lg"
|
|
/>
|
|
<Select
|
|
data={statusOptions}
|
|
value={statusValue}
|
|
onChange={(v) => {
|
|
setStatusValue(v ?? statusOptions[0].value);
|
|
resetPage();
|
|
}}
|
|
allowDeselect={false}
|
|
radius="lg"
|
|
w={220}
|
|
aria-label="Filter by status"
|
|
/>
|
|
<Text size="sm" c="dimmed">
|
|
{total} record{total !== 1 ? "s" : ""}
|
|
</Text>
|
|
</Group>
|
|
</Box>
|
|
|
|
{showEmpty ? (
|
|
<Stack align="center" gap={8} py={48}>
|
|
<ThemeIcon variant="light" color="gray" radius="xl" size={48}>
|
|
<Inbox size={22} />
|
|
</ThemeIcon>
|
|
<Text c="dimmed">
|
|
No {isContracts ? "contracts" : "bookings"} match this view.
|
|
</Text>
|
|
</Stack>
|
|
) : (
|
|
<Box style={{ overflowX: "auto" }} w="100%">
|
|
{isContracts ? (
|
|
<DataTable
|
|
columns={contractColumns}
|
|
data={contractRows}
|
|
status={tableStatus}
|
|
onRowClick={(row) =>
|
|
navigate(
|
|
`/dashboard/contracts/clearance-documents/${row.id}`,
|
|
)
|
|
}
|
|
pagination={{
|
|
pageIndex: pagination.pageIndex,
|
|
pageSize: pagination.pageSize,
|
|
pageCount,
|
|
totalCount: total,
|
|
}}
|
|
tableOptions={{
|
|
state: { pagination },
|
|
onPaginationChange: setPagination,
|
|
manualPagination: true,
|
|
pageCount,
|
|
}}
|
|
containerClassName="border-0 shadow-none bg-transparent"
|
|
footer={DataTableFooter}
|
|
/>
|
|
) : (
|
|
<DataTable
|
|
columns={bookingColumns}
|
|
data={bookingRows}
|
|
status={tableStatus}
|
|
onRowClick={(row) =>
|
|
navigate(`/dashboard/clearance/${row.id}`)
|
|
}
|
|
pagination={{
|
|
pageIndex: pagination.pageIndex,
|
|
pageSize: pagination.pageSize,
|
|
pageCount,
|
|
totalCount: total,
|
|
}}
|
|
tableOptions={{
|
|
state: { pagination },
|
|
onPaginationChange: setPagination,
|
|
manualPagination: true,
|
|
pageCount,
|
|
}}
|
|
containerClassName="border-0 shadow-none bg-transparent"
|
|
footer={DataTableFooter}
|
|
/>
|
|
)}
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</PageContainer>
|
|
);
|
|
}
|