mrp/client/src/modules/shipping/ShipmentDetailPage.tsx

import { permissions } from "@mrp/shared";
import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js";
import type { ShipmentDetailDto, ShipmentPickInput, ShipmentStatus, ShipmentSummaryDto } from "@mrp/shared/dist/shipping/types.js";
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";

import { useAuth } from "../../auth/AuthProvider";
import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
import { FileAttachmentsPanel } from "../../components/FileAttachmentsPanel";
import { api, ApiError } from "../../lib/api";
import { shipmentStatusOptions } from "./config";
import { ShipmentStatusBadge } from "./ShipmentStatusBadge";

function buildInitialPickForm(
  shipment: ShipmentDetailDto | null,
  locationOptions: WarehouseLocationOptionDto[],
  current?: ShipmentPickInput
): ShipmentPickInput {
  const remainingLine = shipment?.lines.find((line) => line.remainingQuantity > 0) ?? shipment?.lines[0] ?? null;
  const fallbackLocation =
    locationOptions.find((location) => location.warehouseId === current?.warehouseId) ?? locationOptions[0] ?? null;

  return {
    salesOrderLineId: current?.salesOrderLineId && shipment?.lines.some((line) => line.salesOrderLineId === current.salesOrderLineId)
      ? current.salesOrderLineId
      : remainingLine?.salesOrderLineId ?? "",
    warehouseId: current?.warehouseId || fallbackLocation?.warehouseId || "",
    locationId: current?.locationId || fallbackLocation?.locationId || "",
    quantity: current?.quantity ?? Math.min(remainingLine?.remainingQuantity ?? 1, 1),
    notes: current?.notes ?? "",
  };
}

function formatDateTime(value: string) {
  return new Date(value).toLocaleString();
}

export function ShipmentDetailPage() {
  const { token, user } = useAuth();
  const { shipmentId } = useParams();
  const [shipment, setShipment] = useState<ShipmentDetailDto | null>(null);
  const [relatedShipments, setRelatedShipments] = useState<ShipmentSummaryDto[]>([]);
  const [locationOptions, setLocationOptions] = useState<WarehouseLocationOptionDto[]>([]);
  const [pickForm, setPickForm] = useState<ShipmentPickInput>({
    salesOrderLineId: "",
    warehouseId: "",
    locationId: "",
    quantity: 1,
    notes: "",
  });
  const [status, setStatus] = useState("Loading shipment...");
  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
  const [isPostingPick, setIsPostingPick] = useState(false);
  const [activeDocumentAction, setActiveDocumentAction] = useState<"packing-slip" | "label" | "bol" | null>(null);
  const [pendingConfirmation, setPendingConfirmation] = useState<
    | {
        title: string;
        description: string;
        impact: string;
        recovery: string;
        confirmLabel: string;
        confirmationLabel?: string;
        confirmationValue?: string;
        nextStatus: ShipmentStatus;
      }
    | null
  >(null);

  const canManage = user?.permissions.includes(permissions.shippingWrite) ?? false;

  async function loadShipmentDetail(activeToken: string, activeShipmentId: string) {
    const [nextShipment, nextLocationOptions] = await Promise.all([
      api.getShipment(activeToken, activeShipmentId),
      canManage ? api.getWarehouseLocationOptions(activeToken) : Promise.resolve<WarehouseLocationOptionDto[]>([]),
    ]);
    const shipments = await api.getShipments(activeToken, { salesOrderId: nextShipment.salesOrderId });

    setShipment(nextShipment);
    setLocationOptions(nextLocationOptions);
    setRelatedShipments(shipments.filter((candidate) => candidate.id !== activeShipmentId));
    setPickForm((current) => buildInitialPickForm(nextShipment, nextLocationOptions, current));
    setStatus("Shipment loaded.");
  }

  useEffect(() => {
    if (!token || !shipmentId) {
      return;
    }

    loadShipmentDetail(token, shipmentId).catch((error: unknown) => {
      const message = error instanceof ApiError ? error.message : "Unable to load shipment.";
      setStatus(message);
    });
  }, [shipmentId, token, canManage]);

  const selectedLine = shipment?.lines.find((line) => line.salesOrderLineId === pickForm.salesOrderLineId) ?? null;
  const availableLocations = locationOptions.filter((location) => !pickForm.warehouseId || location.warehouseId === pickForm.warehouseId);
  const warehouseOptions = Array.from(
    new Map(locationOptions.map((location) => [location.warehouseId, { id: location.warehouseId, label: `${location.warehouseCode} · ${location.warehouseName}` }])).values()
  );
  const totalOrderedQuantity = shipment?.lines.reduce((sum, line) => sum + line.orderedQuantity, 0) ?? 0;
  const totalPickedQuantity = shipment?.lines.reduce((sum, line) => sum + line.pickedQuantity, 0) ?? 0;

  async function applyStatusChange(nextStatus: ShipmentStatus) {
    if (!token || !shipment) {
      return;
    }

    setIsUpdatingStatus(true);
    setStatus("Updating shipment status...");
    try {
      const nextShipment = await api.updateShipmentStatus(token, shipment.id, nextStatus);
      setShipment(nextShipment);
      setPickForm((current) => buildInitialPickForm(nextShipment, locationOptions, current));
      setStatus("Shipment status updated. Verify carrier paperwork, inventory issue progress, and sales-order expectations.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to update shipment status.";
      setStatus(message);
    } finally {
      setIsUpdatingStatus(false);
    }
  }

  function handleStatusChange(nextStatus: ShipmentStatus) {
    if (!shipment) {
      return;
    }

    const label = shipmentStatusOptions.find((option) => option.value === nextStatus)?.label ?? nextStatus;
    setPendingConfirmation({
      title: `Set shipment to ${label}`,
      description: `Update shipment ${shipment.shipmentNumber} from ${shipment.status} to ${nextStatus}.`,
      impact:
        nextStatus === "DELIVERED"
          ? "This marks delivery complete and can affect customer communication, project delivery status, and shipment closeout review."
          : nextStatus === "SHIPPED"
            ? "This marks the shipment as outbound and should only happen after stock has been picked and packed from real inventory locations."
            : "This changes the logistics state used by related shipping and sales workflows.",
      recovery: "If the status is wrong, return the shipment to the correct state and confirm pick quantities still match the physical shipment.",
      confirmLabel: `Set ${label}`,
      confirmationLabel: nextStatus === "DELIVERED" ? "Type shipment number to confirm:" : undefined,
      confirmationValue: nextStatus === "DELIVERED" ? shipment.shipmentNumber : undefined,
      nextStatus,
    });
  }

  async function handleOpenDocument(kind: "packing-slip" | "label" | "bol") {
    if (!token || !shipment) {
      return;
    }

    setActiveDocumentAction(kind);
    setStatus(
      kind === "packing-slip"
        ? "Rendering packing slip PDF..."
        : kind === "label"
          ? "Rendering shipping label PDF..."
          : "Rendering bill of lading PDF..."
    );
    try {
      const blob =
        kind === "packing-slip"
          ? await api.getShipmentPackingSlipPdf(token, shipment.id)
          : kind === "label"
            ? await api.getShipmentLabelPdf(token, shipment.id)
            : await api.getShipmentBillOfLadingPdf(token, shipment.id);
      const objectUrl = URL.createObjectURL(blob);
      window.open(objectUrl, "_blank", "noopener,noreferrer");
      window.setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
      setStatus(
        kind === "packing-slip"
          ? "Packing slip PDF rendered."
          : kind === "label"
            ? "Shipping label PDF rendered."
            : "Bill of lading PDF rendered."
      );
    } catch (error: unknown) {
      const message =
        error instanceof ApiError
          ? error.message
          : kind === "packing-slip"
            ? "Unable to render packing slip PDF."
            : kind === "label"
              ? "Unable to render shipping label PDF."
              : "Unable to render bill of lading PDF.";
      setStatus(message);
    } finally {
      setActiveDocumentAction(null);
    }
  }

  async function handlePostPick() {
    if (!token || !shipment || !selectedLine) {
      return;
    }

    setIsPostingPick(true);
    setStatus("Posting shipment pick and issuing stock...");
    try {
      const nextShipment = await api.postShipmentPick(token, shipment.id, {
        ...pickForm,
        quantity: Number(pickForm.quantity),
      });
      setShipment(nextShipment);
      setPickForm(buildInitialPickForm(nextShipment, locationOptions));
      setStatus("Shipment pick posted. Inventory was issued from the selected stock location.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to post shipment pick.";
      setStatus(message);
    } finally {
      setIsPostingPick(false);
    }
  }

  if (!shipment) {
    return <div className="rounded-[20px] border border-line/70 bg-surface/90 p-4 text-sm text-muted shadow-panel">{status}</div>;
  }

  return (
    <section className="space-y-4">
      <div className="surface-panel">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p className="section-kicker">SHIPMENT</p>
            <h3 className="module-title">{shipment.shipmentNumber}</h3>
            <p className="mt-1 text-sm text-text">{shipment.salesOrderNumber} / {shipment.customerName}</p>
            <div className="mt-3 flex flex-wrap items-center gap-3">
              <ShipmentStatusBadge status={shipment.status} />
              <span className="text-xs text-muted">{status}</span>
            </div>
          </div>
          <div className="flex flex-wrap gap-3">
            <Link to="/shipping/shipments" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Back to shipments</Link>
            <Link to={`/sales/orders/${shipment.salesOrderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Open sales order</Link>
            <button type="button" onClick={() => handleOpenDocument("packing-slip")} disabled={activeDocumentAction !== null} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
              {activeDocumentAction === "packing-slip" ? "Rendering PDF..." : "Open packing slip"}
            </button>
            <button type="button" onClick={() => handleOpenDocument("label")} disabled={activeDocumentAction !== null} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
              {activeDocumentAction === "label" ? "Rendering PDF..." : "Open shipping label"}
            </button>
            <button type="button" onClick={() => handleOpenDocument("bol")} disabled={activeDocumentAction !== null} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
              {activeDocumentAction === "bol" ? "Rendering PDF..." : "Open bill of lading"}
            </button>
            {canManage ? (
              <Link to={`/shipping/shipments/${shipment.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">Edit shipment</Link>
            ) : null}
          </div>
        </div>
      </div>

      {canManage ? (
        <section className="surface-panel">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <p className="section-kicker">QUICK ACTIONS</p>
            </div>
            <div className="flex flex-wrap gap-2">
              {shipmentStatusOptions.map((option) => (
                <button key={option.value} type="button" onClick={() => handleStatusChange(option.value)} disabled={isUpdatingStatus || shipment.status === option.value} className="rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
                  {option.label}
                </button>
              ))}
            </div>
          </div>
        </section>
      ) : null}

      <section className="grid gap-3 xl:grid-cols-4">
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Carrier</p>
          <div className="mt-2 text-base font-bold text-text">{shipment.carrier || "Not set"}</div>
        </article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Ordered Units</p>
          <div className="mt-2 text-base font-bold text-text">{totalOrderedQuantity}</div>
        </article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Picked Units</p>
          <div className="mt-2 text-base font-bold text-text">{totalPickedQuantity}</div>
        </article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel">
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Packages</p>
          <div className="mt-2 text-base font-bold text-text">{shipment.packageCount}</div>
        </article>
      </section>

      <div className="grid gap-3 xl:grid-cols-[minmax(0,1.3fr)_minmax(340px,0.9fr)]">
        <article className="surface-panel">
          <div className="flex items-center justify-between gap-3">
            <div>
              <p className="section-kicker">SHIPMENT LINES</p>
            </div>
          </div>
          <div className="mt-5 overflow-x-auto">
            <table className="min-w-full divide-y divide-line/60 text-sm">
              <thead>
                <tr className="text-left text-xs uppercase tracking-[0.16em] text-muted">
                  <th className="pb-3 pr-3 font-semibold">Item</th>
                  <th className="pb-3 pr-3 font-semibold">Description</th>
                  <th className="pb-3 pr-3 font-semibold">Ordered</th>
                  <th className="pb-3 pr-3 font-semibold">Picked</th>
                  <th className="pb-3 font-semibold">Remaining</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-line/50">
                {shipment.lines.map((line) => (
                  <tr key={line.salesOrderLineId}>
                    <td className="py-3 pr-3 align-top">
                      <div className="font-semibold text-text">{line.itemSku}</div>
                      <div className="text-xs text-muted">{line.itemName}</div>
                    </td>
                    <td className="py-3 pr-3 align-top text-text">{line.description}</td>
                    <td className="py-3 pr-3 align-top text-text">{line.orderedQuantity} {line.unitOfMeasure}</td>
                    <td className="py-3 pr-3 align-top text-text">{line.pickedQuantity} {line.unitOfMeasure}</td>
                    <td className="py-3 align-top">
                      <span className={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${line.remainingQuantity > 0 ? "bg-amber-500/15 text-amber-700 dark:text-amber-300" : "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"}`}>
                        {line.remainingQuantity} {line.unitOfMeasure}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </article>

        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Timing</p>
          <dl className="mt-5 grid gap-3">
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Ship Date</dt>
              <dd className="mt-1 text-sm text-text">{shipment.shipDate ? new Date(shipment.shipDate).toLocaleDateString() : "Not set"}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Created</dt>
              <dd className="mt-1 text-sm text-text">{formatDateTime(shipment.createdAt)}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Updated</dt>
              <dd className="mt-1 text-sm text-text">{formatDateTime(shipment.updatedAt)}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Tracking</dt>
              <dd className="mt-1 text-sm text-text">{shipment.trackingNumber || "Not set"}</dd>
            </div>
          </dl>
        </article>
      </div>

      {canManage ? (
        <section className="surface-panel">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
            <div>
              <p className="section-kicker">PICK AND ISSUE FROM STOCK</p>
            </div>
            <div className="rounded-[16px] border border-line/70 bg-page/60 px-3 py-2 text-xs text-muted">
              Select the sales-order line, source location, and quantity you are physically picking.
            </div>
          </div>
          <div className="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-5">
            <label className="flex flex-col gap-2 text-sm text-text">
              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Shipment line</span>
              <select
                value={pickForm.salesOrderLineId}
                onChange={(event) => {
                  const nextLine = shipment.lines.find((line) => line.salesOrderLineId === event.target.value) ?? null;
                  setPickForm((current) => ({
                    ...current,
                    salesOrderLineId: event.target.value,
                    quantity: Math.min(nextLine?.remainingQuantity ?? 1, 1),
                  }));
                }}
                className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
              >
                {shipment.lines.map((line) => (
                  <option key={line.salesOrderLineId} value={line.salesOrderLineId}>
                    {line.itemSku} / remaining {line.remainingQuantity} {line.unitOfMeasure}
                  </option>
                ))}
              </select>
            </label>
            <label className="flex flex-col gap-2 text-sm text-text">
              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Warehouse</span>
              <select
                value={pickForm.warehouseId}
                onChange={(event) => {
                  const nextWarehouseId = event.target.value;
                  const nextLocation = locationOptions.find((location) => location.warehouseId === nextWarehouseId) ?? null;
                  setPickForm((current) => ({
                    ...current,
                    warehouseId: nextWarehouseId,
                    locationId: nextLocation?.locationId ?? "",
                  }));
                }}
                className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
              >
                {warehouseOptions.map((warehouse) => (
                  <option key={warehouse.id} value={warehouse.id}>
                    {warehouse.label}
                  </option>
                ))}
              </select>
            </label>
            <label className="flex flex-col gap-2 text-sm text-text">
              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Location</span>
              <select
                value={pickForm.locationId}
                onChange={(event) => setPickForm((current) => ({ ...current, locationId: event.target.value }))}
                className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
              >
                {availableLocations.map((location) => (
                  <option key={location.locationId} value={location.locationId}>
                    {location.warehouseCode} / {location.locationCode} / {location.locationName}
                  </option>
                ))}
              </select>
            </label>
            <label className="flex flex-col gap-2 text-sm text-text">
              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Quantity</span>
              <input
                type="number"
                min={0.0001}
                step="any"
                value={pickForm.quantity}
                onChange={(event) => setPickForm((current) => ({ ...current, quantity: Number(event.target.value) }))}
                className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
              />
            </label>
            <label className="flex flex-col gap-2 text-sm text-text">
              <span className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Notes</span>
              <input
                type="text"
                value={pickForm.notes}
                onChange={(event) => setPickForm((current) => ({ ...current, notes: event.target.value }))}
                className="rounded-2xl border border-line/70 bg-page px-3 py-2 text-sm text-text outline-none"
                placeholder="Picker, carton, or handling notes"
              />
            </label>
          </div>
          <div className="mt-4 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div className="text-sm text-muted">
              {selectedLine
                ? `Remaining on selected line: ${selectedLine.remainingQuantity} ${selectedLine.unitOfMeasure}.`
                : "Select a shipment line to issue inventory."}
            </div>
            <button
              type="button"
              onClick={() => void handlePostPick()}
              disabled={
                isPostingPick ||
                !selectedLine ||
                selectedLine.remainingQuantity <= 0 ||
                !pickForm.warehouseId ||
                !pickForm.locationId ||
                pickForm.quantity <= 0
              }
              className="inline-flex items-center justify-center rounded-2xl bg-brand px-4 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60"
            >
              {isPostingPick ? "Issuing stock..." : "Post shipment pick"}
            </button>
          </div>
        </section>
      ) : null}

      <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_minmax(320px,0.9fr)]">
        <article className="surface-panel">
          <div className="flex items-center justify-between gap-3">
            <div>
              <p className="section-kicker">PICK HISTORY</p>
            </div>
          </div>
          {shipment.picks.length === 0 ? (
            <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
              No shipment picks have been posted yet.
            </div>
          ) : (
            <div className="mt-5 space-y-3">
              {shipment.picks.map((pick) => (
                <div key={pick.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                  <div className="flex flex-wrap items-start justify-between gap-3">
                    <div>
                      <div className="font-semibold text-text">{pick.itemSku} / {pick.itemName}</div>
                      <div className="mt-1 text-xs text-muted">
                        {pick.quantity} issued from {pick.warehouseCode} / {pick.locationCode}
                      </div>
                    </div>
                    <div className="text-right text-xs text-muted">
                      <div>{pick.createdByName}</div>
                      <div className="mt-1">{formatDateTime(pick.createdAt)}</div>
                    </div>
                  </div>
                  <div className="mt-2 text-sm text-text">{pick.notes || "No pick notes."}</div>
                </div>
              ))}
            </div>
          )}
        </article>

        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Shipment Notes</p>
          <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{shipment.notes || "No notes recorded for this shipment."}</p>
        </article>
      </div>

      <section className="surface-panel">
        <div className="flex items-center justify-between gap-3">
          <div>
            <p className="section-kicker">RELATED SHIPMENTS</p>
          </div>
          {canManage ? (
            <Link to={`/shipping/shipments/new?orderId=${shipment.salesOrderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Add another shipment</Link>
          ) : null}
        </div>
        {relatedShipments.length === 0 ? (
          <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No additional shipments exist for this sales order.</div>
        ) : (
          <div className="mt-6 space-y-3">
            {relatedShipments.map((related) => (
              <Link key={related.id} to={`/shipping/shipments/${related.id}`} className="block rounded-[18px] border border-line/70 bg-page/60 p-3 transition hover:bg-page/80">
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <div>
                    <div className="font-semibold text-text">{related.shipmentNumber}</div>
                    <div className="mt-1 text-xs text-muted">{related.carrier || "Carrier not set"} / {related.trackingNumber || "No tracking"}</div>
                  </div>
                  <ShipmentStatusBadge status={related.status} />
                </div>
              </Link>
            ))}
          </div>
        )}
      </section>

      <FileAttachmentsPanel
        ownerType="SHIPMENT"
        ownerId={shipment.id}
        eyebrow="Logistics Attachments"
        title="Shipment files"
        description="Store carrier paperwork, signed delivery records, bills of lading, and related logistics support files on the shipment record."
        emptyMessage="No logistics attachments have been uploaded for this shipment yet."
      />

      <ConfirmActionDialog
        open={pendingConfirmation != null}
        title={pendingConfirmation?.title ?? "Confirm shipment action"}
        description={pendingConfirmation?.description ?? ""}
        impact={pendingConfirmation?.impact}
        recovery={pendingConfirmation?.recovery}
        confirmLabel={pendingConfirmation?.confirmLabel ?? "Confirm"}
        confirmationLabel={pendingConfirmation?.confirmationLabel}
        confirmationValue={pendingConfirmation?.confirmationValue}
        isConfirming={isUpdatingStatus}
        onClose={() => {
          if (!isUpdatingStatus) {
            setPendingConfirmation(null);
          }
        }}
        onConfirm={async () => {
          if (!pendingConfirmation) {
            return;
          }

          await applyStatusChange(pendingConfirmation.nextStatus);
          setPendingConfirmation(null);
        }}
      />
    </section>
  );
}