implement update train details feature: add DTO, service method, and UI modal for editing train name and run numbers

2026-08-28 05:30:55 +00:00 · 2026-07-15 20:14:39 +00:00
parent d7d9db9c3a
commit fc44eee25e
44 changed files with 970 additions and 14 deletions
--- a/apps/edr-freight-web/backoffice/src/components/trainBuilder/EditTrainDetailsModal.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/trainBuilder/EditTrainDetailsModal.tsx
@@ -0,0 +1,123 @@
+import { Button, Group, Modal, Stack, Text, TextInput } from "@mantine/core";
+import { useMutation } from "@tanstack/react-query";
+import { Pencil } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { useToast } from "@/hooks/use-toast";
+import { api } from "@/services/api";
+import type { BuiltTrainSummary } from "@/services/trainBuilder.service";
+
+export interface EditTrainDetailsModalProps {
+  /** Train being edited; null closes the modal. */
+  train: BuiltTrainSummary | null;
+  onClose: () => void;
+}
+
+/**
+ * Edit a built train's display identity from the list: its name and its fixed
+ * import/export run numbers. Composition (yard, locomotives, wagons) is edited
+ * on the detail page. Number collisions come back as a 409 with the owning
+ * train's code and surface verbatim.
+ */
+const EditTrainDetailsModal = ({ train, onClose }: EditTrainDetailsModalProps) => {
+  const { toast } = useToast();
+  const [name, setName] = useState("");
+  const [importNo, setImportNo] = useState("");
+  const [exportNo, setExportNo] = useState("");
+
+  useEffect(() => {
+    if (train) {
+      setName(train.trainName ?? "");
+      setImportNo(train.importTrainNumber ?? "");
+      setExportNo(train.exportTrainNumber ?? "");
+    }
+  }, [train]);
+
+  const update = useMutation(api.trainBuilder.updateDetails.mutationOptions());
+
+  const handleSave = async () => {
+    if (!train) return;
+    try {
+      await update.mutateAsync({
+        id: train.id,
+        payload: {
+          trainName: name.trim(),
+          // Numbers cannot be cleared — only replaced; empty inputs keep the
+          // current value (legacy trains may have none yet).
+          ...(importNo.trim() ? { importTrainNumber: importNo.trim() } : {}),
+          ...(exportNo.trim() ? { exportTrainNumber: exportNo.trim() } : {}),
+        },
+      });
+      toast({ title: `Train ${train.code} updated` });
+      onClose();
+    } catch (err) {
+      const message =
+        (err as { response?: { data?: { message?: string } } })?.response?.data
+          ?.message ?? "Update failed";
+      toast({
+        title: "Could not update train",
+        description: String(message),
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <Modal
+      opened={Boolean(train)}
+      onClose={onClose}
+      title={
+        <Group gap={8}>
+          <Pencil size={16} />
+          <Text fw={700}>Edit train {train?.code ?? ""}</Text>
+        </Group>
+      }
+      centered
+      size="md"
+      radius="lg"
+    >
+      <Stack gap="md">
+        <TextInput
+          label="Train name"
+          placeholder="Optional display name"
+          value={name}
+          onChange={(e) => setName(e.currentTarget.value)}
+          maxLength={100}
+          radius="md"
+        />
+        <Group grow>
+          <TextInput
+            label="Import train no."
+            placeholder="e.g. 8002"
+            value={importNo}
+            onChange={(e) => setImportNo(e.currentTarget.value)}
+            maxLength={20}
+            radius="md"
+          />
+          <TextInput
+            label="Export train no."
+            placeholder="e.g. 8001"
+            value={exportNo}
+            onChange={(e) => setExportNo(e.currentTarget.value)}
+            maxLength={20}
+            radius="md"
+          />
+        </Group>
+        <Group justify="flex-end" gap="sm">
+          <Button variant="default" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            color="edr-green"
+            loading={update.isPending}
+            onClick={handleSave}
+          >
+            Save
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
+
+export default EditTrainDetailsModal;
--- a/apps/edr-freight-web/backoffice/src/features/bookings/booking-status.config.ts
+++ b/apps/edr-freight-web/backoffice/src/features/bookings/booking-status.config.ts
@@ -285,7 +285,12 @@ export const BOOKING_LIST_TABS = [
  {
    key: "clearance",
    label: "Clearance",
-    statuses: ["AWAITING_DOCUMENTS", "DOCUMENTS_UNDER_REVIEW", "CLEARANCE_READY"],
+    statuses: [
+      "AWAITING_CLEARANCE_PAYMENT",
+      "AWAITING_DOCUMENTS",
+      "DOCUMENTS_UNDER_REVIEW",
+      "CLEARANCE_READY",
+    ],
  },
  {
    key: "payment",
--- a/apps/edr-freight-web/backoffice/src/features/contracts/contract-status.config.ts
+++ b/apps/edr-freight-web/backoffice/src/features/contracts/contract-status.config.ts
@@ -51,6 +51,10 @@ export const CONTRACT_STATUS_STYLES: Record<string, StatusStyle> = {
    label: "Active",
    color: "bg-[color:var(--freight-brand-muted)] text-[color:var(--freight-brand)] border-[color:var(--freight-brand-border)]",
  },
+  AWAITING_CLEARANCE_PAYMENT: {
+    label: "Clearance Fee Due",
+    color: "bg-orange-50 text-orange-700 border-orange-200",
+  },
  AWAITING_CLEARANCE_DOCUMENTS: {
    label: "Awaiting Documents",
    color: "bg-amber-50 text-amber-700 border-amber-200",
@@ -118,6 +122,7 @@ export const CONTRACT_STATUS_COLOR: Record<string, string> = {
  SIGNED_CUSTOMER: "cyan",
  FULLY_EXECUTED: "indigo",
  CONTRACT_ACTIVE: "edr-green",
+  AWAITING_CLEARANCE_PAYMENT: "orange",
  AWAITING_CLEARANCE_DOCUMENTS: "yellow",
  CLEARANCE_UNDER_REVIEW: "yellow",
  CLEARANCE_READY_FOR_BOOKING: "edr-green",
@@ -207,6 +212,13 @@ export const CONTRACT_STATUS_META: Record<string, StatusMeta> = {
    color: "text-[color:var(--freight-brand)]",
    stage: 3,
  },
+  AWAITING_CLEARANCE_PAYMENT: {
+    title: "Clearance Fee Due",
+    description:
+      "Customer must pay the prepaid clearance service fee before uploading documents.",
+    color: "text-orange-600",
+    stage: 3,
+  },
  AWAITING_CLEARANCE_DOCUMENTS: {
    title: "Awaiting Documents",
    description: "Customer is uploading pre-booking clearance documents.",
--- a/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
+++ b/apps/edr-freight-web/backoffice/src/pages/ruleEngine/config/resources.ts
@@ -141,6 +141,7 @@ const RATE_TRIGGERS = [
  { label: "Cancellation", value: "CANCELLATION" },
  { label: "Demurrage", value: "DEMURRAGE" },
  { label: "Shipping line extra fee (PIL)", value: "PIL_EXTRA_FEE" },
+  { label: "Customs clearance service fee (prepaid)", value: "CUSTOMS_CLEARANCE" },
 ];

 const unitOption = (value: string) => ({ label: value.replace(/_/g, " "), value });
@@ -162,6 +163,9 @@ const allowedRateUnits = (appliesTo: string, trigger: string): string[] => {
        return ["PER_CONTAINER", "PER_TON"];
      case "CANCELLATION":
        return ["FLAT", "PER_INVOICE"];
+      case "CUSTOMS_CLEARANCE":
+        // Flat per clearance (ONE_TIME) / per shipment request (GENERAL).
+        return ["FLAT"];
      case "CONSOLIDATION":
      case "SHIPPING_LINE":
      case "PIL_EXTRA_FEE":
--- a/apps/edr-freight-web/backoffice/src/pages/trainBuilder/TrainBuilderListPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/trainBuilder/TrainBuilderListPage.tsx
@@ -1,6 +1,7 @@
 import type { ColumnDef } from "@edr/ui-common";
 import { DataTable, DataTableFooter, usePagination } from "@edr/ui-common";
 import {
+  ActionIcon,
  Badge,
  Box,
  Button,
@@ -15,6 +16,7 @@ import { useDebouncedValue } from "@mantine/hooks";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import {
  Hammer,
+  Pencil,
  Ruler,
  Search,
  Train as TrainIcon,
@@ -27,6 +29,7 @@ import { useNavigate } from "react-router-dom";
 import { KpiStrip, PageContainer, PageHeader } from "@/components/page";
 import { ruleEngineTable } from "@/components/ruleEngine/ruleEngineStyles";
 import BuildTrainModal from "@/components/trainBuilder/BuildTrainModal";
+import EditTrainDetailsModal from "@/components/trainBuilder/EditTrainDetailsModal";
 import {
  directionColor,
  directionRowStyle,
@@ -52,6 +55,7 @@ export default function TrainBuilderListPage() {
  const [statusFilter, setStatusFilter] = useState<"ALL" | BuiltTrainStatus>("ALL");
  const [yardFilter, setYardFilter] = useState("ALL");
  const [buildOpen, setBuildOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState<BuiltTrainSummary | null>(null);

  const resetPage = useCallback(() => {
    setPagination((prev) =>
@@ -239,6 +243,26 @@ export default function TrainBuilderListPage() {
          </Badge>
        ),
      },
+      {
+        id: "actions",
+        header: "",
+        meta: { headerClassName, cellClassName },
+        cell: ({ row }) => (
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            aria-label={`Edit train ${row.original.code}`}
+            title="Edit name & train numbers"
+            onClick={(e) => {
+              // Row click navigates to the detail page — keep the edit local.
+              e.stopPropagation();
+              setEditTarget(row.original);
+            }}
+          >
+            <Pencil size={15} />
+          </ActionIcon>
+        ),
+      },
    ];
  }, []);

@@ -363,6 +387,8 @@ export default function TrainBuilderListPage() {
        onClose={() => setBuildOpen(false)}
        onBuilt={(composition) => navigate(`/dashboard/train-builder/${composition.id}`)}
      />
+
+      <EditTrainDetailsModal train={editTarget} onClose={() => setEditTarget(null)} />
    </PageContainer>
  );
 }
--- a/apps/edr-freight-web/backoffice/src/services/api.ts
+++ b/apps/edr-freight-web/backoffice/src/services/api.ts
@@ -191,6 +191,7 @@ import {
  type BuiltTrainListResponse,
  type ScheduleConsist,
  type TrainComposition,
+  type UpdateTrainDetailsPayload,
 } from "./trainBuilder.service";
 import { trainSchedulingService } from "./trainScheduling.service";
 import { wagonTypesService, type WagonType } from "./wagon-types.service";
@@ -1842,6 +1843,18 @@ export const api = {
      () => TRAIN_BUILDER_INVALIDATIONS,
    ),

+    updateDetails: endpoint<
+      { id: string; payload: UpdateTrainDetailsPayload },
+      TrainComposition
+    >(
+      "train-builder",
+      "updateDetails",
+      ({ id, payload }) =>
+        trainBuilderService.updateDetails(id, payload).then((r) => r.data),
+      undefined,
+      () => TRAIN_BUILDER_INVALIDATIONS,
+    ),
+
    assignWagons: endpoint<{ id: string; wagonIds: string[] }, TrainComposition>(
      "train-builder",
      "assignWagons",
--- a/apps/edr-freight-web/backoffice/src/services/trainBuilder.service.ts
+++ b/apps/edr-freight-web/backoffice/src/services/trainBuilder.service.ts
@@ -140,6 +140,14 @@ export interface BuildTrainPayload {
  notes?: string;
 }

+/** Edit a built train's display identity; omitted fields keep their value. */
+export interface UpdateTrainDetailsPayload {
+  /** Empty string clears the name. */
+  trainName?: string;
+  importTrainNumber?: string;
+  exportTrainNumber?: string;
+}
+
 /** Built train annotated for the schedule-creation picker. */
 export interface AvailableTrain {
  id: string;
@@ -241,6 +249,9 @@ export const trainBuilderService = {
  build: (payload: BuildTrainPayload) => apiClient.post<TrainComposition>(BASE, payload),
  setLocomotives: (id: string, locomotiveIds: string[]) =>
    apiClient.put<TrainComposition>(`${BASE}/${id}/locomotives`, { locomotiveIds }),
+  /** Edit the train's name and fixed import/export run numbers. */
+  updateDetails: (id: string, payload: UpdateTrainDetailsPayload) =>
+    apiClient.patch<TrainComposition>(`${BASE}/${id}/details`, payload),
  /** Relocate the train — coupled locomotives and wagons move with it. */
  setYard: (id: string, currentYardId: string) =>
    apiClient.patch<TrainComposition>(`${BASE}/${id}/yard`, { currentYardId }),
--- a/apps/edr-freight-web/backoffice/src/types/booking.ts
+++ b/apps/edr-freight-web/backoffice/src/types/booking.ts
@@ -28,6 +28,7 @@ export const BOOKING_STATUSES = [
  "CONTRACT_ACTIVE",
  "CONTRACT_CLOSED",
  // Post counter-sign document-clearance gate.
+  "AWAITING_CLEARANCE_PAYMENT",
  "AWAITING_DOCUMENTS",
  "DOCUMENTS_UNDER_REVIEW",
  "CLEARANCE_READY",