mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-08-30 12:18:11 +00:00
Enhance overview and train scheduling features
- Updated OverviewContractsTabPanel to include a new donut chart for freight type distribution. - Modified OverviewOperationsTabPanel to improve data visualization with additional charts and refactored data handling. - Introduced CreateScheduleWindowFields component for configuring booking windows in train scheduling. - Added new API endpoints for allocation candidates and booking allocation in trainScheduling.service. - Enhanced BookingRequestsPage to support allocation of paid bookings with a modal for selecting alternative dates. - Updated QUERY_KEYS and URLS constants to accommodate new operations and features. - Improved type definitions for overview and train scheduling to support new functionalities.
This commit is contained in:
Marshal
@@ -0,0 +1,82 @@
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { Paper, Stack, Text } from "@mantine/core";
|
||||
|
||||
export interface StackedBarSeries {
|
||||
/** Key into each data row holding this series' value. */
|
||||
key: string;
|
||||
label: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface OverviewStackedBarChartProps<T extends object> {
|
||||
title: string;
|
||||
data: T[];
|
||||
/** Fixed order + fixed color per series — colors follow the entity, not the rank. */
|
||||
series: StackedBarSeries[];
|
||||
xKey?: string;
|
||||
emptyMessage?: string;
|
||||
formatXLabel?: (value: string) => string;
|
||||
}
|
||||
|
||||
export function OverviewStackedBarChart<T extends object>({
|
||||
title,
|
||||
data,
|
||||
series,
|
||||
xKey = "date",
|
||||
emptyMessage = "No data available",
|
||||
formatXLabel,
|
||||
}: OverviewStackedBarChartProps<T>) {
|
||||
const hasData = data.some((row) =>
|
||||
series.some((s) => Number((row as Record<string, unknown>)[s.key]) > 0),
|
||||
);
|
||||
|
||||
return (
|
||||
<Paper p="md" radius="lg" withBorder h="100%" style={{ minHeight: 260 }}>
|
||||
<Stack gap="sm" h="100%">
|
||||
<Text fw={600}>{title}</Text>
|
||||
{!hasData ? (
|
||||
<Text size="sm" c="dimmed" ta="center" py="xl">
|
||||
{emptyMessage}
|
||||
</Text>
|
||||
) : (
|
||||
<ResponsiveContainer width="100%" height={230}>
|
||||
<BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" vertical={false} />
|
||||
<XAxis
|
||||
dataKey={xKey}
|
||||
tickFormatter={formatXLabel}
|
||||
tick={{ fontSize: 11 }}
|
||||
stroke="#94a3b8"
|
||||
/>
|
||||
<YAxis allowDecimals={false} tick={{ fontSize: 12 }} stroke="#94a3b8" />
|
||||
<Tooltip labelFormatter={formatXLabel && ((v) => formatXLabel(String(v)))} />
|
||||
<Legend iconType="circle" iconSize={9} />
|
||||
{series.map((s, index) => (
|
||||
<Bar
|
||||
key={s.key}
|
||||
dataKey={s.key}
|
||||
name={s.label}
|
||||
stackId="stack"
|
||||
fill={s.color}
|
||||
stroke="#ffffff"
|
||||
strokeWidth={1}
|
||||
barSize={18}
|
||||
radius={index === series.length - 1 ? [4, 4, 0, 0] : undefined}
|
||||
/>
|
||||
))}
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -36,7 +36,7 @@ export function OverviewTabContent({ tab, range }: OverviewTabContentProps) {
|
||||
const bookings = useOverviewBookingsTab(range, tab === "bookings");
|
||||
const contracts = useOverviewContractsTab(range, tab === "contracts");
|
||||
const billing = useOverviewBillingTab(range, tab === "billing");
|
||||
const operations = useOverviewOperationsTab(tab === "operations");
|
||||
const operations = useOverviewOperationsTab(range, tab === "operations");
|
||||
const customers = useOverviewCustomersTab(range, tab === "customers");
|
||||
const staff = useOverviewStaffTab(range, tab === "staff");
|
||||
|
||||
|
||||
@@ -71,7 +71,7 @@ export function OverviewBookingsTabPanel({ data }: OverviewBookingsTabPanelProps
|
||||
</Grid>
|
||||
|
||||
<Grid gap="md">
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<OverviewDonutChart
|
||||
title="By status"
|
||||
data={data.bookingsByStatus.map((item) => ({
|
||||
@@ -81,10 +81,20 @@ export function OverviewBookingsTabPanel({ data }: OverviewBookingsTabPanelProps
|
||||
emptyMessage="No bookings yet"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<OverviewDonutChart
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<OverviewHorizontalBarChart
|
||||
title="By freight type"
|
||||
data={data.bookingsByFreightType.map((item) => ({
|
||||
label: item.label,
|
||||
value: item.count,
|
||||
}))}
|
||||
valueLabel="Bookings"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<OverviewDonutChart
|
||||
title="By payment currency"
|
||||
data={data.bookingsByCurrency.map((item) => ({
|
||||
name: item.label,
|
||||
value: item.count,
|
||||
}))}
|
||||
@@ -92,14 +102,6 @@ export function OverviewBookingsTabPanel({ data }: OverviewBookingsTabPanelProps
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<OverviewHorizontalBarChart
|
||||
title="By payment currency"
|
||||
data={data.bookingsByCurrency.map((item) => ({
|
||||
label: item.label,
|
||||
value: item.count,
|
||||
}))}
|
||||
/>
|
||||
|
||||
<OverviewRecentBookingsTable bookings={data.recentBookings} />
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -94,7 +94,7 @@ export function OverviewContractsTabPanel({
|
||||
</Grid>
|
||||
|
||||
<Grid gap="md">
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<OverviewDonutChart
|
||||
title="By status"
|
||||
data={data.contractsByStatus.map((item) => ({
|
||||
@@ -104,7 +104,7 @@ export function OverviewContractsTabPanel({
|
||||
emptyMessage="No contracts yet"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<OverviewDonutChart
|
||||
title="By kind"
|
||||
data={data.contractsByKind.map((item) => ({
|
||||
@@ -113,16 +113,17 @@ export function OverviewContractsTabPanel({
|
||||
}))}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<OverviewDonutChart
|
||||
title="By freight type"
|
||||
data={data.contractsByFreightType.map((item) => ({
|
||||
name: item.label === "CONTAINER" ? "Container" : "Bulk",
|
||||
value: item.count,
|
||||
}))}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<OverviewHorizontalBarChart
|
||||
title="By freight type"
|
||||
data={data.contractsByFreightType.map((item) => ({
|
||||
label: item.label === "CONTAINER" ? "Container" : "Bulk",
|
||||
value: item.count,
|
||||
}))}
|
||||
/>
|
||||
|
||||
<OverviewRecentContractsTable contracts={data.recentContracts} />
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -1,13 +1,25 @@
|
||||
import { Box, Container as ContainerIcon, Train, Truck } from "lucide-react";
|
||||
import {
|
||||
Box,
|
||||
CalendarClock,
|
||||
Container as ContainerIcon,
|
||||
Send,
|
||||
Train,
|
||||
Truck,
|
||||
} from "lucide-react";
|
||||
import { Grid, Stack } from "@mantine/core";
|
||||
|
||||
import type { IOverviewOperationsTab } from "@/types/overview";
|
||||
import { OverviewDonutChart } from "../OverviewDonutChart";
|
||||
import { OverviewHorizontalBarChart } from "../OverviewHorizontalBarChart";
|
||||
import { OverviewKpiStrip } from "../OverviewKpiStrip";
|
||||
import { OverviewStackedBarChart } from "../OverviewStackedBarChart";
|
||||
|
||||
interface OverviewOperationsTabPanelProps {
|
||||
data: IOverviewOperationsTab;
|
||||
}
|
||||
/** Fixed direction colors (CVD-validated pair + violet): color follows the entity. */
|
||||
const DIRECTION_SERIES = [
|
||||
{ key: "exportCount", label: "Export", color: "#D98A0B" },
|
||||
{ key: "importCount", label: "Import", color: "#0369a1" },
|
||||
{ key: "domesticCount", label: "Domestic", color: "#7c3aed" },
|
||||
];
|
||||
|
||||
function formatStatusLabel(status: string) {
|
||||
return status
|
||||
@@ -16,6 +28,22 @@ function formatStatusLabel(status: string) {
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
function formatDateLabel(date: string) {
|
||||
const parsed = new Date(`${date}T00:00:00`);
|
||||
return parsed.toLocaleDateString(undefined, { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
function toDonutData(items: { status: string; count: number }[]) {
|
||||
return items.map((item) => ({
|
||||
name: formatStatusLabel(item.status),
|
||||
value: item.count,
|
||||
}));
|
||||
}
|
||||
|
||||
interface OverviewOperationsTabPanelProps {
|
||||
data: IOverviewOperationsTab;
|
||||
}
|
||||
|
||||
export function OverviewOperationsTabPanel({ data }: OverviewOperationsTabPanelProps) {
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
@@ -27,6 +55,19 @@ export function OverviewOperationsTabPanel({ data }: OverviewOperationsTabPanelP
|
||||
icon: Train,
|
||||
accent: "emerald",
|
||||
},
|
||||
{
|
||||
label: "Upcoming departures",
|
||||
value: data.kpis.schedulesUpcoming,
|
||||
icon: CalendarClock,
|
||||
accent: "sky",
|
||||
hint: "Scheduled, not yet departed",
|
||||
},
|
||||
{
|
||||
label: "Dispatched today",
|
||||
value: data.kpis.dispatchedToday,
|
||||
icon: Send,
|
||||
accent: "amber",
|
||||
},
|
||||
{
|
||||
label: "Wagons available",
|
||||
value: data.kpis.wagonsAvailable,
|
||||
@@ -45,41 +86,95 @@ export function OverviewOperationsTabPanel({ data }: OverviewOperationsTabPanelP
|
||||
]}
|
||||
/>
|
||||
|
||||
<Grid gap="md">
|
||||
<Grid.Col span={{ base: 12, lg: 8 }}>
|
||||
<OverviewStackedBarChart
|
||||
title="Train departures by direction"
|
||||
data={data.departureTrend}
|
||||
series={DIRECTION_SERIES}
|
||||
formatXLabel={formatDateLabel}
|
||||
emptyMessage="No scheduled departures in this period"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, lg: 4 }}>
|
||||
<OverviewDonutChart
|
||||
title="Schedule status"
|
||||
data={toDonutData(data.scheduleStatusBreakdown)}
|
||||
emptyMessage="No train schedules yet"
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid gap="md">
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<OverviewHorizontalBarChart
|
||||
title="Wagon fleet by type"
|
||||
data={data.wagonsByType.map((item) => ({
|
||||
label: item.label,
|
||||
value: item.count,
|
||||
}))}
|
||||
valueLabel="Wagons"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<OverviewHorizontalBarChart
|
||||
title="Wagons by yard"
|
||||
data={data.wagonsByYard.map((item) => ({
|
||||
label: item.label,
|
||||
value: item.count,
|
||||
}))}
|
||||
valueLabel="Wagons"
|
||||
emptyMessage="No wagons assigned to yards"
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid gap="md">
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<OverviewHorizontalBarChart
|
||||
title="Cargo tonnage by type"
|
||||
data={data.cargoTonnageByType.map((item) => ({
|
||||
label: item.label,
|
||||
value: item.tons,
|
||||
}))}
|
||||
valueLabel="Tons"
|
||||
emptyMessage="No cargo recorded"
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<OverviewDonutChart
|
||||
title="Containers by size"
|
||||
data={data.containersBySize.map((item) => ({
|
||||
name: item.label,
|
||||
value: item.count,
|
||||
}))}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
<Grid gap="md">
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<OverviewDonutChart
|
||||
title="Train status"
|
||||
data={data.trainStatusBreakdown.map((item) => ({
|
||||
name: formatStatusLabel(item.status),
|
||||
value: item.count,
|
||||
}))}
|
||||
data={toDonutData(data.trainStatusBreakdown)}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<OverviewDonutChart
|
||||
title="Wagon status"
|
||||
data={data.wagonStatusBreakdown.map((item) => ({
|
||||
name: formatStatusLabel(item.status),
|
||||
value: item.count,
|
||||
}))}
|
||||
data={toDonutData(data.wagonStatusBreakdown)}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<OverviewDonutChart
|
||||
title="Container status"
|
||||
data={data.containerStatusBreakdown.map((item) => ({
|
||||
name: formatStatusLabel(item.status),
|
||||
value: item.count,
|
||||
}))}
|
||||
data={toDonutData(data.containerStatusBreakdown)}
|
||||
/>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={{ base: 12, md: 6 }}>
|
||||
<OverviewDonutChart
|
||||
title="Cargo status"
|
||||
data={data.cargoStatusBreakdown.map((item) => ({
|
||||
name: formatStatusLabel(item.status),
|
||||
value: item.count,
|
||||
}))}
|
||||
data={toDonutData(data.cargoStatusBreakdown)}
|
||||
/>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
@@ -0,0 +1,366 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
Box,
|
||||
Divider,
|
||||
Group,
|
||||
Loader,
|
||||
NumberInput,
|
||||
Select,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
} from "@mantine/core";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Info, Moon, Sun } from "lucide-react";
|
||||
|
||||
import DurationField from "@/components/trainScheduling/DurationField";
|
||||
import { trainSchedulingService } from "@/services/trainScheduling.service";
|
||||
import type { CreateScheduleWindowRulePayload } from "@/types/trainScheduling";
|
||||
|
||||
/** Fallbacks matching the API's global-rules defaults (used if the fetch fails). */
|
||||
const DEFAULTS = {
|
||||
windowOpenHour: 8,
|
||||
windowCloseHour: 17,
|
||||
windowDurationHours: 3,
|
||||
docReviewMinutes: 30,
|
||||
paymentWindowMinutes: 60,
|
||||
importWindowLeadDays: 3,
|
||||
exportBookingLeadHours: 24,
|
||||
};
|
||||
|
||||
/** 12-hour label for an EAT hour 0–23, e.g. 8 → "8:00 AM", 17 → "5:00 PM". */
|
||||
function hourLabel(hour: number): string {
|
||||
const period = hour < 12 ? "AM" : "PM";
|
||||
const h12 = hour % 12 === 0 ? 12 : hour % 12;
|
||||
return `${h12}:00 ${period}`;
|
||||
}
|
||||
|
||||
const HOUR_OPTIONS = Array.from({ length: 24 }, (_, h) => ({
|
||||
value: String(h),
|
||||
label: `${hourLabel(h)} · ${String(h).padStart(2, "0")}:00`,
|
||||
}));
|
||||
|
||||
export interface WindowFormState {
|
||||
windowOpenHour: number;
|
||||
windowCloseHour: number;
|
||||
windowDurationHours: number | "";
|
||||
docReviewMinutes: number | "";
|
||||
paymentWindowMinutes: number | "";
|
||||
importWindowLeadDays: number | "";
|
||||
exportBookingLeadHours: number | "";
|
||||
/** Blank = close exactly at departure. */
|
||||
closeOffsetMinutes: number | "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds the create payload from form state, or returns an error message when a
|
||||
* required field was left blank. The close offset is direction-scoped: only the
|
||||
* offset matching this schedule's direction is sent, since the other is never read.
|
||||
*/
|
||||
export function buildWindowRulePayload(
|
||||
form: WindowFormState,
|
||||
isExport: boolean,
|
||||
): { payload: CreateScheduleWindowRulePayload } | { error: string } {
|
||||
const duration = Number(form.windowDurationHours);
|
||||
const doc = Number(form.docReviewMinutes);
|
||||
const pay = Number(form.paymentWindowMinutes);
|
||||
const lead = Number(form.importWindowLeadDays);
|
||||
const exportLead = Number(form.exportBookingLeadHours);
|
||||
|
||||
const leadInvalid = isExport
|
||||
? form.exportBookingLeadHours === "" || !Number.isFinite(exportLead) || exportLead < 1
|
||||
: form.importWindowLeadDays === "" || !Number.isFinite(lead);
|
||||
if (
|
||||
form.windowDurationHours === "" ||
|
||||
form.docReviewMinutes === "" ||
|
||||
form.paymentWindowMinutes === "" ||
|
||||
!Number.isFinite(duration) ||
|
||||
!Number.isFinite(doc) ||
|
||||
!Number.isFinite(pay) ||
|
||||
leadInvalid
|
||||
) {
|
||||
return { error: "Fill every booking-window field, or turn the toggle off" };
|
||||
}
|
||||
|
||||
// Blank offset = close at departure. Sent as null (not omitted) so it wins
|
||||
// over a non-null global offset.
|
||||
const offset = form.closeOffsetMinutes === "" ? null : Number(form.closeOffsetMinutes);
|
||||
|
||||
return {
|
||||
payload: {
|
||||
windowOpenHour: form.windowOpenHour,
|
||||
windowCloseHour: form.windowCloseHour,
|
||||
windowDurationHours: duration,
|
||||
docReviewMinutes: doc,
|
||||
paymentWindowMinutes: pay,
|
||||
...(isExport
|
||||
? { exportBookingLeadHours: exportLead, exportCloseOffsetMinutes: offset }
|
||||
: { importWindowLeadDays: lead, importCloseOffsetMinutes: offset }),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export interface CreateScheduleWindowFieldsProps {
|
||||
/** Direction of the selected route — picks lead/offset semantics. */
|
||||
isExport: boolean;
|
||||
form: WindowFormState | null;
|
||||
onChange: (next: WindowFormState) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Booking-window settings for a schedule being created. Prefills from the live
|
||||
* global rules (so the fields show what the schedule WOULD inherit), then lets
|
||||
* staff tune them for this one train. Mirrors BookingWindowSettingsModal, plus
|
||||
* the booking-close offset.
|
||||
*/
|
||||
export default function CreateScheduleWindowFields({
|
||||
isExport,
|
||||
form,
|
||||
onChange,
|
||||
}: CreateScheduleWindowFieldsProps) {
|
||||
const rulesQuery = useQuery({
|
||||
queryKey: ["train-scheduling", "global-rules"],
|
||||
queryFn: () => trainSchedulingService.getGlobalRules(),
|
||||
staleTime: 5 * 60_000,
|
||||
});
|
||||
|
||||
// Seed once from the global rules, so the toggle opens on the values this
|
||||
// schedule would otherwise inherit rather than on hardcoded guesses.
|
||||
const [seeded, setSeeded] = useState(false);
|
||||
useEffect(() => {
|
||||
if (seeded || form != null) return;
|
||||
const r = rulesQuery.data;
|
||||
if (!r && rulesQuery.isLoading) return;
|
||||
const num = (v: unknown, fallback: number) => {
|
||||
const n = v == null || v === "" ? NaN : Number(v);
|
||||
return Number.isFinite(n) ? n : fallback;
|
||||
};
|
||||
const offset = isExport
|
||||
? (r as { exportCloseOffsetMinutes?: number | null } | undefined)
|
||||
?.exportCloseOffsetMinutes
|
||||
: (r as { importCloseOffsetMinutes?: number | null } | undefined)
|
||||
?.importCloseOffsetMinutes;
|
||||
onChange({
|
||||
windowOpenHour: num(r?.windowOpenHour, DEFAULTS.windowOpenHour),
|
||||
windowCloseHour: num(r?.windowCloseHour, DEFAULTS.windowCloseHour),
|
||||
windowDurationHours: num(r?.windowDurationHours, DEFAULTS.windowDurationHours),
|
||||
docReviewMinutes: num(r?.docReviewMinutes, DEFAULTS.docReviewMinutes),
|
||||
paymentWindowMinutes: num(
|
||||
isExport
|
||||
? (r as { exportPaymentWindowMinutes?: number } | undefined)
|
||||
?.exportPaymentWindowMinutes
|
||||
: r?.paymentWindowMinutes,
|
||||
DEFAULTS.paymentWindowMinutes,
|
||||
),
|
||||
importWindowLeadDays: num(r?.importWindowLeadDays, DEFAULTS.importWindowLeadDays),
|
||||
exportBookingLeadHours: num(
|
||||
r?.exportBookingLeadHours,
|
||||
DEFAULTS.exportBookingLeadHours,
|
||||
),
|
||||
closeOffsetMinutes: offset == null || offset === 0 ? "" : Number(offset),
|
||||
});
|
||||
setSeeded(true);
|
||||
}, [seeded, form, rulesQuery.data, rulesQuery.isLoading, isExport, onChange]);
|
||||
|
||||
const set = (patch: Partial<WindowFormState>) => {
|
||||
if (form) onChange({ ...form, ...patch });
|
||||
};
|
||||
|
||||
const is24h = form != null && form.windowOpenHour === form.windowCloseHour;
|
||||
// Close < open is a valid OVERNIGHT desk (e.g. 08:00 → 07:00 next morning).
|
||||
const isOvernight = form != null && form.windowCloseHour < form.windowOpenHour;
|
||||
|
||||
const reopenSummary = useMemo(() => {
|
||||
if (!form) return "";
|
||||
const total = (Number(form.docReviewMinutes) || 0) + (Number(form.paymentWindowMinutes) || 0);
|
||||
const h = Math.floor(total / 60);
|
||||
const m = total % 60;
|
||||
const parts = [h ? `${h}h` : "", m ? `${m}m` : ""].filter(Boolean);
|
||||
return parts.length ? parts.join(" ") : "0m";
|
||||
}, [form]);
|
||||
|
||||
if (!form) {
|
||||
return (
|
||||
<Group justify="center" py="md">
|
||||
<Loader size="sm" />
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
{isExport ? (
|
||||
<Alert variant="light" color="blue" icon={<Info size={16} />}>
|
||||
Export schedules use a single first-come-first-served window: it opens the
|
||||
export lead time before departure — shifted to the next desk opening if that
|
||||
lands outside desk hours — and stays open until it closes. Cycle timing below
|
||||
doesn't apply.
|
||||
</Alert>
|
||||
) : (
|
||||
<Alert variant="light" color="orange" icon={<Info size={16} />}>
|
||||
These settings apply to this train only, and can be set only for the FIRST
|
||||
train on a route and departure day. Later trains that day join its booking
|
||||
group and share the same window.
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* ── Daily desk hours ─────────────────────────────────────────── */}
|
||||
<Box>
|
||||
<Group justify="space-between" align="center" mb={6}>
|
||||
<Text size="sm" fw={600}>
|
||||
Daily desk hours (EAT)
|
||||
</Text>
|
||||
{is24h ? (
|
||||
<Badge variant="light" color="grape" leftSection={<Moon size={12} />}>
|
||||
24-hour desk
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="light" color="edr-green" leftSection={<Sun size={12} />}>
|
||||
{hourLabel(form.windowOpenHour)} – {hourLabel(form.windowCloseHour)}
|
||||
</Badge>
|
||||
)}
|
||||
</Group>
|
||||
<Group grow align="flex-start">
|
||||
<Select
|
||||
label="Opens"
|
||||
data={HOUR_OPTIONS}
|
||||
value={String(form.windowOpenHour)}
|
||||
onChange={(v) => v != null && set({ windowOpenHour: Number(v) })}
|
||||
allowDeselect={false}
|
||||
comboboxProps={{ withinPortal: true }}
|
||||
/>
|
||||
<Select
|
||||
label="Closes"
|
||||
data={HOUR_OPTIONS}
|
||||
value={String(form.windowCloseHour)}
|
||||
onChange={(v) => v != null && set({ windowCloseHour: Number(v) })}
|
||||
allowDeselect={false}
|
||||
comboboxProps={{ withinPortal: true }}
|
||||
/>
|
||||
</Group>
|
||||
{isOvernight && !is24h ? (
|
||||
<Text size="xs" c="dimmed" mt={4}>
|
||||
Overnight desk — opens {form.windowOpenHour}:00 and runs past midnight,
|
||||
closing {form.windowCloseHour}:00 the next morning.
|
||||
</Text>
|
||||
) : null}
|
||||
<Switch
|
||||
mt="sm"
|
||||
size="sm"
|
||||
color="grape"
|
||||
label="Run 24 hours a day (never pause overnight)"
|
||||
checked={is24h}
|
||||
onChange={(e) =>
|
||||
set({
|
||||
// On → close == open (24h desk). Off → restore a normal ~9h day.
|
||||
windowCloseHour: e.currentTarget.checked
|
||||
? form.windowOpenHour
|
||||
: Math.min(23, form.windowOpenHour + 9),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* ── Cycle timing ─────────────────────────────────────────────── */}
|
||||
<Box>
|
||||
<Text size="sm" fw={600} mb={6}>
|
||||
Cycle timing
|
||||
</Text>
|
||||
<Stack gap="sm">
|
||||
<DurationField
|
||||
label="Window duration"
|
||||
description="How long each booking cycle stays open before it closes for review"
|
||||
value={form.windowDurationHours}
|
||||
nativeUnit="hours"
|
||||
onChange={(v) => set({ windowDurationHours: v })}
|
||||
min={0.0166}
|
||||
disabled={isExport}
|
||||
/>
|
||||
<Group grow align="flex-start">
|
||||
<DurationField
|
||||
label="Document review"
|
||||
description="Staff time to accept documents after the window closes"
|
||||
value={form.docReviewMinutes}
|
||||
nativeUnit="minutes"
|
||||
onChange={(v) => set({ docReviewMinutes: v })}
|
||||
min={0}
|
||||
disabled={isExport}
|
||||
/>
|
||||
<DurationField
|
||||
label="Payment window"
|
||||
description="Time a selected customer has to pay"
|
||||
value={form.paymentWindowMinutes}
|
||||
nativeUnit="minutes"
|
||||
onChange={(v) => set({ paymentWindowMinutes: v })}
|
||||
min={1}
|
||||
/>
|
||||
</Group>
|
||||
{!isExport ? (
|
||||
<Text size="xs" c="dimmed">
|
||||
Reopen gap after each cycle = document review + payment ={" "}
|
||||
<b>{reopenSummary}</b>.
|
||||
</Text>
|
||||
) : null}
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* ── Lead time ────────────────────────────────────────────────── */}
|
||||
{isExport ? (
|
||||
<NumberInput
|
||||
label="Export booking lead (hours)"
|
||||
description="How many hours before departure the export booking window opens"
|
||||
value={form.exportBookingLeadHours}
|
||||
onChange={(v) => set({ exportBookingLeadHours: v === "" ? "" : Number(v) })}
|
||||
min={1}
|
||||
clampBehavior="none"
|
||||
allowNegative={false}
|
||||
allowDecimal={false}
|
||||
/>
|
||||
) : (
|
||||
<NumberInput
|
||||
label="Window lead (days)"
|
||||
description="How many days before departure the booking window starts"
|
||||
value={form.importWindowLeadDays}
|
||||
onChange={(v) => set({ importWindowLeadDays: v === "" ? "" : Number(v) })}
|
||||
min={0}
|
||||
clampBehavior="none"
|
||||
allowNegative={false}
|
||||
allowDecimal={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* ── Booking close offset ─────────────────────────────────────── */}
|
||||
<Box>
|
||||
<Text size="sm" fw={600} mb={2}>
|
||||
Booking close offset
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed" mb={8}>
|
||||
How long before departure this schedule stops accepting bookings. e.g. a
|
||||
3-hour import offset closes a 17:00 departure's window at 14:00; a 1-day
|
||||
export offset closes a Jul-10 16:00 departure at Jul-9 16:00. Leave blank to
|
||||
close exactly at departure.
|
||||
</Text>
|
||||
<DurationField
|
||||
label={isExport ? "Export close offset" : "Import close offset"}
|
||||
description={
|
||||
isExport
|
||||
? "This export booking window closes this long before departure (blank = at departure)"
|
||||
: "This import booking window closes this long before departure (blank = at departure)"
|
||||
}
|
||||
value={form.closeOffsetMinutes}
|
||||
nativeUnit="minutes"
|
||||
onChange={(v) => set({ closeOffsetMinutes: v })}
|
||||
min={0}
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -184,7 +184,8 @@ export const QUERY_KEYS = {
|
||||
["overview", "contracts", range ?? "30d"] as const,
|
||||
billingTab: (range?: string) =>
|
||||
["overview", "billing", range ?? "30d"] as const,
|
||||
operationsTab: () => ["overview", "operations"] as const,
|
||||
operationsTab: (range?: string) =>
|
||||
["overview", "operations", range ?? "30d"] as const,
|
||||
customersTab: (range?: string) =>
|
||||
["overview", "customers", range ?? "30d"] as const,
|
||||
staffTab: (range?: string) =>
|
||||
|
||||
@@ -343,6 +343,10 @@ export const URL_CONSTANTS = {
|
||||
`/train-scheduling/bookings/${bookingId}/expire`,
|
||||
MOVE_BOOKING_SCHEDULE: (bookingId: string) =>
|
||||
`/train-scheduling/bookings/${bookingId}/move-schedule`,
|
||||
ALLOCATION_CANDIDATES: (bookingId: string) =>
|
||||
`/train-scheduling/bookings/${bookingId}/allocation-candidates`,
|
||||
ALLOCATE_BOOKING: (bookingId: string) =>
|
||||
`/train-scheduling/bookings/${bookingId}/allocate`,
|
||||
GLOBAL_RULES: "/train-scheduling/global-rules",
|
||||
BOOKING_WINDOWS: "/train-scheduling/booking-windows",
|
||||
PREVIEW: "/train-scheduling/preview",
|
||||
|
||||
@@ -35,10 +35,10 @@ export function useOverviewBillingTab(range: OverviewRange, enabled: boolean) {
|
||||
});
|
||||
}
|
||||
|
||||
export function useOverviewOperationsTab(enabled: boolean) {
|
||||
export function useOverviewOperationsTab(range: OverviewRange, enabled: boolean) {
|
||||
return useQuery({
|
||||
queryKey: QUERY_KEYS.OVERVIEW.operationsTab(),
|
||||
queryFn: () => overviewService.getOperationsTab(),
|
||||
queryKey: QUERY_KEYS.OVERVIEW.operationsTab(range),
|
||||
queryFn: () => overviewService.getOperationsTab(range),
|
||||
enabled,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -4,7 +4,9 @@ import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Checkbox,
|
||||
Group,
|
||||
Modal,
|
||||
MultiSelect,
|
||||
Select,
|
||||
Stack,
|
||||
@@ -50,7 +52,10 @@ import {
|
||||
import { ContractReferenceLink } from "@/components/bookings/ContractReferenceLink";
|
||||
import { api } from "@/services/api";
|
||||
import type { BookingListFilter } from "@/services/bookings.service";
|
||||
import { trainSchedulingService } from "@/services/trainScheduling.service";
|
||||
import type { AllocationCandidate } from "@/types/trainScheduling";
|
||||
import type { BookingListRow } from "@/types/booking";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import {
|
||||
Badge,
|
||||
DataTable,
|
||||
@@ -155,6 +160,15 @@ export default function BookingRequestsPage() {
|
||||
const [scheduledTo, setScheduledTo] = useState<Date | null>(null);
|
||||
const [allocateOpen, setAllocateOpen] = useState(false);
|
||||
const [allocateIds, setAllocateIds] = useState<string[]>([]);
|
||||
// Paid bookings with no train attached (staff removed them or a sweep
|
||||
// detached them) — the queue the per-row Allocate action works through.
|
||||
const [paidUnallocated, setPaidUnallocated] = useState(false);
|
||||
const [allocatingId, setAllocatingId] = useState<string | null>(null);
|
||||
const [otherDayModal, setOtherDayModal] = useState<{
|
||||
booking: BookingListRow;
|
||||
candidates: AllocationCandidate[];
|
||||
} | null>(null);
|
||||
const { toast } = useToast();
|
||||
const suppressRowClickRef = useRef(false);
|
||||
const suppressRowClick = useCallback(() => {
|
||||
suppressRowClickRef.current = true;
|
||||
@@ -187,6 +201,10 @@ export default function BookingRequestsPage() {
|
||||
...(directionFilter ? { tradeDirection: directionFilter } : {}),
|
||||
...(freightTypeFilter ? { freightType: freightTypeFilter } : {}),
|
||||
...(paymentStatusFilter ? { paymentStatus: paymentStatusFilter } : {}),
|
||||
// Wins over the payment-status select — the queue is by definition PAID.
|
||||
...(paidUnallocated
|
||||
? { paymentStatus: "PAID", assignedToSchedule: "false" as const }
|
||||
: {}),
|
||||
...(ownershipFilter
|
||||
? { isGovernment: ownershipFilter as "true" | "false" }
|
||||
: {}),
|
||||
@@ -208,6 +226,7 @@ export default function BookingRequestsPage() {
|
||||
directionFilter,
|
||||
freightTypeFilter,
|
||||
paymentStatusFilter,
|
||||
paidUnallocated,
|
||||
ownershipFilter,
|
||||
originYardFilter,
|
||||
destinationYardFilter,
|
||||
@@ -251,6 +270,7 @@ export default function BookingRequestsPage() {
|
||||
(directionFilter ? 1 : 0) +
|
||||
(freightTypeFilter ? 1 : 0) +
|
||||
(paymentStatusFilter ? 1 : 0) +
|
||||
(paidUnallocated ? 1 : 0) +
|
||||
(ownershipFilter ? 1 : 0) +
|
||||
(originYardFilter ? 1 : 0) +
|
||||
(destinationYardFilter ? 1 : 0) +
|
||||
@@ -263,6 +283,7 @@ export default function BookingRequestsPage() {
|
||||
setDirectionFilter(null);
|
||||
setFreightTypeFilter(null);
|
||||
setPaymentStatusFilter(null);
|
||||
setPaidUnallocated(false);
|
||||
setOwnershipFilter(null);
|
||||
setOriginYardFilter(null);
|
||||
setDestinationYardFilter(null);
|
||||
@@ -301,6 +322,67 @@ export default function BookingRequestsPage() {
|
||||
[navigate],
|
||||
);
|
||||
|
||||
// One click: same-day fit → allocate straight away. No same-day fit but a
|
||||
// train on another date fits → let staff pick it (customer is notified of
|
||||
// the date change by the API). Nothing fits → say so.
|
||||
const handleAllocatePaid = useCallback(
|
||||
async (row: BookingListRow) => {
|
||||
setAllocatingId(row.id);
|
||||
try {
|
||||
const candidates =
|
||||
await trainSchedulingService.getAllocationCandidates(row.id);
|
||||
if (candidates.sameDay.length > 0) {
|
||||
const target = candidates.sameDay[0];
|
||||
await trainSchedulingService.allocatePaidBooking(row.id, target.id);
|
||||
toast({
|
||||
title: `Allocated ${row.reference}`,
|
||||
description: `Placed on ${target.reference ?? "train"} departing ${formatDate(target.scheduledDepartureDate)}.`,
|
||||
});
|
||||
void refetch();
|
||||
} else if (candidates.otherDays.length > 0) {
|
||||
setOtherDayModal({ booking: row, candidates: candidates.otherDays });
|
||||
} else {
|
||||
toast({
|
||||
title: "No fitting train",
|
||||
description:
|
||||
"No open schedule covers this booking's route with enough capacity.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
toast({ title: "Allocation failed", variant: "destructive" });
|
||||
} finally {
|
||||
setAllocatingId(null);
|
||||
}
|
||||
},
|
||||
[refetch, toast],
|
||||
);
|
||||
|
||||
const handleAllocateOtherDay = useCallback(
|
||||
async (candidate: AllocationCandidate) => {
|
||||
if (!otherDayModal) return;
|
||||
const { booking } = otherDayModal;
|
||||
setAllocatingId(booking.id);
|
||||
try {
|
||||
await trainSchedulingService.allocatePaidBooking(
|
||||
booking.id,
|
||||
candidate.id,
|
||||
);
|
||||
toast({
|
||||
title: `Allocated ${booking.reference}`,
|
||||
description: `Placed on ${candidate.reference ?? "train"} departing ${formatDate(candidate.scheduledDepartureDate)}. Customer notified of the date change.`,
|
||||
});
|
||||
setOtherDayModal(null);
|
||||
void refetch();
|
||||
} catch {
|
||||
toast({ title: "Allocation failed", variant: "destructive" });
|
||||
} finally {
|
||||
setAllocatingId(null);
|
||||
}
|
||||
},
|
||||
[otherDayModal, refetch, toast],
|
||||
);
|
||||
|
||||
const columns: ColumnDef<BookingListRow>[] = [
|
||||
{
|
||||
id: "booking",
|
||||
@@ -435,13 +517,33 @@ export default function BookingRequestsPage() {
|
||||
{
|
||||
id: "actions",
|
||||
size: 140,
|
||||
cell: ({ row }) => (
|
||||
<BookingActionsMenu
|
||||
row={row.original}
|
||||
variant="table"
|
||||
onSuppressRowClick={suppressRowClick}
|
||||
/>
|
||||
),
|
||||
cell: ({ row }) => {
|
||||
const b = row.original;
|
||||
const needsAllocation = b.paymentStatus === "PAID" && !b.trainScheduleId;
|
||||
return (
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
{needsAllocation ? (
|
||||
<Button
|
||||
size="compact-xs"
|
||||
color="edr-green"
|
||||
loading={allocatingId === b.id}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
suppressRowClick();
|
||||
void handleAllocatePaid(b);
|
||||
}}
|
||||
>
|
||||
Allocate
|
||||
</Button>
|
||||
) : null}
|
||||
<BookingActionsMenu
|
||||
row={b}
|
||||
variant="table"
|
||||
onSuppressRowClick={suppressRowClick}
|
||||
/>
|
||||
</Group>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -640,6 +742,16 @@ export default function BookingRequestsPage() {
|
||||
radius="lg"
|
||||
style={{ minWidth: 180 }}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Paid, not allocated"
|
||||
checked={paidUnallocated}
|
||||
onChange={(e) => {
|
||||
setPaidUnallocated(e.currentTarget.checked);
|
||||
resetPage();
|
||||
}}
|
||||
radius="sm"
|
||||
style={{ alignSelf: "center" }}
|
||||
/>
|
||||
<Select
|
||||
placeholder="Gov / Private"
|
||||
data={OWNERSHIP_OPTIONS}
|
||||
@@ -751,6 +863,42 @@ export default function BookingRequestsPage() {
|
||||
</Card>
|
||||
</Stack>
|
||||
|
||||
<Modal
|
||||
opened={otherDayModal !== null}
|
||||
onClose={() => setOtherDayModal(null)}
|
||||
title="Allocate to another date"
|
||||
centered
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Text size="sm" c="dimmed">
|
||||
No train on {otherDayModal ? formatDate(otherDayModal.booking.scheduledDate) : "the booking's day"}{" "}
|
||||
fits booking {otherDayModal?.booking.reference}. These trains on
|
||||
other dates do — the customer will be notified of the date change.
|
||||
</Text>
|
||||
{otherDayModal?.candidates.map((c) => (
|
||||
<Group key={c.id} justify="space-between" wrap="nowrap">
|
||||
<div>
|
||||
<Text size="sm" fw={500}>
|
||||
{c.reference ?? "Train"}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">
|
||||
Departs {formatDate(c.scheduledDepartureDate)}
|
||||
{c.direction ? ` · ${c.direction}` : ""}
|
||||
</Text>
|
||||
</div>
|
||||
<Button
|
||||
size="compact-sm"
|
||||
color="edr-green"
|
||||
loading={allocatingId === otherDayModal.booking.id}
|
||||
onClick={() => void handleAllocateOtherDay(c)}
|
||||
>
|
||||
Allocate
|
||||
</Button>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
{allocateBooking ? (
|
||||
<AllocateBookingWizard
|
||||
booking={allocateBooking}
|
||||
|
||||
@@ -6,12 +6,14 @@ import {
|
||||
Button,
|
||||
Card,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Group,
|
||||
Menu,
|
||||
Modal,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Switch,
|
||||
Text,
|
||||
TextInput,
|
||||
ThemeIcon,
|
||||
@@ -46,6 +48,10 @@ import {
|
||||
directionRowStyle,
|
||||
} from "@/components/trainBuilder/trainStatus";
|
||||
import BookingWindowSettingsModal from "@/components/trainScheduling/BookingWindowSettingsModal";
|
||||
import CreateScheduleWindowFields, {
|
||||
buildWindowRulePayload,
|
||||
type WindowFormState,
|
||||
} from "@/components/trainScheduling/CreateScheduleWindowFields";
|
||||
import EditScheduleDateModal from "@/components/trainScheduling/EditScheduleDateModal";
|
||||
import { showScheduleWarnings } from "@/components/trainScheduling/locomotiveOptions";
|
||||
import {
|
||||
@@ -59,6 +65,7 @@ import { useToast } from "@/hooks/use-toast";
|
||||
import { useAuth } from "@/auth/useAuth";
|
||||
import { canCreateSchedule, canUpdateSchedule } from "@/lib/permissions";
|
||||
import type {
|
||||
CreateScheduleWindowRulePayload,
|
||||
FreightType,
|
||||
TrainScheduleListFilters,
|
||||
TrainScheduleListItem,
|
||||
@@ -133,6 +140,10 @@ export default function TrainScheduleV2ListPage() {
|
||||
const [scheduleDate, setScheduleDate] = useState("");
|
||||
const [trainId, setTrainId] = useState("");
|
||||
const [reverseWagonOrder, setReverseWagonOrder] = useState(false);
|
||||
// Booking window for the schedule being created: off = inherit the live global
|
||||
// rules (the default), on = the values in `windowForm` are frozen onto it.
|
||||
const [configureWindow, setConfigureWindow] = useState(false);
|
||||
const [windowForm, setWindowForm] = useState<WindowFormState | null>(null);
|
||||
// Recomputed each time the create modal opens so a long-lived tab can't keep
|
||||
// offering a stale "now" as the earliest selectable departure.
|
||||
const minScheduleDate = useMemo(
|
||||
@@ -535,6 +546,25 @@ export default function TrainScheduleV2ListPage() {
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Only build the window override when the toggle is on — off means "inherit
|
||||
// the global rules", which the API expresses as an absent windowRule.
|
||||
let windowRule: CreateScheduleWindowRulePayload | undefined;
|
||||
if (configureWindow) {
|
||||
if (!windowForm) {
|
||||
toast({ title: "Booking window settings are still loading", variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
const built = buildWindowRulePayload(
|
||||
windowForm,
|
||||
selectedRoute?.direction === "EXPORT",
|
||||
);
|
||||
if ("error" in built) {
|
||||
toast({ title: built.error, variant: "destructive" });
|
||||
return;
|
||||
}
|
||||
windowRule = built.payload;
|
||||
}
|
||||
|
||||
try {
|
||||
const created = await create.mutateAsync({
|
||||
payload: {
|
||||
@@ -542,11 +572,14 @@ export default function TrainScheduleV2ListPage() {
|
||||
scheduleDate: new Date(scheduleDate).toISOString(),
|
||||
trainId,
|
||||
reverseWagonOrder,
|
||||
...(windowRule ? { windowRule } : {}),
|
||||
},
|
||||
});
|
||||
toast({ title: "Train schedule created" });
|
||||
showScheduleWarnings(created.warnings);
|
||||
setReverseWagonOrder(false);
|
||||
setConfigureWindow(false);
|
||||
setWindowForm(null);
|
||||
setCreateOpen(false);
|
||||
navigate(`/dashboard/operations/train-scheduling-v2/${created.id}`);
|
||||
} catch (err) {
|
||||
@@ -843,6 +876,22 @@ export default function TrainScheduleV2ListPage() {
|
||||
checked={reverseWagonOrder}
|
||||
onChange={(e) => setReverseWagonOrder(e.currentTarget.checked)}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Switch
|
||||
label="Configure booking window for this schedule"
|
||||
description="Off, this train follows the global booking rules. On, the settings below are frozen onto it and a later global-rules change won't move them."
|
||||
checked={configureWindow}
|
||||
onChange={(e) => setConfigureWindow(e.currentTarget.checked)}
|
||||
/>
|
||||
{configureWindow ? (
|
||||
<CreateScheduleWindowFields
|
||||
isExport={selectedRoute?.direction === "EXPORT"}
|
||||
form={windowForm}
|
||||
onChange={setWindowForm}
|
||||
/>
|
||||
) : null}
|
||||
<Group justify="flex-end">
|
||||
<Button variant="default" onClick={() => setCreateOpen(false)}>
|
||||
Cancel
|
||||
|
||||
@@ -43,8 +43,12 @@ export const overviewService = {
|
||||
return unwrap(response);
|
||||
},
|
||||
|
||||
getOperationsTab: async (): Promise<IOverviewOperationsTab> => {
|
||||
const response = await client.get<IOverviewOperationsTab>(O.OPERATIONS);
|
||||
getOperationsTab: async (
|
||||
range?: OverviewRange,
|
||||
): Promise<IOverviewOperationsTab> => {
|
||||
const response = await client.get<IOverviewOperationsTab>(O.OPERATIONS, {
|
||||
params: range ? { range } : undefined,
|
||||
});
|
||||
return unwrap(response);
|
||||
},
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ import { api as client } from "../auth/http";
|
||||
import { unwrap } from "@/utils/endpoint";
|
||||
import { URL_CONSTANTS } from "@/constants/URLS";
|
||||
import type {
|
||||
AllocationCandidates,
|
||||
BatchBoardFilters,
|
||||
BatchBoardListResponse,
|
||||
BatchBoardScheduleDetail,
|
||||
@@ -319,6 +320,25 @@ export const trainSchedulingService = {
|
||||
);
|
||||
},
|
||||
|
||||
getAllocationCandidates: async (
|
||||
bookingId: string,
|
||||
): Promise<AllocationCandidates> => {
|
||||
const response = await client.get<AllocationCandidates>(
|
||||
URL_CONSTANTS.TRAIN_SCHEDULING.ALLOCATION_CANDIDATES(bookingId),
|
||||
);
|
||||
return unwrap(response.data);
|
||||
},
|
||||
|
||||
allocatePaidBooking: async (
|
||||
bookingId: string,
|
||||
trainScheduleId: string,
|
||||
): Promise<void> => {
|
||||
await client.post(
|
||||
URL_CONSTANTS.TRAIN_SCHEDULING.ALLOCATE_BOOKING(bookingId),
|
||||
{ trainScheduleId },
|
||||
);
|
||||
},
|
||||
|
||||
getScheduleById: async (
|
||||
id: string,
|
||||
freightType?: FreightType,
|
||||
|
||||
@@ -8,6 +8,8 @@ export type {
|
||||
IOverviewBillingKpis,
|
||||
IOverviewStaffKpis,
|
||||
IOverviewTrendPoint,
|
||||
IOverviewDirectionTrendPoint,
|
||||
IOverviewTonnagePoint,
|
||||
IOverviewStatusCount,
|
||||
IOverviewPipelineCount,
|
||||
IOverviewPaymentTrendPoint,
|
||||
|
||||
@@ -103,6 +103,21 @@ export interface BookingWagonShortage {
|
||||
wagonsShort: number;
|
||||
}
|
||||
|
||||
/** A train a paid-unallocated booking can board (route + capacity verified). */
|
||||
export interface AllocationCandidate {
|
||||
id: string;
|
||||
reference: string | null;
|
||||
direction: string | null;
|
||||
scheduledDepartureDate: string;
|
||||
}
|
||||
|
||||
export interface AllocationCandidates {
|
||||
/** Trains departing on the booking's own scheduled day. */
|
||||
sameDay: AllocationCandidate[];
|
||||
/** Fitting trains on other days — allocating to one notifies the customer. */
|
||||
otherDays: AllocationCandidate[];
|
||||
}
|
||||
|
||||
export interface DeferredBookingRow {
|
||||
id: string;
|
||||
reference: string;
|
||||
@@ -891,6 +906,23 @@ export interface CreateTrainSchedulePayload {
|
||||
maxWagonsPerTrain?: number;
|
||||
/** Reverse the wagon order on this train: physically-last wagon becomes position 1. */
|
||||
reverseWagonOrder?: boolean;
|
||||
/**
|
||||
* Configure the booking window for THIS schedule instead of inheriting the
|
||||
* live global rules. Omit to follow the global rules (the default).
|
||||
*/
|
||||
windowRule?: CreateScheduleWindowRulePayload;
|
||||
}
|
||||
|
||||
/**
|
||||
* Booking-window rule chosen at creation. Mirrors the per-schedule override plus
|
||||
* the booking-close offset; omitted fields fall back to the global rule.
|
||||
*/
|
||||
export interface CreateScheduleWindowRulePayload
|
||||
extends UpdateScheduleWindowRulePayload {
|
||||
/** Minutes before departure an IMPORT/DOMESTIC window closes; null = at departure. */
|
||||
importCloseOffsetMinutes?: number | null;
|
||||
/** Minutes before departure an EXPORT window closes; null = at departure. */
|
||||
exportCloseOffsetMinutes?: number | null;
|
||||
}
|
||||
|
||||
export interface AssignBookingsPayload {
|
||||
|
||||
Reference in New Issue
Block a user