Merge pull request #923 from Tria-plc/freight_feature/usermanagement

Freight feature/usermanagement

apps/edr-freight-web/backoffice/src/components/contracts/ContractApprovalStepsCard.tsx

@@ -16,6 +16,8 @@ import type { Freight } from "@edr/types";
 import { formatContractApprovalProgress } from "@/features/contracts/contract-approval-progress";
 import { SectionCard } from "@/components/bookings/detail/SectionCard";
 import type { useContractMutations } from "@/hooks/contracts/useContracts";
+import { useAuth } from "@/auth/useAuth";
+import { canApproveContractStep } from "@/lib/permissions";
 
 type Mutations = ReturnType<typeof useContractMutations>;
 
@@ -29,6 +31,7 @@ export function ContractApprovalStepsCard({
   contract,
   mutations,
 }: ContractApprovalStepsCardProps) {
+  const { user } = useAuth();
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [pendingStep, setPendingStep] =
     useState<Freight.IContractApprovalStep | null>(null);
@@ -166,6 +169,10 @@ export function ContractApprovalStepsCard({
                 key={step.id}
                 step={step}
                 isNext={actionable && nextPending?.id === step.id}
+                // Buttons show only to the step's actual approver (matching
+                // position type): a chief step never offers Approve/Reject to a
+                // marketing officer. Everyone still sees the "next" highlight.
+                canAct={canApproveContractStep(user, step.requiredRole)}
                 isPending={
                   mutations.approveStep.isPending ||
                   mutations.rejectStep.isPending
@@ -306,12 +313,14 @@ export function ContractApprovalStepsCard({
 function StepRow({
   step,
   isNext,
+  canAct,
   isPending,
   onApprove,
   onReject,
 }: {
   step: Freight.IContractApprovalStep;
   isNext: boolean;
+  canAct: boolean;
   isPending: boolean;
   onApprove: () => void;
   onReject: () => void;
@@ -372,8 +381,11 @@ function StepRow({
           )}
         </Box>
       </Group>
-      <Group gap="xs" wrap="nowrap" style={{ flexShrink: 0 }}>
-        {isNext && step.status === "PENDING" && (
+      {/* One element type per row: action buttons on the active step (they
+          already imply "pending & actionable"), a status badge otherwise.
+          Mixing compact buttons + a badge here made them read as misaligned. */}
+      <Group gap="xs" wrap="nowrap" align="center" style={{ flexShrink: 0 }}>
+        {isNext && canAct && step.status === "PENDING" ? (
           <>
             <Button
               size="compact-sm"
@@ -395,16 +407,17 @@ function StepRow({
               Reject
             </Button>
           </>
+        ) : (
+          <Badge
+            variant="light"
+            color={statusColor}
+            size="sm"
+            radius="sm"
+            tt="uppercase"
+          >
+            {step.status}
+          </Badge>
         )}
-        <Badge
-          variant="light"
-          color={statusColor}
-          size="sm"
-          radius="sm"
-          tt="uppercase"
-        >
-          {step.status}
-        </Badge>
       </Group>
     </Group>
   );

apps/edr-freight-web/backoffice/src/components/contracts/GlCreateBookingForm.tsx

@@ -269,6 +269,8 @@ export default function GlCreateBookingForm() {
   const [scheduledDate, setScheduledDate] = useState("");
   const [contractRouteId, setContractRouteId] = useState<string | null>(null);
   const [notes, setNotes] = useState("");
+  // What the containers carry — captured per booking (moved off the contract).
+  const [cargoDescription, setCargoDescription] = useState("");
   const [containerLines, setContainerLines] = useState<ContainerLineDraft[]>([]);
   const [bulk, setBulk] = useState<BulkDraft>({
     cargoWeightTons: "",
@@ -459,6 +461,10 @@ export default function GlCreateBookingForm() {
       );
     };
     setPrefilled(true);
+    // Rebook carries the expired booking's cargo description forward.
+    if (copyFromBooking.cargoFreeText) {
+      setCargoDescription(copyFromBooking.cargoFreeText);
+    }
     setContainerLines(
       lines.map((c) => {
         const qty = Math.max(1, c.quantity);
@@ -705,14 +711,23 @@ export default function GlCreateBookingForm() {
 
   const lineErrors = useMemo<LineErrors[]>(() => {
     if (!isContainer || !contract) return [];
-    return containerLines.map((line) => {
+    // A line can be 0 (the contract covers both sizes; a booking may only need
+    // one) but the booking as a whole needs at least one container — anchor
+    // that error on the first line's quantity so it renders in the field.
+    const totalQty = containerLines.reduce(
+      (sum, l) => sum + Math.max(0, Number(l.quantity) || 0),
+      0,
+    );
+    return containerLines.map((line, idx) => {
       const errs: LineErrors = {};
       const qty = Number(line.quantity || 0);
       if (line.quantity.trim() === "") {
         errs.quantity = "Quantity is required.";
-      } else if (Number.isNaN(qty) || qty < 1) {
-        errs.quantity = "At least 1.";
-      } else if (line.units.length < qty) {
+      } else if (Number.isNaN(qty) || qty < 0) {
+        errs.quantity = "Enter 0 or more.";
+      } else if (idx === 0 && totalQty < 1) {
+        errs.quantity = "Book at least one container (either size).";
+      } else if (qty >= 1 && line.units.length < qty) {
         errs.units = `Enter details for all ${qty} container(s).`;
       }
       if (contract.isHazardous) {
@@ -789,6 +804,11 @@ export default function GlCreateBookingForm() {
   const routeError =
     multiRoute && !contractRouteId ? "Select a route." : undefined;
 
+  const cargoDescriptionError =
+    isContainer && !cargoDescription.trim()
+      ? "Describe the cargo carried in the containers."
+      : undefined;
+
   const cargoValid = isContainer
     ? lineErrors.every(
         (e) =>
@@ -800,7 +820,8 @@ export default function GlCreateBookingForm() {
       ) &&
       unitErrors.every((line) =>
         line.every((e) => !e.containerNumber && !e.vgmTons),
-      )
+      ) &&
+      !cargoDescriptionError
     : !bulkErrors.quantity && !bulkErrors.hazardous && !bulkErrors.reefer;
 
   const formValid = cargoValid && !hasOdd20ft && !dateError && !routeError;
@@ -827,6 +848,8 @@ export default function GlCreateBookingForm() {
     };
 
     if (isContainer) {
+      // What the containers carry — captured per booking, not on the contract.
+      if (cargoDescription.trim()) payload.cargoFreeText = cargoDescription.trim();
       payload.containers = containerLines
         .filter((l) => Number(l.quantity) >= 1)
         .map((l) => ({
@@ -1245,6 +1268,19 @@ export default function GlCreateBookingForm() {
               )}
               {remainderNotice}
               <ContractCapacityNotice contractId={contract.id} isContainer />
+              <Textarea
+                label="Cargo description *"
+                description="What do the containers carry on this shipment?"
+                placeholder="e.g. Electronics, garments, machinery spare parts…"
+                value={cargoDescription}
+                onChange={(e) => setCargoDescription(e.currentTarget.value)}
+                error={showErrors ? cargoDescriptionError : undefined}
+                radius={10}
+                autosize
+                minRows={2}
+                maxRows={4}
+                styles={fieldStyles}
+              />
               {containerLines.length === 0 ? (
                 <Text fz="sm" c="dimmed">
                   This contract has no container sizes in scope.
@@ -1264,7 +1300,7 @@ export default function GlCreateBookingForm() {
                         type="number"
                         onKeyDown={blockNegative}
                         label="Quantity *"
-                        min={1}
+                        min={0}
                         value={line.quantity}
                         error={
                           showErrors

apps/edr-freight-web/backoffice/src/components/trainScheduling/scheduleVisuals.tsx

@@ -287,6 +287,8 @@ export type SegmentStripBooking = {
   destinationYardId?: string | null;
   tradeDirection?: string | null;
   wagonsRequired?: number | null;
+  /** GROSS tons (cargo + tare of the booking's wagons), as the API sends it. */
+  weightTons?: number | null;
 };
 
 /**
@@ -300,10 +302,13 @@ export function SegmentOccupancyStrip({
   stops,
   bookings,
   maxWagons,
+  maxGrossTons,
 }: {
   stops: Array<{ yardId: string; label: string }>;
   bookings: SegmentStripBooking[];
   maxWagons?: number | null;
+  /** Loco pull ceiling incl. tolerance — per-leg gross is measured against it. */
+  maxGrossTons?: number | null;
 }) {
   if (stops.length < 2) return null;
   const lastIdx = stops.length - 1;
@@ -312,6 +317,7 @@ export function SegmentOccupancyStrip({
   const segments = stops.slice(0, -1).map((stop, edge) => {
     let cargo = 0;
     let intercity = 0;
+    let grossTons = 0;
     for (const b of bookings) {
       const from = (b.originYardId ? indexOf.get(b.originYardId) : undefined) ?? 0;
       const to =
@@ -322,8 +328,15 @@ export function SegmentOccupancyStrip({
       const wagons = Number(b.wagonsRequired) || 1;
       if (b.tradeDirection === "DOMESTIC") intercity += wagons;
       else cargo += wagons;
+      grossTons += Number(b.weightTons) || 0;
     }
-    return { from: stop, to: stops[edge + 1], cargo, intercity };
+    return {
+      from: stop,
+      to: stops[edge + 1],
+      cargo,
+      intercity,
+      grossTons: Math.round(grossTons * 10) / 10,
+    };
   });
 
   const cap = Number(maxWagons) || null;
@@ -393,6 +406,22 @@ export function SegmentOccupancyStrip({
                   </Text>
                 ) : null}
               </Text>
+              {seg.grossTons > 0 ? (
+                <Text
+                  size="xs"
+                  ta="center"
+                  fw={600}
+                  c={
+                    maxGrossTons != null && seg.grossTons > maxGrossTons
+                      ? "red.7"
+                      : "dimmed"
+                  }
+                  style={{ whiteSpace: "nowrap" }}
+                >
+                  {seg.grossTons}
+                  {maxGrossTons != null ? ` / ${maxGrossTons}` : ""} T gross
+                </Text>
+              ) : null}
             </Stack>
             {i === segments.length - 1 ? (
               <Stack gap={2} align="center" justify="flex-end" style={{ minWidth: 0 }}>