@freighttech/shipment-tracking 0.6.0

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

@@ -0,0 +1,496 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
+import { GoogleMap, useJsApiLoader, MarkerF, PolylineF, CircleF, InfoWindowF } from "@react-google-maps/api";
+import { Ship, Navigation, Anchor, MapPin, Clock, Building2, Ruler, Info, X } from "lucide-react";
+import { useVesselTracking } from "../hooks/useVesselTracking.js";
+import { Spinner } from "@freighttech/ui/primitives/spinner";
+import { useT, useLocale } from "@open-mercato/shared/lib/i18n/context";
+const containerStyle = {
+  width: "100%",
+  height: "100%"
+};
+const mapOptions = {
+  zoomControl: true,
+  mapTypeControl: false,
+  scaleControl: false,
+  streetViewControl: false,
+  rotateControl: false,
+  fullscreenControl: false,
+  disableDefaultUI: false,
+  gestureHandling: "cooperative",
+  styles: [
+    {
+      featureType: "water",
+      elementType: "geometry",
+      stylers: [{ color: "#bfdbfe" }]
+      // Light blue for water
+    },
+    {
+      featureType: "landscape",
+      elementType: "geometry",
+      stylers: [{ color: "#f5f3ff" }]
+      // Light purple for land
+    },
+    {
+      featureType: "road",
+      elementType: "geometry",
+      stylers: [{ color: "#e0e7ff" }]
+      // Light indigo for roads
+    }
+  ]
+};
+const defaultCenter = { lat: 54.5, lng: 18.5 };
+const MIN_POI_ZOOM = 6;
+const POI_COLORS = {
+  PORT: "#2563eb",
+  // blue
+  TERMINAL: "#059669",
+  // emerald
+  WAYPOINT: "#d97706",
+  // amber
+  PORT_GEOMETRIC_CENTER: "#64748b"
+  // slate
+};
+function getPoiPrimaryName(poi, locale) {
+  if (poi.type === "TERMINAL") {
+    return poi.terminalName || poi.portName || poi.city || poi.locode || poi.code;
+  }
+  if (poi.type === "PORT" || poi.type === "PORT_GEOMETRIC_CENTER") {
+    return poi.city || poi.portName || poi.locode || poi.code;
+  }
+  const region = locale === "pl" ? poi.regionNamePl || poi.regionNameEn : poi.regionNameEn || poi.regionNamePl;
+  return region || poi.locode || poi.code;
+}
+function getPoiTypeLabel(type, t) {
+  switch (type) {
+    case "PORT":
+      return t("shipment_tracking.map.poi.port", "Port");
+    case "TERMINAL":
+      return t("shipment_tracking.map.poi.terminal", "Terminal");
+    case "WAYPOINT":
+      return t("shipment_tracking.map.poi.waypoint", "Waypoint");
+    case "PORT_GEOMETRIC_CENTER":
+      return t("shipment_tracking.map.poi.portCenter", "Port center");
+    default:
+      return type;
+  }
+}
+function calculateVesselDimensions(vessel) {
+  const dims = vessel?.dimensions;
+  if (!dims) {
+    return { length: 0, width: 0, hasValidDimensions: false };
+  }
+  const length = (dims.a ?? 0) + (dims.b ?? 0);
+  const width = (dims.c ?? 0) + (dims.d ?? 0);
+  const hasValidDimensions = length > 0 && width > 0;
+  return { length, width, hasValidDimensions };
+}
+function formatRelativeTime(dateString, t) {
+  if (!dateString) return "";
+  const date = new Date(dateString);
+  if (Number.isNaN(date.getTime())) return "";
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffMinutes < 1) {
+    return t("shipment_tracking.map.justNow", "Just now");
+  }
+  if (diffMinutes < 60) {
+    return t("shipment_tracking.map.minutesAgo", "{{count}} min ago", { count: diffMinutes });
+  }
+  if (diffHours < 24) {
+    return t("shipment_tracking.map.hoursAgo", "{{count}}h ago", { count: diffHours });
+  }
+  return t("shipment_tracking.map.daysAgo", "{{count}}d ago", { count: diffDays });
+}
+function VesselInfoCard({
+  vessel,
+  displayName,
+  isPlannedVessel,
+  containerStatus,
+  currentPort,
+  currentLeg,
+  t
+}) {
+  const { length, width, hasValidDimensions } = calculateVesselDimensions(vessel);
+  const lastUpdate = formatRelativeTime(vessel?.updatedAt, t);
+  const getVesselStatusDisplay = () => {
+    if (vessel?.status === "IN_PORT") {
+      return {
+        icon: /* @__PURE__ */ jsx(Anchor, { className: "w-3 h-3 text-green-600 dark:text-green-400" }),
+        text: vessel.currentPort?.name || t("shipment_tracking.map.inPort", "In Port"),
+        color: "text-green-600 dark:text-green-400"
+      };
+    }
+    if (vessel?.status === "AT_SEA") {
+      const destination = vessel.lastDestinationPort?.name || vessel.lastDestination;
+      return {
+        icon: /* @__PURE__ */ jsx(Navigation, { className: "w-3 h-3 text-blue-600 dark:text-blue-400" }),
+        text: destination ? t("shipment_tracking.map.atSeaTo", "At Sea -> {{destination}}", { destination }) : t("shipment_tracking.map.atSea", "At Sea"),
+        color: "text-blue-600 dark:text-blue-400"
+      };
+    }
+    return {
+      icon: /* @__PURE__ */ jsx(Info, { className: "w-3 h-3 text-muted-foreground" }),
+      text: t("shipment_tracking.map.unknown", "Unknown"),
+      color: "text-muted-foreground"
+    };
+  };
+  const statusDisplay = getVesselStatusDisplay();
+  return /* @__PURE__ */ jsxs("div", { className: "bg-card border border-border rounded-l-lg border-r-0 px-3 py-2.5 h-full overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+        /* @__PURE__ */ jsx(Ship, { className: "w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0" }),
+        /* @__PURE__ */ jsx("h2", { className: "font-semibold text-sm truncate text-foreground", children: displayName })
+      ] }),
+      isPlannedVessel && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded flex-shrink-0", children: t("shipment_tracking.map.planned", "Planned") })
+    ] }),
+    vessel?.imo && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground font-mono mb-2", children: [
+      "IMO ",
+      vessel.imo
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "border-t border-border pt-2 space-y-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 w-14 flex-shrink-0 truncate", title: t("shipment_tracking.map.status", "Status"), children: t("shipment_tracking.map.status", "Status") }),
+        /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-1 ${statusDisplay.color} truncate`, children: [
+          statusDisplay.icon,
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: statusDisplay.text })
+        ] })
+      ] }),
+      vessel?.shipType && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 w-14 flex-shrink-0 truncate", title: t("shipment_tracking.map.type", "Type"), children: t("shipment_tracking.map.type", "Type") }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground truncate", title: vessel.shipType, children: vessel.shipType })
+      ] }),
+      hasValidDimensions && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 w-14 flex-shrink-0 truncate", title: t("shipment_tracking.map.size", "Size"), children: t("shipment_tracking.map.size", "Size") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-foreground", children: [
+          /* @__PURE__ */ jsx(Ruler, { className: "w-3 h-3 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            length,
+            "m x ",
+            width,
+            "m"
+          ] })
+        ] })
+      ] }),
+      vessel?.operatorName && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 w-14 flex-shrink-0 truncate", title: t("shipment_tracking.map.operator", "Operator"), children: t("shipment_tracking.map.operator", "Operator") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-foreground truncate", title: vessel.operatorName, children: [
+          /* @__PURE__ */ jsx(Building2, { className: "w-3 h-3 text-muted-foreground flex-shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: vessel.operatorName })
+        ] })
+      ] }),
+      lastUpdate && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 w-14 flex-shrink-0 truncate", title: t("shipment_tracking.map.updated", "Updated"), children: t("shipment_tracking.map.updated", "Updated") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { children: lastUpdate })
+        ] })
+      ] })
+    ] }),
+    containerStatus && containerStatus !== "delivered" && /* @__PURE__ */ jsx("div", { className: "border-t border-border mt-2 pt-2", children: containerStatus === "in_transit" && currentLeg ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400", children: [
+      /* @__PURE__ */ jsx(MapPin, { className: "w-3 h-3" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: t("shipment_tracking.map.inTransitTo", "In transit to {{destination}}", {
+        destination: currentLeg.toPort
+      }) })
+    ] }) : containerStatus === "at_port" && currentPort ? /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-green-600 dark:text-green-400", children: [
+        /* @__PURE__ */ jsx(MapPin, { className: "w-3 h-3" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: t("shipment_tracking.map.containerAtPort", "Container at {{port}}", {
+          port: currentPort
+        }) })
+      ] }),
+      isPlannedVessel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400", children: [
+        /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: t("shipment_tracking.map.awaitingVessel", "Awaiting this vessel") })
+      ] })
+    ] }) : containerStatus === "not_departed" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400", children: [
+      /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: t("shipment_tracking.map.awaitingDeparture", "Awaiting departure") })
+    ] }) : null })
+  ] });
+}
+function VesselTrackingMap({
+  vesselImo,
+  vesselName,
+  height = "250px",
+  autoRefresh = true,
+  refreshInterval = 3e4,
+  showInfoOverlay = true,
+  showPois = true,
+  containerStatus,
+  currentPort,
+  isPlannedVessel = false,
+  currentLeg,
+  traceFrom
+}) {
+  const t = useT();
+  const locale = useLocale();
+  const { isLoaded, loadError } = useJsApiLoader({
+    id: "google-map-script",
+    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ""
+  });
+  const [map, setMap] = useState(null);
+  const [zoom, setZoom] = useState(8);
+  const [selectedPoi, setSelectedPoi] = useState(null);
+  const enablePois = showPois && zoom >= MIN_POI_ZOOM;
+  useEffect(() => {
+    if (!enablePois) setSelectedPoi(null);
+  }, [enablePois]);
+  const {
+    vessel,
+    isVesselLoading,
+    vesselError,
+    trace,
+    isTraceLoading,
+    isDebouncing,
+    setBounds,
+    pois
+  } = useVesselTracking(vesselImo, {
+    autoRefresh,
+    vesselRefreshInterval: refreshInterval,
+    boundsDebounceDelay: 500,
+    traceLimit: 5e3,
+    traceFrom,
+    enablePois
+  });
+  const onMapLoad = useCallback((mapInstance) => {
+    setMap(mapInstance);
+  }, []);
+  const handleMapIdle = useCallback(() => {
+    if (!map) return;
+    const bounds = map.getBounds();
+    if (!bounds) return;
+    const currentZoom = map.getZoom();
+    if (typeof currentZoom === "number") setZoom(currentZoom);
+    const ne = bounds.getNorthEast();
+    const sw = bounds.getSouthWest();
+    const MARGIN_DEGREES = 0.3;
+    setBounds({
+      north: Math.min(90, ne.lat() + MARGIN_DEGREES),
+      south: Math.max(-90, sw.lat() - MARGIN_DEGREES),
+      east: Math.min(180, ne.lng() + MARGIN_DEGREES),
+      west: Math.max(-180, sw.lng() - MARGIN_DEGREES)
+    });
+  }, [map, setBounds]);
+  const shipIcon = useMemo(() => {
+    if (!isLoaded || typeof window === "undefined") return void 0;
+    const google = window.google;
+    if (!google) return void 0;
+    const heading = vessel?.lastHeading ?? 0;
+    const containerShipPath = `
+      M 12 2
+      L 8 7
+      L 8 30
+      Q 8 32, 10 32
+      L 10 34
+      L 14 34
+      L 14 32
+      Q 16 32, 16 30
+      L 16 7
+      L 12 2
+      Z
+      M 10 32
+      L 10 36
+      L 14 36
+      L 14 32
+      Z
+    `;
+    return {
+      path: containerShipPath,
+      fillColor: "#0f172a",
+      // Dark slate hull
+      fillOpacity: 0.95,
+      strokeColor: "#ffffff",
+      strokeWeight: 1.5,
+      scale: 1,
+      rotation: heading,
+      anchor: new google.maps.Point(12, 18)
+      // Center point for rotation
+    };
+  }, [isLoaded, vessel?.lastHeading]);
+  const poiDotIcon = useMemo(() => {
+    if (!isLoaded || typeof window === "undefined") return null;
+    const google = window.google;
+    if (!google) return null;
+    return (color, selected) => ({
+      path: google.maps.SymbolPath.CIRCLE,
+      scale: selected ? 6 : 4,
+      fillColor: color,
+      fillOpacity: 0.95,
+      strokeColor: "#ffffff",
+      strokeWeight: 1.5
+    });
+  }, [isLoaded]);
+  const infoWindowOptions = useMemo(() => {
+    if (!isLoaded || typeof window === "undefined") return void 0;
+    const google = window.google;
+    if (!google) return void 0;
+    return {
+      headerDisabled: true,
+      pixelOffset: new google.maps.Size(0, -4),
+      maxWidth: 260
+    };
+  }, [isLoaded]);
+  const center = useMemo(() => {
+    if (vessel?.lastPosition) {
+      return { lat: vessel.lastPosition.lat, lng: vessel.lastPosition.lng };
+    }
+    return defaultCenter;
+  }, [vessel?.lastPosition]);
+  const tracePath = useMemo(() => {
+    if (!trace?.trace) return [];
+    return trace.trace.filter((p) => p.lat && p.lng && p.eventType === "POSITION_UPDATE").map((p) => ({ lat: p.lat, lng: p.lng }));
+  }, [trace?.trace]);
+  if (loadError) {
+    return /* @__PURE__ */ jsx("div", { className: "flex w-full", style: { height }, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center justify-center bg-muted rounded-lg border border-border", 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.map.loadError", "Failed to load map") })
+    ] }) }) });
+  }
+  if (!isLoaded || isVesselLoading && !vessel) {
+    return /* @__PURE__ */ jsx("div", { className: "flex w-full", style: { height }, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center justify-center bg-muted rounded-lg border border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: t("shipment_tracking.map.loading", "Loading map...") })
+    ] }) }) });
+  }
+  if (!vessel && !isVesselLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex w-full", style: { height }, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center justify-center bg-muted rounded-lg border border-border", 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: vesselError ? t("shipment_tracking.map.vesselError", "Failed to load vessel data") : t("shipment_tracking.map.vesselNotFound", "Vessel not found") })
+    ] }) }) });
+  }
+  const displayName = vesselName || vessel?.name || "Unknown Vessel";
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full", style: { height }, children: [
+    showInfoOverlay && /* @__PURE__ */ jsx("div", { className: "w-1/3 flex-shrink-0", children: /* @__PURE__ */ jsx(
+      VesselInfoCard,
+      {
+        vessel,
+        displayName,
+        isPlannedVessel,
+        containerStatus,
+        currentPort,
+        currentLeg,
+        t
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: `relative border border-border overflow-hidden ${showInfoOverlay ? "w-2/3 rounded-r-lg" : "w-full rounded-lg"}`, children: [
+      /* @__PURE__ */ jsxs(
+        GoogleMap,
+        {
+          mapContainerStyle: containerStyle,
+          center,
+          zoom: 8,
+          onLoad: onMapLoad,
+          onIdle: handleMapIdle,
+          options: mapOptions,
+          children: [
+            vessel?.lastPosition && /* @__PURE__ */ jsx(
+              MarkerF,
+              {
+                position: { lat: vessel.lastPosition.lat, lng: vessel.lastPosition.lng },
+                icon: shipIcon,
+                title: displayName,
+                zIndex: 2e3
+              }
+            ),
+            tracePath.length > 1 && /* @__PURE__ */ jsx(
+              PolylineF,
+              {
+                path: tracePath,
+                options: {
+                  strokeColor: "#8b5cf6",
+                  // Purple
+                  strokeOpacity: 0.6,
+                  strokeWeight: 2,
+                  geodesic: true
+                }
+              }
+            ),
+            enablePois && pois?.map((poi) => {
+              const color = POI_COLORS[poi.type] ?? "#64748b";
+              const isSelected = selectedPoi?.code === poi.code;
+              return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  CircleF,
+                  {
+                    center: poi.center,
+                    radius: poi.radiusMeters,
+                    options: {
+                      fillColor: color,
+                      fillOpacity: isSelected ? 0.2 : 0.08,
+                      strokeColor: color,
+                      strokeOpacity: isSelected ? 0.9 : 0.5,
+                      strokeWeight: 1,
+                      clickable: false,
+                      // Smaller circles on top so they aren't buried under large translucent fills
+                      zIndex: Math.round(1e6 / Math.max(poi.radiusMeters, 1))
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MarkerF,
+                  {
+                    position: poi.center,
+                    icon: poiDotIcon ? poiDotIcon(color, isSelected) : void 0,
+                    title: getPoiPrimaryName(poi, locale),
+                    onClick: () => setSelectedPoi(poi),
+                    zIndex: isSelected ? 1e3 : 500
+                  }
+                )
+              ] }, poi.code);
+            }),
+            selectedPoi && /* @__PURE__ */ jsx(
+              InfoWindowF,
+              {
+                position: selectedPoi.center,
+                onCloseClick: () => setSelectedPoi(null),
+                options: infoWindowOptions,
+                children: /* @__PURE__ */ jsxs("div", { className: "relative min-w-[150px] max-w-[240px] text-slate-800 pr-5", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setSelectedPoi(null),
+                      "aria-label": t("shipment_tracking.map.close", "Close"),
+                      className: "absolute top-0 right-0 flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:text-slate-700 hover:bg-slate-100 leading-none",
+                      children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "inline-block w-2.5 h-2.5 rounded-full flex-shrink-0",
+                        style: { backgroundColor: POI_COLORS[selectedPoi.type] ?? "#64748b" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium uppercase tracking-wide text-slate-500", children: getPoiTypeLabel(selectedPoi.type, t) })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold leading-tight text-slate-900", children: getPoiPrimaryName(selectedPoi, locale) }),
+                  selectedPoi.terminalName && selectedPoi.portName && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5", children: selectedPoi.portName }),
+                  (selectedPoi.city || selectedPoi.country) && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 mt-0.5", children: [selectedPoi.city, selectedPoi.country].filter(Boolean).join(", ") }),
+                  /* @__PURE__ */ jsx("div", { className: "text-[11px] font-mono text-slate-400 mt-1", children: selectedPoi.locode || selectedPoi.code })
+                ] })
+              }
+            )
+          ]
+        }
+      ),
+      (isTraceLoading || isDebouncing) && /* @__PURE__ */ jsx("div", { className: "absolute top-3 right-3 bg-card/95 backdrop-blur-sm rounded-lg shadow-sm px-2 py-1 border border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-3 h-3 border-2 border-blue-400 border-t-transparent rounded-full animate-spin" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("shipment_tracking.map.loadingTrace", "Loading...") })
+      ] }) })
+    ] })
+  ] });
+}
+var VesselTrackingMap_default = VesselTrackingMap;
+export {
+  VesselTrackingMap,
+  VesselTrackingMap_default as default
+};
+//# sourceMappingURL=VesselTrackingMap.js.map

package/dist/modules/shipment_tracking/components/VesselTrackingMap.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/shipment_tracking/components/VesselTrackingMap.tsx"],
+  "sourcesContent": ["'use client'\n\n/**\n * VesselTrackingMap - Interactive map showing vessel position and trace.\n *\n * Features:\n * - Real-time vessel position with heading-rotated ship icon\n * - Trace polyline limited to viewport bounds (debounced fetch)\n * - Vessel info overlay with status and destination\n * - Auto-refresh vessel position every 30 seconds\n */\n\nimport * as React from 'react'\nimport { useState, useCallback, useMemo, useEffect } from 'react'\nimport { GoogleMap, useJsApiLoader, MarkerF, PolylineF, CircleF, InfoWindowF } from '@react-google-maps/api'\nimport { Ship, Navigation, Anchor, MapPin, Clock, Building2, Ruler, Info, X } from 'lucide-react'\nimport { useVesselTracking } from '../hooks/useVesselTracking'\nimport { Spinner } from '@freighttech/ui/primitives/spinner'\nimport { useT, useLocale } from '@open-mercato/shared/lib/i18n/context'\nimport type { VesselTrackingStatus } from '../lib/current-vessel'\nimport type { VesselInfo, PoiInfo, PoiType } from '../lib/vessel-api'\n\n// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype GoogleMapInstance = any\n\nexport interface VesselTrackingMapProps {\n  /** Vessel IMO number */\n  vesselImo: string | null | undefined\n  /** Vessel name (fallback if API doesn't return name) */\n  vesselName?: string | null\n  /** Map height (CSS value, default: '250px') */\n  height?: string\n  /** Auto-refresh vessel position (default: true) */\n  autoRefresh?: boolean\n  /** Vessel refresh interval in ms (default: 30000) */\n  refreshInterval?: number\n  /** Show vessel info overlay (default: true) */\n  showInfoOverlay?: boolean\n  /** Show points of interest (ports/terminals/waypoints) as clickable circles (default: true) */\n  showPois?: boolean\n  /** Container tracking status - affects display messaging */\n  containerStatus?: VesselTrackingStatus\n  /** Port where container currently is (for at_port/not_departed status) */\n  currentPort?: string\n  /** Whether this is a planned vessel (not yet carrying the container) */\n  isPlannedVessel?: boolean\n  /** Current leg info (for in_transit status) */\n  currentLeg?: {\n    fromPort: string\n    toPort: string\n  }\n  /** Start date for trace (ISO 8601) - limits trace to current leg */\n  traceFrom?: string\n}\n\n// \u2500\u2500\u2500 Map Configuration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst containerStyle: React.CSSProperties = {\n  width: '100%',\n  height: '100%',\n}\n\n// Map options - typed as Record to avoid google namespace dependency at compile time\nconst mapOptions: Record<string, unknown> = {\n  zoomControl: true,\n  mapTypeControl: false,\n  scaleControl: false,\n  streetViewControl: false,\n  rotateControl: false,\n  fullscreenControl: false,\n  disableDefaultUI: false,\n  gestureHandling: 'cooperative',\n  styles: [\n    {\n      featureType: 'water',\n      elementType: 'geometry',\n      stylers: [{ color: '#bfdbfe' }], // Light blue for water\n    },\n    {\n      featureType: 'landscape',\n      elementType: 'geometry',\n      stylers: [{ color: '#f5f3ff' }], // Light purple for land\n    },\n    {\n      featureType: 'road',\n      elementType: 'geometry',\n      stylers: [{ color: '#e0e7ff' }], // Light indigo for roads\n    },\n  ],\n}\n\n// Default center: Baltic Sea\nconst defaultCenter = { lat: 54.5, lng: 18.5 }\n\n// Below this zoom the viewport is too large \u2014 too many POIs to be useful or performant,\n// so we skip fetching/drawing them entirely (keeps the map uncluttered when zoomed out).\nconst MIN_POI_ZOOM = 6\n\n// Subtle per-type colors for POI circles. Kept faint (low opacity) so they don't\n// compete with the vessel marker and trace.\nconst POI_COLORS: Record<PoiType, string> = {\n  PORT: '#2563eb', // blue\n  TERMINAL: '#059669', // emerald\n  WAYPOINT: '#d97706', // amber\n  PORT_GEOMETRIC_CENTER: '#64748b', // slate\n}\n\n// \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n/**\n * Resolve a POI's human-friendly primary name, following the same per-type fallback the\n * backend uses: terminals prefer the terminal name, ports prefer the city, waypoints use\n * the localized maritime region. Falls back to LOCODE / code when nothing else is set.\n */\nfunction getPoiPrimaryName(poi: PoiInfo, locale: string): string {\n  if (poi.type === 'TERMINAL') {\n    return poi.terminalName || poi.portName || poi.city || poi.locode || poi.code\n  }\n  if (poi.type === 'PORT' || poi.type === 'PORT_GEOMETRIC_CENTER') {\n    return poi.city || poi.portName || poi.locode || poi.code\n  }\n  // WAYPOINT \u2014 localized region name\n  const region = locale === 'pl'\n    ? (poi.regionNamePl || poi.regionNameEn)\n    : (poi.regionNameEn || poi.regionNamePl)\n  return region || poi.locode || poi.code\n}\n\nfunction getPoiTypeLabel(type: PoiType, t: ReturnType<typeof useT>): string {\n  switch (type) {\n    case 'PORT':\n      return t('shipment_tracking.map.poi.port', 'Port')\n    case 'TERMINAL':\n      return t('shipment_tracking.map.poi.terminal', 'Terminal')\n    case 'WAYPOINT':\n      return t('shipment_tracking.map.poi.waypoint', 'Waypoint')\n    case 'PORT_GEOMETRIC_CENTER':\n      return t('shipment_tracking.map.poi.portCenter', 'Port center')\n    default:\n      return type\n  }\n}\n\n\n/**\n * Calculate vessel dimensions from AIS dimension fields.\n * a = bow to reference, b = reference to stern \u2192 length = a + b\n * c = port to reference, d = reference to starboard \u2192 width = c + d\n */\nfunction calculateVesselDimensions(vessel: VesselInfo | null | undefined): {\n  length: number\n  width: number\n  hasValidDimensions: boolean\n} {\n  const dims = vessel?.dimensions\n  if (!dims) {\n    return { length: 0, width: 0, hasValidDimensions: false }\n  }\n  const length = (dims.a ?? 0) + (dims.b ?? 0)\n  const width = (dims.c ?? 0) + (dims.d ?? 0)\n  // Only consider valid if both length and width are positive\n  const hasValidDimensions = length > 0 && width > 0\n  return { length, width, hasValidDimensions }\n}\n\n/**\n * Format relative time for last update (e.g., \"2 min ago\", \"1 hour ago\").\n */\nfunction formatRelativeTime(dateString: string | null | undefined, t: ReturnType<typeof useT>): string {\n  if (!dateString) return ''\n  const date = new Date(dateString)\n  if (Number.isNaN(date.getTime())) return ''\n\n  const now = new Date()\n  const diffMs = now.getTime() - date.getTime()\n  const diffMinutes = Math.floor(diffMs / 60000)\n  const diffHours = Math.floor(diffMinutes / 60)\n  const diffDays = Math.floor(diffHours / 24)\n\n  if (diffMinutes < 1) {\n    return t('shipment_tracking.map.justNow', 'Just now')\n  }\n  if (diffMinutes < 60) {\n    return t('shipment_tracking.map.minutesAgo', '{{count}} min ago', { count: diffMinutes })\n  }\n  if (diffHours < 24) {\n    return t('shipment_tracking.map.hoursAgo', '{{count}}h ago', { count: diffHours })\n  }\n  return t('shipment_tracking.map.daysAgo', '{{count}}d ago', { count: diffDays })\n}\n\n// \u2500\u2500\u2500 Vessel Info Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface VesselInfoCardProps {\n  vessel: VesselInfo | null | undefined\n  displayName: string\n  isPlannedVessel: boolean\n  containerStatus?: VesselTrackingStatus\n  currentPort?: string\n  currentLeg?: { fromPort: string; toPort: string }\n  t: ReturnType<typeof useT>\n}\n\nfunction VesselInfoCard({\n  vessel,\n  displayName,\n  isPlannedVessel,\n  containerStatus,\n  currentPort,\n  currentLeg,\n  t,\n}: VesselInfoCardProps) {\n  const { length, width, hasValidDimensions } = calculateVesselDimensions(vessel)\n  const lastUpdate = formatRelativeTime(vessel?.updatedAt, t)\n\n  // Determine vessel status display\n  const getVesselStatusDisplay = () => {\n    if (vessel?.status === 'IN_PORT') {\n      return {\n        icon: <Anchor className=\"w-3 h-3 text-green-600 dark:text-green-400\" />,\n        text: vessel.currentPort?.name || t('shipment_tracking.map.inPort', 'In Port'),\n        color: 'text-green-600 dark:text-green-400',\n      }\n    }\n    if (vessel?.status === 'AT_SEA') {\n      const destination = vessel.lastDestinationPort?.name || vessel.lastDestination\n      return {\n        icon: <Navigation className=\"w-3 h-3 text-blue-600 dark:text-blue-400\" />,\n        text: destination\n          ? t('shipment_tracking.map.atSeaTo', 'At Sea -> {{destination}}', { destination })\n          : t('shipment_tracking.map.atSea', 'At Sea'),\n        color: 'text-blue-600 dark:text-blue-400',\n      }\n    }\n    return {\n      icon: <Info className=\"w-3 h-3 text-muted-foreground\" />,\n      text: t('shipment_tracking.map.unknown', 'Unknown'),\n      color: 'text-muted-foreground',\n    }\n  }\n\n  const statusDisplay = getVesselStatusDisplay()\n\n  return (\n    <div className=\"bg-card border border-border rounded-l-lg border-r-0 px-3 py-2.5 h-full overflow-y-auto\">\n      {/* Header: Vessel name + planned badge */}\n      <div className=\"flex items-center justify-between gap-2 mb-1\">\n        <div className=\"flex items-center gap-1.5 min-w-0\">\n          <Ship className=\"w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0\" />\n          <h2 className=\"font-semibold text-sm truncate text-foreground\">{displayName}</h2>\n        </div>\n        {isPlannedVessel && (\n          <span className=\"text-[10px] px-1.5 py-0.5 bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded flex-shrink-0\">\n            {t('shipment_tracking.map.planned', 'Planned')}\n          </span>\n        )}\n      </div>\n\n      {/* IMO number */}\n      {vessel?.imo && (\n        <div className=\"text-xs text-muted-foreground font-mono mb-2\">\n          IMO {vessel.imo}\n        </div>\n      )}\n\n      {/* Vessel details section */}\n      <div className=\"border-t border-border pt-2 space-y-1.5\">\n        {/* Status row */}\n        <div className=\"flex items-center gap-2 text-xs\">\n          <span className=\"text-muted-foreground/70 w-14 flex-shrink-0 truncate\" title={t('shipment_tracking.map.status', 'Status')}>\n            {t('shipment_tracking.map.status', 'Status')}\n          </span>\n          <div className={`flex items-center gap-1 ${statusDisplay.color} truncate`}>\n            {statusDisplay.icon}\n            <span className=\"truncate\">{statusDisplay.text}</span>\n          </div>\n        </div>\n\n        {/* Ship type row */}\n        {vessel?.shipType && (\n          <div className=\"flex items-center gap-2 text-xs\">\n            <span className=\"text-muted-foreground/70 w-14 flex-shrink-0 truncate\" title={t('shipment_tracking.map.type', 'Type')}>\n              {t('shipment_tracking.map.type', 'Type')}\n            </span>\n            <span className=\"text-foreground truncate\" title={vessel.shipType}>{vessel.shipType}</span>\n          </div>\n        )}\n\n        {/* Size row */}\n        {hasValidDimensions && (\n          <div className=\"flex items-center gap-2 text-xs\">\n            <span className=\"text-muted-foreground/70 w-14 flex-shrink-0 truncate\" title={t('shipment_tracking.map.size', 'Size')}>\n              {t('shipment_tracking.map.size', 'Size')}\n            </span>\n            <div className=\"flex items-center gap-1 text-foreground\">\n              <Ruler className=\"w-3 h-3 text-muted-foreground\" />\n              <span>{length}m x {width}m</span>\n            </div>\n          </div>\n        )}\n\n        {/* Operator row */}\n        {vessel?.operatorName && (\n          <div className=\"flex items-center gap-2 text-xs\">\n            <span className=\"text-muted-foreground/70 w-14 flex-shrink-0 truncate\" title={t('shipment_tracking.map.operator', 'Operator')}>\n              {t('shipment_tracking.map.operator', 'Operator')}\n            </span>\n            <div className=\"flex items-center gap-1 text-foreground truncate\" title={vessel.operatorName}>\n              <Building2 className=\"w-3 h-3 text-muted-foreground flex-shrink-0\" />\n              <span className=\"truncate\">{vessel.operatorName}</span>\n            </div>\n          </div>\n        )}\n\n        {/* Last update row */}\n        {lastUpdate && (\n          <div className=\"flex items-center gap-2 text-xs\">\n            <span className=\"text-muted-foreground/70 w-14 flex-shrink-0 truncate\" title={t('shipment_tracking.map.updated', 'Updated')}>\n              {t('shipment_tracking.map.updated', 'Updated')}\n            </span>\n            <div className=\"flex items-center gap-1 text-muted-foreground\">\n              <Clock className=\"w-3 h-3 text-muted-foreground\" />\n              <span>{lastUpdate}</span>\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Container status section (when container tracking is active) */}\n      {containerStatus && containerStatus !== 'delivered' && (\n        <div className=\"border-t border-border mt-2 pt-2\">\n          {containerStatus === 'in_transit' && currentLeg ? (\n            <div className=\"flex items-center gap-1 text-xs text-blue-600 dark:text-blue-400\">\n              <MapPin className=\"w-3 h-3\" />\n              <span className=\"truncate\">\n                {t('shipment_tracking.map.inTransitTo', 'In transit to {{destination}}', {\n                  destination: currentLeg.toPort,\n                })}\n              </span>\n            </div>\n          ) : containerStatus === 'at_port' && currentPort ? (\n            <div className=\"space-y-0.5\">\n              <div className=\"flex items-center gap-1 text-xs text-green-600 dark:text-green-400\">\n                <MapPin className=\"w-3 h-3\" />\n                <span className=\"truncate\">\n                  {t('shipment_tracking.map.containerAtPort', 'Container at {{port}}', {\n                    port: currentPort,\n                  })}\n                </span>\n              </div>\n              {isPlannedVessel && (\n                <div className=\"flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400\">\n                  <Clock className=\"w-3 h-3\" />\n                  <span className=\"truncate\">\n                    {t('shipment_tracking.map.awaitingVessel', 'Awaiting this vessel')}\n                  </span>\n                </div>\n              )}\n            </div>\n          ) : containerStatus === 'not_departed' ? (\n            <div className=\"flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400\">\n              <Clock className=\"w-3 h-3\" />\n              <span className=\"truncate\">\n                {t('shipment_tracking.map.awaitingDeparture', 'Awaiting departure')}\n              </span>\n            </div>\n          ) : null}\n        </div>\n      )}\n    </div>\n  )\n}\n\n// \u2500\u2500\u2500 Main Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nexport function VesselTrackingMap({\n  vesselImo,\n  vesselName,\n  height = '250px',\n  autoRefresh = true,\n  refreshInterval = 30_000,\n  showInfoOverlay = true,\n  showPois = true,\n  containerStatus,\n  currentPort,\n  isPlannedVessel = false,\n  currentLeg,\n  traceFrom,\n}: VesselTrackingMapProps) {\n  const t = useT()\n  const locale = useLocale()\n\n  // Load Google Maps API\n  const { isLoaded, loadError } = useJsApiLoader({\n    id: 'google-map-script',\n    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || '',\n  })\n\n  // Map instance reference\n  const [map, setMap] = useState<GoogleMapInstance | null>(null)\n  // Current zoom (gates POI fetching) and the POI selected for the info window\n  const [zoom, setZoom] = useState(8)\n  const [selectedPoi, setSelectedPoi] = useState<PoiInfo | null>(null)\n\n  // Only fetch POIs once zoomed in enough to keep the count and clutter manageable\n  const enablePois = showPois && zoom >= MIN_POI_ZOOM\n\n  // Drop the details popup when POIs are hidden (e.g. zoomed out) to avoid an orphan window\n  useEffect(() => {\n    if (!enablePois) setSelectedPoi(null)\n  }, [enablePois])\n\n  // Vessel tracking with debounced bounds\n  const {\n    vessel,\n    isVesselLoading,\n    vesselError,\n    trace,\n    isTraceLoading,\n    isDebouncing,\n    setBounds,\n    pois,\n  } = useVesselTracking(vesselImo, {\n    autoRefresh,\n    vesselRefreshInterval: refreshInterval,\n    boundsDebounceDelay: 500,\n    traceLimit: 5000,\n    traceFrom,\n    enablePois,\n  })\n\n  // Handle map load\n  const onMapLoad = useCallback((mapInstance: GoogleMapInstance) => {\n    setMap(mapInstance)\n  }, [])\n\n  // Handle map idle (fires after load and after pan/zoom completes)\n  const handleMapIdle = useCallback(() => {\n    if (!map) return\n    const bounds = map.getBounds()\n    if (!bounds) return\n\n    // Track zoom so POI fetching can be gated on it\n    const currentZoom = map.getZoom()\n    if (typeof currentZoom === 'number') setZoom(currentZoom)\n\n    const ne = bounds.getNorthEast()\n    const sw = bounds.getSouthWest()\n\n    // Add fixed margin (~30-35km) to fetch trace points outside visible viewport\n    // This ensures smooth curves at map edges instead of straight lines\n    const MARGIN_DEGREES = 0.3\n\n    setBounds({\n      north: Math.min(90, ne.lat() + MARGIN_DEGREES),\n      south: Math.max(-90, sw.lat() - MARGIN_DEGREES),\n      east: Math.min(180, ne.lng() + MARGIN_DEGREES),\n      west: Math.max(-180, sw.lng() - MARGIN_DEGREES),\n    })\n  }, [map, setBounds])\n\n  // Create container ship icon with heading rotation\n  // Ship silhouette viewed from above: pointed bow (top), wide stern (bottom), bridge at rear\n  const shipIcon = useMemo(() => {\n    if (!isLoaded || typeof window === 'undefined') return undefined\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const google = (window as any).google\n    if (!google) return undefined\n\n    const heading = vessel?.lastHeading ?? 0\n\n    // Container ship silhouette (top-down view, pointing up/north)\n    // Elongated shape with slightly pointed bow - typical container ship proportions\n    // Features: tapered bow (not too sharp), narrow hull, bridge at stern\n    const containerShipPath = `\n      M 12 2\n      L 8 7\n      L 8 30\n      Q 8 32, 10 32\n      L 10 34\n      L 14 34\n      L 14 32\n      Q 16 32, 16 30\n      L 16 7\n      L 12 2\n      Z\n      M 10 32\n      L 10 36\n      L 14 36\n      L 14 32\n      Z\n    `\n\n    return {\n      path: containerShipPath,\n      fillColor: '#0f172a',      // Dark slate hull\n      fillOpacity: 0.95,\n      strokeColor: '#ffffff',\n      strokeWeight: 1.5,\n      scale: 1.0,\n      rotation: heading,\n      anchor: new google.maps.Point(12, 18),  // Center point for rotation\n    }\n  }, [isLoaded, vessel?.lastHeading])\n\n  // Factory for the small clickable POI center dot. Markers live in a higher map pane than\n  // circles, so these stay above the translucent circles and are the precise click target \u2014\n  // the circles themselves are non-clickable, so overlapping circles never steal a click.\n  // Pixel-scaled (not meters), so the dot stays a consistent small size at any zoom.\n  const poiDotIcon = useMemo(() => {\n    if (!isLoaded || typeof window === 'undefined') return null\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const google = (window as any).google\n    if (!google) return null\n    return (color: string, selected: boolean) => ({\n      path: google.maps.SymbolPath.CIRCLE,\n      scale: selected ? 6 : 4,\n      fillColor: color,\n      fillOpacity: 0.95,\n      strokeColor: '#ffffff',\n      strokeWeight: 1.5,\n    })\n  }, [isLoaded])\n\n  // Options for the POI info window: drop Google's default header row (the empty top bar +\n  // default close button that crowds the content), nudge the bubble just above the center\n  // dot, and cap its width. We render our own close button instead.\n  const infoWindowOptions = useMemo(() => {\n    if (!isLoaded || typeof window === 'undefined') return undefined\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const google = (window as any).google\n    if (!google) return undefined\n    return {\n      headerDisabled: true,\n      pixelOffset: new google.maps.Size(0, -4),\n      maxWidth: 260,\n    }\n  }, [isLoaded])\n\n  // Center map on vessel position\n  const center = useMemo(() => {\n    if (vessel?.lastPosition) {\n      return { lat: vessel.lastPosition.lat, lng: vessel.lastPosition.lng }\n    }\n    return defaultCenter\n  }, [vessel?.lastPosition])\n\n  // Filter trace points to only position updates for cleaner polyline\n  const tracePath = useMemo(() => {\n    if (!trace?.trace) return []\n    return trace.trace\n      .filter((p) => p.lat && p.lng && p.eventType === 'POSITION_UPDATE')\n      .map((p) => ({ lat: p.lat, lng: p.lng }))\n  }, [trace?.trace])\n\n  // \u2500\u2500\u2500 Loading State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n  if (loadError) {\n    return (\n      <div className=\"flex w-full\" style={{ height }}>\n        <div className=\"w-full flex items-center justify-center bg-muted rounded-lg border border-border\">\n          <div className=\"text-center\">\n            <Ship className=\"w-8 h-8 text-muted-foreground mx-auto mb-2\" />\n            <p className=\"text-sm text-muted-foreground\">\n              {t('shipment_tracking.map.loadError', 'Failed to load map')}\n            </p>\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  if (!isLoaded || (isVesselLoading && !vessel)) {\n    return (\n      <div className=\"flex w-full\" style={{ height }}>\n        <div className=\"w-full flex items-center justify-center bg-muted rounded-lg border border-border\">\n          <div className=\"flex flex-col items-center gap-2\">\n            <Spinner className=\"h-6 w-6\" />\n            <span className=\"text-sm text-muted-foreground\">\n              {t('shipment_tracking.map.loading', 'Loading map...')}\n            </span>\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  // \u2500\u2500\u2500 No Vessel Data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n  if (!vessel && !isVesselLoading) {\n    return (\n      <div className=\"flex w-full\" style={{ height }}>\n        <div className=\"w-full flex items-center justify-center bg-muted rounded-lg border border-border\">\n          <div className=\"text-center\">\n            <Ship className=\"w-8 h-8 text-muted-foreground mx-auto mb-2\" />\n            <p className=\"text-sm text-muted-foreground\">\n              {vesselError\n                ? t('shipment_tracking.map.vesselError', 'Failed to load vessel data')\n                : t('shipment_tracking.map.vesselNotFound', 'Vessel not found')}\n            </p>\n          </div>\n        </div>\n      </div>\n    )\n  }\n\n  // \u2500\u2500\u2500 Map Render \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n  const displayName = vesselName || vessel?.name || 'Unknown Vessel'\n\n  return (\n    <div className=\"flex w-full\" style={{ height }}>\n      {/* Vessel Info Card - 1/3 width */}\n      {showInfoOverlay && (\n        <div className=\"w-1/3 flex-shrink-0\">\n          <VesselInfoCard\n            vessel={vessel}\n            displayName={displayName}\n            isPlannedVessel={isPlannedVessel}\n            containerStatus={containerStatus}\n            currentPort={currentPort}\n            currentLeg={currentLeg}\n            t={t}\n          />\n        </div>\n      )}\n\n      {/* Map - 2/3 width (or full if no info overlay) */}\n      <div className={`relative border border-border overflow-hidden ${showInfoOverlay ? 'w-2/3 rounded-r-lg' : 'w-full rounded-lg'}`}>\n        <GoogleMap\n          mapContainerStyle={containerStyle}\n          center={center}\n          zoom={8}\n          onLoad={onMapLoad}\n          onIdle={handleMapIdle}\n          options={mapOptions}\n        >\n          {/* Vessel Marker */}\n          {vessel?.lastPosition && (\n            <MarkerF\n              position={{ lat: vessel.lastPosition.lat, lng: vessel.lastPosition.lng }}\n              icon={shipIcon}\n              title={displayName}\n              zIndex={2000}\n            />\n          )}\n\n          {/* Trace Polyline */}\n          {tracePath.length > 1 && (\n            <PolylineF\n              path={tracePath}\n              options={{\n                strokeColor: '#8b5cf6', // Purple\n                strokeOpacity: 0.6,\n                strokeWeight: 2,\n                geodesic: true,\n              }}\n            />\n          )}\n\n          {/* POIs \u2014 faint, non-intrusive circles (visual only) plus a small clickable\n              center dot. Making the circles non-clickable means a large translucent circle\n              can never swallow clicks for a small port/terminal sitting inside it; the dot\n              is always the precise, overlap-resistant click target. */}\n          {enablePois && pois?.map((poi) => {\n            const color = POI_COLORS[poi.type] ?? '#64748b'\n            const isSelected = selectedPoi?.code === poi.code\n            return (\n              <React.Fragment key={poi.code}>\n                <CircleF\n                  center={poi.center}\n                  radius={poi.radiusMeters}\n                  options={{\n                    fillColor: color,\n                    fillOpacity: isSelected ? 0.2 : 0.08,\n                    strokeColor: color,\n                    strokeOpacity: isSelected ? 0.9 : 0.5,\n                    strokeWeight: 1,\n                    clickable: false,\n                    // Smaller circles on top so they aren't buried under large translucent fills\n                    zIndex: Math.round(1_000_000 / Math.max(poi.radiusMeters, 1)),\n                  }}\n                />\n                <MarkerF\n                  position={poi.center}\n                  icon={poiDotIcon ? poiDotIcon(color, isSelected) : undefined}\n                  title={getPoiPrimaryName(poi, locale)}\n                  onClick={() => setSelectedPoi(poi)}\n                  zIndex={isSelected ? 1000 : 500}\n                />\n              </React.Fragment>\n            )\n          })}\n\n          {/* POI details popup. Position-anchored: rendering InfoWindowF inside MarkerF does\n              NOT inject the marker anchor in this version of @react-google-maps/api, which\n              throws \"must provide either an anchor or a position\" on open. The pixelOffset in\n              infoWindowOptions lifts the bubble just above the center dot. */}\n          {selectedPoi && (\n            <InfoWindowF\n              position={selectedPoi.center}\n              onCloseClick={() => setSelectedPoi(null)}\n              options={infoWindowOptions}\n            >\n              <div className=\"relative min-w-[150px] max-w-[240px] text-slate-800 pr-5\">\n                {/* Custom close button (Google's default header is disabled) */}\n                <button\n                  type=\"button\"\n                  onClick={() => setSelectedPoi(null)}\n                  aria-label={t('shipment_tracking.map.close', 'Close')}\n                  className=\"absolute top-0 right-0 flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:text-slate-700 hover:bg-slate-100 leading-none\"\n                >\n                  <X className=\"h-3.5 w-3.5\" />\n                </button>\n                <div className=\"flex items-center gap-1.5 mb-1\">\n                  <span\n                    className=\"inline-block w-2.5 h-2.5 rounded-full flex-shrink-0\"\n                    style={{ backgroundColor: POI_COLORS[selectedPoi.type] ?? '#64748b' }}\n                  />\n                  <span className=\"text-[11px] font-medium uppercase tracking-wide text-slate-500\">\n                    {getPoiTypeLabel(selectedPoi.type, t)}\n                  </span>\n                </div>\n                <div className=\"text-sm font-semibold leading-tight text-slate-900\">\n                  {getPoiPrimaryName(selectedPoi, locale)}\n                </div>\n                {selectedPoi.terminalName && selectedPoi.portName && (\n                  <div className=\"text-xs text-slate-500 mt-0.5\">{selectedPoi.portName}</div>\n                )}\n                {(selectedPoi.city || selectedPoi.country) && (\n                  <div className=\"text-xs text-slate-500 mt-0.5\">\n                    {[selectedPoi.city, selectedPoi.country].filter(Boolean).join(', ')}\n                  </div>\n                )}\n                <div className=\"text-[11px] font-mono text-slate-400 mt-1\">\n                  {selectedPoi.locode || selectedPoi.code}\n                </div>\n              </div>\n            </InfoWindowF>\n          )}\n        </GoogleMap>\n\n        {/* Loading Indicator for Trace */}\n        {(isTraceLoading || isDebouncing) && (\n          <div className=\"absolute top-3 right-3 bg-card/95 backdrop-blur-sm rounded-lg shadow-sm px-2 py-1 border border-border\">\n            <div className=\"flex items-center gap-1\">\n              <div className=\"w-3 h-3 border-2 border-blue-400 border-t-transparent rounded-full animate-spin\" />\n              <span className=\"text-xs text-muted-foreground\">\n                {t('shipment_tracking.map.loadingTrace', 'Loading...')}\n              </span>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default VesselTrackingMap\n"],
+  "mappings": "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",
+  "names": []
+}