{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "customs-clearance-tracker",
  "title": "Customs Clearance Tracker",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/customs-clearance-tracker/CustomsClearanceTracker.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\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-react'\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\nexport interface CustomsClearanceTrackerProps {\n  className?: string\n}\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 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\nexport function CustomsClearanceTracker({ className }: CustomsClearanceTrackerProps) {\n  return (\n    <div data-slot=\"customs-clearance-tracker\" className={cn('w-full space-y-6', className)}>\n      {/* Header Section Card */}\n      <Card className=\"border shadow-xs\">\n        <CardHeader className=\"flex flex-col gap-4 pb-4 sm:flex-row sm:items-start sm:justify-between\">\n          <div className=\"space-y-1.5\">\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Badge wrap variant=\"outline\" className=\"gap-1 font-mono text-xs\">\n                <FileText className=\"size-3\" aria-hidden=\"true\" />\n                CBP Form 7501\n              </Badge>\n              <Badge wrap variant=\"secondary\" className=\"text-xs font-medium\">\n                Entry Type 01 - Formal Consumption\n              </Badge>\n            </div>\n            <div className=\"flex flex-wrap items-baseline gap-2.5\">\n              <h1 className=\"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 className=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs sm:text-sm\">\n              <span className=\"flex items-center gap-1\">\n                <Anchor className=\"text-primary size-3.5\" aria-hidden=\"true\" />\n                <span className=\"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 className=\"flex flex-col items-start gap-2.5 sm:items-end\">\n            <div className=\"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              <ShieldCheck className=\"text-success size-4 shrink-0\" aria-hidden=\"true\" />\n              Customs Clearance Granted\n            </div>\n\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <Button\n                aria-label=\"Download attachment\"\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"gap-1.5 text-xs shadow-xs\"\n              >\n                <Download className=\"size-3.5\" aria-hidden=\"true\" />\n                Download 7501 Form\n              </Button>\n              <Button variant=\"ghost\" size=\"sm\" className=\"text-muted-foreground hover:text-foreground gap-1.5 text-xs\">\n                <Printer className=\"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 className=\"grid grid-cols-2 gap-4 pt-4 sm:grid-cols-4 sm:gap-6\">\n          <div>\n            <p className=\"text-muted-foreground text-xs font-medium\">Importer of Record</p>\n            <p className=\"text-foreground mt-0.5 text-xs font-semibold sm:text-sm\">Apex Global Logistics LLC</p>\n            <p className=\"text-muted-foreground font-mono text-xs\">EIN 94-2849102</p>\n          </div>\n\n          <div>\n            <p className=\"text-muted-foreground text-xs font-medium\">Master Bill of Lading</p>\n            <p className=\"text-foreground mt-0.5 font-mono text-xs font-semibold sm:text-sm\">MAEU-928410294</p>\n            <p className=\"text-muted-foreground text-xs\">Container: MSKU-839201-4 (40' HC)</p>\n          </div>\n\n          <div>\n            <p className=\"text-muted-foreground text-xs font-medium\">Customs Broker</p>\n            <p className=\"text-foreground mt-0.5 text-xs font-semibold sm:text-sm\">Pacific Rim Customs Brokers</p>\n            <p className=\"text-muted-foreground font-mono text-xs\">Filer Code: 894 · Broker #48102</p>\n          </div>\n\n          <div>\n            <p className=\"text-muted-foreground text-xs font-medium\">Release Clearance Time</p>\n            <p className=\"text-success text-success mt-0.5 text-xs font-semibold sm:text-sm\">\n              Aug 21, 2026 · 09:30 PST\n            </p>\n            <p className=\"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 className=\"border shadow-xs\">\n        <CardHeader className=\"flex flex-col gap-2 pb-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <Ship className=\"text-primary size-4\" aria-hidden=\"true\" />\n              <CardTitle className=\"text-base font-semibold\">Customs Clearance Lifecycle</CardTitle>\n            </div>\n            <CardDescription className=\"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\" className=\"bg-success/10 text-success text-xs font-medium\">\n            Stage 5 of 5 · Clearance Complete\n          </Badge>\n        </CardHeader>\n\n        <CardContent className=\"pt-4\">\n          {/* Desktop Stepper (md+) */}\n          <div className=\"hidden md:block\">\n            <div className=\"grid grid-cols-5 gap-2\">\n              {clearanceStages.map((stage, idx) => (\n                <div key={stage.id} className=\"relative flex flex-col\">\n                  <div className=\"relative flex items-center\">\n                    {/* Connecting Line before current stage */}\n                    {idx > 0 && (\n                      <div\n                        className={cn(\n                          'absolute top-1/2 right-1/2 -z-0 h-0.5 w-full -translate-y-1/2',\n                          stage.status === 'upcoming' ? 'bg-muted' : 'bg-primary',\n                        )}\n                      />\n                    )}\n\n                    {/* Connecting Line after current stage */}\n                    {idx < clearanceStages.length - 1 && (\n                      <div\n                        className={cn(\n                          'absolute top-1/2 left-1/2 -z-0 h-0.5 w-full -translate-y-1/2',\n                          clearanceStages[idx + 1].status === 'upcoming' ? 'bg-muted' : 'bg-primary',\n                        )}\n                      />\n                    )}\n\n                    {/* Step Indicator Circle */}\n                    <div className=\"relative z-10 mx-auto flex items-center justify-center\">\n                      {stage.status === 'completed' ? (\n                        <div className=\"bg-primary text-primary-foreground ring-background flex size-8 items-center justify-center rounded-full shadow-2xs ring-4\">\n                          <Check className=\"size-4\" aria-hidden=\"true\" />\n                        </div>\n                      ) : stage.status === 'current' ? (\n                        <div className=\"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                          <ShieldCheck className=\"size-4.5\" aria-hidden=\"true\" />\n                        </div>\n                      ) : (\n                        <div className=\"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                          <span className=\"text-xs font-semibold tabular-nums\">{stage.stageNumber}</span>\n                        </div>\n                      )}\n                    </div>\n                  </div>\n\n                  {/* Step Content */}\n                  <div className=\"mt-3 px-1 text-center\">\n                    <p\n                      className={cn(\n                        'text-xs leading-tight font-semibold sm:text-sm',\n                        stage.status === 'upcoming' ? 'text-muted-foreground' : 'text-foreground',\n                      )}\n                    >\n                      {stage.title}\n                    </p>\n                    <p className=\"text-muted-foreground mt-1 font-mono text-xs tabular-nums\">{stage.date}</p>\n                    <p className=\"text-muted-foreground/80 mt-1 line-clamp-2 text-xs leading-normal\">\n                      {stage.description}\n                    </p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n\n          {/* Mobile Stepper (< md) */}\n          <div className=\"space-y-4 md:hidden\">\n            {clearanceStages.map((stage, idx) => (\n              <div key={stage.id} className=\"flex items-start gap-3\">\n                <div className=\"flex flex-col items-center\">\n                  {stage.status === 'completed' ? (\n                    <div className=\"bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center rounded-full shadow-2xs\">\n                      <Check className=\"size-3.5\" aria-hidden=\"true\" />\n                    </div>\n                  ) : stage.status === 'current' ? (\n                    <div className=\"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                      <ShieldCheck className=\"size-4\" aria-hidden=\"true\" />\n                    </div>\n                  ) : (\n                    <div className=\"border-muted-foreground/30 bg-muted/40 text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full border-2\">\n                      <span className=\"text-xs font-medium tabular-nums\">{stage.stageNumber}</span>\n                    </div>\n                  )}\n\n                  {idx < clearanceStages.length - 1 && (\n                    <div\n                      className={cn(\n                        'mt-1 h-10 w-0.5',\n                        clearanceStages[idx + 1].status === 'upcoming' ? 'bg-muted' : 'bg-primary',\n                      )}\n                    />\n                  )}\n                </div>\n\n                <div className=\"min-w-0 flex-1 pt-0.5 pb-2\">\n                  <div className=\"flex flex-wrap items-center justify-between gap-1\">\n                    <p\n                      className={cn(\n                        'text-xs font-semibold sm:text-sm',\n                        stage.status === 'upcoming' ? 'text-muted-foreground' : 'text-foreground',\n                      )}\n                    >\n                      {stage.title}\n                    </p>\n                    <span className=\"text-muted-foreground font-mono text-xs tabular-nums\">{stage.date}</span>\n                  </div>\n                  <p className=\"text-muted-foreground mt-0.5 text-xs\">{stage.description}</p>\n                </div>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* 4 KPI Summary Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <Card className=\"border shadow-xs\">\n          <CardContent className=\"p-5\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Total Customs Value</p>\n              <div\n                className=\"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 className=\"size-4\" />\n              </div>\n            </div>\n            <div className=\"mt-3\">\n              <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$124,500.00 USD</p>\n              <div className=\"mt-2 flex items-center gap-2\">\n                <Badge wrap variant=\"outline\" className=\"px-1.5 py-0 text-xs font-medium\">\n                  19 U.S.C. 1401a\n                </Badge>\n                <span className=\"text-muted-foreground truncate text-xs\">Declared entered value</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card className=\"border shadow-xs\">\n          <CardContent className=\"p-5\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Total Duty Assessed</p>\n              <div\n                className=\"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 className=\"size-4\" />\n              </div>\n            </div>\n            <div className=\"mt-3\">\n              <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$4,233.00</p>\n              <div className=\"mt-2 flex items-center gap-2\">\n                <Badge wrap variant=\"secondary\" className=\"px-1.5 py-0 text-xs font-medium\">\n                  Tariff 3.4%\n                </Badge>\n                <span className=\"text-muted-foreground truncate text-xs\">General Column 1 Rate</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card className=\"border shadow-xs\">\n          <CardContent className=\"p-5\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <p className=\"text-muted-foreground text-xs font-medium\">User Fees (MPF + HMF)</p>\n              <div\n                className=\"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 className=\"size-4\" />\n              </div>\n            </div>\n            <div className=\"mt-3\">\n              <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$769.98</p>\n              <div className=\"mt-2 flex items-center gap-2\">\n                <Badge wrap variant=\"outline\" className=\"px-1.5 py-0 text-xs font-medium\">\n                  19 CFR § 24\n                </Badge>\n                <span className=\"text-muted-foreground truncate text-xs\">MPF $614.35 + HMF $155.63</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card className=\"border shadow-xs\">\n          <CardContent className=\"p-5\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <p className=\"text-muted-foreground text-xs font-medium\">Total Paid to US Customs</p>\n              <div\n                className=\"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 className=\"size-4\" />\n              </div>\n            </div>\n            <div className=\"mt-3\">\n              <p className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$5,002.98</p>\n              <div className=\"mt-2 flex items-center gap-2\">\n                <Badge wrap variant=\"success\" className=\"px-1.5 py-0 text-xs font-medium\">\n                  Paid in Full\n                </Badge>\n                <span className=\"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 className=\"border shadow-xs\">\n        <CardHeader className=\"pb-4\">\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div>\n              <CardTitle className=\"text-base font-semibold\">Duty &amp; Tariff Assessment Breakdown</CardTitle>\n              <CardDescription className=\"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\" className=\"text-xs font-medium\">\n              Electronic Entry Summary · ACE Verified\n            </Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent>\n          <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n            {/* Left Column: Itemized Calculations */}\n            <div className=\"space-y-4 lg:col-span-7\">\n              <div className=\"space-y-3 text-sm\">\n                <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                  <div>\n                    <span className=\"text-foreground font-medium\">Total Customs Value</span>\n                    <p className=\"text-muted-foreground text-xs\">FOB Port of Origin basis under 19 U.S.C. 1401a</p>\n                  </div>\n                  <span className=\"text-foreground font-semibold tabular-nums\">$124,500.00 USD</span>\n                </div>\n\n                <Separator />\n\n                <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                  <div>\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-foreground font-medium\">Total Duty Assessed</span>\n                      <Badge wrap variant=\"secondary\" className=\"px-1.5 py-0 text-xs font-medium\">\n                        Tariff 3.4%\n                      </Badge>\n                    </div>\n                    <p className=\"text-muted-foreground text-xs\">HTSUS Column 1 General Rate (8518 / 8544)</p>\n                  </div>\n                  <span className=\"text-foreground font-medium tabular-nums\">$4,233.00</span>\n                </div>\n\n                <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                  <div>\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-foreground font-medium\">Merchandise Processing Fee (MPF)</span>\n                      <Badge wrap variant=\"outline\" className=\"px-1.5 py-0 text-xs font-medium\">\n                        Max Capped\n                      </Badge>\n                    </div>\n                    <p className=\"text-muted-foreground text-xs\">0.3464% ad valorem (statutory max $614.35 applies)</p>\n                  </div>\n                  <span className=\"text-foreground font-medium tabular-nums\">$614.35</span>\n                </div>\n\n                <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                  <div>\n                    <div className=\"flex items-center gap-2\">\n                      <span className=\"text-foreground font-medium\">Harbor Maintenance Fee (HMF)</span>\n                      <Badge wrap variant=\"outline\" className=\"px-1.5 py-0 text-xs font-medium\">\n                        Port of Long Beach\n                      </Badge>\n                    </div>\n                    <p className=\"text-muted-foreground text-xs\">0.1250% of entered commercial port value</p>\n                  </div>\n                  <span className=\"text-foreground font-medium tabular-nums\">$155.63</span>\n                </div>\n\n                <Separator />\n\n                <div className=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 pt-1\">\n                  <div>\n                    <span className=\"text-foreground text-base font-bold sm:text-lg\">Total Paid to US Customs</span>\n                    <p className=\"text-muted-foreground text-xs\">Duty + MPF + HMF full remittance</p>\n                  </div>\n                  <span className=\"text-foreground font-mono text-2xl font-bold tabular-nums sm:text-3xl\">\n                    $5,002.98\n                  </span>\n                </div>\n              </div>\n            </div>\n\n            {/* Right Column: Payment Settlement & Customs Audit Info */}\n            <div className=\"space-y-4 lg:col-span-5\">\n              <div className=\"border-border bg-muted/30 space-y-3.5 rounded-lg border p-4 text-xs shadow-2xs\">\n                <div className=\"flex items-center justify-between\">\n                  <div className=\"flex items-center gap-2\">\n                    <CreditCard className=\"text-primary size-4\" aria-hidden=\"true\" />\n                    <span className=\"text-foreground text-sm font-semibold\">Payment &amp; Settlement</span>\n                  </div>\n                  <Badge wrap variant=\"success\" className=\"gap-1 px-2 py-0.5 text-xs font-semibold\">\n                    <CheckCircle2 className=\"size-3\" aria-hidden=\"true\" />\n                    Settled\n                  </Badge>\n                </div>\n\n                <div className=\"space-y-2 text-xs\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">Payment Method:</span>\n                    <span className=\"text-foreground font-mono font-medium\">Automated Clearinghouse ACH •••• 9210</span>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">Settlement Date:</span>\n                    <span className=\"text-foreground font-mono font-medium tabular-nums\">Aug 19, 2026 · 16:00 EST</span>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">CBP Statement Ref:</span>\n                    <span className=\"text-foreground font-mono font-medium\">CBP-STMT-2026-88319</span>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">Customs Bond:</span>\n                    <span className=\"text-foreground font-medium\">Continuous Bond ($50,000)</span>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">Surety Code:</span>\n                    <span className=\"text-foreground font-mono font-medium\">Surety 892 · Policy #CB-882190</span>\n                  </div>\n                </div>\n\n                <div className=\"border-border/60 border-t pt-2.5\">\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                    Entry summary transmitted pursuant to 19 CFR § 141.68. Liquidation occurs 314 days from date of\n                    entry 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 className=\"border shadow-xs\">\n        <CardHeader className=\"pb-3\">\n          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n            <div>\n              <CardTitle className=\"text-base font-semibold\">Declared Commodity Line Items</CardTitle>\n              <CardDescription className=\"text-xs sm:text-sm\">\n                Harmonized Tariff Schedule of the United States (HTSUS) classifications and entered commercial\n                valuation.\n              </CardDescription>\n            </div>\n            <Badge wrap variant=\"outline\" className=\"text-xs tabular-nums\">\n              3 Line Items Declared\n            </Badge>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"p-0\">\n          <div className=\"overflow-x-auto\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"w-[8%]\">Line</TableHead>\n                  <TableHead className=\"w-[18%]\">HS Code</TableHead>\n                  <TableHead className=\"w-[10%] text-center\">Origin</TableHead>\n                  <TableHead className=\"w-[30%]\">Commodity Description</TableHead>\n                  <TableHead className=\"text-right\">Quantity</TableHead>\n                  <TableHead className=\"text-right\">Unit Value</TableHead>\n                  <TableHead className=\"text-right\">Entered Value</TableHead>\n                  <TableHead className=\"text-center\">Tariff Rate</TableHead>\n                  <TableHead className=\"text-right\">Assessed Duty</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {commodityLineItems.map((item) => (\n                  <TableRow key={item.line}>\n                    <TableCell className=\"text-muted-foreground font-mono text-xs font-semibold\">{item.line}</TableCell>\n                    <TableCell>\n                      <div className=\"flex items-center gap-1.5\">\n                        <span className=\"text-foreground font-mono text-xs font-bold\">{item.hsCode}</span>\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"text-center\">\n                      <Badge wrap variant=\"secondary\" className=\"font-mono text-xs font-semibold\">\n                        {item.origin}\n                      </Badge>\n                    </TableCell>\n                    <TableCell>\n                      <div className=\"text-foreground text-xs font-medium sm:text-sm\">{item.description}</div>\n                    </TableCell>\n                    <TableCell className=\"text-foreground text-right text-xs font-medium tabular-nums\">\n                      {item.quantity}\n                    </TableCell>\n                    <TableCell className=\"text-muted-foreground text-right font-mono text-xs tabular-nums\">\n                      {item.unitValue}\n                    </TableCell>\n                    <TableCell className=\"text-foreground text-right font-mono text-xs font-semibold tabular-nums\">\n                      {item.totalValue}\n                    </TableCell>\n                    <TableCell className=\"text-center\">\n                      <Badge wrap variant=\"outline\" className=\"text-xs font-semibold tabular-nums\">\n                        {item.dutyRate}\n                      </Badge>\n                    </TableCell>\n                    <TableCell className=\"text-success text-success text-right font-mono text-xs font-bold tabular-nums\">\n                      {item.dutyAmount}\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n              <TableFooter>\n                <TableRow className=\"font-medium\">\n                  <TableCell colSpan={4}>Total Declared Line Items (3 Commodities)</TableCell>\n                  <TableCell className=\"text-foreground text-right text-xs font-bold tabular-nums\">5,220 pcs</TableCell>\n                  <TableCell className=\"text-muted-foreground text-right text-xs\">—</TableCell>\n                  <TableCell className=\"text-foreground text-right font-mono text-xs font-bold tabular-nums\">\n                    $124,500.00\n                  </TableCell>\n                  <TableCell className=\"text-center\">\n                    <Badge wrap variant=\"secondary\" className=\"text-xs font-semibold\">\n                      3.4% Blended\n                    </Badge>\n                  </TableCell>\n                  <TableCell className=\"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  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CustomsClearanceTracker.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "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"
  ]
}