approve-delivery exit-gate fix + Import Loading Confirmation frontend panel — done this session, not yet committed

apps/edr-freight-web/backoffice/src/components/customers/badges.tsx

@@ -1,3 +1,4 @@
+import type { Freight } from "@edr/types";
 import { Badge, Button, Group, Tooltip } from "@mantine/core";
 import { useMutation } from "@tanstack/react-query";
 import { api } from "@/services/api";
@@ -88,7 +89,13 @@ export function ProfileChips({
 }) {
   if (!profiles.length) {
     return (
-      <Badge color="gray" variant="light" size="sm" radius="md" style={badgeStyle}>
+      <Badge
+        color="gray"
+        variant="light"
+        size="sm"
+        radius="md"
+        style={badgeStyle}
+      >
         No profiles
       </Badge>
     );
@@ -118,7 +125,13 @@ export function ProfileChips({
         </Tooltip>
       ))}
       {extra > 0 ? (
-        <Badge color="gray" variant="light" size="sm" radius="md" style={badgeStyle}>
+        <Badge
+          color="gray"
+          variant="light"
+          size="sm"
+          radius="md"
+          style={badgeStyle}
+        >
           +{extra}
         </Badge>
       ) : null}
@@ -169,7 +182,11 @@ const BOOKING_STATUS_COLOR: Record<CustomerBookingStatus, string> = {
   CANCELLED: "red",
 };
 
-export function BookingStatusBadge({ status }: { status: CustomerBookingStatus }) {
+export function BookingStatusBadge({
+  status,
+}: {
+  status: CustomerBookingStatus;
+}) {
   return (
     <Badge
       color={BOOKING_STATUS_COLOR[status] ?? "gray"}
@@ -194,7 +211,11 @@ const PAYMENT_STATUS_COLOR: Record<CustomerPaymentStatus, string> = {
   refunded: "grape",
 };
 
-export function PaymentStatusBadge({ status }: { status: CustomerPaymentStatus }) {
+export function PaymentStatusBadge({
+  status,
+}: {
+  status: CustomerPaymentStatus;
+}) {
   return (
     <Badge
       color={PAYMENT_STATUS_COLOR[status] ?? "gray"}
@@ -210,6 +231,38 @@ export function PaymentStatusBadge({ status }: { status: CustomerPaymentStatus }
   );
 }
 
+const INVOICE_STATUS_COLOR: Record<Freight.InvoiceStatus, string> = {
+  DRAFT: "gray",
+  ISSUED: "cyan",
+  PENDING: "yellow",
+  PARTIALLY_PAID: "orange",
+  PAID: "edr-green",
+  OVERDUE: "red",
+  CANCELLED: "gray",
+  REFUNDED: "grape",
+  EXPIRED: "red",
+};
+
+export function InvoiceStatusBadge({
+  status,
+}: {
+  status: Freight.InvoiceStatus;
+}) {
+  return (
+    <Badge
+      color={INVOICE_STATUS_COLOR[status] ?? "gray"}
+      variant="light"
+      size="sm"
+      radius="md"
+      tt="capitalize"
+      fw={600}
+      style={badgeStyle}
+    >
+      {humanize(status)}
+    </Badge>
+  );
+}
+
 /**
  * Inline approval action buttons for a profile row.
  * Transitions: pending → approve/reject | active → suspend | suspended → reactivate/blacklist | blacklisted → reinstate
@@ -225,8 +278,7 @@ export function ProfileApprovalActions({
     api.customers.setProfileStatus.mutationOptions(),
   );
 
-  const act = (next: ProfileStatus) =>
-    mutate({ profileId, status: next });
+  const act = (next: ProfileStatus) => mutate({ profileId, status: next });
 
   if (status === "pending") {
     return (

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

@@ -2,6 +2,7 @@ export {
   BookingStatusBadge,
   CompanyStatusBadge,
   CompanyTypeBadge,
+  InvoiceStatusBadge,
   PaymentStatusBadge,
   ProfileApprovalActions,
   ProfileChips,

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx

@@ -179,7 +179,16 @@ const RuleEngineFormDialog = ({
   const formRows = useMemo(() => buildFormRows(visibleFields), [visibleFields]);
 
   const setField = (name: string, value: unknown) => {
-    setValues((current) => ({ ...current, [name]: value }));
+    setValues((current) => {
+      const next = { ...current, [name]: value };
+      // Changing what a rate applies to (or its surcharge trigger) can invalidate
+      // the previously-chosen unit — reset it so the admin re-picks from the new
+      // allowed set instead of submitting a stale, rejected unit.
+      if ((name === "appliesTo" || name === "trigger") && "rateUnit" in current) {
+        next.rateUnit = "";
+      }
+      return next;
+    });
   };
 
   const handleSubmit = (event: React.FormEvent) => {
@@ -250,6 +259,9 @@ const RuleEngineFormDialog = ({
     const label = <FieldLabel label={field.label} required={field.required} />;
 
     if (field.type === "select") {
+      // Dynamic options (e.g. rate unit) resolve from the live form values so
+      // the choices track the other fields the admin has picked.
+      const options = field.optionsFromValues ? field.optionsFromValues(values) : (field.options ?? []);
       return (
         <Select
           key={field.name}
@@ -261,7 +273,7 @@ const RuleEngineFormDialog = ({
           value={resolveSelectValue(field, values)}
           onChange={(v) => setField(field.name, v === RULE_ENGINE_SELECT_NONE ? "" : v)}
           disabled={selectOptionsLoading}
-          data={(field.options ?? [])
+          data={options
             .filter((opt) => opt.value !== "")
             .map((opt) => ({
               label: opt.label,