{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "customs-clearance-tracker",
  "title": "Customs Clearance Tracker",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/customs-clearance-tracker/CustomsClearanceTracker.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Anchor,\n  Check,\n  CheckCircle2,\n  CreditCard,\n  Download,\n  FileCheck2,\n  FileText,\n  Printer,\n  Receipt,\n  Scale,\n  ShieldCheck,\n  Ship,\n} from 'lucide-vue-next'\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'\nimport { cn } from '@/lib/utils'\n\ninterface ClearanceStage {\n  id: string\n  stageNumber: number\n  title: string\n  date: string\n  status: 'completed' | 'current' | 'upcoming'\n  description: string\n}\n\ninterface CommodityLineItem {\n  line: string\n  hsCode: string\n  origin: string\n  description: string\n  quantity: string\n  unitValue: string\n  totalValue: string\n  dutyRate: string\n  dutyAmount: string\n}\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst clearanceStages: ClearanceStage[] = [\n  {\n    id: 'stage-1',\n    stageNumber: 1,\n    title: 'Commercial Invoice & Manifest Filed',\n    date: 'Aug 12, 2026',\n    status: 'completed',\n    description: 'ACE transmission validated & electronic manifest logged',\n  },\n  {\n    id: 'stage-2',\n    stageNumber: 2,\n    title: 'ISF 10+2 Security Filing Accepted',\n    date: 'Aug 14, 2026',\n    status: 'completed',\n    description: 'Importer Security Filing matched ocean BOL with zero errors',\n  },\n  {\n    id: 'stage-3',\n    stageNumber: 3,\n    title: 'FDA / Regulatory Agency Review',\n    date: 'Aug 18, 2026',\n    status: 'completed',\n    description: 'Partner Government Agency (PGA) May Proceed notice issued',\n  },\n  {\n    id: 'stage-4',\n    stageNumber: 4,\n    title: 'Duty & Tariff Assessment Paid',\n    date: 'Aug 19, 2026',\n    status: 'completed',\n    description: 'ACH statement debit confirmed & settled to US Customs',\n  },\n  {\n    id: 'stage-5',\n    stageNumber: 5,\n    title: 'Customs Released & Ready for Pickup',\n    date: 'Aug 21, 2026 · 09:30 PST',\n    status: 'current',\n    description: '1C Customs release generated; terminal gate pass issued',\n  },\n]\n\nconst commodityLineItems: CommodityLineItem[] = [\n  {\n    line: '001',\n    hsCode: '8518.30.00',\n    origin: 'CN',\n    description: 'Wireless ANC Over-Ear Studio Headphones (Model Pro-X9)',\n    quantity: '1,200 pcs (50 ctns)',\n    unitValue: '$58.50',\n    totalValue: '$70,200.00',\n    dutyRate: '3.4%',\n    dutyAmount: '$2,386.80',\n  },\n  {\n    line: '002',\n    hsCode: '8518.21.00',\n    origin: 'CN',\n    description: 'Compact Bluetooth Desk Monitor Speakers (Pair)',\n    quantity: '600 pcs (25 ctns)',\n    unitValue: '$62.00',\n    totalValue: '$37,200.00',\n    dutyRate: '3.4%',\n    dutyAmount: '$1,264.80',\n  },\n  {\n    line: '003',\n    hsCode: '8544.42.20',\n    origin: 'CN',\n    description: 'Braided USB-C to USB-C 240W Fast Charge Cables (2m)',\n    quantity: '3,420 pcs (30 ctns)',\n    unitValue: '$5.00',\n    totalValue: '$17,100.00',\n    dutyRate: '3.4%',\n    dutyAmount: '$581.40',\n  },\n]\n</script>\n\n<template>\n  <div data-slot=\"customs-clearance-tracker\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Section Card -->\n    <Card class=\"border shadow-xs\">\n      <CardHeader class=\"flex flex-col gap-4 pb-4 sm:flex-row sm:items-start sm:justify-between\">\n        <div class=\"space-y-1.5\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Badge wrap variant=\"outline\" class=\"gap-1 font-mono text-xs\">\n              <FileText class=\"size-3\" aria-hidden=\"true\" />\n              CBP Form 7501\n            </Badge>\n            <Badge wrap variant=\"secondary\" class=\"text-xs font-medium\"> Entry Type 01 - Formal Consumption </Badge>\n          </div>\n          <div class=\"flex flex-wrap items-baseline gap-2.5\">\n            <h1 class=\"text-foreground font-mono text-2xl font-bold tracking-tight break-all sm:text-3xl\">\n              #CBP-2026-948201\n            </h1>\n          </div>\n          <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs sm:text-sm\">\n            <span class=\"flex items-center gap-1\">\n              <Anchor class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n              <span class=\"text-foreground font-medium\">Port of Long Beach</span>\n            </span>\n            <span>·</span>\n            <span>US Customs &amp; Border Protection (Port Code: 2704)</span>\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-start gap-2.5 sm:items-end\">\n          <div\n            class=\"border-success/20 bg-success/10 text-success inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-semibold\"\n          >\n            <ShieldCheck class=\"text-success size-4 shrink-0\" aria-hidden=\"true\" />\n            Customs Clearance Granted\n          </div>\n\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs shadow-xs\">\n              <Download class=\"size-3.5\" aria-hidden=\"true\" />\n              Download 7501 Form\n            </Button>\n            <Button variant=\"ghost\" size=\"sm\" class=\"text-muted-foreground hover:text-foreground gap-1.5 text-xs\">\n              <Printer class=\"size-3.5\" aria-hidden=\"true\" />\n              Print Entry Summary\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <Separator />\n\n      <!-- Declaration Meta Grid -->\n      <CardContent class=\"grid grid-cols-2 gap-4 pt-4 sm:grid-cols-4 sm:gap-6\">\n        <div>\n          <p class=\"text-muted-foreground text-xs font-medium\">Importer of Record</p>\n          <p class=\"text-foreground mt-0.5 text-xs font-semibold sm:text-sm\">Apex Global Logistics LLC</p>\n          <p class=\"text-muted-foreground font-mono text-xs\">EIN 94-2849102</p>\n        </div>\n\n        <div>\n          <p class=\"text-muted-foreground text-xs font-medium\">Master Bill of Lading</p>\n          <p class=\"text-foreground mt-0.5 font-mono text-xs font-semibold sm:text-sm\">MAEU-928410294</p>\n          <p class=\"text-muted-foreground text-xs\">Container: MSKU-839201-4 (40' HC)</p>\n        </div>\n\n        <div>\n          <p class=\"text-muted-foreground text-xs font-medium\">Customs Broker</p>\n          <p class=\"text-foreground mt-0.5 text-xs font-semibold sm:text-sm\">Pacific Rim Customs Brokers</p>\n          <p class=\"text-muted-foreground font-mono text-xs\">Filer Code: 894 · Broker #48102</p>\n        </div>\n\n        <div>\n          <p class=\"text-muted-foreground text-xs font-medium\">Release Clearance Time</p>\n          <p class=\"text-success text-success mt-0.5 text-xs font-semibold sm:text-sm\">Aug 21, 2026 · 09:30 PST</p>\n          <p class=\"text-muted-foreground text-xs\">Terminal 140 Gate Ready</p>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Customs Clearance Stepper Card (5-stage progression) -->\n    <Card class=\"border shadow-xs\">\n      <CardHeader class=\"flex flex-col gap-2 pb-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <div class=\"flex items-center gap-2\">\n            <Ship class=\"text-primary size-4\" aria-hidden=\"true\" />\n            <CardTitle class=\"text-base font-semibold\">Customs Clearance Lifecycle</CardTitle>\n          </div>\n          <CardDescription class=\"text-xs sm:text-sm\">\n            5-stage electronic declaration, regulatory inspection, and duty settlement progress via ACE.\n          </CardDescription>\n        </div>\n        <Badge wrap variant=\"secondary\" class=\"bg-success/10 text-success text-xs font-medium\">\n          Stage 5 of 5 · Clearance Complete\n        </Badge>\n      </CardHeader>\n\n      <CardContent class=\"pt-4\">\n        <!-- Desktop Stepper (md+) -->\n        <div class=\"hidden md:block\">\n          <div class=\"grid grid-cols-5 gap-2\">\n            <div v-for=\"(stage, idx) in clearanceStages\" :key=\"stage.id\" class=\"relative flex flex-col\">\n              <div class=\"relative flex items-center\">\n                <!-- Connecting Line before current stage -->\n                <div\n                  v-if=\"idx > 0\"\n                  class=\"absolute top-1/2 right-1/2 -z-0 h-0.5 w-full -translate-y-1/2\"\n                  :class=\"stage.status === 'upcoming' ? 'bg-muted' : 'bg-primary'\"\n                />\n\n                <!-- Connecting Line after current stage -->\n                <div\n                  v-if=\"idx < clearanceStages.length - 1\"\n                  class=\"absolute top-1/2 left-1/2 -z-0 h-0.5 w-full -translate-y-1/2\"\n                  :class=\"clearanceStages[idx + 1].status === 'upcoming' ? 'bg-muted' : 'bg-primary'\"\n                />\n\n                <!-- Step Indicator Circle -->\n                <div class=\"relative z-10 mx-auto flex items-center justify-center\">\n                  <div\n                    v-if=\"stage.status === 'completed'\"\n                    class=\"bg-primary text-primary-foreground ring-background flex size-8 items-center justify-center rounded-full shadow-2xs ring-4\"\n                  >\n                    <Check class=\"size-4\" aria-hidden=\"true\" />\n                  </div>\n                  <div\n                    v-else-if=\"stage.status === 'current'\"\n                    class=\"ring-background border-success bg-success/10 text-success border-success dark:bg-success/10 text-success flex size-8 items-center justify-center rounded-full border-2 shadow-2xs ring-4\"\n                  >\n                    <ShieldCheck class=\"size-4.5\" aria-hidden=\"true\" />\n                  </div>\n                  <div\n                    v-else\n                    class=\"border-muted-foreground/30 bg-muted/40 text-muted-foreground ring-background flex size-8 items-center justify-center rounded-full border-2 ring-4\"\n                  >\n                    <span class=\"text-xs font-semibold tabular-nums\">{{ stage.stageNumber }}</span>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Step Content -->\n              <div class=\"mt-3 px-1 text-center\">\n                <p\n                  class=\"text-xs leading-tight font-semibold sm:text-sm\"\n                  :class=\"stage.status === 'upcoming' ? 'text-muted-foreground' : 'text-foreground'\"\n                >\n                  {{ stage.title }}\n                </p>\n                <p class=\"text-muted-foreground mt-1 font-mono text-xs tabular-nums\">{{ stage.date }}</p>\n                <p class=\"text-muted-foreground/80 mt-1 line-clamp-2 text-xs leading-normal\">\n                  {{ stage.description }}\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Mobile Stepper (< md) -->\n        <div class=\"space-y-4 md:hidden\">\n          <div v-for=\"(stage, idx) in clearanceStages\" :key=\"stage.id\" class=\"flex items-start gap-3\">\n            <div class=\"flex flex-col items-center\">\n              <div\n                v-if=\"stage.status === 'completed'\"\n                class=\"bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center rounded-full shadow-2xs\"\n              >\n                <Check class=\"size-3.5\" aria-hidden=\"true\" />\n              </div>\n              <div\n                v-else-if=\"stage.status === 'current'\"\n                class=\"border-success bg-success/10 text-success border-success dark:bg-success/10 text-success flex size-7 shrink-0 items-center justify-center rounded-full border-2 shadow-2xs\"\n              >\n                <ShieldCheck class=\"size-4\" aria-hidden=\"true\" />\n              </div>\n              <div\n                v-else\n                class=\"border-muted-foreground/30 bg-muted/40 text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full border-2\"\n              >\n                <span class=\"text-xs font-medium tabular-nums\">{{ stage.stageNumber }}</span>\n              </div>\n\n              <div\n                v-if=\"idx < clearanceStages.length - 1\"\n                class=\"mt-1 h-10 w-0.5\"\n                :class=\"clearanceStages[idx + 1].status === 'upcoming' ? 'bg-muted' : 'bg-primary'\"\n              />\n            </div>\n\n            <div class=\"min-w-0 flex-1 pt-0.5 pb-2\">\n              <div class=\"flex flex-wrap items-center justify-between gap-1\">\n                <p\n                  class=\"text-xs font-semibold sm:text-sm\"\n                  :class=\"stage.status === 'upcoming' ? 'text-muted-foreground' : 'text-foreground'\"\n                >\n                  {{ stage.title }}\n                </p>\n                <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">{{ stage.date }}</span>\n              </div>\n              <p class=\"text-muted-foreground mt-0.5 text-xs\">{{ stage.description }}</p>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 4 KPI Summary Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <Card class=\"border shadow-xs\">\n        <CardContent class=\"p-5\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Total Customs Value</p>\n            <div\n              class=\"bg-muted text-muted-foreground border-border/60 flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs\"\n              aria-hidden=\"true\"\n            >\n              <Receipt class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"mt-3\">\n            <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$124,500.00 USD</p>\n            <div class=\"mt-2 flex items-center gap-2\">\n              <Badge wrap variant=\"outline\" class=\"px-1.5 py-0 text-xs font-medium\">19 U.S.C. 1401a</Badge>\n              <span class=\"text-muted-foreground truncate text-xs\">Declared entered value</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card class=\"border shadow-xs\">\n        <CardContent class=\"p-5\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Total Duty Assessed</p>\n            <div\n              class=\"bg-muted text-muted-foreground border-border/60 flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs\"\n              aria-hidden=\"true\"\n            >\n              <Scale class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"mt-3\">\n            <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$4,233.00</p>\n            <div class=\"mt-2 flex items-center gap-2\">\n              <Badge wrap variant=\"secondary\" class=\"px-1.5 py-0 text-xs font-medium\">Tariff 3.4%</Badge>\n              <span class=\"text-muted-foreground truncate text-xs\">General Column 1 Rate</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card class=\"border shadow-xs\">\n        <CardContent class=\"p-5\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium\">User Fees (MPF + HMF)</p>\n            <div\n              class=\"bg-muted text-muted-foreground border-border/60 flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs\"\n              aria-hidden=\"true\"\n            >\n              <FileCheck2 class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"mt-3\">\n            <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$769.98</p>\n            <div class=\"mt-2 flex items-center gap-2\">\n              <Badge wrap variant=\"outline\" class=\"px-1.5 py-0 text-xs font-medium\">19 CFR § 24</Badge>\n              <span class=\"text-muted-foreground truncate text-xs\">MPF $614.35 + HMF $155.63</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card class=\"border shadow-xs\">\n        <CardContent class=\"p-5\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium\">Total Paid to US Customs</p>\n            <div\n              class=\"border-success/20 bg-success/10 text-success text-success flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs\"\n              aria-hidden=\"true\"\n            >\n              <CreditCard class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"mt-3\">\n            <p class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$5,002.98</p>\n            <div class=\"mt-2 flex items-center gap-2\">\n              <Badge wrap variant=\"success\" class=\"px-1.5 py-0 text-xs font-medium\">Paid in Full</Badge>\n              <span class=\"text-muted-foreground truncate font-mono text-xs\">ACH •••• 9210</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Duty & Tariff Assessment Breakdown Card -->\n    <Card class=\"border shadow-xs\">\n      <CardHeader class=\"pb-4\">\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Duty &amp; Tariff Assessment Breakdown</CardTitle>\n            <CardDescription class=\"text-xs sm:text-sm\">\n              Statutory tariff computation, user fees, and electronic clearinghouse payment settlement.\n            </CardDescription>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"text-xs font-medium\"> Electronic Entry Summary · ACE Verified </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent>\n        <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n          <!-- Left Column: Itemized Calculations -->\n          <div class=\"space-y-4 lg:col-span-7\">\n            <div class=\"space-y-3 text-sm\">\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <div>\n                  <span class=\"text-foreground font-medium\">Total Customs Value</span>\n                  <p class=\"text-muted-foreground text-xs\">FOB Port of Origin basis under 19 U.S.C. 1401a</p>\n                </div>\n                <span class=\"text-foreground font-semibold tabular-nums\">$124,500.00 USD</span>\n              </div>\n\n              <Separator />\n\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <div>\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground font-medium\">Total Duty Assessed</span>\n                    <Badge wrap variant=\"secondary\" class=\"px-1.5 py-0 text-xs font-medium\">Tariff 3.4%</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">HTSUS Column 1 General Rate (8518 / 8544)</p>\n                </div>\n                <span class=\"text-foreground font-medium tabular-nums\">$4,233.00</span>\n              </div>\n\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <div>\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground font-medium\">Merchandise Processing Fee (MPF)</span>\n                    <Badge wrap variant=\"outline\" class=\"px-1.5 py-0 text-xs font-medium\">Max Capped</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">0.3464% ad valorem (statutory max $614.35 applies)</p>\n                </div>\n                <span class=\"text-foreground font-medium tabular-nums\">$614.35</span>\n              </div>\n\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <div>\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground font-medium\">Harbor Maintenance Fee (HMF)</span>\n                    <Badge wrap variant=\"outline\" class=\"px-1.5 py-0 text-xs font-medium\">Port of Long Beach</Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">0.1250% of entered commercial port value</p>\n                </div>\n                <span class=\"text-foreground font-medium tabular-nums\">$155.63</span>\n              </div>\n\n              <Separator />\n\n              <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 pt-1\">\n                <div>\n                  <span class=\"text-foreground text-base font-bold sm:text-lg\">Total Paid to US Customs</span>\n                  <p class=\"text-muted-foreground text-xs\">Duty + MPF + HMF full remittance</p>\n                </div>\n                <span class=\"text-foreground font-mono text-2xl font-bold tabular-nums sm:text-3xl\"> $5,002.98 </span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Column: Payment Settlement & Customs Audit Info -->\n          <div class=\"space-y-4 lg:col-span-5\">\n            <div class=\"border-border bg-muted/30 space-y-3.5 rounded-lg border p-4 text-xs shadow-2xs\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"flex items-center gap-2\">\n                  <CreditCard class=\"text-primary size-4\" aria-hidden=\"true\" />\n                  <span class=\"text-foreground text-sm font-semibold\">Payment &amp; Settlement</span>\n                </div>\n                <Badge wrap variant=\"success\" class=\"gap-1 px-2 py-0.5 text-xs font-semibold\">\n                  <CheckCircle2 class=\"size-3\" aria-hidden=\"true\" />\n                  Settled\n                </Badge>\n              </div>\n\n              <div class=\"space-y-2 text-xs\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Payment Method:</span>\n                  <span class=\"text-foreground font-mono font-medium\">Automated Clearinghouse ACH •••• 9210</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Settlement Date:</span>\n                  <span class=\"text-foreground font-mono font-medium tabular-nums\">Aug 19, 2026 · 16:00 EST</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">CBP Statement Ref:</span>\n                  <span class=\"text-foreground font-mono font-medium\">CBP-STMT-2026-88319</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Customs Bond:</span>\n                  <span class=\"text-foreground font-medium\">Continuous Bond ($50,000)</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Surety Code:</span>\n                  <span class=\"text-foreground font-mono font-medium\">Surety 892 · Policy #CB-882190</span>\n                </div>\n              </div>\n\n              <div class=\"border-border/60 border-t pt-2.5\">\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  Entry summary transmitted pursuant to 19 CFR § 141.68. Liquidation occurs 314 days from date of entry\n                  unless extended by CBP.\n                </p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Declared Commodity Line Items Table Card -->\n    <Card class=\"border shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Declared Commodity Line Items</CardTitle>\n            <CardDescription class=\"text-xs sm:text-sm\">\n              Harmonized Tariff Schedule of the United States (HTSUS) classifications and entered commercial valuation.\n            </CardDescription>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"text-xs tabular-nums\"> 3 Line Items Declared </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead class=\"w-[8%]\">Line</TableHead>\n                <TableHead class=\"w-[18%]\">HS Code</TableHead>\n                <TableHead class=\"w-[10%] text-center\">Origin</TableHead>\n                <TableHead class=\"w-[30%]\">Commodity Description</TableHead>\n                <TableHead class=\"text-right\">Quantity</TableHead>\n                <TableHead class=\"text-right\">Unit Value</TableHead>\n                <TableHead class=\"text-right\">Entered Value</TableHead>\n                <TableHead class=\"text-center\">Tariff Rate</TableHead>\n                <TableHead class=\"text-right\">Assessed Duty</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"item in commodityLineItems\" :key=\"item.line\">\n                <TableCell class=\"text-muted-foreground font-mono text-xs font-semibold\">\n                  {{ item.line }}\n                </TableCell>\n                <TableCell>\n                  <div class=\"flex items-center gap-1.5\">\n                    <span class=\"text-foreground font-mono text-xs font-bold\">{{ item.hsCode }}</span>\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-center\">\n                  <Badge wrap variant=\"secondary\" class=\"font-mono text-xs font-semibold\">\n                    {{ item.origin }}\n                  </Badge>\n                </TableCell>\n                <TableCell>\n                  <div class=\"text-foreground text-xs font-medium sm:text-sm\">{{ item.description }}</div>\n                </TableCell>\n                <TableCell class=\"text-foreground text-right text-xs font-medium tabular-nums\">\n                  {{ item.quantity }}\n                </TableCell>\n                <TableCell class=\"text-muted-foreground text-right font-mono text-xs tabular-nums\">\n                  {{ item.unitValue }}\n                </TableCell>\n                <TableCell class=\"text-foreground text-right font-mono text-xs font-semibold tabular-nums\">\n                  {{ item.totalValue }}\n                </TableCell>\n                <TableCell class=\"text-center\">\n                  <Badge wrap variant=\"outline\" class=\"text-xs font-semibold tabular-nums\">\n                    {{ item.dutyRate }}\n                  </Badge>\n                </TableCell>\n                <TableCell class=\"text-success text-success text-right font-mono text-xs font-bold tabular-nums\">\n                  {{ item.dutyAmount }}\n                </TableCell>\n              </TableRow>\n            </TableBody>\n            <TableFooter>\n              <TableRow class=\"font-medium\">\n                <TableCell colspan=\"4\">Total Declared Line Items (3 Commodities)</TableCell>\n                <TableCell class=\"text-foreground text-right text-xs font-bold tabular-nums\"> 5,220 pcs </TableCell>\n                <TableCell class=\"text-muted-foreground text-right text-xs\">—</TableCell>\n                <TableCell class=\"text-foreground text-right font-mono text-xs font-bold tabular-nums\">\n                  $124,500.00\n                </TableCell>\n                <TableCell class=\"text-center\">\n                  <Badge wrap variant=\"secondary\" class=\"text-xs font-semibold\">3.4% Blended</Badge>\n                </TableCell>\n                <TableCell class=\"text-success text-success text-right font-mono text-xs font-bold tabular-nums\">\n                  $4,233.00\n                </TableCell>\n              </TableRow>\n            </TableFooter>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CustomsClearanceTracker.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": "International import/export customs declaration tracker featuring CBP Form 7501 reference, 5-stage clearance progression stepper, tariff and regulatory fee breakdown (MPF/HMF), and HTSUS declared commodity line items table.",
  "categories": [
    "logistics",
    "ecommerce",
    "dashboard"
  ]
}