contrat nad booking modification

apps/edr-freight-web/backoffice/src/components/bookings/ApprovalStepsCard.tsx

@@ -1,217 +0,0 @@
-import { useMemo, useState } from "react";
-import { Check, ShieldCheck } from "lucide-react";
-import { Stack, Group, Text, Badge, Button, Box } from "@mantine/core";
-
-import { BookingConfirmDialog } from "./BookingConfirmDialog";
-import { useAuth } from "@/auth/useAuth";
-import { formatApprovalProgress } from "@/features/bookings/approval-progress";
-import {
-  buildApproveActionForStep,
-  canActOnApprovalStep,
-  getNextPendingApprovalStep,
-} from "@/features/bookings/booking-actions.config";
-import type { useBookingMutations } from "@/hooks/bookings/useBookings";
-import type { BookingApprovalStep, BookingDetail } from "@/types/booking";
-import { SectionCard } from "./detail/SectionCard";
-
-type Mutations = ReturnType<typeof useBookingMutations>;
-
-interface ApprovalStepsCardProps {
-  booking: BookingDetail;
-  mutations: Mutations;
-}
-
-/** Approval chain with inline approve on the current pending step. */
-export function ApprovalStepsCard({ booking, mutations }: ApprovalStepsCardProps) {
-  const { user } = useAuth();
-  const [confirmOpen, setConfirmOpen] = useState(false);
-  const [pendingStep, setPendingStep] = useState<BookingApprovalStep | null>(null);
-
-  const steps = useMemo(
-    () => [...(booking.approvalSteps ?? [])].sort((a, b) => a.stepOrder - b.stepOrder),
-    [booking.approvalSteps],
-  );
-
-  const nextPending = getNextPendingApprovalStep(steps);
-  const summary = formatApprovalProgress(booking.status, steps);
-  const pendingAction = pendingStep ? buildApproveActionForStep(pendingStep) : null;
-
-  const openApprove = (step: BookingApprovalStep) => {
-    setPendingStep(step);
-    setConfirmOpen(true);
-  };
-
-  const closeApprove = () => {
-    setConfirmOpen(false);
-    setPendingStep(null);
-  };
-
-  const runApprove = () => {
-    if (!pendingStep) return;
-    mutations.approveStep.mutate(
-      { stepId: pendingStep.id, requiredRole: pendingStep.requiredRole },
-      { onSuccess: () => closeApprove() },
-    );
-  };
-
-  const subtitle =
-    summary.detail ||
-    (nextPending
-      ? `Next: ${nextPending.requiredRole} · step ${nextPending.stepOrder}`
-      : steps.length
-        ? "All steps complete"
-        : "Accept submission to begin");
-
-  return (
-    <>
-      <SectionCard
-        icon={ShieldCheck}
-        title="Approval chain"
-        extra={
-          <Badge color="edr-green" variant="light" radius="sm">
-            {steps.filter((s) => s.status === "APPROVED").length}/{steps.length}
-          </Badge>
-        }
-      >
-        <Text size="xs" c="dimmed" mb="sm">
-          {subtitle}
-        </Text>
-
-        {steps.length === 0 ? (
-          <Text
-            size="sm"
-            c="dimmed"
-            ta="center"
-            py="lg"
-            px="md"
-            style={{
-              borderRadius: 8,
-              border: "1px dashed var(--mantine-color-gray-3)",
-              background: "var(--mantine-color-gray-0)",
-            }}
-          >
-            Use <strong>Accept for approval</strong> in staff actions to instantiate steps.
-          </Text>
-        ) : (
-          <Stack gap="xs">
-            {steps.map((step) => (
-              <StepRow
-                key={step.id}
-                step={step}
-                steps={steps}
-                user={user}
-                isNext={nextPending?.id === step.id}
-                isPending={mutations.approveStep.isPending}
-                onApprove={openApprove}
-              />
-            ))}
-          </Stack>
-        )}
-      </SectionCard>
-
-      <BookingConfirmDialog
-        open={confirmOpen}
-        onOpenChange={(open) => {
-          if (!open) closeApprove();
-          else setConfirmOpen(true);
-        }}
-        action={pendingAction}
-        reference={booking.reference}
-        inputValue=""
-        onInputChange={() => {}}
-        onConfirm={runApprove}
-        isPending={mutations.approveStep.isPending}
-      />
-    </>
-  );
-}
-
-function StepRow({
-  step,
-  steps,
-  user,
-  isNext,
-  isPending,
-  onApprove,
-}: {
-  step: BookingApprovalStep;
-  steps: BookingApprovalStep[];
-  user: ReturnType<typeof useAuth>["user"];
-  isNext: boolean;
-  isPending: boolean;
-  onApprove: (step: BookingApprovalStep) => void;
-}) {
-  const canApprove = canActOnApprovalStep(user, step, steps);
-  const statusColor =
-    step.status === "APPROVED"
-      ? "edr-green"
-      : step.status === "REJECTED"
-        ? "red"
-        : isNext
-          ? "edr-green"
-          : "gray";
-
-  return (
-    <Group
-      justify="space-between"
-      wrap="nowrap"
-      gap="sm"
-      px="sm"
-      py="xs"
-      style={{
-        borderRadius: 8,
-        border: "1px solid var(--mantine-color-gray-2)",
-        borderLeft: isNext
-          ? "3px solid var(--freight-brand)"
-          : "1px solid var(--mantine-color-gray-2)",
-        background: isNext ? "var(--mantine-color-gray-0)" : "white",
-      }}
-    >
-      <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-        <Box
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 28,
-            height: 28,
-            borderRadius: 8,
-            flexShrink: 0,
-            fontSize: 12,
-            fontWeight: 700,
-            background: "var(--mantine-color-gray-1)",
-            color: isNext ? "var(--mantine-color-gray-7)" : "var(--mantine-color-gray-6)",
-          }}
-        >
-          {step.stepOrder}
-        </Box>
-        <Box style={{ minWidth: 0 }}>
-          <Text size="sm" fw={600}>
-            {step.requiredRole}
-          </Text>
-          {step.remarks && (
-            <Text size="xs" c="dimmed" truncate>
-              {step.remarks}
-            </Text>
-          )}
-        </Box>
-      </Group>
-      <Group gap="xs" wrap="nowrap" style={{ flexShrink: 0 }}>
-        {canApprove && (
-          <Button
-            size="compact-sm"
-            color="edr-green"
-            leftSection={<Check size={14} />}
-            disabled={isPending}
-            onClick={() => onApprove(step)}
-          >
-            Approve
-          </Button>
-        )}
-        <Badge variant="light" color={statusColor} size="sm" radius="sm" tt="uppercase">
-          {step.status}
-        </Badge>
-      </Group>
-    </Group>
-  );
-}

apps/edr-freight-web/backoffice/src/components/bookings/BookingActionsMenu.tsx

@@ -6,7 +6,6 @@ import { BookingConfirmDialog } from "./BookingConfirmDialog";
 import { useBookingActionDialog } from "./useBookingActionDialog";
 import { useAuth } from "@/auth/useAuth";
 import {
-  getNextPendingApprovalStep,
   isAllocateAction,
   isClearanceNavAction,
   isContractNavAction,
@@ -37,7 +36,6 @@ export function BookingActionsMenu({
     status: row.status,
     paymentCurrency: row.paymentCurrency,
     reference: row.reference,
-    approvalSteps: row.approvalSteps,
     schedulingStatus: row.schedulingStatus,
     customsClearingEnabled: row.customsClearingEnabled,
   };
@@ -192,28 +190,6 @@ function ActionDialog({
       }}
       isPending={flow.mutations.isPending || flow.detailLoading}
       confirmDisabled={flow.confirmDisabled}
-      extra={
-        flow.detailLoading ? (
-          <Text size="sm" c="dimmed">
-            Loading approval steps…
-          </Text>
-        ) : pendingAction?.id === "approve" &&
-          !getNextPendingApprovalStep(flow.mergedContext.approvalSteps) ? (
-          <Text
-            size="sm"
-            c="orange.9"
-            p="xs"
-            style={{
-              borderRadius: 8,
-              border: "1px solid var(--mantine-color-orange-2)",
-              background: "var(--mantine-color-orange-0)",
-            }}
-          >
-            No pending approval step. Refresh the page after staff accept, or reject the
-            booking.
-          </Text>
-        ) : null
-      }
     />
   );
 }

apps/edr-freight-web/backoffice/src/components/bookings/BookingApprovalProgressCell.tsx

@@ -1,29 +0,0 @@
-import { formatApprovalProgress } from "@/features/bookings/approval-progress";
-import type { BookingListRow } from "@/types/booking";
-import { cn } from "@/lib/utils";
-
-interface BookingApprovalProgressCellProps {
-  row: BookingListRow;
-}
-
-export function BookingApprovalProgressCell({ row }: BookingApprovalProgressCellProps) {
-  const summary = formatApprovalProgress(row.status, row.approvalSteps);
-
-  return (
-    <div className="min-w-[8.5rem] py-1">
-      <p
-        className={cn(
-          "text-sm font-semibold",
-          summary.complete ? "text-[color:var(--freight-brand)]" : "text-foreground",
-        )}
-      >
-        {summary.label}
-      </p>
-      {summary.detail ? (
-        <p className="mt-0.5 line-clamp-2 text-[11px] leading-snug text-muted-foreground">
-          {summary.detail}
-        </p>
-      ) : null}
-    </div>
-  );
-}

apps/edr-freight-web/backoffice/src/components/bookings/detail/BookingApprovalCard.tsx

@@ -1,69 +0,0 @@
-import { CheckCircle, Clock, XCircle } from "lucide-react";
-import { Group, Text, Badge, Timeline } from "@mantine/core";
-
-import { SectionCard } from "./SectionCard";
-import {
-  approvalStatusColor,
-  formatDateTime,
-  type BookingApprovalStepView,
-} from "./booking-detail.styles";
-
-export interface BookingApprovalCardProps {
-  steps: BookingApprovalStepView[];
-  approvedCount: number;
-}
-
-/** Vertical timeline of the booking's approval chain. */
-export function BookingApprovalCard({ steps, approvedCount }: BookingApprovalCardProps) {
-  return (
-    <SectionCard
-      icon={CheckCircle}
-      title="Approval Workflow"
-      accent="edr-green"
-      extra={
-        <Badge color="edr-green" variant="light" radius="sm">
-          {approvedCount} / {steps.length} approved
-        </Badge>
-      }
-    >
-      <Timeline active={approvedCount - 1} bulletSize={26} lineWidth={2} color="edr-green">
-        {steps.map((step) => (
-          <Timeline.Item
-            key={step.id}
-            color={approvalStatusColor(step.status)}
-            bullet={
-              step.status === "APPROVED" ? (
-                <CheckCircle size={14} />
-              ) : step.status === "REJECTED" ? (
-                <XCircle size={14} />
-              ) : (
-                <Clock size={14} />
-              )
-            }
-            title={
-              <Group gap="sm">
-                <Text fw={600} size="sm">
-                  {step.requiredRole.replace(/_/g, " ")}
-                </Text>
-                <Badge
-                  color={approvalStatusColor(step.status)}
-                  size="xs"
-                  radius="sm"
-                  variant="light"
-                >
-                  {step.status}
-                </Badge>
-              </Group>
-            }
-          >
-            {step.actionedAt && (
-              <Text size="xs" c="dimmed">
-                {formatDateTime(step.actionedAt)}
-              </Text>
-            )}
-          </Timeline.Item>
-        ))}
-      </Timeline>
-    </SectionCard>
-  );
-}

apps/edr-freight-web/backoffice/src/components/bookings/detail/booking-detail.styles.ts

@@ -102,14 +102,6 @@ export interface BookingContainerView {
   };
 }
 
-export interface BookingApprovalStepView {
-  id: string;
-  stepOrder: number;
-  requiredRole: string;
-  status: string;
-  actionedAt?: string | null;
-}
-
 export interface BookingReviewNoteView {
   id: string;
   note: string;
@@ -150,7 +142,6 @@ export interface BookingDetailView {
   cargoType?: BookingNamedRefView;
   shippingLine?: BookingNamedRefView;
   bookingContainers?: BookingContainerView[];
-  approvalSteps?: BookingApprovalStepView[];
   reviewNotes?: BookingReviewNoteView[];
   files?: BookingFileView[];
 }

apps/edr-freight-web/backoffice/src/components/bookings/detail/index.ts

@@ -10,7 +10,6 @@ export * from "./BookingLifecycleStepper";
 export * from "./BookingRouteCard";
 export * from "./BookingContainersCard";
 export * from "./BookingContainerUnitsCard";
-export * from "./BookingApprovalCard";
 export * from "./BookingReviewNotesCard";
 export * from "./BookingPaymentCard";
 export * from "./BookingPaymentCountdownCard";

apps/edr-freight-web/backoffice/src/components/bookings/useBookingActionDialog.ts

@@ -2,12 +2,11 @@ import { useCallback, useState } from "react";
 
 import {
   getBookingActions,
-  getNextPendingApprovalStep,
   type BookingActionContext,
   type BookingActionDef,
 } from "@/features/bookings/booking-actions.config";
 import { useAuth } from "@/auth/useAuth";
-import { useBookingDetail, useBookingMutations } from "@/hooks/bookings/useBookings";
+import { useBookingMutations } from "@/hooks/bookings/useBookings";
 
 /** A contract validity window must be a whole number of days, 1–365. */
 function isValidValidityDays(value: string): boolean {
@@ -24,22 +23,11 @@ export function useBookingActionDialog(
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [dialogOpen, setDialogOpen] = useState(false);
 
-  const needsApprovalSteps =
-    pendingAction?.id === "approve" || pendingAction?.id === "rejectApproval";
+  // Bookings no longer have an approval chain, so the dialog needs nothing
+  // beyond the list-row context it was handed.
+  const detailLoading = false;
 
-  const needsApprovalContext =
-    context.status === "PENDING_APPROVAL" ||
-    context.status === "APPROVED_PENDING_SIGNATURE";
-
-  const { data: detail, isLoading: detailLoading } = useBookingDetail(
-    needsApprovalSteps || needsApprovalContext ? bookingId : undefined,
-  );
-
-  const mergedContext: BookingActionContext = {
-    ...context,
-    approvalSteps: detail?.approvalSteps ?? context.approvalSteps,
-    reference: detail?.reference ?? context.reference,
-  };
+  const mergedContext: BookingActionContext = { ...context };
 
   const { user } = useAuth();
   const mutations = useBookingMutations(bookingId);
@@ -86,24 +74,6 @@ export function useBookingActionDialog(
           { onSuccess },
         );
         break;
-      case "approve": {
-        const step = getNextPendingApprovalStep(mergedContext.approvalSteps);
-        if (!step) return;
-        mutations.approveStep.mutate(
-          { stepId: step.id, requiredRole: step.requiredRole },
-          { onSuccess },
-        );
-        break;
-      }
-      case "rejectApproval": {
-        const step = getNextPendingApprovalStep(mergedContext.approvalSteps);
-        if (!step) return;
-        mutations.rejectStep.mutate(
-          { stepId: step.id, reason: inputValue.trim() },
-          { onSuccess },
-        );
-        break;
-      }
       case "viewContract":
         break;
       case "startTransit":
@@ -122,16 +92,12 @@ export function useBookingActionDialog(
     pendingAction,
     inputValue,
     selectedFile,
-    mergedContext.approvalSteps,
     mutations,
     closeDialog,
   ]);
 
   const confirmDisabled =
     mutations.isPending ||
-    (needsApprovalSteps && detailLoading) ||
-    (pendingAction?.id === "approve" &&
-      !getNextPendingApprovalStep(mergedContext.approvalSteps)) ||
     (pendingAction?.input === "file" && !selectedFile) ||
     (pendingAction?.input === "reason" && !inputValue.trim()) ||
     (pendingAction?.input === "note" && !inputValue.trim()) ||