mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-29 19:58:11 +00:00
493 lines
16 KiB
TypeScript
493 lines
16 KiB
TypeScript
import {
|
|
ActionIcon,
|
|
Box,
|
|
Button,
|
|
Card,
|
|
Group,
|
|
Select,
|
|
Stack,
|
|
Tabs,
|
|
Text,
|
|
TextInput,
|
|
} from "@mantine/core";
|
|
import {
|
|
AlertTriangle,
|
|
ArrowRight,
|
|
Calendar,
|
|
CheckCircle2,
|
|
Clock,
|
|
LayoutList,
|
|
Package,
|
|
Plus,
|
|
RefreshCw,
|
|
Search,
|
|
User,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useCallback, useMemo, useRef, useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
import { BookingActionsMenu } from "@/components/bookings/BookingActionsMenu";
|
|
import { BookingApprovalProgressCell } from "@/components/bookings/BookingApprovalProgressCell";
|
|
import { BookingPriorityBadge } from "@/components/bookings/BookingPriorityBadge";
|
|
import { BookingStatusBadge } from "@/components/bookings/BookingStatusBadge";
|
|
// BookingStatusTabs / Operations* queues removed — replaced by booking-kind tabs.
|
|
import { BookingTableEmpty } from "@/components/bookings/BookingTableEmpty";
|
|
import { bookingTable } from "@/components/bookings/booking-ui.styles";
|
|
import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
|
|
import { AllocateBookingWizard } from "@/components/trainScheduling/AllocateBookingWizard";
|
|
import { BOOKING_STATUS_STYLES } from "@/features/bookings/booking-status.config";
|
|
import { toBookingListRow } from "@/features/bookings/mapBookingListRow";
|
|
import {
|
|
useBookingDetail,
|
|
useBookingList,
|
|
useBookingListSummary,
|
|
} from "@/hooks/bookings/useBookings";
|
|
import type { BookingListFilter } from "@/services/bookings.service";
|
|
import type { BookingListRow } from "@/types/booking";
|
|
import {
|
|
Badge,
|
|
DataTable,
|
|
DataTableFooter,
|
|
usePagination,
|
|
type ColumnDef,
|
|
} from "@edr/ui-common";
|
|
|
|
/** The two booking-kind tabs: one-time vs general-contract bookings. */
|
|
type BookingKindTab = "ONE_TIME" | "GENERAL_CONTRACT";
|
|
|
|
const BOOKING_KIND_TABS: { value: BookingKindTab; label: string }[] = [
|
|
{ value: "ONE_TIME", label: "One-time booking" },
|
|
{ value: "GENERAL_CONTRACT", label: "General booking" },
|
|
];
|
|
|
|
/** Status options for the filter select — built from the shared status styles. */
|
|
const STATUS_OPTIONS = Object.entries(BOOKING_STATUS_STYLES).map(
|
|
([value, { label }]) => ({ value, label }),
|
|
);
|
|
|
|
const TRADE_DIRECTION_OPTIONS = [
|
|
{ value: "IMPORT", label: "Import" },
|
|
{ value: "EXPORT", label: "Export" },
|
|
{ value: "DOMESTIC", label: "Domestic" },
|
|
];
|
|
|
|
const FREIGHT_TYPE_OPTIONS = [
|
|
{ value: "CONTAINER", label: "Container" },
|
|
{ value: "BULK", label: "Bulk" },
|
|
];
|
|
|
|
function formatDate(value: string | null | undefined): string {
|
|
if (!value) return "—";
|
|
const d = new Date(value);
|
|
return Number.isNaN(d.getTime())
|
|
? "—"
|
|
: d.toLocaleDateString(undefined, {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
}
|
|
|
|
export default function BookingRequestsPage() {
|
|
const navigate = useNavigate();
|
|
const { pagination, setPagination } = usePagination({ pageSize: 10 });
|
|
const [query, setQuery] = useState("");
|
|
// Booking-kind tabs (one-time vs general contract) replace the old status tabs.
|
|
const [kindTab, setKindTab] = useState<BookingKindTab>("ONE_TIME");
|
|
// Per-tab filter selects (each nullable = "all").
|
|
const [statusFilter, setStatusFilter] = useState<string | null>(null);
|
|
const [directionFilter, setDirectionFilter] = useState<string | null>(null);
|
|
const [freightTypeFilter, setFreightTypeFilter] = useState<string | null>(null);
|
|
const [allocateOpen, setAllocateOpen] = useState(false);
|
|
const [allocateIds, setAllocateIds] = useState<string[]>([]);
|
|
const suppressRowClickRef = useRef(false);
|
|
const suppressRowClick = useCallback(() => {
|
|
suppressRowClickRef.current = true;
|
|
window.setTimeout(() => {
|
|
suppressRowClickRef.current = false;
|
|
}, 400);
|
|
}, []);
|
|
|
|
const filter: BookingListFilter = useMemo(() => {
|
|
return {
|
|
page: pagination.pageIndex + 1,
|
|
pageSize: pagination.pageSize,
|
|
sortBy: "createdAt",
|
|
sortOrder: "DESC",
|
|
// React Query cache key per kind tab.
|
|
tab: kindTab,
|
|
bookingType: kindTab,
|
|
...(statusFilter ? { statuses: statusFilter } : {}),
|
|
...(directionFilter ? { tradeDirection: directionFilter } : {}),
|
|
...(freightTypeFilter ? { freightType: freightTypeFilter } : {}),
|
|
};
|
|
}, [
|
|
pagination.pageIndex,
|
|
pagination.pageSize,
|
|
kindTab,
|
|
statusFilter,
|
|
directionFilter,
|
|
freightTypeFilter,
|
|
]);
|
|
|
|
const { data, isLoading, isError, refetch, isFetching } = useBookingList(filter);
|
|
const primaryAllocateId = allocateIds[0];
|
|
const { data: allocateBooking } = useBookingDetail(
|
|
allocateOpen ? primaryAllocateId : undefined,
|
|
);
|
|
const {
|
|
data: summary,
|
|
isLoading: summaryLoading,
|
|
refetch: refetchSummary,
|
|
} = useBookingListSummary(filter);
|
|
|
|
const rows = useMemo(() => {
|
|
const items = (data?.items ?? []).map(toBookingListRow);
|
|
const q = query.trim().toLowerCase();
|
|
if (!q) return items;
|
|
return items.filter(
|
|
(b) =>
|
|
b.reference.toLowerCase().includes(q) ||
|
|
b.customerLabel.toLowerCase().includes(q),
|
|
);
|
|
}, [data?.items, query]);
|
|
|
|
const total = data?.total ?? 0;
|
|
const pageCount = Math.max(1, Math.ceil(total / pagination.pageSize));
|
|
const hasSearch = query.trim().length > 0;
|
|
const showEmpty = !isLoading && !isError && rows.length === 0;
|
|
|
|
const metrics = summary?.metrics;
|
|
const tabCounts = summary?.tabs;
|
|
|
|
const handleRefresh = useCallback(() => {
|
|
void refetch();
|
|
void refetchSummary();
|
|
}, [refetch, refetchSummary]);
|
|
|
|
const handleRowClick = useCallback(
|
|
(row: BookingListRow) => {
|
|
if (suppressRowClickRef.current) return;
|
|
navigate(`/dashboard/booking-requests/${row.id}`);
|
|
},
|
|
[navigate],
|
|
);
|
|
|
|
const columns: ColumnDef<BookingListRow>[] = [
|
|
{
|
|
id: "booking",
|
|
header: () => <span className={bookingTable.headerCell}>Booking</span>,
|
|
cell: ({ row }) => {
|
|
const b = row.original;
|
|
return (
|
|
<div className="flex items-center gap-3 py-1.5">
|
|
<div className={bookingTable.rowIcon}>
|
|
<Package className="size-4" strokeWidth={1.75} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="truncate font-medium text-foreground">{b.reference}</p>
|
|
<p className="mt-0.5 flex items-center gap-1 truncate text-xs text-muted-foreground">
|
|
<User className="size-3 shrink-0 opacity-70" />
|
|
{b.customerLabel}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
{
|
|
id: "route",
|
|
header: () => <span className={bookingTable.headerCell}>Route</span>,
|
|
cell: ({ row }) => {
|
|
const b = 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">{b.originLabel}</span>
|
|
<ArrowRight className="size-3.5 shrink-0 text-muted-foreground" />
|
|
<span className="max-w-[8rem] truncate">{b.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"
|
|
>
|
|
{b.tradeDirection}
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="h-5 bg-muted/40 px-1.5 text-[10px] font-medium"
|
|
>
|
|
{b.freightType}
|
|
</Badge>
|
|
</div>
|
|
</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}
|
|
consolidated={Boolean(row.original.consolidationPartnerId)}
|
|
partnerReference={row.original.consolidationPartnerReference}
|
|
/>
|
|
</div>
|
|
),
|
|
meta: {
|
|
headerClassName: "min-w-[11rem]",
|
|
cellClassName: "min-w-[11rem]",
|
|
},
|
|
},
|
|
{
|
|
id: "approval",
|
|
header: () => (
|
|
<span className={bookingTable.headerCell}>Approval</span>
|
|
),
|
|
cell: ({ row }) => <BookingApprovalProgressCell row={row.original} />,
|
|
},
|
|
{
|
|
id: "scheduled",
|
|
header: () => <span className={bookingTable.headerCell}>Scheduled</span>,
|
|
cell: ({ row }) => (
|
|
<span className="inline-flex items-center gap-1.5 text-sm text-muted-foreground">
|
|
<Calendar className="size-3.5" />
|
|
{formatDate(row.original.scheduledDate)}
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
id: "priority",
|
|
header: () => <span className={bookingTable.headerCell}>Priority</span>,
|
|
cell: ({ row }) => (
|
|
<BookingPriorityBadge score={row.original.priorityScore} />
|
|
),
|
|
},
|
|
{
|
|
id: "actions",
|
|
size: 140,
|
|
cell: ({ row }) => (
|
|
<BookingActionsMenu
|
|
row={row.original}
|
|
variant="table"
|
|
onSuppressRowClick={suppressRowClick}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<PageContainer>
|
|
<Stack gap="lg">
|
|
<PageHeader
|
|
title="Booking requests"
|
|
subtitle="Review, approve, and schedule freight booking requests."
|
|
action={
|
|
<>
|
|
<Button
|
|
color="edr-green"
|
|
leftSection={<Plus size={18} />}
|
|
onClick={() => navigate("/dashboard/booking-requests/new")}
|
|
>
|
|
Create booking
|
|
</Button>
|
|
<Button
|
|
variant="default"
|
|
leftSection={<RefreshCw size={16} />}
|
|
loading={isFetching}
|
|
onClick={handleRefresh}
|
|
>
|
|
Refresh
|
|
</Button>
|
|
</>
|
|
}
|
|
/>
|
|
|
|
<KpiStrip
|
|
loading={summaryLoading}
|
|
items={[
|
|
{
|
|
label: "In queue",
|
|
value: metrics?.inQueue ?? 0,
|
|
icon: LayoutList,
|
|
color: "edr-green",
|
|
},
|
|
{
|
|
label: "Needs action",
|
|
value: metrics?.needsAction ?? 0,
|
|
icon: Clock,
|
|
color: "yellow",
|
|
},
|
|
{
|
|
label: "Urgent",
|
|
value: metrics?.urgent ?? 0,
|
|
icon: AlertTriangle,
|
|
color: "red",
|
|
},
|
|
{
|
|
label: "Completed",
|
|
value: tabCounts?.completed ?? 0,
|
|
icon: CheckCircle2,
|
|
color: "edr-green",
|
|
},
|
|
]}
|
|
/>
|
|
|
|
{/* Status tabs replaced by booking-kind tabs (one-time / general). The
|
|
old BookingStatusTabs is commented out — status is now a filter select.
|
|
<BookingStatusTabs
|
|
active={activeTab}
|
|
onChange={(tab) => {
|
|
setActiveTab(tab);
|
|
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
|
|
}}
|
|
counts={tabCounts}
|
|
/>
|
|
*/}
|
|
|
|
<Tabs
|
|
value={kindTab}
|
|
onChange={(value) => {
|
|
setKindTab((value as BookingKindTab) ?? "ONE_TIME");
|
|
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
|
|
}}
|
|
>
|
|
<Tabs.List>
|
|
{BOOKING_KIND_TABS.map((t) => (
|
|
<Tabs.Tab key={t.value} value={t.value}>
|
|
{t.label}
|
|
</Tabs.Tab>
|
|
))}
|
|
</Tabs.List>
|
|
</Tabs>
|
|
|
|
<Card p={0}>
|
|
<Stack gap={0}>
|
|
<Box px="md" pt="md" pb="sm" w="100%">
|
|
<Stack gap="sm">
|
|
<Group justify="space-between" gap="md" wrap="wrap">
|
|
<TextInput
|
|
placeholder="Search reference or customer…"
|
|
leftSection={<Search size={18} />}
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
rightSection={
|
|
query && (
|
|
<ActionIcon
|
|
size="sm"
|
|
color="gray"
|
|
radius="md"
|
|
variant="transparent"
|
|
onClick={() => setQuery("")}
|
|
>
|
|
<X size={16} />
|
|
</ActionIcon>
|
|
)
|
|
}
|
|
style={{ flex: 1, minWidth: "200px" }}
|
|
radius="lg"
|
|
/>
|
|
<Text size="sm" c="dimmed">
|
|
{total} record{total !== 1 ? "s" : ""}
|
|
</Text>
|
|
</Group>
|
|
<Group gap="sm" wrap="wrap">
|
|
<Select
|
|
placeholder="All statuses"
|
|
data={STATUS_OPTIONS}
|
|
value={statusFilter}
|
|
onChange={(v) => {
|
|
setStatusFilter(v);
|
|
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
|
|
}}
|
|
clearable
|
|
searchable
|
|
radius="lg"
|
|
style={{ minWidth: 200 }}
|
|
/>
|
|
<Select
|
|
placeholder="All directions"
|
|
data={TRADE_DIRECTION_OPTIONS}
|
|
value={directionFilter}
|
|
onChange={(v) => {
|
|
setDirectionFilter(v);
|
|
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
|
|
}}
|
|
clearable
|
|
radius="lg"
|
|
style={{ minWidth: 170 }}
|
|
/>
|
|
<Select
|
|
placeholder="All freight types"
|
|
data={FREIGHT_TYPE_OPTIONS}
|
|
value={freightTypeFilter}
|
|
onChange={(v) => {
|
|
setFreightTypeFilter(v);
|
|
setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
|
|
}}
|
|
clearable
|
|
radius="lg"
|
|
style={{ minWidth: 170 }}
|
|
/>
|
|
</Group>
|
|
</Stack>
|
|
</Box>
|
|
|
|
{showEmpty ? (
|
|
<Box px="md" pb="md">
|
|
<BookingTableEmpty
|
|
isError={isError}
|
|
hasSearch={hasSearch}
|
|
onRetry={handleRefresh}
|
|
/>
|
|
</Box>
|
|
) : (
|
|
<Box style={{ overflowX: "auto" }} w="100%">
|
|
<DataTable
|
|
columns={columns}
|
|
data={rows}
|
|
status={isLoading ? "loading" : isError ? "error" : "success"}
|
|
onRowClick={handleRowClick}
|
|
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>
|
|
|
|
{allocateBooking ? (
|
|
<AllocateBookingWizard
|
|
booking={allocateBooking}
|
|
opened={allocateOpen}
|
|
onClose={() => {
|
|
setAllocateOpen(false);
|
|
setAllocateIds([]);
|
|
void refetch();
|
|
}}
|
|
initialBookingIds={allocateIds}
|
|
/>
|
|
) : null}
|
|
</PageContainer>
|
|
);
|
|
}
|