{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "bill-of-lading-viewer", "title": "Bill Of Lading Viewer", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/bill-of-lading-viewer/bill-of-lading-viewer.component.ts", "content": "// Maritime & Air Bill of Lading (BOL) shipping document viewer and customs compliance\n// inspector: multi-party entity grid, transport routing, container & cargo manifest with\n// totals, freight terms, carrier stamp, blockchain verification drawer, and UN/EDIFACT\n// EDI payload tab. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, EventEmitter, Input, Output, computed, inject, signal } from '@angular/core'\nimport {\n AlertCircle,\n Anchor,\n Building2,\n Check,\n CheckCircle2,\n Copy,\n Download,\n FileText,\n LucideAngularModule,\n Mail,\n MapPin,\n Phone,\n Printer,\n ShieldCheck,\n Ship,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\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 type BillOfLadingTab = 'document' | 'compliance' | 'edi'\n\nconst cargoItems: 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 complianceGates: 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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-bill-of-lading-viewer, [ui-bill-of-lading-viewer]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \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 @if (copiedBol()) {\n \n } @else {\n \n }\n Copy BOL number\n \n
\n

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

\n
\n\n \n
\n
\n \n \n \n
\n\n \n\n \n \n Download Printable BOL\n \n
\n
\n\n \n @if (showVerifyDetails()) {\n \n
\n
\n
\n \n
\n
\n
\n Cryptographic Bill of Lading Authenticity Verified\n Immutable Ledger Record\n
\n

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

\n
\n
\n\n
\n Block #{{ blockchainBlock }}\n \n Tx: {{ blockchainTxHash }}\n \n
\n
\n
\n }\n\n \n @if (activeTab() === 'document') {\n \n \n
\n
\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
\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 Negotiable / Original\n
\n
\n
\n \n\n \n \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
\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
\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 \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 {{ vesselImo }} • {{ vesselFlag }}\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 \n
\n
\n
\n

Container & Cargo Description

\n

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

\n
\n FCL / FCL • CY-CY Movement\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @for (item of cargoItemsList; track item.id) {\n \n \n \n \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 \n }\n \n \n \n \n \n \n \n \n \n
Container No. & Seal No.Packages & KindDescription of GoodsHS Tariff CodeGross Wt (kg)Volume (CBM)
\n
{{ item.containerNo }}
\n
Seal: {{ item.sealNo }}
\n {{\n item.containerType\n }}\n 		\n
\n {{ item.packagesCount }} Pallets\n
\n
{{ item.packagesKind }}
\n 		\n
{{ item.description }}
\n @if (item.hazardClass) {\n
\n \n {{ item.hazardClass }}\n
\n }\n 		\n {{ item.hsCode }}\n \n {{ item.volumeCbm.toFixed(2) }} m³\n
\n Totals: {{ cargoItemsList.length }} Containers • {{ totalPackagesCount() }} Pallets\n \n Dangerous Goods Stowage Declared • Certified Dry Van\n \n {{ totalGrossWeightKg().toLocaleString('en-US', { minimumFractionDigits: 2 }) }} kg\n \n {{ totalVolumeCbm().toFixed(2) }} m³\n
\n
\n
\n
\n\n \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 \n
\n
\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 (Master /\n 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
\n \n
\n \n
\n
MAERSK LINE A/S
\n
PORT OF SHANGHAI AGENCY
\n
\n OFFICIALLY ENDORSED\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 \n \n \n \n \n \n \n \n \n \n \n Scan for Port Customs e-Verification\n UIPKGE Trust Protocol\n
\n \n \n \n }\n\n \n @if (activeTab() === 'compliance') {\n
\n
\n
\n
\n

Customs Risk Assessment

\n
\n

99 / 100

\n Low Risk\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 EUR 27,665\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 ISO 17712 Compliant\n
\n
\n
\n Bolt seals SL-94021 & SL-94022 confirmed tamper-free at origin gate inspection.\n
\n
\n
\n\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 @for (gate of complianceGatesList; track gate.id) {\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 \n @if (activeTab() === 'edi') {\n
\n
\n
\n
\n
\n

Electronic Data Interchange (UN/EDIFACT IFTMIN)

\n

\n Standardized electronic consignment instructions formatted per UN/EDIFACT D.01B maritime transport\n standards\n

\n
\n \n @if (copiedEdi()) {\n \n } @else {\n \n }\n {{ copiedEdi() ? 'Copied EDI Payload' : 'Copy EDI Payload' }}\n \n
\n
\n
\n {{ generateEdiText() }}\n
\n
\n
\n }\n \n `,\n})\nexport class UiBillOfLadingViewerComponent {\n protected readonly AlertCircle = AlertCircle\n protected readonly Anchor = Anchor\n protected readonly Building2 = Building2\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly FileText = FileText\n protected readonly Mail = Mail\n protected readonly MapPin = MapPin\n protected readonly Phone = Phone\n protected readonly Printer = Printer\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Ship = Ship\n\n protected readonly cargoItemsList = cargoItems\n protected readonly complianceGatesList = complianceGates\n\n @Input() documentTitle = 'Straight Bill of Lading (Original)'\n @Input() bolNumber = '#BOL-2026-894210'\n @Input() carrierName = 'Maersk Line A/S'\n @Input() scacCode = 'MAEU'\n @Input() bookingReference = 'BKG-771920-EU'\n @Input() exportReference = 'EXP-2026-0812'\n @Input() issueDate = 'August 21, 2026'\n @Input() placeOfIssue = 'Shanghai, China'\n @Input() shipperName = 'Shenzhen AudioTech Precision Ltd.'\n @Input() shipperAddress = 'Building 4, High-Tech Industrial Park, Nanshan District, Shenzhen, Guangdong 518057, China'\n @Input() shipperContact = '+86 755 8892 1044'\n @Input() shipperEmail = 'export@audiotech-cn.com'\n @Input() shipperEori = 'CN-91440300MA5EXP01'\n @Input() consigneeName = 'SonicAura Europe B.V.'\n @Input() consigneeAddress = 'Keizersgracht 421, 1016 EK Amsterdam, Netherlands'\n @Input() consigneeContact = '+31 20 894 3300'\n @Input() consigneeEmail = 'import@sonicaura.eu'\n @Input() consigneeEori = 'NL864219034 / VAT: NL864219034B01'\n @Input() notifyPartyName = 'Rotterdam Intermodal Logistics GmbH'\n @Input() notifyPartyAddress = 'Willemskade 18, 3016 DK Rotterdam, Netherlands'\n @Input() notifyPartyContact = '+31 10 400 9820'\n @Input() notifyPartyEmail = 'clearance@rotterdam-intermodal.com'\n @Input() notifyPartyAttention = 'Customs Brokerage Dept. / Desk 4B'\n @Input() preCarriageBy = 'Feeder Barge \"Yangtze River 12\"'\n @Input() placeOfReceipt = 'Shenzhen Inland Depot, China (CNSZX)'\n @Input() vesselVoyage = 'Ever Given / V.042W'\n @Input() vesselImo = 'IMO 9811000'\n @Input() vesselFlag = 'Panama (PA)'\n @Input() portOfLoading = 'Shanghai Port, China (CNSHA)'\n @Input() portOfDischarge = 'Rotterdam Port, Netherlands (NLRTM)'\n @Input() placeOfDelivery = 'Duisburg Intermodal Terminal, Germany (DEDUI)'\n @Input() finalDestination = 'Duisburg Central DC #4 (DEDUI)'\n @Input() freightTerms = 'Prepaid'\n @Input() freightPayableAt = 'Shanghai, China'\n @Input() declaredValue = '$142,500.00 USD'\n @Input() insuranceCert = '#INS-9421-MAR'\n @Input() incoterms = 'CIF Rotterdam Port (Incoterms 2020)'\n @Input() letterOfCredit = 'LC-BNP-2026-99410-EU (BNP Paribas)'\n @Input() blockchainTxHash = '0x71e4d3a8904f84c8a5142d131fba827b5e4c91a2'\n @Input() blockchainBlock = '59,182,904'\n @Input() blockchainNetwork = 'Polygon Mainnet (Decentralized Cargo Registry)'\n @Input() set initialTab(v: BillOfLadingTab) {\n this.activeTab.set(v ?? 'document')\n }\n @Input('class') className?: string\n\n @Output() readonly downloadPdf = new EventEmitter()\n @Output() readonly verifyBlockchain = new EventEmitter()\n @Output() readonly print = new EventEmitter()\n\n readonly activeTab = signal('document')\n readonly copiedBol = signal(false)\n readonly copiedEdi = signal(false)\n readonly showVerifyDetails = signal(false)\n private copyTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.copyTimer))\n }\n\n readonly totalPackagesCount = computed(() => cargoItems.reduce((acc, item) => acc + item.packagesCount, 0))\n readonly totalGrossWeightKg = computed(() => cargoItems.reduce((acc, item) => acc + item.grossWeightKg, 0))\n readonly totalGrossWeightLbs = computed(() => cargoItems.reduce((acc, item) => acc + item.grossWeightLbs, 0))\n readonly totalVolumeCbm = computed(() => cargoItems.reduce((acc, item) => acc + item.volumeCbm, 0))\n\n get rootClass(): string {\n return cn('text-foreground w-full space-y-6', this.className)\n }\n\n tabClass(tab: BillOfLadingTab, withIcon = false): string {\n return cn(\n 'focus-visible:ring-ring rounded-md px-3 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n withIcon && 'flex items-center gap-1.5',\n this.activeTab() === tab\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n generateEdiText(): string {\n return `UNB+UNOA:2+${this.scacCode}:ZZ+SONICAURA:ZZ+260821:1400+0000001'\nUNH+1+IFTMIN:D:01B:UN:EAN004'\nBGM+705+${this.bolNumber.replace('#', '')}+9'\nDTM+137:20260821:102'\nNAD+CZ+${this.shipperEori}::9++${this.shipperName}+${this.shipperAddress}+SHENZHEN++518057+CN'\nNAD+CN+NL864219034::9++${this.consigneeName}+${this.consigneeAddress}+AMSTERDAM++1016EK+NL'\nNAD+NI+++${this.notifyPartyName}+${this.notifyPartyAddress}+ROTTERDAM++3016DK+NL'\nTDT+20+V.042W+1+13+MAEU:172:20+++${this.vesselImo}::11:${this.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 handleCopyBol(): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n void navigator.clipboard.writeText(this.bolNumber)\n this.copiedBol.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copiedBol.set(false), 2000)\n }\n }\n\n handleCopyEdi(): void {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n void navigator.clipboard.writeText(this.generateEdiText())\n this.copiedEdi.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copiedEdi.set(false), 2000)\n }\n }\n\n handlePrint(): void {\n this.print.emit()\n if (typeof window !== 'undefined') window.print()\n }\n\n handleDownloadPdf(): void {\n this.downloadPdf.emit()\n this.handlePrint()\n }\n\n toggleBlockchainDetails(): void {\n this.showVerifyDetails.update((v) => !v)\n this.verifyBlockchain.emit()\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/bill-of-lading-viewer/bill-of-lading-viewer.component.ts" }, { "path": "packages/registry-angular/blocks/bill-of-lading-viewer/index.ts", "content": "export {\n UiBillOfLadingViewerComponent,\n type BillOfLadingTab,\n type ComplianceGate,\n type ContainerCargoItem,\n} from './bill-of-lading-viewer.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/bill-of-lading-viewer/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }