{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "bill-of-lading-viewer", "title": "Bill Of Lading Viewer", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/bill-of-lading-viewer/BillOfLadingViewer.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { useState } from 'react'\nimport {\n AlertCircle,\n Anchor,\n Building2,\n Check,\n CheckCircle2,\n Copy,\n Download,\n FileText,\n Mail,\n MapPin,\n Phone,\n Printer,\n ShieldCheck,\n Ship,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface ContainerCargoItem {\n id: string\n containerNo: string\n sealNo: string\n containerType: string\n packagesCount: number\n packagesKind: string\n description: string\n hsCode: string\n grossWeightKg: number\n grossWeightLbs: number\n volumeCbm: number\n hazardClass?: string\n temperature?: string\n}\n\nexport interface ComplianceGate {\n id: string\n name: string\n status: 'passed' | 'warning' | 'pending'\n authority: string\n reference: string\n details: string\n}\n\nexport interface BillOfLadingViewerProps {\n className?: string\n documentTitle?: string\n bolNumber?: string\n carrierName?: string\n scacCode?: string\n bookingReference?: string\n exportReference?: string\n issueDate?: string\n placeOfIssue?: string\n shipperName?: string\n shipperAddress?: string\n shipperContact?: string\n shipperEmail?: string\n shipperEori?: string\n consigneeName?: string\n consigneeAddress?: string\n consigneeContact?: string\n consigneeEmail?: string\n consigneeEori?: string\n notifyPartyName?: string\n notifyPartyAddress?: string\n notifyPartyContact?: string\n notifyPartyEmail?: string\n notifyPartyAttention?: string\n preCarriageBy?: string\n placeOfReceipt?: string\n vesselVoyage?: string\n vesselImo?: string\n vesselFlag?: string\n portOfLoading?: string\n portOfDischarge?: string\n placeOfDelivery?: string\n finalDestination?: string\n freightTerms?: string\n freightPayableAt?: string\n declaredValue?: string\n insuranceCert?: string\n incoterms?: string\n letterOfCredit?: string\n blockchainTxHash?: string\n blockchainBlock?: string\n blockchainNetwork?: string\n onDownloadPdf?: () => void\n onVerifyBlockchain?: () => void\n onPrint?: () => void\n}\n\nconst CARGO_ITEMS: ContainerCargoItem[] = [\n {\n id: 'cargo-1',\n containerNo: 'MSKU-948201-4',\n sealNo: 'SL-94021',\n containerType: \"40' High Cube (40' HC)\",\n packagesCount: 24,\n packagesKind: 'Pallets / 480 Cartons',\n description: 'Consumer Electronics: Pro Audio Studio Headphones, Dynamic Transducers & Wireless DAC Amplifiers',\n hsCode: '8518.30.00',\n grossWeightKg: 4850.0,\n grossWeightLbs: 10692.42,\n volumeCbm: 32.4,\n hazardClass: 'UN3481 Class 9 (Lithium Ion Batteries contained in equipment)',\n temperature: 'Ambient (Dry Van)',\n },\n {\n id: 'cargo-2',\n containerNo: 'MSKU-819034-2',\n sealNo: 'SL-94022',\n containerType: \"40' High Cube (40' HC)\",\n packagesCount: 16,\n packagesKind: 'Pallets / 320 Cartons',\n description: 'Audio Accessories: Braided MMCX Oxygen-Free Cables, Velour Replacement Earpads & Hard Travel Cases',\n hsCode: '8518.90.80',\n grossWeightKg: 2320.0,\n grossWeightLbs: 5114.72,\n volumeCbm: 18.6,\n hazardClass: 'Non-Hazardous / Standard Cargo',\n temperature: 'Ambient (Dry Van)',\n },\n]\n\nconst COMPLIANCE_GATES: ComplianceGate[] = [\n {\n id: 'gate-1',\n name: 'EU EORI & VAT Identity Verification',\n status: 'passed',\n authority: 'European Customs Agency (VIES / EOS)',\n reference: 'NL864219034',\n details: 'Consignee EORI validated against EU Economic Operators Registry with valid Dutch VAT matching.',\n },\n {\n id: 'gate-2',\n name: 'ICS2 Entry Summary Declaration (ENS)',\n status: 'passed',\n authority: 'EU Customs Import Control System 2',\n reference: 'MRN: 26NL948201083921A',\n details: 'Pre-arrival cargo security manifest filed 24 hours prior to loading in Shanghai (Approved).',\n },\n {\n id: 'gate-3',\n name: 'HS Tariff Classification & Duty Schedule',\n status: 'passed',\n authority: 'TARIC European Customs Database',\n reference: 'HS 8518.30.00 / 8518.90.80',\n details: 'Eligible for 0.0% EU base tariff rate + standard 21.0% Netherlands Import VAT under Article 23.',\n },\n {\n id: 'gate-4',\n name: 'ISO 17712 High-Security Container Seals',\n status: 'passed',\n authority: 'International Maritime Organization (IMO)',\n reference: 'SL-94021 / SL-94022',\n details: 'High-security mechanical bolt seals verified intact at origin terminal container gate-in.',\n },\n {\n id: 'gate-5',\n name: 'IMDG Dangerous Goods UN3481 Compliance',\n status: 'passed',\n authority: 'International Maritime Dangerous Goods (IMDG)',\n reference: 'UN3481 PI966 Sec. II',\n details: 'Lithium-ion cells packed with equipment certified under special provision 188 for under-deck stowage.',\n },\n {\n id: 'gate-6',\n name: 'Global Sanctions & Denied Party Screening',\n status: 'passed',\n authority: 'UN, OFAC & EU Consolidated Sanction Lists',\n reference: 'SCR-2026-99104',\n details: '0 matches identified across all parties (Shipper, Consignee, Notify Party, Carrier vessel).',\n },\n]\n\nexport function BillOfLadingViewer({\n className,\n documentTitle = 'Straight Bill of Lading (Original)',\n bolNumber = '#BOL-2026-894210',\n carrierName = 'Maersk Line A/S',\n scacCode = 'MAEU',\n bookingReference = 'BKG-771920-EU',\n exportReference = 'EXP-2026-0812',\n issueDate = 'August 21, 2026',\n placeOfIssue = 'Shanghai, China',\n shipperName = 'Shenzhen AudioTech Precision Ltd.',\n shipperAddress = 'Building 4, High-Tech Industrial Park, Nanshan District, Shenzhen, Guangdong 518057, China',\n shipperContact = '+86 755 8892 1044',\n shipperEmail = 'export@audiotech-cn.com',\n shipperEori = 'CN-91440300MA5EXP01',\n consigneeName = 'SonicAura Europe B.V.',\n consigneeAddress = 'Keizersgracht 421, 1016 EK Amsterdam, Netherlands',\n consigneeContact = '+31 20 894 3300',\n consigneeEmail = 'import@sonicaura.eu',\n consigneeEori = 'NL864219034 / VAT: NL864219034B01',\n notifyPartyName = 'Rotterdam Intermodal Logistics GmbH',\n notifyPartyAddress = 'Willemskade 18, 3016 DK Rotterdam, Netherlands',\n notifyPartyContact = '+31 10 400 9820',\n notifyPartyEmail = 'clearance@rotterdam-intermodal.com',\n notifyPartyAttention = 'Customs Brokerage Dept. / Desk 4B',\n preCarriageBy = 'Feeder Barge \"Yangtze River 12\"',\n placeOfReceipt = 'Shenzhen Inland Depot, China (CNSZX)',\n vesselVoyage = 'Ever Given / V.042W',\n vesselImo = 'IMO 9811000',\n vesselFlag = 'Panama (PA)',\n portOfLoading = 'Shanghai Port, China (CNSHA)',\n portOfDischarge = 'Rotterdam Port, Netherlands (NLRTM)',\n placeOfDelivery = 'Duisburg Intermodal Terminal, Germany (DEDUI)',\n finalDestination = 'Duisburg Central DC #4 (DEDUI)',\n freightTerms = 'Prepaid',\n freightPayableAt = 'Shanghai, China',\n declaredValue = '$142,500.00 USD',\n insuranceCert = '#INS-9421-MAR',\n incoterms = 'CIF Rotterdam Port (Incoterms 2020)',\n letterOfCredit = 'LC-BNP-2026-99410-EU (BNP Paribas)',\n blockchainTxHash = '0x71e4d3a8904f84c8a5142d131fba827b5e4c91a2',\n blockchainBlock = '59,182,904',\n blockchainNetwork = 'Polygon Mainnet (Decentralized Cargo Registry)',\n onDownloadPdf,\n onVerifyBlockchain,\n onPrint,\n}: BillOfLadingViewerProps) {\n const [activeTab, setActiveTab] = useState<'document' | 'compliance' | 'edi'>('document')\n const [copiedBol, setCopiedBol] = useState(false)\n const [copiedEdi, setCopiedEdi] = useState(false)\n const [showVerifyDetails, setShowVerifyDetails] = useState(false)\n\n const totalPackagesCount = CARGO_ITEMS.reduce((acc, item) => acc + item.packagesCount, 0)\n const totalGrossWeightKg = CARGO_ITEMS.reduce((acc, item) => acc + item.grossWeightKg, 0)\n const totalGrossWeightLbs = CARGO_ITEMS.reduce((acc, item) => acc + item.grossWeightLbs, 0)\n const totalVolumeCbm = CARGO_ITEMS.reduce((acc, item) => acc + item.volumeCbm, 0)\n\n const generateEdiText = () => {\n return `UNB+UNOA:2+${scacCode}:ZZ+SONICAURA:ZZ+260821:1400+0000001'\nUNH+1+IFTMIN:D:01B:UN:EAN004'\nBGM+705+${bolNumber.replace('#', '')}+9'\nDTM+137:20260821:102'\nNAD+CZ+${shipperEori}::9++${shipperName}+${shipperAddress}+SHENZHEN++518057+CN'\nNAD+CN+NL864219034::9++${consigneeName}+${consigneeAddress}+AMSTERDAM++1016EK+NL'\nNAD+NI+++${notifyPartyName}+${notifyPartyAddress}+ROTTERDAM++3016DK+NL'\nTDT+20+V.042W+1+13+MAEU:172:20+++${vesselImo}::11:${vesselVoyage}'\nLOC+9+CNSHA:139:6+SHANGHAI PORT'\nLOC+11+NLRTM:139:6+ROTTERDAM PORT'\nLOC+7+DEDUI:139:6+DUISBURG TERMINAL'\nEQD+CN+MSKU9482014+45G1:102:5++2+5'\nSEL+SL94021+SH'\nGID+1+24:BX+PRO AUDIO HEADPHONES:85183000'\nMEA+WT+G+KGM:4850.00'\nMEA+VOL+AAW+MTQ:32.40'\nMOA+39:142500:USD'\nUNT+18+1'\nUNZ+1+0000001'`\n }\n\n const handleCopyBol = () => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(bolNumber)\n setCopiedBol(true)\n setTimeout(() => setCopiedBol(false), 2000)\n }\n }\n\n const handleCopyEdi = () => {\n const ediContent = generateEdiText()\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(ediContent)\n setCopiedEdi(true)\n setTimeout(() => setCopiedEdi(false), 2000)\n }\n }\n\n const handlePrint = () => {\n onPrint?.()\n if (typeof window !== 'undefined') {\n window.print()\n }\n }\n\n const handleDownloadPdf = () => {\n onDownloadPdf?.()\n handlePrint()\n }\n\n const toggleBlockchainDetails = () => {\n setShowVerifyDetails((prev) => !prev)\n onVerifyBlockchain?.()\n }\n\n return (\n
\n {/* Top Action Bar / Document Control Header */}\n
\n
\n
\n \n {scacCode} • Maritime Ocean BOL\n \n \n \n Verify Blockchain Authenticity\n \n \n
\n
\n

{documentTitle}

\n {bolNumber}\n \n {copiedBol ? : }\n Copy BOL number\n \n
\n

\n Carrier: {carrierName} • Issued: {issueDate}{' '}\n in {placeOfIssue}\n

\n
\n\n {/* Action Buttons & Tab Switcher */}\n
\n
\n setActiveTab('document')}\n >\n Document View\n \n setActiveTab('compliance')}\n >\n Customs & Compliance\n \n 6\n \n \n setActiveTab('edi')}\n >\n Raw EDI / JSON\n \n
\n\n \n\n \n
\n
\n\n {/* Blockchain Cryptographic Proof Drawer / Card */}\n {showVerifyDetails && (\n
\n
\n
\n
\n \n
\n
\n
\n \n Cryptographic Bill of Lading Authenticity Verified\n \n \n Immutable Ledger Record\n \n
\n

\n Document state verified on {blockchainNetwork}. Digital hash matches original carrier signature at\n origin.\n

\n
\n
\n\n
\n \n Block #{blockchainBlock}\n \n \n Tx: {blockchainTxHash}\n \n
\n
\n
\n )}\n\n {/* TAB 1: OFFICIAL BILL OF LADING PAPER DOCUMENT */}\n {activeTab === 'document' && (\n
\n {/* Formal Document Header */}\n
\n
\n {/* Carrier Branding & Document Classification */}\n
\n
\n
\n \n
\n
\n

{carrierName}

\n

\n SCAC: {scacCode} • Standard Ocean Carrier Bill of Lading\n

\n
\n
\n

\n Issued in accordance with the International Convention for the Unification of Certain Rules of Law\n relating to Bills of Lading (Hague-Visby Rules) and UN Multimodal Transport Guidelines.\n

\n
\n\n {/* Document References & Status Stamp */}\n
\n
\n Bill of Lading No.\n {bolNumber}\n
\n
\n Booking Reference:\n {bookingReference}\n
\n
\n Export Reference:\n {exportReference}\n
\n \n
\n Document Status:\n \n Negotiable / Original\n \n
\n
\n
\n
\n\n {/* Section 1: Parties Grid (Shipper, Consignee, Notify Party) */}\n
\n {/* Shipper / Exporter */}\n
\n
\n 1. Shipper / Exporter\n \n
\n
\n

{shipperName}

\n

{shipperAddress}

\n
\n

\n \n {shipperContact}\n

\n

\n \n {shipperEmail}\n

\n

\n EORI / Tax ID: {shipperEori}\n

\n
\n
\n
\n\n {/* Consignee / Importer */}\n
\n
\n 2. Consignee / Importer\n \n
\n
\n

{consigneeName}

\n

{consigneeAddress}

\n
\n

\n \n {consigneeContact}\n

\n

\n \n {consigneeEmail}\n

\n

\n EORI / VAT: {consigneeEori}\n

\n
\n
\n
\n\n {/* Notify Party */}\n
\n
\n 3. Notify Party\n \n
\n
\n

{notifyPartyName}

\n

{notifyPartyAddress}

\n
\n

\n \n {notifyPartyContact}\n

\n

\n \n {notifyPartyEmail}\n

\n

\n Attention: {notifyPartyAttention}\n

\n
\n
\n
\n
\n\n {/* Section 2: Transport & Routing Details Grid */}\n
\n
\n
\n Pre-Carriage By\n

{preCarriageBy}

\n Receipt: {placeOfReceipt}\n
\n\n
\n Ocean Vessel & Voyage\n

\n \n {vesselVoyage}\n

\n \n {vesselImo} • {vesselFlag}\n \n
\n\n
\n Port of Loading (POL)\n

{portOfLoading}

\n Departure: Aug 23, 2026\n
\n\n
\n Port of Discharge (POD)\n

{portOfDischarge}

\n Delivery: {placeOfDelivery}\n
\n
\n
\n\n {/* Section 3: Container & Cargo Manifest Table */}\n
\n
\n
\n

Container & Cargo Description

\n

\n Itemized manifest of goods, seal identification, Harmonized Tariff codes, and gross weight\n

\n
\n \n FCL / FCL • CY-CY Movement\n \n
\n\n
\n
\n \n \n \n Container No. & Seal No.\n Packages & Kind\n Description of Goods\n HS Tariff Code\n Gross Wt (kg)\n Volume (CBM)\n \n \n \n {CARGO_ITEMS.map((item) => (\n \n \n
{item.containerNo}
\n
Seal: {item.sealNo}
\n \n {item.containerType}\n \n \n \n
\n {item.packagesCount} Pallets\n
\n
{item.packagesKind}
\n \n \n
{item.description}
\n {item.hazardClass && (\n
\n \n {item.hazardClass}\n
\n )}\n \n \n {item.hsCode}\n \n \n {item.grossWeightKg.toLocaleString('en-US', { minimumFractionDigits: 2 })} kg\n
\n {item.grossWeightLbs.toLocaleString('en-US', { minimumFractionDigits: 1 })} lbs\n
\n \n \n {item.volumeCbm.toFixed(2)} m³\n \n \n ))}\n \n \n \n \n Totals: {CARGO_ITEMS.length} Containers • {totalPackagesCount} Pallets\n \n \n Dangerous Goods Stowage Declared • Certified Dry Van\n \n \n {totalGrossWeightKg.toLocaleString('en-US', { minimumFractionDigits: 2 })} kg\n \n \n {totalVolumeCbm.toFixed(2)} m³\n \n \n \n
\n
\n
\n
\n\n {/* Section 4: Freight Charges & Commercial Terms */}\n
\n
\n Freight & Charges\n
\n \n {freightTerms}\n \n
\n

\n Payable at: {freightPayableAt}\n

\n
\n\n
\n Declared Value (Customs)\n

{declaredValue}

\n

Commercial Invoice #INV-2026-8942

\n
\n\n
\n Marine Cargo Insurance\n

{insuranceCert}

\n

Institute Cargo Clauses (A) All Risks

\n
\n\n
\n Incoterms & Letter of Credit\n

{incoterms}

\n

\n {letterOfCredit}\n

\n
\n
\n\n {/* Section 5: Carrier Signature & Authorization Stamp */}\n
\n
\n {/* Left: Carrier Certification Notice */}\n
\n Carrier Authorization & Endorsement\n

\n IN WITNESS whereof the carrier, through its authorized master or port agent, has signed three (3)\n original Bills of Lading, one of which being accomplished, the others to stand void.\n

\n
\n

\n Authorized Agent: Capt. H. van der Meer\n (Master / Port Agent)\n

\n

\n Digital Signature SHA-256:{' '}\n 9b2d8fe14157a3e8...c72194b0\n

\n

\n Issued: {issueDate} at Port of Shanghai,\n China\n

\n
\n
\n\n {/* Center: Official Maritime Carrier Stamp */}\n
\n
\n
\n \n
\n
MAERSK LINE A/S
\n
PORT OF SHANGHAI AGENCY
\n
\n OFFICIALLY ENDORSED\n
\n
\n
\n\n {/* Right: Interactive QR Code Verification */}\n
\n \n {/* Top-left finder pattern */}\n \n \n {/* Top-right finder pattern */}\n \n \n {/* Bottom-left finder pattern */}\n \n \n {/* QR data matrix dots */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Scan for Port Customs e-Verification\n \n UIPKGE Trust Protocol\n
\n
\n
\n
\n )}\n\n {/* TAB 2: CUSTOMS & COMPLIANCE INSPECTOR */}\n {activeTab === 'compliance' && (\n
\n {/* Compliance Health Score Banner */}\n
\n \n \n Customs Risk Assessment\n
\n 99 / 100\n \n Low Risk\n \n
\n \n \n Green channel clearance granted for Rotterdam entry. Pre-arrival ICS2 security declaration verified.\n \n \n\n \n \n Import Duties & VAT Estimation\n
\n $29,925.00\n \n EUR 27,665\n \n
\n \n \n 0% Base Duty (TARIC 8518.30.00) + 21.0% Netherlands Import VAT under Article 23 reverse-charge\n mechanism.\n \n \n\n \n \n Container Seal Audit\n
\n 2 / 2 Valid\n \n ISO 17712 Compliant\n \n
\n \n \n Bolt seals SL-94021 & SL-94022 confirmed tamper-free at origin gate inspection.\n \n \n
\n\n {/* Compliance Verification Checklist Grid */}\n \n \n
\n
\n \n Customs Compliance & Regulatory Audit Checklist\n \n \n International trade compliance checks required for European Union port entry and inland transit\n \n
\n \n \n All 6 Gates Passed\n \n
\n \n \n
\n {COMPLIANCE_GATES.map((gate) => (\n \n
\n \n
\n
\n
\n {gate.name}\n {gate.reference}\n
\n

{gate.details}

\n Authority: {gate.authority}\n
\n
\n ))}\n
\n \n \n
\n )}\n\n {/* TAB 3: ELECTRONIC DATA INTERCHANGE (EDI) / JSON MANIFEST */}\n {activeTab === 'edi' && (\n
\n \n \n
\n
\n \n Electronic Data Interchange (UN/EDIFACT IFTMIN)\n \n \n Standardized electronic consignment instructions formatted per UN/EDIFACT D.01B maritime transport\n standards\n \n
\n \n {copiedEdi ? : }\n {copiedEdi ? 'Copied EDI Payload' : 'Copy EDI Payload'}\n \n
\n \n \n 
\n                {generateEdiText()}\n
\n \n \n
\n )}\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/BillOfLadingViewer.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/separator.json", "https://uipkge.dev/r/react/table.json" ], "description": "Maritime & Air Bill of Lading (BOL) shipping document viewer and customs compliance inspector with multi-party entity grid, transport routing, container & cargo manifest, freight terms, carrier stamp, and blockchain verification.", "categories": [ "logistics", "app", "documents" ] }