{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "shipment-tracking-timeline", "title": "Shipment Tracking Timeline", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/shipment-tracking-timeline/ShipmentTrackingTimeline.tsx", "content": "'use client'\n\nimport React, { useState } from 'react'\nimport {\n Anchor,\n ArrowRight,\n Box,\n CalendarClock,\n Check,\n Compass,\n Copy,\n Download,\n FileCheck2,\n FileText,\n MapPin,\n Navigation,\n Radio,\n Search,\n Share2,\n ShieldCheck,\n Ship,\n Thermometer,\n Timer,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nexport type MilestoneStatus = 'completed' | 'current' | 'upcoming'\nexport type MilestoneFilter = 'all' | 'completed' | 'upcoming'\n\nexport interface Milestone {\n id: string\n stepNumber: number\n title: string\n location: string\n facility: string\n country: string\n date: string\n status: MilestoneStatus\n description: string\n coordinates?: string\n telemetry?: {\n speed?: string\n heading?: string\n depth?: string\n }\n}\n\nexport interface ShipmentTrackingTimelineProps {\n initialContainerId?: string\n initialFilter?: MilestoneFilter\n className?: string\n}\n\nconst defaultMilestones: Milestone[] = [\n {\n id: 'ms-1',\n stepNumber: 1,\n title: 'Cargo Loaded at Factory',\n location: 'Ningbo Depot',\n facility: 'Apex Logistics Hub South',\n country: 'CN',\n date: 'Aug 06, 2026 · 08:30 CST',\n status: 'completed',\n description: 'Container stuffed, Reefer unit pre-cooled to -18°C, bolt seal #SL-94021 applied.',\n },\n {\n id: 'ms-2',\n stepNumber: 2,\n title: 'Export Customs Cleared',\n location: 'Shanghai Port',\n facility: 'Yangshan Customs Gate 4',\n country: 'CN',\n date: 'Aug 08, 2026 · 14:15 CST',\n status: 'completed',\n description: 'Export declaration approved. Customs electronic release note #CN-SH-992 issued.',\n },\n {\n id: 'ms-3',\n stepNumber: 3,\n title: 'Vessel Departed Port',\n location: 'Shanghai Port (CNSHA)',\n facility: 'Yangshan Deepwater Terminal Berth 3',\n country: 'CN',\n date: 'Aug 10, 2026 · 22:00 CST',\n status: 'completed',\n description: 'Loaded onto vessel Ever Given (Voyage V.042W, Bay 42, Tier 04). Ocean transit started.',\n },\n {\n id: 'ms-4',\n stepNumber: 4,\n title: 'Current Position · Sea Transit',\n location: 'Red Sea International Waters',\n facility: 'Maritime Convoy Corridor 2',\n country: 'INT',\n date: 'Aug 21, 2026 · 11:20 UTC (Live)',\n status: 'current',\n description: 'Cruising in transit towards Suez Canal. High-frequency AIS beacon reporting healthy telemetry.',\n coordinates: \"24°18'N, 37°42'E\",\n telemetry: {\n speed: '18.4 knots',\n heading: '315° NW',\n depth: '840 m',\n },\n },\n {\n id: 'ms-5',\n stepNumber: 5,\n title: 'Suez Canal Transit',\n location: 'Port Said / Suez (EGPSD)',\n facility: 'Suez Canal Authority Convoy Hub',\n country: 'EG',\n date: 'Est. Aug 25, 2026 · 06:00 EEST',\n status: 'upcoming',\n description: 'Scheduled northbound convoy passage slot #04 with authorized maritime pilotage.',\n },\n {\n id: 'ms-6',\n stepNumber: 6,\n title: 'Port of Discharge Arrival',\n location: 'Rotterdam (NLRTM)',\n facility: 'APM Terminals Maasvlakte II',\n country: 'NL',\n date: 'Est. Sep 04, 2026 · 14:00 CEST',\n status: 'upcoming',\n description: 'Vessel berthing & container unlashing operations. Import customs clearance processing.',\n },\n {\n id: 'ms-7',\n stepNumber: 7,\n title: 'Final Destination Delivery',\n location: 'Duisburg Distribution Center',\n facility: 'EuroHub Logistics Terminal',\n country: 'DE',\n date: 'Est. Sep 07, 2026 · 09:00 CEST',\n status: 'upcoming',\n description: 'Intermodal electric rail transfer from Rotterdam to Duisburg bonded warehouse.',\n },\n]\n\nexport function ShipmentTrackingTimeline({\n initialContainerId = 'MSKU-9482014',\n initialFilter = 'all',\n className,\n}: ShipmentTrackingTimelineProps) {\n const [searchQuery, setSearchQuery] = useState(initialContainerId)\n const [activeFilter, setActiveFilter] = useState(initialFilter)\n const [copiedContainerId, setCopiedContainerId] = useState(false)\n const [copiedBLLink, setCopiedBLLink] = useState(false)\n\n const filteredMilestones = defaultMilestones.filter((m) => {\n if (activeFilter === 'completed') return m.status === 'completed'\n if (activeFilter === 'upcoming') return m.status === 'upcoming'\n return true\n })\n\n const copyContainerId = () => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText('MSKU-9482014')\n setCopiedContainerId(true)\n setTimeout(() => setCopiedContainerId(false), 2000)\n }\n }\n\n const copyTrackingLink = () => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText('https://uipkge.dev/track/MSKU-9482014')\n setCopiedBLLink(true)\n setTimeout(() => setCopiedBLLink(false), 2000)\n }\n }\n\n return (\n
\n {/* Header Card */}\n \n \n
\n {/* Left: ID, Vessel & Route */}\n
\n
\n
\n \n #MSKU-9482014\n \n \n {copiedContainerId ? (\n \n ) : (\n \n )}\n Copy container number\n \n
\n\n \n \n \n \n \n In Transit · On Schedule\n \n\n \n \n Ocean Freight · FCL 40ft High Cube\n \n
\n\n {/* Route and Vessel meta */}\n
\n
\n CNSHA\n Shanghai\n \n NLRTM\n Rotterdam\n
\n \n
\n \n Vessel:\n Ever Given / V.042W\n (IMO 9811000)\n
\n \n
\n Carrier:\n Maersk Line\n
\n
\n
\n\n {/* Right: Container search & Quick Actions */}\n
\n
\n \n setSearchQuery(e.target.value)}\n placeholder=\"Track Container / B/L...\"\n className=\"h-9 pl-8 font-mono text-xs focus-visible:ring-2\"\n />\n
\n
\n \n \n
\n
\n
\n \n \n\n {/* 4 Summary Metric Cards */}\n
\n {/* ETA Card */}\n \n \n
\n
\n

\n Estimated Arrival (ETA)\n

\n

Sep 04, 2026

\n

14:00 CEST · Berth 4A confirmed

\n
\n
\n \n
\n
\n
\n Remaining\n 14 days left\n
\n \n \n\n {/* Days in Transit Card */}\n \n \n
\n
\n

Days in Transit

\n

\n 18 of 28 days\n

\n

64% of voyage completed

\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n Departed: Aug 10\n ETA: Sep 04\n
\n
\n \n \n\n {/* Current Coordinates Card */}\n \n \n
\n
\n

\n Current Vessel Position\n

\n

\n 24°18'N, 37°42'E\n

\n

\n Red Sea · Speed 18.4 kn\n

\n
\n
\n \n
\n
\n
\n Heading\n 315° NW (Convoy)\n
\n \n \n\n {/* Next Milestone Port Card */}\n \n \n
\n
\n

Next Milestone Port

\n

Suez Canal

\n

Aug 25 · Northbound Convoy

\n
\n
\n \n
\n
\n
\n Pilotage Slot\n Slot #04 (06:00 EEST)\n
\n \n \n
\n\n {/* Multimodal Journey Milestones Stepper Card */}\n \n \n
\n
\n \n Multimodal Journey Milestones\n \n 7 Milestones\n \n
\n \n End-to-end container tracking from factory loading in Ningbo to warehouse in Duisburg.\n \n
\n\n {/* Filter Buttons */}\n
\n setActiveFilter('all')}\n >\n All (7)\n \n setActiveFilter('completed')}\n >\n Completed (3)\n \n setActiveFilter('upcoming')}\n >\n Upcoming (3)\n \n
\n \n\n \n {/* Live AIS Telemetry Beacon Banner */}\n
\n
\n
\n
\n \n \n \n \n \n
\n
\n
\n

Active AIS Sea Telemetry

\n \n Live Transponder\n \n
\n

\n Vessel Ever Given navigating Red Sea corridor · Last ping:{' '}\n 12s ago\n

\n
\n
\n\n
\n
\n Speed: \n 18.4 knots\n
\n
\n Heading: \n 315° NW\n
\n
\n Coords: \n 24°18'N, 37°42'E\n
\n
\n
\n
\n\n {/* Connected Timeline Stepper */}\n
\n {/* Vertical Track Line */}\n
\n\n
\n {filteredMilestones.map((milestone) => (\n
\n {/* Step Node Circle */}\n
\n {/* Completed Icon */}\n {milestone.status === 'completed' ? (\n
\n \n
\n ) : milestone.status === 'current' ? (\n /* Current Active Pulsing Node */\n
\n \n \n \n \n
\n ) : (\n /* Upcoming Node */\n
\n {milestone.stepNumber}\n
\n )}\n
\n\n {/* Milestone Content Card */}\n \n
\n
\n
\n {milestone.title}\n\n {milestone.status === 'completed' && (\n \n Completed\n \n )}\n {milestone.status === 'current' && (\n \n Active Now\n \n )}\n {milestone.status === 'upcoming' && (\n \n Upcoming\n \n )}\n\n ({milestone.facility})\n
\n\n

{milestone.description}

\n
\n\n
\n \n {milestone.date}\n \n
\n \n {milestone.location}\n
\n
\n
\n\n {/* Telemetry sub-box for current milestone */}\n {milestone.telemetry && (\n
\n
\n Speed: \n \n {milestone.telemetry.speed}\n \n
\n
\n Heading: \n {milestone.telemetry.heading}\n
\n
\n Water Depth: \n \n {milestone.telemetry.depth}\n \n
\n
\n AIS Status: \n Broadcasting\n
\n
\n )}\n
\n
\n ))}\n
\n
\n \n \n\n {/* 2-Column Grid: Specifications & Documentation Manifest */}\n
\n {/* Container Specifications & Cold Chain Card */}\n
\n \n \n
\n
\n \n Container & Cold Chain Specifications\n
\n \n ISO 6346 Verified\n \n
\n \n Physical parameters, high-security seal integrity, and live Reefer temperature control log.\n \n \n \n {/* Key Metric Chips */}\n
\n
\n Gross Weight\n

24,500 kg

\n Max: 30,480 kg\n
\n
\n Bolt Seal #\n

SL-94021

\n ISO 17712 High Sec\n
\n
\n Temperature\n

-18.0°C

\n Actual: -18.2°C\n
\n
\n Humidity & Vent\n

85% RH

\n Vent: Closed (0 cbm)\n
\n
\n\n \n\n {/* Detailed Specifications Table / List */}\n
\n
\n
\n Equipment Size:\n 40ft High Cube Reefer (40HR)\n
\n
\n Tare Weight:\n 3,300 kg\n
\n
\n Net Cargo Weight:\n 21,200 kg\n
\n
\n Cargo Volume:\n 67.3 CBM\n
\n
\n\n
\n
\n Reefer Unit:\n Carrier Transicold PrimeLINE\n
\n
\n Power Source:\n Vessel 440V 3-Phase Plug\n
\n
\n Defrost Cycle:\n Auto-Defrost (Every 12h)\n
\n
\n Cold-Chain Compliance:\n HACCP / GDP Certified\n
\n
\n
\n\n {/* Cold Chain Live Sensor Gauge Banner */}\n
\n
\n \n Continuous Temperature Telemetry:\n 24-hour variance ±0.3°C (Nominal)\n
\n
\n \n Zero Excursions\n
\n
\n \n \n
\n\n {/* Commercial Documents & Shipping Manifest Card */}\n
\n \n \n
\n
\n \n Shipping Documentation\n
\n \n Customs Released\n \n
\n \n Bill of Lading, invoice identifiers, and trade compliance references.\n \n \n \n
\n
\n Commercial Invoice #:\n CI-2026-849\n
\n
\n Master Bill of Lading (MBL):\n MAEU-98421094\n
\n
\n Booking Reference:\n BKG-7712093\n
\n
\n Incoterms 2020:\n FOB Shanghai Port\n
\n
\n\n \n\n {/* Parties: Shipper and Consignee */}\n
\n
\n

Shipper / Exporter

\n

Ningbo Apex International Marine Trade Co.

\n

Beilun District, Ningbo, Zhejiang, China

\n
\n
\n

Consignee / Importer

\n

EuroHub Logistics & Cold Storage GmbH

\n

Logport I, 47226 Duisburg, Germany

\n
\n
\n\n
\n \n \n Download Bill of Lading\n \n \n \n Customs Pack (PDF)\n \n
\n \n \n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/ShipmentTrackingTimeline.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/separator.json" ], "description": "Flexport & Maersk style container freight tracking timeline with live AIS vessel telemetry, voyage ETA milestones, Reefer cold-chain specifications, and multimodal transport logistics.", "categories": [ "logistics", "dashboard", "app" ] }