{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "bill-of-lading-viewer",
  "title": "Bill Of Lading Viewer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/bill-of-lading-viewer/BillOfLadingViewer.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\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-vue-next'\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\ninterface Props {\n  class?: HTMLAttributes['class']\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}\n\nconst props = withDefaults(defineProps<Props>(), {\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})\n\nconst emit = defineEmits<{\n  (e: 'download-pdf'): void\n  (e: 'verify-blockchain'): void\n  (e: 'print'): void\n}>()\n\nconst activeTab = ref<'document' | 'compliance' | 'edi'>('document')\nconst copiedBol = ref(false)\nconst copiedEdi = ref(false)\nconst showVerifyDetails = ref(false)\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\nconst totalPackagesCount = computed(() => cargoItems.reduce((acc, item) => acc + item.packagesCount, 0))\nconst totalGrossWeightKg = computed(() => cargoItems.reduce((acc, item) => acc + item.grossWeightKg, 0))\nconst totalGrossWeightLbs = computed(() => cargoItems.reduce((acc, item) => acc + item.grossWeightLbs, 0))\nconst totalVolumeCbm = computed(() => cargoItems.reduce((acc, item) => acc + item.volumeCbm, 0))\n\nfunction handleCopyBol() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(props.bolNumber)\n    copiedBol.value = true\n    setTimeout(() => {\n      copiedBol.value = false\n    }, 2000)\n  }\n}\n\nfunction handleCopyEdi() {\n  const ediContent = generateEdiText()\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(ediContent)\n    copiedEdi.value = true\n    setTimeout(() => {\n      copiedEdi.value = false\n    }, 2000)\n  }\n}\n\nfunction handlePrint() {\n  emit('print')\n  if (typeof window !== 'undefined') {\n    window.print()\n  }\n}\n\nfunction handleDownloadPdf() {\n  emit('download-pdf')\n  handlePrint()\n}\n\nfunction toggleBlockchainDetails() {\n  showVerifyDetails.value = !showVerifyDetails.value\n  emit('verify-blockchain')\n}\n\nfunction generateEdiText(): string {\n  return `UNB+UNOA:2+${props.scacCode}:ZZ+SONICAURA:ZZ+260821:1400+0000001'\nUNH+1+IFTMIN:D:01B:UN:EAN004'\nBGM+705+${props.bolNumber.replace('#', '')}+9'\nDTM+137:20260821:102'\nNAD+CZ+${props.shipperEori}::9++${props.shipperName}+${props.shipperAddress}+SHENZHEN++518057+CN'\nNAD+CN+NL864219034::9++${props.consigneeName}+${props.consigneeAddress}+AMSTERDAM++1016EK+NL'\nNAD+NI+++${props.notifyPartyName}+${props.notifyPartyAddress}+ROTTERDAM++3016DK+NL'\nTDT+20+V.042W+1+13+MAEU:172:20+++${props.vesselImo}::11:${props.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</script>\n\n<template>\n  <div data-slot=\"bill-of-lading-viewer\" :class=\"cn('text-foreground w-full space-y-6', props.class)\">\n    <!-- Top Action Bar / Document Control Header -->\n    <div\n      class=\"border-border bg-card flex flex-col gap-4 rounded-xl border p-4 shadow-xs sm:flex-row sm:items-center sm:justify-between\"\n    >\n      <div class=\"space-y-1\">\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <Badge wrap variant=\"outline\" class=\"font-mono text-xs tracking-wider uppercase\">\n            {{ props.scacCode }} &bull; Maritime Ocean BOL\n          </Badge>\n          <button\n            type=\"button\"\n            class=\"group focus-visible:ring-ring border-success/30 bg-success/10 text-success hover:bg-success/20 text-success inline-flex min-h-6 items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            @click=\"toggleBlockchainDetails\"\n          >\n            <ShieldCheck class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>Verify Blockchain Authenticity</span>\n            <span class=\"bg-success size-1.5 animate-pulse rounded-full\" aria-hidden=\"true\" />\n          </button>\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2 pt-1\">\n          <h1 class=\"text-xl font-bold tracking-tight sm:text-2xl\">{{ props.documentTitle }}</h1>\n          <span class=\"text-muted-foreground font-mono text-base font-semibold tabular-nums\">{{\n            props.bolNumber\n          }}</span>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            class=\"text-muted-foreground hover:text-foreground size-7\"\n            title=\"Copy BOL number\"\n            @click=\"handleCopyBol\"\n          >\n            <Check v-if=\"copiedBol\" class=\"text-success size-3.5\" />\n            <Copy v-else class=\"size-3.5\" />\n            <span class=\"sr-only\">Copy BOL number</span>\n          </Button>\n        </div>\n        <p class=\"text-muted-foreground text-xs\">\n          Carrier: <strong class=\"text-foreground font-medium\">{{ props.carrierName }}</strong> &bull; Issued:\n          {{ props.issueDate }} in {{ props.placeOfIssue }}\n        </p>\n      </div>\n\n      <!-- Action Buttons & Tab Switcher -->\n      <div class=\"flex flex-wrap items-center gap-2 sm:self-center\">\n        <div class=\"border-border bg-muted/40 flex items-center rounded-lg border p-1\">\n          <button\n            type=\"button\"\n            :class=\"\n              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                activeTab === 'document'\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"activeTab = 'document'\"\n          >\n            Document View\n          </button>\n          <button\n            type=\"button\"\n            :class=\"\n              cn(\n                'focus-visible:ring-ring flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                activeTab === 'compliance'\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"activeTab = 'compliance'\"\n          >\n            <span>Customs &amp; Compliance</span>\n            <Badge wrap variant=\"success\" class=\"size-4 justify-center p-0 text-center font-mono text-xs leading-4\"\n              >6</Badge\n            >\n          </button>\n          <button\n            type=\"button\"\n            :class=\"\n              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                activeTab === 'edi'\n                  ? 'bg-background text-foreground shadow-xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"activeTab = 'edi'\"\n          >\n            Raw EDI / JSON\n          </button>\n        </div>\n\n        <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"handlePrint\">\n          <Printer class=\"size-3.5\" aria-hidden=\"true\" />\n          <span>Print</span>\n        </Button>\n\n        <Button aria-label=\"Download attachment\" size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"handleDownloadPdf\">\n          <Download class=\"size-3.5\" aria-hidden=\"true\" />\n          <span>Download Printable BOL</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- Blockchain Cryptographic Proof Drawer / Card -->\n    <div\n      v-if=\"showVerifyDetails\"\n      class=\"animate-in fade-in slide-in-from-top-2 border-success/30 bg-success/5 rounded-xl border p-4 text-xs transition-colors\"\n    >\n      <div class=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n        <div class=\"flex items-start gap-3\">\n          <div class=\"bg-success/10 text-success rounded-lg p-2\">\n            <ShieldCheck class=\"size-5 shrink-0\" aria-hidden=\"true\" />\n          </div>\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"text-foreground font-semibold\">Cryptographic Bill of Lading Authenticity Verified</span>\n              <Badge wrap variant=\"success\" class=\"text-xs\">Immutable Ledger Record</Badge>\n            </div>\n            <p class=\"text-muted-foreground\">\n              Document state verified on {{ props.blockchainNetwork }}. Digital hash matches original carrier signature\n              at origin.\n            </p>\n          </div>\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-2 font-mono text-xs\">\n          <span class=\"bg-background/80 border-border text-foreground rounded border px-2 py-1\"\n            >Block #{{ props.blockchainBlock }}</span\n          >\n          <span\n            class=\"bg-background/80 border-border text-foreground max-w-xs truncate rounded border px-2 py-1\"\n            :title=\"props.blockchainTxHash\"\n          >\n            Tx: {{ props.blockchainTxHash }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- TAB 1: OFFICIAL BILL OF LADING PAPER DOCUMENT -->\n    <div\n      v-if=\"activeTab === 'document'\"\n      class=\"border-border bg-card overflow-hidden rounded-xl border shadow-xs print:border-none print:shadow-none\"\n    >\n      <!-- Formal Document Header -->\n      <div class=\"border-border bg-muted/20 border-b p-6 sm:p-8\">\n        <div class=\"flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between\">\n          <!-- Carrier Branding & Document Classification -->\n          <div class=\"space-y-3\">\n            <div class=\"flex items-center gap-3\">\n              <div\n                class=\"bg-primary text-primary-foreground flex size-10 items-center justify-center rounded-lg shadow-xs\"\n              >\n                <Anchor class=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <div>\n                <h2 class=\"text-lg font-semibold tracking-tight sm:text-xl\">{{ props.carrierName }}</h2>\n                <p class=\"text-muted-foreground font-mono text-xs\">\n                  SCAC: {{ props.scacCode }} &bull; Standard Ocean Carrier Bill of Lading\n                </p>\n              </div>\n            </div>\n            <p class=\"text-muted-foreground max-w-xl text-xs leading-relaxed\">\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            </p>\n          </div>\n\n          <!-- Document References & Status Stamp -->\n          <div class=\"border-border bg-background/80 flex flex-col gap-2 rounded-lg border p-4 sm:min-w-[280px]\">\n            <div class=\"flex items-center justify-between gap-4\">\n              <span class=\"text-muted-foreground text-xs font-medium\">Bill of Lading No.</span>\n              <span class=\"text-primary font-mono text-sm font-semibold tabular-nums\">{{ props.bolNumber }}</span>\n            </div>\n            <div class=\"flex items-center justify-between gap-4\">\n              <span class=\"text-muted-foreground text-xs\">Booking Reference:</span>\n              <span class=\"font-mono text-xs font-semibold tabular-nums\">{{ props.bookingReference }}</span>\n            </div>\n            <div class=\"flex items-center justify-between gap-4\">\n              <span class=\"text-muted-foreground text-xs\">Export Reference:</span>\n              <span class=\"font-mono text-xs tabular-nums\">{{ props.exportReference }}</span>\n            </div>\n            <Separator class=\"my-1\" />\n            <div class=\"flex items-center justify-between gap-4\">\n              <span class=\"text-muted-foreground text-xs\">Document Status:</span>\n              <Badge wrap variant=\"default\" class=\"text-xs font-medium\">Negotiable / Original</Badge>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Section 1: Parties Grid (Shipper, Consignee, Notify Party) -->\n      <div\n        class=\"divide-border border-border grid grid-cols-1 divide-y border-b md:grid-cols-3 md:divide-x md:divide-y-0\"\n      >\n        <!-- Shipper / Exporter -->\n        <div class=\"bg-card space-y-3 p-5 sm:p-6\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-primary font-mono text-xs font-semibold\">1. Shipper / Exporter</span>\n            <Building2 class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n          </div>\n          <div class=\"space-y-1.5 text-xs\">\n            <p class=\"text-foreground text-sm font-semibold\">{{ props.shipperName }}</p>\n            <p class=\"text-muted-foreground leading-relaxed\">{{ props.shipperAddress }}</p>\n            <div class=\"text-muted-foreground space-y-1 pt-2\">\n              <p class=\"flex items-center gap-1.5\">\n                <Phone class=\"text-muted-foreground size-3 shrink-0\" />\n                <span class=\"tabular-nums\">{{ props.shipperContact }}</span>\n              </p>\n              <p class=\"flex items-center gap-1.5\">\n                <Mail class=\"text-muted-foreground size-3 shrink-0\" />\n                <span>{{ props.shipperEmail }}</span>\n              </p>\n              <p class=\"text-foreground pt-1 font-mono\">\n                <span class=\"text-muted-foreground\">EORI / Tax ID:</span> {{ props.shipperEori }}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Consignee / Importer -->\n        <div class=\"bg-card space-y-3 p-5 sm:p-6\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-primary font-mono text-xs font-semibold\">2. Consignee / Importer</span>\n            <MapPin class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n          </div>\n          <div class=\"space-y-1.5 text-xs\">\n            <p class=\"text-foreground text-sm font-semibold\">{{ props.consigneeName }}</p>\n            <p class=\"text-muted-foreground leading-relaxed\">{{ props.consigneeAddress }}</p>\n            <div class=\"text-muted-foreground space-y-1 pt-2\">\n              <p class=\"flex items-center gap-1.5\">\n                <Phone class=\"text-muted-foreground size-3 shrink-0\" />\n                <span class=\"tabular-nums\">{{ props.consigneeContact }}</span>\n              </p>\n              <p class=\"flex items-center gap-1.5\">\n                <Mail class=\"text-muted-foreground size-3 shrink-0\" />\n                <span>{{ props.consigneeEmail }}</span>\n              </p>\n              <p class=\"text-foreground pt-1 font-mono\">\n                <span class=\"text-muted-foreground\">EORI / VAT:</span> {{ props.consigneeEori }}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Notify Party -->\n        <div class=\"bg-card space-y-3 p-5 sm:p-6\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-primary font-mono text-xs font-semibold\">3. Notify Party</span>\n            <FileText class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n          </div>\n          <div class=\"space-y-1.5 text-xs\">\n            <p class=\"text-foreground text-sm font-semibold\">{{ props.notifyPartyName }}</p>\n            <p class=\"text-muted-foreground leading-relaxed\">{{ props.notifyPartyAddress }}</p>\n            <div class=\"text-muted-foreground space-y-1 pt-2\">\n              <p class=\"flex items-center gap-1.5\">\n                <Phone class=\"text-muted-foreground size-3 shrink-0\" />\n                <span class=\"tabular-nums\">{{ props.notifyPartyContact }}</span>\n              </p>\n              <p class=\"flex items-center gap-1.5\">\n                <Mail class=\"text-muted-foreground size-3 shrink-0\" />\n                <span>{{ props.notifyPartyEmail }}</span>\n              </p>\n              <p class=\"text-foreground pt-1 font-medium\">\n                <span class=\"text-muted-foreground\">Attention:</span> {{ props.notifyPartyAttention }}\n              </p>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Section 2: Transport & Routing Details Grid -->\n      <div class=\"border-border bg-muted/10 border-b p-5 sm:p-6\">\n        <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"border-border bg-card space-y-1 rounded-lg border p-3 shadow-xs\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Pre-Carriage By</span>\n            <p class=\"text-foreground text-xs font-semibold\">{{ props.preCarriageBy }}</p>\n            <span class=\"text-muted-foreground text-xs\">Receipt: {{ props.placeOfReceipt }}</span>\n          </div>\n\n          <div class=\"border-border bg-card space-y-1 rounded-lg border p-3 shadow-xs\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Ocean Vessel &amp; Voyage</span>\n            <p class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n              <Ship class=\"text-primary size-3.5 shrink-0\" />\n              <span>{{ props.vesselVoyage }}</span>\n            </p>\n            <span class=\"text-muted-foreground font-mono text-xs\"\n              >{{ props.vesselImo }} &bull; {{ props.vesselFlag }}</span\n            >\n          </div>\n\n          <div class=\"border-border bg-card space-y-1 rounded-lg border p-3 shadow-xs\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Port of Loading (POL)</span>\n            <p class=\"text-foreground text-xs font-semibold\">{{ props.portOfLoading }}</p>\n            <span class=\"text-muted-foreground text-xs\">Departure: Aug 23, 2026</span>\n          </div>\n\n          <div class=\"border-border bg-card space-y-1 rounded-lg border p-3 shadow-xs\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Port of Discharge (POD)</span>\n            <p class=\"text-foreground text-xs font-semibold\">{{ props.portOfDischarge }}</p>\n            <span class=\"text-muted-foreground text-xs\">Delivery: {{ props.placeOfDelivery }}</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Section 3: Container & Cargo Manifest Table -->\n      <div class=\"space-y-4 p-5 sm:p-6\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <h3 class=\"text-foreground text-sm font-semibold\">Container &amp; Cargo Description</h3>\n            <p class=\"text-muted-foreground text-xs\">\n              Itemized manifest of goods, seal identification, Harmonized Tariff codes, and gross weight\n            </p>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"w-fit font-mono text-xs\">FCL / FCL &bull; CY-CY Movement</Badge>\n        </div>\n\n        <div class=\"border-border overflow-hidden rounded-lg border\">\n          <div class=\"overflow-x-auto\">\n            <Table density=\"cozy\">\n              <TableHeader>\n                <TableRow>\n                  <TableHead class=\"text-xs\">Container No. &amp; Seal No.</TableHead>\n                  <TableHead class=\"text-xs\">Packages &amp; Kind</TableHead>\n                  <TableHead class=\"text-xs\">Description of Goods</TableHead>\n                  <TableHead class=\"text-xs\">HS Tariff Code</TableHead>\n                  <TableHead class=\"text-right text-xs\">Gross Wt (kg)</TableHead>\n                  <TableHead class=\"text-right text-xs\">Volume (CBM)</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow v-for=\"item in cargoItems\" :key=\"item.id\">\n                  <TableCell class=\"align-top\">\n                    <div class=\"text-foreground font-mono text-xs font-semibold\">{{ item.containerNo }}</div>\n                    <div class=\"text-muted-foreground font-mono text-xs\">Seal: {{ item.sealNo }}</div>\n                    <Badge wrap variant=\"secondary\" class=\"mt-1 text-xs font-normal\">{{ item.containerType }}</Badge>\n                  </TableCell>\n                  <TableCell class=\"align-top\">\n                    <div class=\"text-foreground text-xs font-medium tabular-nums\">{{ item.packagesCount }} Pallets</div>\n                    <div class=\"text-muted-foreground text-xs\">{{ item.packagesKind }}</div>\n                  </TableCell>\n                  <TableCell class=\"max-w-md align-top\">\n                    <div class=\"text-foreground text-xs leading-relaxed font-medium\">{{ item.description }}</div>\n                    <div v-if=\"item.hazardClass\" class=\"text-warning mt-1 flex items-center gap-1 text-xs\">\n                      <AlertCircle class=\"size-3 shrink-0\" />\n                      <span>{{ item.hazardClass }}</span>\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"text-foreground align-top font-mono text-xs tabular-nums\">\n                    {{ item.hsCode }}\n                  </TableCell>\n                  <TableCell class=\"text-foreground text-right align-top font-mono text-xs font-semibold tabular-nums\">\n                    {{ item.grossWeightKg.toLocaleString('en-US', { minimumFractionDigits: 2 }) }} kg\n                    <div class=\"text-muted-foreground font-normal\">\n                      {{ item.grossWeightLbs.toLocaleString('en-US', { minimumFractionDigits: 1 }) }} lbs\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"text-foreground text-right align-top font-mono text-xs tabular-nums\">\n                    {{ item.volumeCbm.toFixed(2) }} m³\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n              <TableFooter>\n                <TableRow>\n                  <TableCell colspan=\"2\" class=\"text-xs font-semibold\">\n                    Totals: {{ cargoItems.length }} Containers &bull; {{ totalPackagesCount }} Pallets\n                  </TableCell>\n                  <TableCell colspan=\"2\" class=\"text-muted-foreground text-xs\">\n                    Dangerous Goods Stowage Declared &bull; Certified Dry Van\n                  </TableCell>\n                  <TableCell class=\"text-foreground text-right font-mono text-xs font-semibold tabular-nums\">\n                    {{ totalGrossWeightKg.toLocaleString('en-US', { minimumFractionDigits: 2 }) }} kg\n                  </TableCell>\n                  <TableCell class=\"text-foreground text-right font-mono text-xs font-semibold tabular-nums\">\n                    {{ totalVolumeCbm.toFixed(2) }} m³\n                  </TableCell>\n                </TableRow>\n              </TableFooter>\n            </Table>\n          </div>\n        </div>\n      </div>\n\n      <!-- Section 4: Freight Charges & Commercial Terms -->\n      <div\n        class=\"divide-border border-border grid grid-cols-1 divide-y border-t sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4\"\n      >\n        <div class=\"bg-muted/10 space-y-1.5 p-5\">\n          <span class=\"text-muted-foreground text-xs font-medium\">Freight &amp; Charges</span>\n          <div class=\"flex items-center gap-2\">\n            <Badge wrap variant=\"default\" class=\"text-xs font-medium tracking-wide uppercase\">{{\n              props.freightTerms\n            }}</Badge>\n          </div>\n          <p class=\"text-muted-foreground pt-1 text-xs\">\n            Payable at: <strong class=\"text-foreground\">{{ props.freightPayableAt }}</strong>\n          </p>\n        </div>\n\n        <div class=\"bg-muted/10 space-y-1.5 p-5\">\n          <span class=\"text-muted-foreground text-xs font-medium\">Declared Value (Customs)</span>\n          <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">{{ props.declaredValue }}</p>\n          <p class=\"text-muted-foreground text-xs\">Commercial Invoice #INV-2026-8942</p>\n        </div>\n\n        <div class=\"bg-muted/10 space-y-1.5 p-5\">\n          <span class=\"text-muted-foreground text-xs font-medium\">Marine Cargo Insurance</span>\n          <p class=\"text-foreground font-mono text-xs font-semibold\">{{ props.insuranceCert }}</p>\n          <p class=\"text-muted-foreground text-xs\">Institute Cargo Clauses (A) All Risks</p>\n        </div>\n\n        <div class=\"bg-muted/10 space-y-1.5 p-5\">\n          <span class=\"text-muted-foreground text-xs font-medium\">Incoterms &amp; Letter of Credit</span>\n          <p class=\"text-foreground text-xs font-semibold\">{{ props.incoterms }}</p>\n          <p class=\"text-muted-foreground truncate font-mono text-xs\" :title=\"props.letterOfCredit\">\n            {{ props.letterOfCredit }}\n          </p>\n        </div>\n      </div>\n\n      <!-- Section 5: Carrier Signature & Authorization Stamp -->\n      <div class=\"border-border bg-card border-t p-6 sm:p-8\">\n        <div class=\"grid grid-cols-1 gap-6 md:grid-cols-12 md:items-center\">\n          <!-- Left: Carrier Certification Notice -->\n          <div class=\"space-y-2 md:col-span-6\">\n            <span class=\"text-primary text-xs font-semibold\">Carrier Authorization &amp; Endorsement</span>\n            <p class=\"text-muted-foreground text-xs leading-relaxed\">\n              IN WITNESS whereof the carrier, through its authorized master or port agent, has signed three (3) original\n              Bills of Lading, one of which being accomplished, the others to stand void.\n            </p>\n            <div class=\"text-muted-foreground flex flex-col gap-1 pt-2 font-mono text-xs\">\n              <p>\n                <span class=\"text-foreground font-semibold\">Authorized Agent:</span> Capt. H. van der Meer (Master /\n                Port Agent)\n              </p>\n              <p>\n                <span class=\"text-foreground font-semibold\">Digital Signature SHA-256:</span>\n                9b2d8fe14157a3e8...c72194b0\n              </p>\n              <p>\n                <span class=\"text-foreground font-semibold\">Issued:</span> {{ props.issueDate }} at Port of Shanghai,\n                China\n              </p>\n            </div>\n          </div>\n\n          <!-- Center: Official Maritime Carrier Stamp -->\n          <div class=\"flex justify-center md:col-span-3\">\n            <div\n              class=\"border-primary/40 bg-primary/5 text-primary rotate-[-2deg] rounded-lg border-2 border-dashed p-4 text-center font-mono text-xs tracking-widest uppercase shadow-xs\"\n            >\n              <div class=\"mb-1 flex justify-center\">\n                <Ship class=\"text-primary size-6\" />\n              </div>\n              <div class=\"text-sm font-semibold tracking-tight\">MAERSK LINE A/S</div>\n              <div class=\"text-muted-foreground text-xs font-semibold\">PORT OF SHANGHAI AGENCY</div>\n              <div class=\"border-primary/30 text-success mt-1 border-t pt-1 text-xs font-semibold\">\n                OFFICIALLY ENDORSED\n              </div>\n            </div>\n          </div>\n\n          <!-- Right: Interactive QR Code Verification -->\n          <div\n            class=\"border-border bg-muted/20 flex flex-col items-center justify-center rounded-lg border p-4 text-center md:col-span-3\"\n          >\n            <svg\n              viewBox=\"0 0 100 100\"\n              class=\"text-foreground size-20 shrink-0\"\n              fill=\"currentColor\"\n              aria-label=\"QR Code\"\n            >\n              <!-- Top-left finder pattern -->\n              <rect x=\"2\" y=\"2\" width=\"28\" height=\"28\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" />\n              <rect x=\"10\" y=\"10\" width=\"12\" height=\"12\" rx=\"1.5\" />\n              <!-- Top-right finder pattern -->\n              <rect x=\"70\" y=\"2\" width=\"28\" height=\"28\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" />\n              <rect x=\"78\" y=\"10\" width=\"12\" height=\"12\" rx=\"1.5\" />\n              <!-- Bottom-left finder pattern -->\n              <rect x=\"2\" y=\"70\" width=\"28\" height=\"28\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" />\n              <rect x=\"10\" y=\"78\" width=\"12\" height=\"12\" rx=\"1.5\" />\n              <!-- QR data matrix dots -->\n              <rect x=\"36\" y=\"6\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"48\" y=\"6\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"58\" y=\"6\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"6\" y=\"36\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"18\" y=\"36\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"36\" y=\"36\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"48\" y=\"36\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"58\" y=\"36\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"74\" y=\"36\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"86\" y=\"36\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"36\" y=\"48\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"48\" y=\"48\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"58\" y=\"48\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"36\" y=\"60\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"48\" y=\"60\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"58\" y=\"60\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"36\" y=\"76\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"48\" y=\"76\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"58\" y=\"76\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"74\" y=\"76\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"86\" y=\"76\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"74\" y=\"86\" width=\"6\" height=\"6\" rx=\"1\" />\n              <rect x=\"86\" y=\"86\" width=\"6\" height=\"6\" rx=\"1\" />\n            </svg>\n            <span class=\"text-foreground mt-2 font-mono text-xs font-medium\">Scan for Port Customs e-Verification</span>\n            <span class=\"text-muted-foreground text-xs\">UIPKGE Trust Protocol</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- TAB 2: CUSTOMS & COMPLIANCE INSPECTOR -->\n    <div v-else-if=\"activeTab === 'compliance'\" class=\"space-y-6\">\n      <!-- Compliance Health Score Banner -->\n      <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n        <Card class=\"border-border bg-card\">\n          <CardHeader class=\"p-4 pb-2\">\n            <CardDescription class=\"text-xs\">Customs Risk Assessment</CardDescription>\n            <div class=\"flex items-baseline gap-2\">\n              <CardTitle class=\"text-success text-2xl font-bold\">99 / 100</CardTitle>\n              <Badge wrap variant=\"success\" class=\"text-xs\">Low Risk</Badge>\n            </div>\n          </CardHeader>\n          <CardContent class=\"text-muted-foreground p-4 pt-1 text-xs\">\n            Green channel clearance granted for Rotterdam entry. Pre-arrival ICS2 security declaration verified.\n          </CardContent>\n        </Card>\n\n        <Card class=\"border-border bg-card\">\n          <CardHeader class=\"p-4 pb-2\">\n            <CardDescription class=\"text-xs\">Import Duties &amp; VAT Estimation</CardDescription>\n            <div class=\"flex items-baseline gap-2\">\n              <CardTitle class=\"text-foreground font-mono text-2xl font-bold\">$29,925.00</CardTitle>\n              <Badge wrap variant=\"outline\" class=\"font-mono text-xs\">EUR 27,665</Badge>\n            </div>\n          </CardHeader>\n          <CardContent class=\"text-muted-foreground p-4 pt-1 text-xs\">\n            0% Base Duty (TARIC 8518.30.00) + 21.0% Netherlands Import VAT under Article 23 reverse-charge mechanism.\n          </CardContent>\n        </Card>\n\n        <Card class=\"border-border bg-card\">\n          <CardHeader class=\"p-4 pb-2\">\n            <CardDescription class=\"text-xs\">Container Seal Audit</CardDescription>\n            <div class=\"flex items-baseline gap-2\">\n              <CardTitle class=\"text-foreground text-2xl font-bold\">2 / 2 Valid</CardTitle>\n              <Badge wrap variant=\"success\" class=\"text-xs\">ISO 17712 Compliant</Badge>\n            </div>\n          </CardHeader>\n          <CardContent class=\"text-muted-foreground p-4 pt-1 text-xs\">\n            Bolt seals SL-94021 &amp; SL-94022 confirmed tamper-free at origin gate inspection.\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Compliance Verification Checklist Grid -->\n      <Card class=\"border-border bg-card\">\n        <CardHeader class=\"p-5 pb-3\">\n          <div class=\"flex items-center justify-between\">\n            <div>\n              <CardTitle class=\"text-base font-semibold\">Customs Compliance &amp; Regulatory Audit Checklist</CardTitle>\n              <CardDescription class=\"text-xs\"\n                >International trade compliance checks required for European Union port entry and inland\n                transit</CardDescription\n              >\n            </div>\n            <Badge wrap variant=\"success\" class=\"gap-1 text-xs\">\n              <CheckCircle2 class=\"size-3.5\" />\n              <span>All 6 Gates Passed</span>\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3 p-5 pt-0\">\n          <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n            <div\n              v-for=\"gate in complianceGates\"\n              :key=\"gate.id\"\n              class=\"border-border bg-muted/20 flex items-start gap-3 rounded-lg border p-3.5 shadow-xs\"\n            >\n              <div class=\"bg-success/10 text-success mt-0.5 shrink-0 rounded-full p-1\">\n                <CheckCircle2 class=\"size-4\" aria-hidden=\"true\" />\n              </div>\n              <div class=\"space-y-1 text-xs\">\n                <div class=\"flex items-center justify-between gap-2\">\n                  <span class=\"text-foreground font-semibold\">{{ gate.name }}</span>\n                  <span class=\"text-muted-foreground font-mono text-xs font-medium\">{{ gate.reference }}</span>\n                </div>\n                <p class=\"text-muted-foreground leading-relaxed\">{{ gate.details }}</p>\n                <span class=\"text-primary block text-xs font-medium\">Authority: {{ gate.authority }}</span>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- TAB 3: ELECTRONIC DATA INTERCHANGE (EDI) / JSON MANIFEST -->\n    <div v-else-if=\"activeTab === 'edi'\" class=\"space-y-4\">\n      <Card class=\"border-border bg-card\">\n        <CardHeader class=\"p-5 pb-3\">\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <CardTitle class=\"text-base font-semibold\">Electronic Data Interchange (UN/EDIFACT IFTMIN)</CardTitle>\n              <CardDescription class=\"text-xs\"\n                >Standardized electronic consignment instructions formatted per UN/EDIFACT D.01B maritime transport\n                standards</CardDescription\n              >\n            </div>\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 self-start text-xs sm:self-auto\" @click=\"handleCopyEdi\">\n              <Check v-if=\"copiedEdi\" class=\"text-success size-3.5\" />\n              <Copy v-else class=\"size-3.5\" />\n              <span>{{ copiedEdi ? 'Copied EDI Payload' : 'Copy EDI Payload' }}</span>\n            </Button>\n          </div>\n        </CardHeader>\n        <CardContent class=\"p-5 pt-0\">\n          <pre\n            class=\"border-border bg-muted/40 text-foreground overflow-x-auto rounded-lg border p-4 font-mono text-xs leading-relaxed select-all\"\n            >{{ generateEdiText() }}</pre\n          >\n        </CardContent>\n      </Card>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/BillOfLadingViewer.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/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"
  ]
}