mirror of
https://github.com/Tria-plc/edr-platform.git
synced 2026-09-07 17:45:42 +00:00
feat(booking): Implement train schedule selection and update booking data structures
This commit is contained in:
ghost2023
@@ -38,6 +38,7 @@
|
||||
"devDependencies": {
|
||||
"@edr/eslint-config": "workspace:*",
|
||||
"@edr/tsconfig": "workspace:*",
|
||||
"@hookform/devtools": "^4.4.0",
|
||||
"@tailwindcss/vite": "^4.3.0",
|
||||
"@types/react": "^18.3.11",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
|
||||
@@ -7,6 +7,7 @@ import { AlertCircle, Check, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { DevTool } from "@hookform/devtools";
|
||||
import {
|
||||
BookingFormInputValues,
|
||||
STEPS,
|
||||
@@ -22,6 +23,7 @@ import {
|
||||
Step2ServiceType,
|
||||
Step4Route,
|
||||
Step5CargoDetails,
|
||||
StepScheduling,
|
||||
StepDocuments,
|
||||
Step8Review,
|
||||
} from "./new-booking-form/steps";
|
||||
@@ -70,7 +72,11 @@ export default function NewBookingPage() {
|
||||
const destinationYard = form.watch("destinationYard");
|
||||
|
||||
const direction = useMemo(
|
||||
() => getRouteDirection(referenceData?.yard.find((y) => y.id === originYard), referenceData?.yard.find((y) => y.id === destinationYard)),
|
||||
() =>
|
||||
getRouteDirection(
|
||||
referenceData?.yard.find((y) => y.id === originYard),
|
||||
referenceData?.yard.find((y) => y.id === destinationYard),
|
||||
),
|
||||
[originYard, destinationYard],
|
||||
);
|
||||
|
||||
@@ -100,15 +106,11 @@ export default function NewBookingPage() {
|
||||
: Number(data.cargoWeight || 0);
|
||||
|
||||
// ── Reference data lookups ──────────────────────────────────────────
|
||||
const yards = referenceData?.yard ?? [];
|
||||
const services = referenceData?.service ?? [];
|
||||
const shippingLines = referenceData?.shipping_line ?? [];
|
||||
const cargoTree = referenceData?.cargo_type ?? [];
|
||||
const containerGroups = referenceData?.containers ?? [];
|
||||
|
||||
const findYardId = (name: string): string =>
|
||||
yards.find((y) => y.name === name)?.id ?? "";
|
||||
|
||||
const findServiceTypeId = (): string => {
|
||||
const code = data.serviceType === "rail" ? "RAIL" : "RAIL_AND_FORWARDING";
|
||||
return services.find((s) => s.code === code)?.id ?? services[0]?.id ?? "";
|
||||
@@ -117,13 +119,6 @@ export default function NewBookingPage() {
|
||||
const findShippingLineId = (name: string): string | undefined =>
|
||||
shippingLines.find((l) => l.name === name)?.id;
|
||||
|
||||
const findContainerCargoTypeId = (): string => {
|
||||
const group = cargoTree.find(
|
||||
(g) => g.code === "CONTAINER" || /container/i.test(g.name),
|
||||
);
|
||||
return group?.id ?? "";
|
||||
};
|
||||
|
||||
const findContainerTypeId = (name: string): string => {
|
||||
for (const group of containerGroups) {
|
||||
const ct = group.types.find((t) => t.name === name);
|
||||
@@ -139,21 +134,18 @@ export default function NewBookingPage() {
|
||||
?.children?.find((c) => c.name === data.bulkCommoditytype)
|
||||
: undefined;
|
||||
|
||||
const cargoTypeId =
|
||||
data.cargoType === "container"
|
||||
? findContainerCargoTypeId()
|
||||
: (selectedChild?.id ?? "");
|
||||
const cargoTypeId = selectedChild?.id;
|
||||
|
||||
const cargoFreeText =
|
||||
data.cargoType === "container"
|
||||
? undefined
|
||||
: selectedChild?.show_free_text_box
|
||||
? data.bulkCommoditytype
|
||||
? data.cargoFreeText
|
||||
: undefined;
|
||||
|
||||
// ── Build API payload ───────────────────────────────────────────────
|
||||
const apiPayload: CreateBookingPayload = {
|
||||
scheduledDate: new Date().toISOString().slice(0, 10),
|
||||
scheduledDate: new Date().toISOString(),
|
||||
contractType:
|
||||
data.contractType.toUpperCase() as CreateBookingPayload["contractType"],
|
||||
serviceTypeId: findServiceTypeId(),
|
||||
@@ -161,13 +153,13 @@ export default function NewBookingPage() {
|
||||
data.equipmentReturn === "with_return"
|
||||
? "WITH_RETURN"
|
||||
: "WITHOUT_RETURN",
|
||||
originYardId: findYardId(data.originYard),
|
||||
destinationYardId: findYardId(data.destinationYard),
|
||||
originYardId: data.originYard,
|
||||
destinationYardId: data.destinationYard,
|
||||
tradeDirection: direction!,
|
||||
cargoTypeId: data.cargoType === "container" ? undefined : cargoTypeId,
|
||||
cargoTypeId,
|
||||
trainScheduleId: data.trainScheduleId,
|
||||
cargoTotalWeightVgm: totalWeight,
|
||||
isHazardous: data.isHazardous,
|
||||
paymentCurrency: "USD",
|
||||
allowConsolidation: data.consolidationEnabled,
|
||||
// @ts-ignore
|
||||
freightType:
|
||||
@@ -243,67 +235,59 @@ export default function NewBookingPage() {
|
||||
Back to Bookings
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<form
|
||||
id="new-booking-form"
|
||||
className="flex flex-col"
|
||||
style={{ flex: 1 }}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{/* Step indicator */}
|
||||
<Box>
|
||||
<Box className="mx-auto max-w-5xl" style={{ paddingInline: "16px" }}>
|
||||
<Box flex={1} p="24px">
|
||||
<Box mb="lg">
|
||||
<StepIndicator step={step} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Step content */}
|
||||
<Box flex={1}>
|
||||
<Box className="mx-auto max-w-5xl" style={{ padding: "32px 24px" }}>
|
||||
{createMutation.isError && (
|
||||
<Alert
|
||||
color="red"
|
||||
icon={<AlertCircle size={16} />}
|
||||
radius="md"
|
||||
mb="lg"
|
||||
>
|
||||
<Text size="sm" fw={600}>
|
||||
Failed to save draft
|
||||
</Text>
|
||||
<Text size="sm" mt={4} c="red.7">
|
||||
{createMutation.error instanceof Error
|
||||
? createMutation.error.message
|
||||
: "An unexpected error occurred. Please try again."}
|
||||
</Text>
|
||||
</Alert>
|
||||
)}
|
||||
{createMutation.isError && (
|
||||
<Alert
|
||||
color="red"
|
||||
icon={<AlertCircle size={16} />}
|
||||
radius="md"
|
||||
mb="lg"
|
||||
>
|
||||
<Text size="sm" fw={600}>
|
||||
Failed to save draft
|
||||
</Text>
|
||||
<Text size="sm" mt={4} c="red.7">
|
||||
{createMutation.error instanceof Error
|
||||
? createMutation.error.message
|
||||
: "An unexpected error occurred. Please try again."}
|
||||
</Text>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{step === 1 && <Step1ContractType form={form} />}
|
||||
{step === 2 && <Step2ServiceType form={form} />}
|
||||
{step === 3 && (
|
||||
<Step4Route
|
||||
form={form}
|
||||
referenceData={referenceData}
|
||||
isLoading={refDataLoading}
|
||||
/>
|
||||
)}
|
||||
{step === 4 && (
|
||||
<Step5CargoDetails
|
||||
form={form}
|
||||
direction={direction}
|
||||
referenceData={referenceData}
|
||||
isLoading={refDataLoading}
|
||||
/>
|
||||
)}
|
||||
{step === 5 && <StepDocuments form={form} />}
|
||||
{step === 6 && (
|
||||
<Step8Review
|
||||
form={form}
|
||||
setStep={setStep}
|
||||
direction={direction}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
{step === 1 && <Step1ContractType form={form} />}
|
||||
{step === 2 && <Step2ServiceType form={form} />}
|
||||
{step === 3 && (
|
||||
<Step4Route
|
||||
form={form}
|
||||
referenceData={referenceData}
|
||||
isLoading={refDataLoading}
|
||||
/>
|
||||
)}
|
||||
{step === 4 && (
|
||||
<Step5CargoDetails
|
||||
form={form}
|
||||
direction={direction!}
|
||||
referenceData={referenceData}
|
||||
isLoading={refDataLoading}
|
||||
/>
|
||||
)}
|
||||
{step === 5 && (
|
||||
<StepScheduling form={form} referenceData={referenceData} />
|
||||
)}
|
||||
{step === 6 && <StepDocuments form={form} />}
|
||||
{step === 7 && (
|
||||
<Step8Review form={form} setStep={setStep} direction={direction!} />
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Navigation footer */}
|
||||
@@ -359,6 +343,7 @@ export default function NewBookingPage() {
|
||||
</Group>
|
||||
</Box>
|
||||
</form>
|
||||
{/* <DevTool control={form.control} /> */}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -101,10 +101,12 @@ export const bookingFormSchema = z
|
||||
destinationYard: z.string().min(1, "Select a destination yard."),
|
||||
shippingLine: z.string(),
|
||||
scheduledDate: z.string().min(1, "Select a shipment date."),
|
||||
trainScheduleId: z.string().min(1, "Select a shipment date."),
|
||||
cargoType: z.enum(["container", "bulk"], "Select a cargo type."),
|
||||
cargoWeight: z.string(),
|
||||
freightType: z.string(), // parent group
|
||||
bulkCommoditytype: z.string(),
|
||||
cargoFreeText: z.string(),
|
||||
isHazardous: z.boolean(),
|
||||
isRefrigerated: z.boolean(),
|
||||
containers: z.array(
|
||||
@@ -229,8 +231,10 @@ export const initialBookingFormValues: DeepPartial<BookingFormValues> = {
|
||||
destinationYard: "",
|
||||
shippingLine: "",
|
||||
scheduledDate: "",
|
||||
trainScheduleId: "",
|
||||
cargoWeight: "",
|
||||
bulkCommoditytype: "",
|
||||
cargoFreeText: "",
|
||||
isHazardous: false,
|
||||
isRefrigerated: false,
|
||||
containers: [{ type: "20ft", containerType: "", qty: "1", vgm: "" }],
|
||||
@@ -264,7 +268,7 @@ export const stepFields: Record<number, Array<Path<BookingFormValues>>> = {
|
||||
"containers",
|
||||
"consolidationEnabled",
|
||||
],
|
||||
5: ["scheduledDate"],
|
||||
5: ["scheduledDate", "trainScheduleId"],
|
||||
6: ["documents"],
|
||||
7: ["notes", "termsAccepted"],
|
||||
};
|
||||
@@ -280,50 +284,32 @@ export interface WagonConfig {
|
||||
type: "20ft" | "40ft";
|
||||
}
|
||||
|
||||
export interface WagonCalcResult {
|
||||
totalWagons: number;
|
||||
hasOddUnit: boolean;
|
||||
sharedWagons: number;
|
||||
wagonLayout: WagonConfig[];
|
||||
ft40Wagons: number;
|
||||
ft20Wagons: number;
|
||||
}
|
||||
|
||||
export function getRouteDirection(
|
||||
origin: Freight.BookingReferenceYard | null | undefined,
|
||||
dest: Freight.BookingReferenceYard | null | undefined,
|
||||
): Freight.ScheduleTradeDirection | null {
|
||||
): Freight.ScheduleTradeDirection | null {
|
||||
if (!origin || !dest) return null;
|
||||
if(origin.country === 'ethiopia' && dest.country === 'ethiopia') {
|
||||
return 'DOMESTIC';
|
||||
}
|
||||
if(origin.country === 'ethiopia' && dest.country === 'djibouti') {
|
||||
return 'IMPORT';
|
||||
if (origin.country === "ethiopia" && dest.country === "ethiopia") {
|
||||
return "DOMESTIC";
|
||||
}
|
||||
if(origin.country === 'djibouti' && dest.country === 'ethiopia') {
|
||||
return 'EXPORT';
|
||||
if (origin.country === "ethiopia" && dest.country === "djibouti") {
|
||||
return "IMPORT";
|
||||
}
|
||||
if (origin.country === "djibouti" && dest.country === "ethiopia") {
|
||||
return "EXPORT";
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
export function calcWagons(containers: ContainerConfig[]): WagonCalcResult {
|
||||
const Ft40Wagons = containers
|
||||
.filter((c) => c.type === "40ft")
|
||||
.reduce((sum, c) => sum + Number(c.qty), 0);
|
||||
export function calcWagons(containers: ContainerConfig[]) {
|
||||
const Ft20Wagons = containers
|
||||
.filter((c) => c.type === "20ft")
|
||||
.reduce((sum, c) => sum + Number(c.qty), 0);
|
||||
const wagonLayout: WagonConfig[] = [];
|
||||
let hasOddUnit = Ft20Wagons % 2 === 1;
|
||||
let sharedWagons = Math.floor(Ft20Wagons / 2);
|
||||
|
||||
return {
|
||||
totalWagons: sharedWagons + Ft40Wagons,
|
||||
hasOddUnit,
|
||||
sharedWagons,
|
||||
ft40Wagons: Ft40Wagons,
|
||||
ft20Wagons: Ft20Wagons,
|
||||
wagonLayout,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -5,12 +5,17 @@ import { Controller, type UseFormReturn } from "react-hook-form";
|
||||
|
||||
import {
|
||||
BOOKING_DOCS_SETTING,
|
||||
BookingFormInputValues,
|
||||
type BookingDocuments,
|
||||
type BookingFormValues,
|
||||
} from "./schema";
|
||||
import { StepHeader } from "./shared";
|
||||
|
||||
type BookingForm = UseFormReturn<BookingFormValues>;
|
||||
type BookingForm = UseFormReturn<
|
||||
BookingFormInputValues,
|
||||
any,
|
||||
BookingFormValues
|
||||
>;
|
||||
|
||||
function countAttached(documents: BookingDocuments): number {
|
||||
return BOOKING_DOCS_SETTING.fields.filter((f) => {
|
||||
@@ -57,7 +62,11 @@ export function StepDocuments({ form }: { form: BookingForm }) {
|
||||
color: attached === total ? "#0A6F4D" : "#2E5B96",
|
||||
}}
|
||||
>
|
||||
{attached === total ? <CheckCircle2 size={16} /> : `${attached}/${total}`}
|
||||
{attached === total ? (
|
||||
<CheckCircle2 size={16} />
|
||||
) : (
|
||||
`${attached}/${total}`
|
||||
)}
|
||||
</Box>
|
||||
<Text size="sm" c="dimmed">
|
||||
{attached === 0
|
||||
|
||||
@@ -0,0 +1,389 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
Group,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
useMantineTheme,
|
||||
Divider,
|
||||
} from "@mantine/core";
|
||||
import { UseFormReturn } from "react-hook-form";
|
||||
import { BookingFormInputValues, BookingFormValues } from "./schema";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Info,
|
||||
Calendar as CalendarIcon,
|
||||
} from "lucide-react";
|
||||
import type { Freight } from "@edr/types";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { api } from "@/services/api";
|
||||
import {
|
||||
format,
|
||||
startOfMonth,
|
||||
endOfMonth,
|
||||
startOfWeek,
|
||||
endOfWeek,
|
||||
eachDayOfInterval,
|
||||
isToday,
|
||||
isSameMonth,
|
||||
addMonths,
|
||||
} from "date-fns";
|
||||
|
||||
interface StepSchedulingProps {
|
||||
form: UseFormReturn<BookingFormInputValues, any, BookingFormValues>;
|
||||
referenceData?: Freight.BookingReferenceData;
|
||||
}
|
||||
|
||||
export function StepScheduling({ form, referenceData }: StepSchedulingProps) {
|
||||
const theme = useMantineTheme();
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const selectedDate = form.watch("scheduledDate");
|
||||
const originYardId = form.watch("originYard");
|
||||
const destinationYardId = form.watch("destinationYard");
|
||||
const cargoType = form.watch("cargoType");
|
||||
|
||||
const originName = useMemo(
|
||||
() =>
|
||||
referenceData?.yard.find((y) => y.id === originYardId)?.name ??
|
||||
"Not selected",
|
||||
[referenceData, originYardId],
|
||||
);
|
||||
|
||||
const destinationName = useMemo(
|
||||
() =>
|
||||
referenceData?.yard.find((y) => y.id === destinationYardId)?.name ??
|
||||
"Not selected",
|
||||
[referenceData, destinationYardId],
|
||||
);
|
||||
|
||||
const { data: bookableSchedules } = useQuery(
|
||||
api.bookings.getBookableSchedules.queryOptions({
|
||||
input: { originYardId, destinationYardId },
|
||||
enabled: !!originYardId && !!destinationYardId,
|
||||
}),
|
||||
);
|
||||
|
||||
const scheduleMap = useMemo(() => {
|
||||
const map = new Map<string, Freight.BookableScheduleItem>();
|
||||
if (bookableSchedules) {
|
||||
for (const s of bookableSchedules) {
|
||||
if (!map.has(s.scheduleDate)) {
|
||||
map.set(s.scheduleDate, s);
|
||||
}
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [bookableSchedules]);
|
||||
|
||||
const days = useMemo(() => {
|
||||
const monthStart = startOfMonth(currentDate);
|
||||
const monthEnd = endOfMonth(currentDate);
|
||||
const calStart = startOfWeek(monthStart, { weekStartsOn: 1 });
|
||||
const calEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
|
||||
|
||||
return eachDayOfInterval({ start: calStart, end: calEnd }).map((date) => {
|
||||
const dateString = format(date, "yyyy-MM-dd");
|
||||
const schedule = scheduleMap.get(dateString);
|
||||
|
||||
return {
|
||||
day: date.getDate(),
|
||||
dateString,
|
||||
isToday: isToday(date),
|
||||
isSelected: selectedDate === dateString,
|
||||
isCurrentMonth: isSameMonth(date, currentDate),
|
||||
isFull: schedule ? schedule.remainingWagons <= 0 : false,
|
||||
hasSchedule: !!schedule,
|
||||
remainingWagons: schedule?.remainingWagons ?? 0,
|
||||
scheduleId: schedule?.id ?? "",
|
||||
};
|
||||
});
|
||||
}, [currentDate, scheduleMap, selectedDate]);
|
||||
|
||||
const legendItems = [
|
||||
{ label: "Available", color: theme.colors.gray[1] },
|
||||
{ label: "Full", color: theme.colors["edr-red-soft"][0] },
|
||||
{ label: "No Service", color: "transparent" },
|
||||
{ label: "Selected", color: theme.colors["edr-green"][5] },
|
||||
];
|
||||
|
||||
return (
|
||||
<Stack gap="xl">
|
||||
<Grid>
|
||||
<Grid.Col span={{ base: 12, md: 7.5 }}>
|
||||
<Card>
|
||||
<Box>
|
||||
<Title order={3} fw={700}>
|
||||
Shipment Date
|
||||
</Title>
|
||||
<Text c="edr-muted" size="sm" mt={4}>
|
||||
Pick a shipment date for your booking from the available
|
||||
schedule.
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={0}>
|
||||
<Text fw={700} size="xl">
|
||||
{format(currentDate, "MMMM yyyy")}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Group gap="xs">
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
p={6}
|
||||
radius="md"
|
||||
onClick={() => setCurrentDate((d) => addMonths(d, -1))}
|
||||
>
|
||||
<ChevronLeft size={18} />
|
||||
</Button>
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
p={6}
|
||||
radius="md"
|
||||
onClick={() => setCurrentDate((d) => addMonths(d, 1))}
|
||||
>
|
||||
<ChevronRight size={18} />
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
<Box
|
||||
style={{
|
||||
display: "grid",
|
||||
gap: "4px",
|
||||
gridTemplateColumns: "repeat(7, 1fr)",
|
||||
}}
|
||||
>
|
||||
{["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"].map((d) => (
|
||||
<Text
|
||||
key={d}
|
||||
ta="center"
|
||||
size="xs"
|
||||
fw={700}
|
||||
c="edr-muted"
|
||||
mb={8}
|
||||
>
|
||||
{d}
|
||||
</Text>
|
||||
))}
|
||||
{days.map((d, i) => {
|
||||
const canSelect =
|
||||
d.isCurrentMonth && d.hasSchedule && !d.isFull;
|
||||
return (
|
||||
<Button
|
||||
key={i}
|
||||
variant="unstyled"
|
||||
disabled={!canSelect}
|
||||
onClick={() => {
|
||||
form.setValue("scheduledDate", d.dateString, {
|
||||
shouldValidate: true,
|
||||
});
|
||||
form.setValue("trainScheduleId", d.scheduleId, {
|
||||
shouldValidate: true,
|
||||
});
|
||||
}}
|
||||
style={{
|
||||
height: "80px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "start",
|
||||
justifyContent: "start",
|
||||
gap: "4px",
|
||||
borderRadius: theme.radius.md,
|
||||
cursor: canSelect ? "pointer" : "default",
|
||||
backgroundColor: d.isSelected
|
||||
? theme.colors["edr-green"][5]
|
||||
: d.isFull
|
||||
? theme.colors["edr-red-soft"][0]
|
||||
: d.hasSchedule
|
||||
? theme.colors.gray[0]
|
||||
: "transparent",
|
||||
border:
|
||||
d.isToday && !d.isSelected
|
||||
? `2px solid ${theme.colors["edr-green"][5]}`
|
||||
: "none",
|
||||
opacity: d.isCurrentMonth ? 1 : 0,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
size="sm"
|
||||
fw={700}
|
||||
c={d.isSelected ? "white" : "edr-text.0"}
|
||||
>
|
||||
{d.day}
|
||||
</Text>
|
||||
{d.isCurrentMonth && !d.isSelected && (
|
||||
<>
|
||||
{d.isFull && (
|
||||
<Text
|
||||
size="9px"
|
||||
fw={800}
|
||||
c="edr-red.0"
|
||||
style={{ letterSpacing: "0.05em" }}
|
||||
>
|
||||
FULL
|
||||
</Text>
|
||||
)}
|
||||
{d.hasSchedule && !d.isFull && (
|
||||
<Text
|
||||
size="9px"
|
||||
fw={800}
|
||||
c="edr-green.6"
|
||||
style={{ letterSpacing: "0.05em" }}
|
||||
>
|
||||
{d.remainingWagons} WGN
|
||||
</Text>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
|
||||
<Group gap="xl" mt="xs">
|
||||
{legendItems.map((item) => (
|
||||
<Group key={item.label} gap={8}>
|
||||
<Box
|
||||
style={{
|
||||
width: 14,
|
||||
height: 14,
|
||||
borderRadius: 4,
|
||||
backgroundColor: item.color,
|
||||
border:
|
||||
item.label === "No Service"
|
||||
? `2px dashed ${theme.colors.gray[3]}`
|
||||
: "none",
|
||||
}}
|
||||
/>
|
||||
<Text size="xs" c="edr-muted" fw={600}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={{ base: 12, md: 4.5 }}>
|
||||
<Card>
|
||||
<Stack gap="xl">
|
||||
<Title order={4} fw={800} style={{ letterSpacing: "-0.02em" }}>
|
||||
Booking Summary
|
||||
</Title>
|
||||
|
||||
<Stack gap="md">
|
||||
<SummaryRow label="Origin Yard" value={originName} />
|
||||
<SummaryRow label="Destination Yard" value={destinationName} />
|
||||
<SummaryRow
|
||||
label="Cargo Type"
|
||||
value={
|
||||
cargoType
|
||||
? cargoType === "container"
|
||||
? "Container Freight"
|
||||
: "Bulk Freight"
|
||||
: "Not selected"
|
||||
}
|
||||
/>
|
||||
|
||||
<Divider my="sm" color="gray.2" />
|
||||
|
||||
<Group justify="space-between" align="center">
|
||||
<Stack gap={2}>
|
||||
<Text
|
||||
size="xs"
|
||||
c="edr-muted"
|
||||
fw={600}
|
||||
style={{ letterSpacing: "0.05em" }}
|
||||
>
|
||||
Shipment Date
|
||||
</Text>
|
||||
<Text
|
||||
fw={800}
|
||||
size="lg"
|
||||
c={selectedDate ? "edr-green.6" : "edr-muted"}
|
||||
>
|
||||
{selectedDate || "Not selected"}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Box
|
||||
p={8}
|
||||
style={{
|
||||
borderRadius: theme.radius.md,
|
||||
backgroundColor: selectedDate
|
||||
? theme.colors["edr-green"][0]
|
||||
: theme.colors.gray[1],
|
||||
}}
|
||||
>
|
||||
<CalendarIcon
|
||||
size={20}
|
||||
color={
|
||||
selectedDate
|
||||
? theme.colors["edr-green"][6]
|
||||
: theme.colors["edr-muted"][0]
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Box
|
||||
p="md"
|
||||
style={{
|
||||
borderRadius: theme.radius.md,
|
||||
border: `1px dashed ${theme.colors.gray[4]}`,
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
>
|
||||
<Group gap="xs" align="flex-start" wrap="nowrap">
|
||||
<Info
|
||||
size={16}
|
||||
color={theme.colors["edr-muted"][0]}
|
||||
style={{ flexShrink: 0, marginTop: 2 }}
|
||||
/>
|
||||
<Text
|
||||
size="xs"
|
||||
c="edr-muted"
|
||||
fw={500}
|
||||
style={{ lineHeight: 1.5 }}
|
||||
>
|
||||
Final confirmation of your selected date will be provided
|
||||
after review of your booking details.
|
||||
</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
function SummaryRow({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<Stack gap={4}>
|
||||
<Text
|
||||
size="xs"
|
||||
c="edr-muted"
|
||||
fw={600}
|
||||
textTransform="uppercase"
|
||||
style={{ letterSpacing: "0.05em" }}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
<Text size="sm" fw={700} c="edr-text.0">
|
||||
{value}
|
||||
</Text>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,14 @@
|
||||
import { useMemo } from "react";
|
||||
import { Controller, useFieldArray, type UseFormReturn } from "react-hook-form";
|
||||
import { MapPin, Package, Plus, Trash2, Weight } from "lucide-react";
|
||||
import { ActionIcon, Button, Skeleton, Stack, Text, TextInput } from "@mantine/core";
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Skeleton,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from "@mantine/core";
|
||||
import type { Freight } from "@edr/types";
|
||||
import {
|
||||
BookingFormInputValues,
|
||||
@@ -17,7 +24,11 @@ import {
|
||||
StepLabel,
|
||||
} from "./shared";
|
||||
|
||||
type BookingForm = UseFormReturn<BookingFormInputValues, any, BookingFormValues>;
|
||||
type BookingForm = UseFormReturn<
|
||||
BookingFormInputValues,
|
||||
any,
|
||||
BookingFormValues
|
||||
>;
|
||||
|
||||
export function Step5CargoDetails({
|
||||
form,
|
||||
@@ -32,6 +43,7 @@ export function Step5CargoDetails({
|
||||
}) {
|
||||
const cargoType = form.watch("cargoType");
|
||||
const freightType = form.watch("freightType");
|
||||
const bulkCommoditytype = form.watch("bulkCommoditytype");
|
||||
const containers = form.watch("containers");
|
||||
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
@@ -39,16 +51,28 @@ export function Step5CargoDetails({
|
||||
name: "containers",
|
||||
});
|
||||
|
||||
const containerTypeOptions = useMemo(() => {
|
||||
if (!referenceData?.containers) return [];
|
||||
return referenceData.containers.flatMap((group) =>
|
||||
group.types.map((t) => t.name),
|
||||
const containerTypeOptionsBySize = useMemo(() => {
|
||||
if (!referenceData?.containers) return new Map<string, string[]>();
|
||||
return new Map(
|
||||
referenceData.containers.map((g) => [g.size, g.types.map((t) => t.name)]),
|
||||
);
|
||||
}, [referenceData]);
|
||||
|
||||
const selectedCommodity = useMemo(() => {
|
||||
if (!referenceData?.cargo_type || !freightType || !bulkCommoditytype) return null;
|
||||
const group = referenceData.cargo_type.find(
|
||||
(g) => g.code.toLowerCase() === freightType,
|
||||
);
|
||||
return group?.children?.find(
|
||||
(c) => c.name === bulkCommoditytype,
|
||||
) ?? null;
|
||||
}, [referenceData, freightType, bulkCommoditytype]);
|
||||
|
||||
const freightTypeGroups = useMemo(() => {
|
||||
if (!referenceData?.cargo_type) return [];
|
||||
return referenceData.cargo_type.filter((g) => g.code !== "CONTAINER");
|
||||
return referenceData.cargo_type.filter(
|
||||
(g) => g.code !== "CONTAINER" && !/container/i.test(g.name),
|
||||
);
|
||||
}, [referenceData]);
|
||||
|
||||
const commodityOptions = useMemo(() => {
|
||||
@@ -219,6 +243,22 @@ export function Step5CargoDetails({
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{selectedCommodity?.show_free_text_box && (
|
||||
<Controller
|
||||
name="cargoFreeText"
|
||||
control={form.control}
|
||||
render={({ field, fieldState }) => (
|
||||
<TextInput
|
||||
{...field}
|
||||
label="Describe cargo *"
|
||||
placeholder="e.g. Charcoal, Wheat, etc."
|
||||
error={fieldState.error?.message}
|
||||
radius="md"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -253,7 +293,13 @@ export function Step5CargoDetails({
|
||||
className="flex flex-col gap-3 rounded-xl border border-gray-200 bg-gray-50/50 p-4"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<Text size="xs" fw={600} c="dimmed" tt="uppercase" className="tracking-wide">
|
||||
<Text
|
||||
size="xs"
|
||||
fw={600}
|
||||
c="dimmed"
|
||||
tt="uppercase"
|
||||
className="tracking-wide"
|
||||
>
|
||||
Container {index + 1}
|
||||
</Text>
|
||||
{fields.length > 1 && (
|
||||
@@ -300,7 +346,9 @@ export function Step5CargoDetails({
|
||||
<Package className="h-4 w-4 text-emerald-600" />
|
||||
<p className="font-semibold">{ct.label}</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">{ct.limit}</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{ct.limit}
|
||||
</p>
|
||||
</OptionCard>
|
||||
))}
|
||||
</div>
|
||||
@@ -324,7 +372,10 @@ export function Step5CargoDetails({
|
||||
type="button"
|
||||
onClick={() =>
|
||||
qtyField.onChange(
|
||||
Math.max(1, Number(qtyField.value ?? 1) - 1).toString(),
|
||||
Math.max(
|
||||
1,
|
||||
Number(qtyField.value ?? 1) - 1,
|
||||
).toString(),
|
||||
)
|
||||
}
|
||||
className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-sm font-medium transition hover:bg-gray-50"
|
||||
@@ -333,7 +384,9 @@ export function Step5CargoDetails({
|
||||
</button>
|
||||
<input
|
||||
value={qtyField.value ?? 1}
|
||||
onChange={(e) => qtyField.onChange(e.target.value)}
|
||||
onChange={(e) =>
|
||||
qtyField.onChange(e.target.value)
|
||||
}
|
||||
onBlur={qtyField.onBlur}
|
||||
type="number"
|
||||
min={1}
|
||||
@@ -388,7 +441,11 @@ export function Step5CargoDetails({
|
||||
error={fieldState.error}
|
||||
label="Container Type *"
|
||||
placeholder="Select type..."
|
||||
data={containerTypeOptions}
|
||||
data={
|
||||
containerTypeOptionsBySize.get(
|
||||
containers[index]?.type ?? "20ft",
|
||||
) ?? []
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
import { type UseFormReturn } from "react-hook-form";
|
||||
import { type BookingFormValues, type WagonCalcResult } from "./schema";
|
||||
import { AlertBox, StepHeader, StepLabel } from "./shared";
|
||||
|
||||
type BookingForm = UseFormReturn<BookingFormValues>;
|
||||
|
||||
export function Step6WagonAllocation({
|
||||
form,
|
||||
wagons,
|
||||
}: {
|
||||
form: BookingForm;
|
||||
wagons: WagonCalcResult | null;
|
||||
}) {
|
||||
const containers = form.watch("containers") ?? [];
|
||||
const totalContainers = containers.reduce(
|
||||
(sum, c) => sum + Number(c.qty || 0),
|
||||
0,
|
||||
);
|
||||
const containerSummary = containers
|
||||
.filter((c) => +c.qty > 0)
|
||||
.map((c) => `${c.qty} × ${c.type}`)
|
||||
.join(", ");
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<StepHeader
|
||||
title="Wagon Allocation"
|
||||
description="System-calculated wagon requirements based on your container profile."
|
||||
/>
|
||||
|
||||
{!wagons ? (
|
||||
<AlertBox tone="info">
|
||||
Complete the container configuration in the previous step to see wagon
|
||||
allocation.
|
||||
</AlertBox>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="rounded-xl bg-primary/5 p-4 text-center">
|
||||
<p className="text-3xl font-bold text-primary">
|
||||
{wagons.totalWagons}
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
Wagons Required
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-muted p-4 text-center">
|
||||
<p className="text-3xl font-bold">{totalContainers}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{containerSummary || "Containers"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-xl bg-muted p-4 text-center">
|
||||
<p className="text-3xl font-bold">{wagons.sharedWagons}</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">Shared Slots</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<StepLabel>Wagon Layout</StepLabel>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{new Array(wagons.ft40Wagons).fill(0).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold
|
||||
border-primary/30 bg-primary/5 text-primary `}
|
||||
>
|
||||
1 × 40ft
|
||||
</div>
|
||||
))}
|
||||
{new Array(wagons.sharedWagons).fill(0).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold
|
||||
border-amber-300 bg-amber-50 text-amber-700
|
||||
`}
|
||||
>
|
||||
2 × 20ft
|
||||
</div>
|
||||
))}
|
||||
{wagons.hasOddUnit && (
|
||||
<div
|
||||
className={`flex h-12 min-w-[100px] items-center justify-center rounded-lg border-2 px-3 text-xs font-semibold border-destructive! bg-destructive/10 text-destructive `}
|
||||
>
|
||||
1 × 20ft
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{wagons.hasOddUnit && (
|
||||
<>
|
||||
<AlertBox tone="warning">
|
||||
<div className="flex items-start gap-2">
|
||||
<div>
|
||||
<p className="font-semibold">Unpaired 20ft Container</p>
|
||||
<p className="mt-1 text-xs">
|
||||
One 20ft container occupies only half a wagon. The wagon
|
||||
will depart once a co-loader is found to fill the
|
||||
remaining slot, which <strong>may delay departure</strong>{" "}
|
||||
beyond the standard lead time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</AlertBox>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -2,5 +2,6 @@ export { Step1ContractType } from "./step1-contract-type";
|
||||
export { Step2ServiceType } from "./step2-service-type";
|
||||
export { Step4Route } from "./step4-route";
|
||||
export { Step5CargoDetails } from "./step5-cargo-details";
|
||||
export { StepScheduling } from "./step-scheduling";
|
||||
export { StepDocuments } from "./step-documents";
|
||||
export { Step8Review } from "./step8-review";
|
||||
|
||||
Reference in New Issue
Block a user