{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "customs-clearance-tracker", "title": "Customs Clearance Tracker", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/customs-clearance-tracker/customs-clearance-tracker.component.ts", "content": "// International import/export customs declaration tracker featuring CBP Form 7501\n// reference, 5-stage clearance progression stepper, tariff and regulatory fee breakdown\n// (MPF/HMF), and HTSUS declared commodity line items table. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n Anchor,\n Check,\n CheckCircle2,\n CreditCard,\n Download,\n FileCheck2,\n FileText,\n LucideAngularModule,\n Printer,\n Receipt,\n Scale,\n ShieldCheck,\n Ship,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\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\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-customs-clearance-tracker, [ui-customs-clearance-tracker]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiSeparatorComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableFooterComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n \n CBP Form 7501\n \n \n Entry Type 01 - Formal Consumption\n \n
\n
\n

\n #CBP-2026-948201\n

\n
\n
\n \n \n Port of Long Beach\n \n ·\n US Customs & Border Protection (Port Code: 2704)\n
\n
\n\n
\n \n \n Customs Clearance Granted\n
\n\n
\n \n \n Download 7501 Form\n \n \n \n Print Entry Summary\n \n
\n
\n
\n\n \n\n \n
\n
\n

Importer of Record

\n

Apex Global Logistics LLC

\n

EIN 94-2849102

\n
\n\n
\n

Master Bill of Lading

\n

MAEU-928410294

\n

Container: MSKU-839201-4 (40' HC)

\n
\n\n
\n

Customs Broker

\n

Pacific Rim Customs Brokers

\n

Filer Code: 894 · Broker #48102

\n
\n\n
\n

Release Clearance Time

\n

Aug 21, 2026 · 09:30 PST

\n

Terminal 140 Gate Ready

\n
\n
\n
\n\n \n
\n
\n
\n
\n \n

Customs Clearance Lifecycle

\n
\n

\n 5-stage electronic declaration, regulatory inspection, and duty settlement progress via ACE.\n

\n
\n \n Stage 5 of 5 · Clearance Complete\n \n
\n\n
\n \n
\n
\n @for (stage of stages; track stage.id; let idx = $index) {\n
\n
\n @if (idx > 0) {\n
\n }\n @if (idx < stages.length - 1) {\n
\n }\n
\n @if (stage.status === 'completed') {\n \n \n
\n } @else if (stage.status === 'current') {\n \n \n
\n } @else {\n \n {{ stage.stageNumber }}\n
\n }\n
\n
\n
\n \n {{ stage.title }}\n

\n

{{ stage.date }}

\n

\n {{ stage.description }}\n

\n
\n
\n }\n \n \n\n \n
\n @for (stage of stages; track stage.id; let idx = $index) {\n
\n
\n @if (stage.status === 'completed') {\n \n \n
\n } @else if (stage.status === 'current') {\n \n \n
\n } @else {\n \n {{ stage.stageNumber }}\n
\n }\n @if (idx < stages.length - 1) {\n \n }\n \n
\n
\n \n {{ stage.title }}\n

\n {{ stage.date }}\n
\n

{{ stage.description }}

\n
\n \n }\n \n \n \n\n \n
\n
\n
\n
\n

Total Customs Value

\n \n \n
\n
\n
\n

$124,500.00 USD

\n
\n 19 U.S.C. 1401a\n Declared entered value\n
\n
\n
\n
\n\n
\n
\n
\n

Total Duty Assessed

\n \n \n
\n
\n
\n

$4,233.00

\n
\n Tariff 3.4%\n General Column 1 Rate\n
\n
\n
\n \n\n
\n
\n
\n

User Fees (MPF + HMF)

\n \n \n
\n
\n
\n

$769.98

\n
\n 19 CFR § 24\n MPF $614.35 + HMF $155.63\n
\n
\n
\n \n\n
\n
\n
\n

Total Paid to US Customs

\n \n \n
\n
\n
\n

$5,002.98

\n
\n Paid in Full\n ACH •••• 9210\n
\n
\n
\n \n \n\n \n
\n
\n
\n
\n

Duty & Tariff Assessment Breakdown

\n

\n Statutory tariff computation, user fees, and electronic clearinghouse payment settlement.\n

\n
\n \n Electronic Entry Summary · ACE Verified\n \n
\n
\n\n
\n
\n
\n
\n
\n
\n Total Customs Value\n

FOB Port of Origin basis under 19 U.S.C. 1401a

\n
\n $124,500.00 USD\n
\n\n \n\n
\n
\n
\n Total Duty Assessed\n Tariff 3.4%\n
\n

HTSUS Column 1 General Rate (8518 / 8544)

\n
\n $4,233.00\n
\n\n
\n
\n
\n Merchandise Processing Fee (MPF)\n Max Capped\n
\n

0.3464% ad valorem (statutory max $614.35 applies)

\n
\n $614.35\n
\n\n
\n
\n
\n Harbor Maintenance Fee (HMF)\n \n Port of Long Beach\n \n
\n

0.1250% of entered commercial port value

\n
\n $155.63\n
\n\n \n\n
\n
\n Total Paid to US Customs\n

Duty + MPF + HMF full remittance

\n
\n $5,002.98 \n
\n
\n
\n\n
\n
\n
\n
\n \n Payment & Settlement\n
\n \n \n Settled\n \n
\n\n
\n
\n Payment Method:\n Automated Clearinghouse ACH •••• 9210\n
\n
\n Settlement Date:\n Aug 19, 2026 · 16:00 EST\n
\n
\n CBP Statement Ref:\n CBP-STMT-2026-88319\n
\n
\n Customs Bond:\n Continuous Bond ($50,000)\n
\n
\n Surety Code:\n Surety 892 · Policy #CB-882190\n
\n
\n\n
\n

\n Entry summary transmitted pursuant to 19 CFR § 141.68. Liquidation occurs 314 days from date of\n entry unless extended by CBP.\n

\n
\n
\n
\n
\n
\n
\n\n \n
\n
\n
\n
\n

Declared Commodity Line Items

\n

\n Harmonized Tariff Schedule of the United States (HTSUS) classifications and entered commercial\n valuation.\n

\n
\n 3 Line Items Declared \n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n @for (item of lineItems; track item.line) {\n \n \n \n \n \n \n \n \n \n \n {{ item.dutyAmount }}\n \n \n }\n \n \n \n \n \n \n \n \n \n $4,233.00\n \n \n \n
LineHS CodeOriginCommodity DescriptionQuantityUnit ValueEntered ValueTariff RateAssessed Duty
\n {{ item.line }}\n \n
\n {{ item.hsCode }}\n
\n 		\n \n {{ item.origin }}\n \n \n
{{ item.description }}
\n 		\n {{ item.quantity }}\n \n {{ item.unitValue }}\n \n {{ item.totalValue }}\n \n \n {{ item.dutyRate }}\n \n
Total Declared Line Items (3 Commodities)5,220 pcs—\n $124,500.00\n \n 3.4% Blended\n
\n
\n
\n
\n \n `,\n})\nexport class UiCustomsClearanceTrackerComponent {\n protected readonly Anchor = Anchor\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly FileCheck2 = FileCheck2\n protected readonly FileText = FileText\n protected readonly Printer = Printer\n protected readonly Receipt = Receipt\n protected readonly Scale = Scale\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Ship = Ship\n\n protected readonly stages = clearanceStages\n protected readonly lineItems = commodityLineItems\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/customs-clearance-tracker/customs-clearance-tracker.component.ts" }, { "path": "packages/registry-angular/blocks/customs-clearance-tracker/index.ts", "content": "export { UiCustomsClearanceTrackerComponent } from './customs-clearance-tracker.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/customs-clearance-tracker/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/table.json" ], "description": "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" ] }