@freighttech/shipment-tracking 0.6.0

package/dist/modules/shipment_tracking/components/ShipmentDetailsDrawer.js

@@ -0,0 +1,818 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useState, useMemo, useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
+import Image from "next/image";
+import {
+  Ship,
+  MapPin,
+  Anchor,
+  Calendar,
+  Package,
+  ChevronDown,
+  ChevronUp,
+  Clock,
+  ArrowRight,
+  ExternalLink,
+  Navigation,
+  Radio,
+  Truck,
+  Warehouse
+} from "lucide-react";
+import {
+  Sheet,
+  SheetContent
+} from "@freighttech/ui/primitives/sheet";
+import { Badge } from "@freighttech/ui/primitives/badge";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+import { apiCall } from "@freighttech/ui/backend/utils/apiCall";
+import { useT, useLocale } from "@open-mercato/shared/lib/i18n/context";
+import { getCarrierLogo } from "../assets/index.js";
+import { VesselTrackingMap } from "./VesselTrackingMap.js";
+import { getCurrentVessel } from "../lib/current-vessel.js";
+function getPrimaryTimestamp(timestamps) {
+  if (!timestamps || timestamps.length === 0) return null;
+  const latest = timestamps.reduce(
+    (best, entry) => entry.updatedAt > best.updatedAt ? entry : best
+  );
+  return latest.value;
+}
+function formatShortDate(dateString) {
+  if (!dateString) return "-";
+  const date = new Date(dateString);
+  if (Number.isNaN(date.getTime())) return "-";
+  return date.toLocaleDateString(void 0, { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
+}
+function formatDateOnly(dateString) {
+  if (!dateString) return "-";
+  const date = new Date(dateString);
+  if (Number.isNaN(date.getTime())) return "-";
+  return date.toLocaleDateString(void 0, { day: "2-digit", month: "2-digit" });
+}
+function pickRegionName(event, locale) {
+  if (locale === "pl") return event.regionNamePl || event.regionNameEn || null;
+  return event.regionNameEn || event.regionNamePl || null;
+}
+function calculateTransitDays(atd, ata, eta) {
+  const startDate = atd ? new Date(atd) : null;
+  const endDate = ata ? new Date(ata) : eta ? new Date(eta) : null;
+  if (!startDate || !endDate) return null;
+  if (Number.isNaN(startDate.getTime()) || Number.isNaN(endDate.getTime())) return null;
+  const diffMs = endDate.getTime() - startDate.getTime();
+  return Math.ceil(diffMs / (1e3 * 60 * 60 * 24));
+}
+function calculateDelayFromHistory(timestamps) {
+  if (!timestamps || timestamps.length < 2) return null;
+  const sorted = [...timestamps].sort(
+    (a, b) => new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
+  );
+  const oldest = new Date(sorted[0].value);
+  const newest = new Date(sorted[sorted.length - 1].value);
+  if (Number.isNaN(oldest.getTime()) || Number.isNaN(newest.getTime())) return null;
+  const diffMs = newest.getTime() - oldest.getTime();
+  const diffDays = Math.round(diffMs / (1e3 * 60 * 60 * 24));
+  return diffDays !== 0 ? diffDays : null;
+}
+function calculateDelayFromPlanned(planned, actual) {
+  if (!planned || !actual) return null;
+  const plannedDate = new Date(planned);
+  const actualDate = new Date(actual);
+  if (Number.isNaN(plannedDate.getTime()) || Number.isNaN(actualDate.getTime())) return null;
+  const diffMs = actualDate.getTime() - plannedDate.getTime();
+  const diffDays = Math.round(diffMs / (1e3 * 60 * 60 * 24));
+  return diffDays !== 0 ? diffDays : null;
+}
+function getCarrierTrackingUrl(carrierCode, reference) {
+  if (!carrierCode) return null;
+  const code = carrierCode.toLowerCase();
+  const ref = reference?.trim();
+  if ((code === "maeu" || code === "maersk") && ref) {
+    return `https://www.maersk.com/tracking/${encodeURIComponent(ref)}`;
+  }
+  const urls = {
+    maeu: "https://www.maersk.com/tracking",
+    maersk: "https://www.maersk.com/tracking",
+    mscu: "https://www.msc.com/track-a-shipment",
+    msc: "https://www.msc.com/track-a-shipment",
+    cmdu: "https://www.cma-cgm.com/ebusiness/tracking",
+    "cma-cgm": "https://www.cma-cgm.com/ebusiness/tracking",
+    hlcu: "https://www.hapag-lloyd.com/en/online-business/track/track-by-container-solution.html",
+    "hapag-lloyd": "https://www.hapag-lloyd.com/en/online-business/track/track-by-container-solution.html",
+    cosu: "https://elines.coscoshipping.com/ebusiness/cargoTracking",
+    cosco: "https://elines.coscoshipping.com/ebusiness/cargoTracking",
+    eglv: "https://www.evergreen-line.com/trkc/",
+    evergreen: "https://www.evergreen-line.com/trkc/",
+    oolu: "https://www.oocl.com/eng/ourservices/eservices/cargotracking",
+    oocl: "https://www.oocl.com/eng/ourservices/eservices/cargotracking",
+    one: "https://ecomm.one-line.com/ecom/CUP_HOM_3301.do",
+    oney: "https://ecomm.one-line.com/ecom/CUP_HOM_3301.do",
+    ymlu: "https://www.yangming.com/e-service/Track_Trace/track_trace_cargo_tracking.aspx",
+    "yang-ming": "https://www.yangming.com/e-service/Track_Trace/track_trace_cargo_tracking.aspx",
+    zimu: "https://www.zim.com/tools/track-a-shipment",
+    zim: "https://www.zim.com/tools/track-a-shipment"
+  };
+  return urls[code] || null;
+}
+function getStatusBadgeVariant(status) {
+  switch (status) {
+    case "ARRIVED":
+    case "DELIVERED":
+      return "default";
+    case "IN_TRANSIT":
+    case "DEPARTED":
+      return "secondary";
+    case "PENDING":
+    case "BOOKED":
+      return "outline";
+    default:
+      return "outline";
+  }
+}
+function getFacilityLocationType(facilityTypeCode, vesselName) {
+  if (facilityTypeCode === "POTE") {
+    return "port";
+  }
+  if (facilityTypeCode === "DEPO" || facilityTypeCode === "CLOC") {
+    return "inland";
+  }
+  if (facilityTypeCode === "INTE") {
+    return vesselName ? "port" : "inland";
+  }
+  return "unknown";
+}
+function getEventIcon(eventCode, facilityTypeCode, vesselName) {
+  const locationType = getFacilityLocationType(facilityTypeCode, vesselName);
+  if (eventCode === "GTIN") {
+    if (locationType === "port") return Anchor;
+    if (locationType === "inland") return Warehouse;
+    return MapPin;
+  }
+  if (eventCode === "GTOT") {
+    if (locationType === "port") return Ship;
+    if (locationType === "inland") return Truck;
+    return MapPin;
+  }
+  switch (eventCode) {
+    // Standard DCSA events - check facility type for arrivals/departures
+    case "ARRI":
+      if (locationType === "port") return Anchor;
+      if (locationType === "inland") return Warehouse;
+      return MapPin;
+    case "DEPA":
+      if (locationType === "port") return Ship;
+      if (locationType === "inland") return Truck;
+      return MapPin;
+    case "LOAD":
+    case "DISC":
+      return Package;
+    // POI/AIS events (always at ports/terminals)
+    case "PARR":
+    // Port Arrival
+    case "TARR":
+      return Anchor;
+    case "PPRD":
+    // Port Departure
+    case "TPRD":
+      return Ship;
+    case "PPRA":
+    // Port Proximity Arrival
+    case "TPRA":
+      return Navigation;
+    case "WAYR":
+      return Radio;
+    default:
+      return Package;
+  }
+}
+function useEventLabel() {
+  const t = useT();
+  return useCallback((eventCode) => {
+    const key = `shipment_tracking.event_codes.${eventCode}`;
+    const translated = t(key, eventCode.toLowerCase());
+    return translated === key ? eventCode.toLowerCase() : translated;
+  }, [t]);
+}
+function CollapsibleSection({
+  title,
+  icon: Icon,
+  count,
+  defaultOpen = false,
+  children
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-lg bg-card overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "w-full p-3 flex items-center justify-between text-left hover:bg-muted transition-colors",
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: title }),
+            count !== void 0 && /* @__PURE__ */ jsx("span", { className: "bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded-full text-xs font-medium", children: count })
+          ] }),
+          isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 text-muted-foreground" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "border-t border-border", children })
+  ] });
+}
+function ShipmentCard({ shipment }) {
+  const t = useT();
+  const carrierLogo = getCarrierLogo(shipment.carrierCode);
+  const trackingReference = shipment.bolNumber || shipment.bookingNumber || shipment.containerNumber;
+  const trackingUrl = getCarrierTrackingUrl(shipment.carrierCode, trackingReference);
+  const atdActual = getPrimaryTimestamp(shipment.atdTimestamps);
+  const ataActual = getPrimaryTimestamp(shipment.ataTimestamps);
+  const etd = getPrimaryTimestamp(shipment.etdTimestamps);
+  const eta = getPrimaryTimestamp(shipment.etaTimestamps);
+  const atd = atdActual || etd;
+  const ata = ataActual || eta;
+  const transitDays = calculateTransitDays(atdActual || etd, ataActual, eta);
+  const originName = shipment.originLocation?.name || shipment.originLocation?.unlocode || "-";
+  const destinationName = shipment.destinationLocation?.name || shipment.destinationLocation?.unlocode || "-";
+  const originFacilityCode = formatFacilityCode(
+    shipment.originLocation?.facilityCode,
+    shipment.originLocation?.facilityCodeListProvider
+  );
+  const destinationFacilityCode = formatFacilityCode(
+    shipment.destinationLocation?.facilityCode,
+    shipment.destinationLocation?.facilityCodeListProvider
+  );
+  return /* @__PURE__ */ jsx("div", { className: "bg-card border border-border rounded-lg p-4 relative", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: shipment.bolNumber || shipment.bookingNumber || shipment.containerNumber || shipment.id.slice(0, 8) }),
+      shipment.containerNumber && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-mono mt-1", children: shipment.containerNumber })
+    ] }) }),
+    carrierLogo && /* @__PURE__ */ jsx("div", { className: "w-12 h-12 flex items-center justify-center absolute top-4 right-4", children: /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: carrierLogo,
+        alt: shipment.carrierCode || "Carrier",
+        width: 40,
+        height: 40,
+        className: "object-contain"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "font-medium text-foreground", children: [
+        /* @__PURE__ */ jsx("b", { children: originName }),
+        originFacilityCode && /* @__PURE__ */ jsxs("span", { className: "text-xs text-blue-600 dark:text-blue-400 ml-1 font-mono", children: [
+          "[",
+          originFacilityCode,
+          "]"
+        ] }),
+        atd && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          " (",
+          formatDateOnly(atd),
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ArrowRight, { className: "w-4 h-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("div", { className: "font-medium text-foreground", children: [
+        /* @__PURE__ */ jsx("b", { children: destinationName }),
+        destinationFacilityCode && /* @__PURE__ */ jsxs("span", { className: "text-xs text-blue-600 dark:text-blue-400 ml-1 font-mono", children: [
+          "[",
+          destinationFacilityCode,
+          "]"
+        ] }),
+        ata && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          " (",
+          formatDateOnly(ata),
+          ")"
+        ] })
+      ] })
+    ] }),
+    shipment.vesselName && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Ship, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: shipment.vesselName }),
+      shipment.vesselImo && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70", children: "\u2022" }),
+        /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs", children: [
+          "IMO: ",
+          shipment.vesselImo
+        ] })
+      ] })
+    ] }),
+    transitDays !== null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        t("shipment_tracking.details.transitTime", "Transit time"),
+        ": ",
+        transitDays,
+        " ",
+        t("shipment_tracking.details.days", "days")
+      ] })
+    ] }),
+    trackingUrl && /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: trackingUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex items-center gap-2 text-sm text-blue-600 hover:text-blue-700 font-medium",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: t("shipment_tracking.details.verifyOnCarrier", "Verify on carrier website") }),
+          /* @__PURE__ */ jsx(ExternalLink, { className: "w-4 h-4" })
+        ]
+      }
+    )
+  ] }) });
+}
+function DestinationStatusCard({ shipment }) {
+  const t = useT();
+  const ata = getPrimaryTimestamp(shipment.ataTimestamps);
+  const eta = getPrimaryTimestamp(shipment.etaTimestamps);
+  const hasArrived = ata !== null;
+  let statusLabel = t("shipment_tracking.details.status.enRoute", "En Route");
+  let statusColor = "bg-yellow-600";
+  if (shipment.status === "ARRIVED" || hasArrived) {
+    statusLabel = t("shipment_tracking.details.status.inPort", "In Port");
+    statusColor = "bg-blue-600";
+  } else if (shipment.status === "DELIVERED") {
+    statusLabel = t("shipment_tracking.details.status.delivered", "Delivered");
+    statusColor = "bg-green-600";
+  }
+  const destLoc = shipment.destinationLocation;
+  const destinationName = destLoc?.name || destLoc?.unlocode || "-";
+  const facilityCode = formatFacilityCode(destLoc?.facilityCode, destLoc?.facilityCodeListProvider);
+  return /* @__PURE__ */ jsxs("div", { className: "bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "font-semibold text-foreground flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(MapPin, { className: "w-5 h-5 text-blue-600 dark:text-blue-400" }),
+        t("shipment_tracking.details.destinationStatus", "Destination Status")
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: `${statusColor} text-white px-3 py-1 rounded-full text-xs font-medium`, children: statusLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(Anchor, { className: "w-4 h-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: destinationName }),
+        facilityCode && /* @__PURE__ */ jsxs("span", { className: "text-xs text-blue-600 dark:text-blue-400 font-mono", children: [
+          "[",
+          facilityCode,
+          "]"
+        ] })
+      ] }),
+      destLoc?.address && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground ml-6 truncate", title: destLoc.address, children: destLoc.address }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }),
+        /* @__PURE__ */ jsx("span", { children: hasArrived ? `ATA: ${formatShortDate(ata)}` : eta ? `ETA: ${formatShortDate(eta)}` : "-" })
+      ] })
+    ] })
+  ] });
+}
+function getStopColors(type) {
+  switch (type) {
+    case "origin":
+      return {
+        bg: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border-green-300 dark:border-green-700",
+        badge: "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400"
+      };
+    case "destination":
+      return {
+        bg: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border-blue-300 dark:border-blue-700",
+        badge: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
+      };
+    case "port_call":
+      return {
+        bg: "bg-slate-100 dark:bg-slate-800/40 text-slate-700 dark:text-slate-300 border-slate-300 dark:border-slate-600",
+        badge: "bg-slate-100 dark:bg-slate-800/40 text-slate-700 dark:text-slate-300"
+      };
+    case "transshipment":
+    default:
+      return {
+        bg: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border-yellow-300 dark:border-yellow-700",
+        badge: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400"
+      };
+  }
+}
+function formatFacilityCode(code, provider) {
+  if (!code) return null;
+  if (provider) return `${code} (${provider})`;
+  return code;
+}
+function getRouteStopIcon(facilityTypeCode, vesselName, stopType) {
+  if (facilityTypeCode === "DEPO" || facilityTypeCode === "CLOC") {
+    return Warehouse;
+  }
+  if (facilityTypeCode === "POTE") {
+    return Anchor;
+  }
+  if (facilityTypeCode === "INTE") {
+    return vesselName ? Anchor : Warehouse;
+  }
+  if (stopType === "origin" || stopType === "destination") {
+    return Anchor;
+  }
+  return MapPin;
+}
+function RouteDetails({ stops }) {
+  const t = useT();
+  if (stops.length === 0) {
+    return null;
+  }
+  const getSegmentStatus = (currentStop, nextStop) => {
+    if (!currentStop.atd) return "pending";
+    if (nextStop?.ata) return "completed";
+    return "in-progress";
+  };
+  const getSegmentLineColor = (status) => {
+    switch (status) {
+      case "completed":
+        return "bg-green-500 dark:bg-green-400";
+      case "in-progress":
+        return "bg-blue-500 dark:bg-blue-400";
+      default:
+        return "bg-border";
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "bg-card border border-border rounded-lg p-4", children: [
+    /* @__PURE__ */ jsxs("h3", { className: "font-semibold text-foreground mb-4 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(MapPin, { className: "w-4 h-4" }),
+      t("shipment_tracking.details.routeDetails", "Route Details")
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "space-y-0", children: stops.map((stop, index) => {
+      const colors = getStopColors(stop.type);
+      const badgeText = stop.type === "destination" ? t("shipment_tracking.details.destination", "Destination") : stop.type === "transshipment" ? t("shipment_tracking.details.transshipment", "Transshipment") : stop.type === "port_call" ? t("shipment_tracking.details.portCall", "Port call") : t("shipment_tracking.details.origin", "Origin");
+      const departureDelay = calculateDelayFromPlanned(stop.etd, stop.atd);
+      const arrivalDelay = calculateDelayFromPlanned(stop.eta, stop.ata);
+      const facilityDisplay = formatFacilityCode(stop.facilityCode, stop.facilityCodeListProvider);
+      const isLastStop = index === stops.length - 1;
+      const nextStop = !isLastStop ? stops[index + 1] : void 0;
+      const segmentStatus = getSegmentStatus(stop, nextStop);
+      const StopIcon = getRouteStopIcon(stop.facilityTypeCode, stop.vesselName, stop.type);
+      return /* @__PURE__ */ jsxs("div", { className: "relative flex items-start gap-3 py-2", children: [
+        !isLastStop && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `absolute left-[15px] top-[36px] bottom-[-20px] w-0.5 ${getSegmentLineColor(segmentStatus)}`
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: `relative z-10 mt-1 p-2 rounded-full ${colors.bg}`, children: /* @__PURE__ */ jsx(StopIcon, { className: "w-4 h-4" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "font-semibold text-foreground", children: stop.location }),
+              /* @__PURE__ */ jsx("div", { className: `px-2 py-1 rounded text-xs font-medium whitespace-nowrap ${colors.badge}`, children: badgeText })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground mb-1", children: [
+              stop.unlocode && /* @__PURE__ */ jsx("span", { className: "font-mono", children: stop.unlocode }),
+              facilityDisplay && /* @__PURE__ */ jsxs(Fragment, { children: [
+                stop.unlocode && /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-blue-600 dark:text-blue-400", title: t("shipment_tracking.details.terminalCode", "Terminal Code"), children: facilityDisplay })
+              ] })
+            ] }),
+            stop.facilityAddress && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mb-1 max-w-[200px] truncate", title: stop.facilityAddress, children: stop.facilityAddress }),
+            stop.coords && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground/70 mb-1 font-mono", children: [
+              stop.coords.latitude.toFixed(4),
+              ", ",
+              stop.coords.longitude.toFixed(4)
+            ] }),
+            stop.vesselName && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Ship, { className: "w-3 h-3" }),
+              /* @__PURE__ */ jsx("span", { children: stop.vesselName })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "text-right text-sm space-y-2 flex-shrink-0", children: [
+            (stop.atd || stop.etd) && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: stop.atd ? "ATD:" : "ETD:" }),
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground", children: formatShortDate(stop.atd || stop.etd) }),
+              departureDelay !== null && /* @__PURE__ */ jsxs("div", { className: `text-xs ${departureDelay > 0 ? "text-red-600 dark:text-red-400" : "text-green-600 dark:text-green-400"}`, children: [
+                departureDelay > 0 ? "+" : "",
+                departureDelay,
+                " ",
+                t("shipment_tracking.details.days", "days")
+              ] })
+            ] }),
+            (stop.ata || stop.eta) && /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: stop.ata ? "ATA:" : "ETA:" }),
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground", children: formatShortDate(stop.ata || stop.eta) }),
+              arrivalDelay !== null && /* @__PURE__ */ jsxs("div", { className: `text-xs ${arrivalDelay > 0 ? "text-red-600 dark:text-red-400" : "text-green-600 dark:text-green-400"}`, children: [
+                arrivalDelay > 0 ? "+" : "",
+                arrivalDelay,
+                " ",
+                t("shipment_tracking.details.days", "days")
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }, `${stop.unlocode || stop.location}-${index}`);
+    }) }) })
+  ] });
+}
+function JourneyTimeline({ events }) {
+  const t = useT();
+  const locale = useLocale();
+  const getEventLabel = useEventLabel();
+  const sortedEvents = useMemo(
+    () => events.filter((e) => !["WAYR", "PPRA", "TPRA"].includes(e.eventCode)).sort((a, b) => {
+      const timeA = new Date(a.eventDateTime).getTime();
+      const timeB = new Date(b.eventDateTime).getTime();
+      if (timeA !== timeB) return timeA - timeB;
+      return a.id.localeCompare(b.id);
+    }),
+    [events]
+  );
+  const lastActualIndex = useMemo(() => {
+    let last = -1;
+    sortedEvents.forEach((e, i) => {
+      if (e.eventClassifierCode === "ACT") last = i;
+    });
+    return last;
+  }, [sortedEvents]);
+  const getSegmentStatus = (index) => {
+    if (index + 1 <= lastActualIndex) return "completed";
+    if (index <= lastActualIndex) return "in-progress";
+    return "pending";
+  };
+  const getSegmentLineColor = (status) => {
+    switch (status) {
+      case "completed":
+        return "bg-green-500 dark:bg-green-400";
+      case "in-progress":
+        return "bg-blue-500 dark:bg-blue-400";
+      default:
+        return "bg-border";
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    CollapsibleSection,
+    {
+      title: t("shipment_tracking.details.journeyTimeline", "Journey Timeline"),
+      icon: Calendar,
+      count: sortedEvents.length,
+      defaultOpen: false,
+      children: /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: sortedEvents.map((event, index) => {
+        const Icon = getEventIcon(event.eventCode, event.facilityTypeCode, event.vesselName);
+        const hasHappened = index <= lastActualIndex;
+        const borderColor = hasHappened ? "border-green-300 dark:border-green-700" : "border-blue-300 dark:border-blue-700";
+        const bgColor = hasHappened ? "bg-green-100 dark:bg-green-900/30 border-green-300 dark:border-green-700 text-green-800 dark:text-green-300" : "bg-blue-100 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-300";
+        const badgeColor = hasHappened ? "bg-green-200 dark:bg-green-800/50 text-green-800 dark:text-green-300" : "bg-blue-200 dark:bg-blue-800/50 text-blue-800 dark:text-blue-300";
+        const isLastEvent = index === sortedEvents.length - 1;
+        const segmentStatus = getSegmentStatus(index);
+        return /* @__PURE__ */ jsxs("div", { className: "relative flex items-start gap-4", children: [
+          !isLastEvent && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute left-[19px] top-[40px] bottom-[-36px] w-0.5 ${getSegmentLineColor(segmentStatus)}`
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: `relative z-10 p-2 rounded-full border-2 bg-card ${borderColor}`, children: /* @__PURE__ */ jsx(Icon, { className: `w-5 h-5 ${hasHappened ? "text-green-600 dark:text-green-400" : "text-blue-600 dark:text-blue-400"}` }) }),
+          /* @__PURE__ */ jsx("div", { className: `flex-1 border rounded-lg p-3 ${bgColor}`, children: /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold", children: getEventLabel(event.eventCode) }),
+              /* @__PURE__ */ jsx("span", { className: `px-2 py-0.5 rounded text-xs font-medium ${badgeColor}`, children: event.eventClassifierCode || "N/A" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium mb-2", children: (() => {
+              if (event.locationName) return event.locationName;
+              const regionName = pickRegionName(event, locale);
+              if (regionName) {
+                return /* @__PURE__ */ jsxs(Fragment, { children: [
+                  regionName,
+                  event.locationUnlocode && /* @__PURE__ */ jsx("span", { className: "ml-1.5 font-normal opacity-60", children: event.locationUnlocode })
+                ] });
+              }
+              return event.locationUnlocode || "-";
+            })() }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-xs", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(Calendar, { className: "w-3 h-3" }),
+                formatShortDate(event.eventDateTime)
+              ] }),
+              event.vesselName && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(Ship, { className: "w-3 h-3" }),
+                event.vesselName
+              ] })
+            ] })
+          ] }) }) })
+        ] }, event.id);
+      }) }) }) })
+    }
+  );
+}
+function BookingDetails({ shipment }) {
+  const t = useT();
+  return /* @__PURE__ */ jsx(
+    CollapsibleSection,
+    {
+      title: t("shipment_tracking.details.bookingDetails", "Booking Details"),
+      icon: Package,
+      defaultOpen: false,
+      children: /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "bg-muted rounded-lg p-4 space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.shipments.fields.containerNumber", "Container Number") }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold text-foreground", children: shipment.containerNumber || "N/A" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.shipments.fields.size", "Size") }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold text-foreground", children: shipment.isoEquipmentCode || "N/A" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.shipments.fields.bookingNumber", "Booking Number") }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold text-foreground", children: shipment.bookingNumber || "N/A" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.shipments.fields.bolNumber", "BOL Number") }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold text-foreground", children: shipment.bolNumber || "N/A" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.shipments.fields.carrierCode", "Carrier Code") }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold text-foreground", children: shipment.carrierCode || "N/A" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.shipments.fields.seals", "Seals") }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold text-foreground", children: shipment.seals?.length ? shipment.seals.map((s) => s.number).join(", ") : "N/A" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.shipments.fields.status", "Status") }),
+          /* @__PURE__ */ jsx(Badge, { variant: getStatusBadgeVariant(shipment.status), children: shipment.status })
+        ] })
+      ] }) })
+    }
+  );
+}
+function ShipmentDetailsDrawer({
+  open,
+  onOpenChange,
+  shipmentId
+}) {
+  const t = useT();
+  const { data: shipment, isLoading: isLoadingShipment } = useQuery({
+    queryKey: ["shipment_tracking_shipment_details", shipmentId],
+    queryFn: async () => {
+      if (!shipmentId) return null;
+      const response = await apiCall(
+        `/api/shipment_tracking/shipments?id=${shipmentId}`
+      );
+      if (!response.ok) throw new Error("Failed to load shipment");
+      const items = response.result?.items ?? [];
+      const item = items.find((i) => i.id === shipmentId) ?? items[0];
+      if (!item) return null;
+      const trackingJobRaw = item.trackingJob ?? item.tracking_job ?? item.trackingJobId ?? item.tracking_job_id;
+      let trackingJobId = null;
+      if (trackingJobRaw) {
+        if (typeof trackingJobRaw === "string") {
+          trackingJobId = trackingJobRaw;
+        } else if (typeof trackingJobRaw === "object" && "id" in trackingJobRaw) {
+          trackingJobId = trackingJobRaw.id;
+        }
+      }
+      const routeStopsRaw = item.routeStops ?? item.route_stops;
+      const routeStops2 = Array.isArray(routeStopsRaw) ? routeStopsRaw.map((stop) => ({
+        location: stop.location,
+        unlocode: stop.unlocode,
+        type: stop.type ?? "transshipment",
+        vesselName: stop.vesselName ?? stop.vessel_name,
+        vesselImo: stop.vesselImo ?? stop.vessel_imo,
+        ata: stop.ata,
+        atd: stop.atd,
+        eta: stop.eta,
+        etd: stop.etd,
+        // Facility/terminal details
+        facilityCode: stop.facilityCode ?? stop.facility_code,
+        facilityCodeListProvider: stop.facilityCodeListProvider ?? stop.facility_code_list_provider,
+        facilityTypeCode: stop.facilityTypeCode ?? stop.facility_type_code,
+        facilityAddress: stop.facilityAddress ?? stop.facility_address,
+        coords: stop.coords ? stop.coords : null
+      })) : null;
+      const cargoEventsRaw = item.cargoEvents ?? item.cargo_events;
+      const cargoEvents = Array.isArray(cargoEventsRaw) ? cargoEventsRaw.map((evt) => ({
+        id: evt.id,
+        eventType: evt.eventType ?? evt.event_type ?? "",
+        eventCode: evt.eventCode ?? evt.event_code ?? "",
+        eventClassifierCode: evt.eventClassifierCode ?? evt.event_classifier_code,
+        eventDateTime: evt.eventDateTime ?? evt.event_date_time,
+        description: evt.description,
+        locationName: evt.locationName ?? evt.location_name,
+        locationUnlocode: evt.locationUnlocode ?? evt.location_unlocode,
+        regionNamePl: evt.regionNamePl ?? evt.region_name_pl,
+        regionNameEn: evt.regionNameEn ?? evt.region_name_en,
+        vesselName: evt.vesselName ?? evt.vessel_name,
+        vesselImo: evt.vesselImo ?? evt.vessel_imo,
+        voyageNumber: evt.voyageNumber ?? evt.voyage_number,
+        isTransshipmentMove: evt.isTransshipmentMove ?? evt.is_transshipment_move,
+        // Facility/terminal details
+        facilityCode: evt.facilityCode ?? evt.facility_code,
+        facilityCodeListProvider: evt.facilityCodeListProvider ?? evt.facility_code_list_provider,
+        facilityTypeCode: evt.facilityTypeCode ?? evt.facility_type_code,
+        facilityAddress: evt.facilityAddress ?? evt.facility_address,
+        latitude: evt.latitude,
+        longitude: evt.longitude
+      })) : null;
+      const originLocationRaw = item.originLocation ?? item.origin_location;
+      const destinationLocationRaw = item.destinationLocation ?? item.destination_location;
+      return {
+        id: item.id,
+        status: item.status ?? "PENDING",
+        carrierCode: item.carrierCode ?? item.carrier_code,
+        containerNumber: item.containerNumber ?? item.container_number,
+        bookingNumber: item.bookingNumber ?? item.booking_number,
+        isoEquipmentCode: item.isoEquipmentCode ?? item.iso_equipment_code,
+        bolNumber: item.bolNumber ?? item.bol_number,
+        etdTimestamps: item.etdTimestamps ?? item.etd_timestamps,
+        etaTimestamps: item.etaTimestamps ?? item.eta_timestamps,
+        atdTimestamps: item.atdTimestamps ?? item.atd_timestamps,
+        ataTimestamps: item.ataTimestamps ?? item.ata_timestamps,
+        originLocation: originLocationRaw,
+        destinationLocation: destinationLocationRaw,
+        vesselName: item.vesselName ?? item.vessel_name,
+        vesselImo: item.vesselImo ?? item.vessel_imo,
+        voyageNumber: item.voyageNumber ?? item.voyage_number,
+        routeStops: routeStops2,
+        cargoEvents,
+        trackingJob: trackingJobId ? { id: trackingJobId } : null
+      };
+    },
+    enabled: open && !!shipmentId
+  });
+  const routeStops = shipment?.routeStops ?? [];
+  const events = shipment?.cargoEvents ?? [];
+  const currentVessel = useMemo(() => {
+    return getCurrentVessel(
+      shipment?.routeStops,
+      shipment?.cargoEvents,
+      { vesselName: shipment?.vesselName, vesselImo: shipment?.vesselImo }
+    );
+  }, [shipment?.routeStops, shipment?.cargoEvents, shipment?.vesselName, shipment?.vesselImo]);
+  const isLoading = isLoadingShipment;
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        onOpenChange(false);
+      }
+    },
+    [onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      className: "flex flex-col p-0 w-full sm:max-w-xl md:max-w-2xl",
+      overlayClassName: "backdrop-blur-none",
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex justify-between px-4 py-6 border-b border-border", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-foreground", children: t("shipment_tracking.details.title", "Shipment Details") }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-48 gap-2", children: [
+          /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.details.loading", "Loading shipment details...") })
+        ] }) : !shipment ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center h-48 gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.details.notFound", "Shipment not found") }) }) : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(ShipmentCard, { shipment }),
+          /* @__PURE__ */ jsx(DestinationStatusCard, { shipment }),
+          routeStops.length > 0 && /* @__PURE__ */ jsx(RouteDetails, { stops: routeStops }),
+          currentVessel.status === "delivered" ? (
+            // Container delivered - show delivered message instead of map
+            /* @__PURE__ */ jsx("div", { className: "relative w-full h-32 border border-green-200 dark:border-green-800 rounded-lg overflow-hidden bg-green-50 dark:bg-green-950/30", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx(Package, { className: "w-8 h-8 text-green-500 dark:text-green-400 mx-auto mb-2" }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-green-700 dark:text-green-300", children: t("shipment_tracking.map.delivered", "Container delivered") }),
+              currentVessel.currentPort && /* @__PURE__ */ jsx("p", { className: "text-xs text-green-600 dark:text-green-400 mt-1", children: currentVessel.currentPort })
+            ] }) }) })
+          ) : currentVessel.vesselImo ? (
+            // Show map with current or planned vessel
+            /* @__PURE__ */ jsx(
+              VesselTrackingMap,
+              {
+                vesselImo: currentVessel.vesselImo,
+                vesselName: currentVessel.vesselName,
+                height: "250px",
+                autoRefresh: true,
+                showInfoOverlay: true,
+                containerStatus: currentVessel.status,
+                currentPort: currentVessel.currentPort,
+                isPlannedVessel: currentVessel.isPlannedVessel,
+                currentLeg: currentVessel.currentLeg,
+                traceFrom: currentVessel.traceFrom
+              }
+            )
+          ) : (
+            // No vessel IMO available
+            /* @__PURE__ */ jsxs("div", { className: "relative w-full h-48 border border-border rounded-lg overflow-hidden bg-muted", children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx(Ship, { className: "w-8 h-8 text-muted-foreground mx-auto mb-2" }),
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.details.noVesselData", "No vessel data available") })
+              ] }) }),
+              currentVessel.vesselName && /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3 bg-card/95 backdrop-blur-sm rounded-lg shadow-md px-3 py-2 border border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Ship, { className: "w-4 h-4 text-blue-500 dark:text-blue-400" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("h2", { className: "font-semibold text-sm text-foreground", children: currentVessel.vesselName }),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("shipment_tracking.details.noImoNumber", "IMO number not available") })
+                ] })
+              ] }) })
+            ] })
+          ),
+          events.length > 0 && /* @__PURE__ */ jsx(JourneyTimeline, { events }),
+          /* @__PURE__ */ jsx(BookingDetails, { shipment })
+        ] }) })
+      ]
+    }
+  ) });
+}
+var ShipmentDetailsDrawer_default = ShipmentDetailsDrawer;
+export {
+  ShipmentDetailsDrawer,
+  ShipmentDetailsDrawer_default as default
+};
+//# sourceMappingURL=ShipmentDetailsDrawer.js.map