Customs Clearance Tracker
blocklogisticsInternational 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.
Installation
$pnpm dlx uipkge-ng@latest add customs-clearance-tracker$npx uipkge-ng@latest add customs-clearance-tracker$yarn dlx uipkge-ng@latest add customs-clearance-tracker$bunx uipkge-ng@latest add customs-clearance-trackerManifest:
https://uipkge.dev/r/angular/customs-clearance-tracker.jsonInstalls to:src/app/components/blocks/customs-clearance-tracker/Variants
Loading interactive previews…
Loading interactive previews…
Schema
Type aliases exported from this item's source. Use these to shape the data you pass in.
ClearanceStageinterface ClearanceStage {
id: string
stageNumber: number
title: string
date: string
status: 'completed' | 'current' | 'upcoming'
description: string
}CommodityLineIteminterface CommodityLineItem {
line: string
hsCode: string
origin: string
description: string
quantity: string
unitValue: string
totalValue: string
dutyRate: string
dutyAmount: string
}Files installed (2)
src/app/components/blocks/customs-clearance-tracker/customs-clearance-tracker.component.ts31.2 kB
// 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. Port of the React block 1:1. import { ChangeDetectionStrategy, Component, Input } from '@angular/core' import { Anchor, Check, CheckCircle2, CreditCard, Download, FileCheck2, FileText, LucideAngularModule, Printer, Receipt, Scale, ShieldCheck, Ship, } from 'lucide-angular' import { cn } from '@/lib/utils' import { UiBadgeComponent } from '@/ui/badge/badge.component' import { UiButtonComponent } from '@/ui/button/button.component' import { UiCardComponent, UiCardContentComponent, UiCardDescriptionComponent, UiCardHeaderComponent, UiCardTitleComponent, } from '@/ui/card/card.component' import { UiSeparatorComponent } from '@/ui/separator/separator.component' import { UiTableBodyComponent, UiTableCellComponent, UiTableComponent, UiTableFooterComponent, UiTableHeadComponent, UiTableHeaderComponent, UiTableRowComponent, } from '@/ui/table/table.component' interface ClearanceStage { id: string stageNumber: number title: string date: string status: 'completed' | 'current' | 'upcoming' description: string } interface CommodityLineItem { line: string hsCode: string origin: string description: string quantity: string unitValue: string totalValue: string dutyRate: string dutyAmount: string } const clearanceStages: ClearanceStage[] = [ { id: 'stage-1', stageNumber: 1, title: 'Commercial Invoice & Manifest Filed', date: 'Aug 12, 2026', status: 'completed', description: 'ACE transmission validated & electronic manifest logged', }, { id: 'stage-2', stageNumber: 2, title: 'ISF 10+2 Security Filing Accepted', date: 'Aug 14, 2026', status: 'completed', description: 'Importer Security Filing matched ocean BOL with zero errors', }, { id: 'stage-3', stageNumber: 3, title: 'FDA / Regulatory Agency Review', date: 'Aug 18, 2026', status: 'completed', description: 'Partner Government Agency (PGA) May Proceed notice issued', }, { id: 'stage-4', stageNumber: 4, title: 'Duty & Tariff Assessment Paid', date: 'Aug 19, 2026', status: 'completed', description: 'ACH statement debit confirmed & settled to US Customs', }, { id: 'stage-5', stageNumber: 5, title: 'Customs Released & Ready for Pickup', date: 'Aug 21, 2026 · 09:30 PST', status: 'current', description: '1C Customs release generated; terminal gate pass issued', }, ] const commodityLineItems: CommodityLineItem[] = [ { line: '001', hsCode: '8518.30.00', origin: 'CN', description: 'Wireless ANC Over-Ear Studio Headphones (Model Pro-X9)', quantity: '1,200 pcs (50 ctns)', unitValue: '$58.50', totalValue: '$70,200.00', dutyRate: '3.4%', dutyAmount: '$2,386.80', }, { line: '002', hsCode: '8518.21.00', origin: 'CN', description: 'Compact Bluetooth Desk Monitor Speakers (Pair)', quantity: '600 pcs (25 ctns)', unitValue: '$62.00', totalValue: '$37,200.00', dutyRate: '3.4%', dutyAmount: '$1,264.80', }, { line: '003', hsCode: '8544.42.20', origin: 'CN', description: 'Braided USB-C to USB-C 240W Fast Charge Cables (2m)', quantity: '3,420 pcs (30 ctns)', unitValue: '$5.00', totalValue: '$17,100.00', dutyRate: '3.4%', dutyAmount: '$581.40', }, ] @Component({ changeDetection: ChangeDetectionStrategy.Eager, selector: 'ui-customs-clearance-tracker, [ui-customs-clearance-tracker]', standalone: true, // React renders the root <div> itself: the host stays out of layout and `class` goes to the root. host: { '[attr.class]': '"contents"' }, imports: [ LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent, UiCardDescriptionComponent, UiCardHeaderComponent, UiCardTitleComponent, UiSeparatorComponent, UiTableBodyComponent, UiTableCellComponent, UiTableComponent, UiTableFooterComponent, UiTableHeadComponent, UiTableHeaderComponent, UiTableRowComponent, ], template: ` <div data-slot="customs-clearance-tracker" [class]="rootClass"> <!-- Header Section Card --> <div ui-card class="border shadow-xs"> <div ui-card-header class="flex flex-col gap-4 pb-4 sm:flex-row sm:items-start sm:justify-between"> <div class="space-y-1.5"> <div class="flex flex-wrap items-center gap-2"> <span ui-badge wrap variant="outline" class="gap-1 font-mono text-xs"> <lucide-icon [img]="FileText" class="size-3" aria-hidden="true" /> CBP Form 7501 </span> <span ui-badge wrap variant="secondary" class="text-xs font-medium"> Entry Type 01 - Formal Consumption </span> </div> <div class="flex flex-wrap items-baseline gap-2.5"> <h1 class="text-foreground font-mono text-2xl font-bold tracking-tight break-all sm:text-3xl"> #CBP-2026-948201 </h1> </div> <div class="text-muted-foreground flex flex-wrap items-center gap-2 text-xs sm:text-sm"> <span class="flex items-center gap-1"> <lucide-icon [img]="Anchor" class="text-primary size-3.5" aria-hidden="true" /> <span class="text-foreground font-medium">Port of Long Beach</span> </span> <span>·</span> <span>US Customs & Border Protection (Port Code: 2704)</span> </div> </div> <div class="flex flex-col items-start gap-2.5 sm:items-end"> <div 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" > <lucide-icon [img]="ShieldCheck" class="text-success size-4 shrink-0" aria-hidden="true" /> Customs Clearance Granted </div> <div class="flex flex-wrap items-center gap-2"> <button ui-button aria-label="Download attachment" variant="outline" size="sm" class="gap-1.5 text-xs shadow-xs" > <lucide-icon [img]="Download" class="size-3.5" aria-hidden="true" /> Download 7501 Form </button> <button ui-button variant="ghost" size="sm" class="text-muted-foreground hover:text-foreground gap-1.5 text-xs" > <lucide-icon [img]="Printer" class="size-3.5" aria-hidden="true" /> Print Entry Summary </button> </div> </div> </div> <ui-separator /> <!-- Declaration Meta Grid --> <div ui-card-content class="grid grid-cols-2 gap-4 pt-4 sm:grid-cols-4 sm:gap-6"> <div> <p class="text-muted-foreground text-xs font-medium">Importer of Record</p> <p class="text-foreground mt-0.5 text-xs font-semibold sm:text-sm">Apex Global Logistics LLC</p> <p class="text-muted-foreground font-mono text-xs">EIN 94-2849102</p> </div> <div> <p class="text-muted-foreground text-xs font-medium">Master Bill of Lading</p> <p class="text-foreground mt-0.5 font-mono text-xs font-semibold sm:text-sm">MAEU-928410294</p> <p class="text-muted-foreground text-xs">Container: MSKU-839201-4 (40' HC)</p> </div> <div> <p class="text-muted-foreground text-xs font-medium">Customs Broker</p> <p class="text-foreground mt-0.5 text-xs font-semibold sm:text-sm">Pacific Rim Customs Brokers</p> <p class="text-muted-foreground font-mono text-xs">Filer Code: 894 · Broker #48102</p> </div> <div> <p class="text-muted-foreground text-xs font-medium">Release Clearance Time</p> <p class="text-success text-success mt-0.5 text-xs font-semibold sm:text-sm">Aug 21, 2026 · 09:30 PST</p> <p class="text-muted-foreground text-xs">Terminal 140 Gate Ready</p> </div> </div> </div> <!-- Customs Clearance Stepper Card (5-stage progression) --> <div ui-card class="border shadow-xs"> <div ui-card-header class="flex flex-col gap-2 pb-4 sm:flex-row sm:items-center sm:justify-between"> <div> <div class="flex items-center gap-2"> <lucide-icon [img]="Ship" class="text-primary size-4" aria-hidden="true" /> <h3 ui-card-title class="text-base font-semibold">Customs Clearance Lifecycle</h3> </div> <p ui-card-description class="text-xs sm:text-sm"> 5-stage electronic declaration, regulatory inspection, and duty settlement progress via ACE. </p> </div> <span ui-badge wrap variant="secondary" class="bg-success/10 text-success text-xs font-medium"> Stage 5 of 5 · Clearance Complete </span> </div> <div ui-card-content class="pt-4"> <!-- Desktop Stepper (md+) --> <div class="hidden md:block"> <div class="grid grid-cols-5 gap-2"> @for (stage of stages; track stage.id; let idx = $index) { <div class="relative flex flex-col"> <div class="relative flex items-center"> @if (idx > 0) { <div [class]=" 'absolute top-1/2 right-1/2 -z-0 h-0.5 w-full -translate-y-1/2 ' + (stage.status === 'upcoming' ? 'bg-muted' : 'bg-primary') " ></div> } @if (idx < stages.length - 1) { <div [class]=" 'absolute top-1/2 left-1/2 -z-0 h-0.5 w-full -translate-y-1/2 ' + (stages[idx + 1].status === 'upcoming' ? 'bg-muted' : 'bg-primary') " ></div> } <div class="relative z-10 mx-auto flex items-center justify-center"> @if (stage.status === 'completed') { <div class="bg-primary text-primary-foreground ring-background flex size-8 items-center justify-center rounded-full shadow-2xs ring-4" > <lucide-icon [img]="Check" class="size-4" aria-hidden="true" /> </div> } @else if (stage.status === 'current') { <div 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" > <lucide-icon [img]="ShieldCheck" class="size-4.5" aria-hidden="true" /> </div> } @else { <div 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" > <span class="text-xs font-semibold tabular-nums">{{ stage.stageNumber }}</span> </div> } </div> </div> <div class="mt-3 px-1 text-center"> <p [class]=" 'text-xs leading-tight font-semibold sm:text-sm ' + (stage.status === 'upcoming' ? 'text-muted-foreground' : 'text-foreground') " > {{ stage.title }} </p> <p class="text-muted-foreground mt-1 font-mono text-xs tabular-nums">{{ stage.date }}</p> <p class="text-muted-foreground/80 mt-1 line-clamp-2 text-xs leading-normal"> {{ stage.description }} </p> </div> </div> } </div> </div> <!-- Mobile Stepper (< md) --> <div class="space-y-4 md:hidden"> @for (stage of stages; track stage.id; let idx = $index) { <div class="flex items-start gap-3"> <div class="flex flex-col items-center"> @if (stage.status === 'completed') { <div class="bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center rounded-full shadow-2xs" > <lucide-icon [img]="Check" class="size-3.5" aria-hidden="true" /> </div> } @else if (stage.status === 'current') { <div 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" > <lucide-icon [img]="ShieldCheck" class="size-4" aria-hidden="true" /> </div> } @else { <div class="border-muted-foreground/30 bg-muted/40 text-muted-foreground flex size-7 shrink-0 items-center justify-center rounded-full border-2" > <span class="text-xs font-medium tabular-nums">{{ stage.stageNumber }}</span> </div> } @if (idx < stages.length - 1) { <div [class]=" 'mt-1 h-10 w-0.5 ' + (stages[idx + 1].status === 'upcoming' ? 'bg-muted' : 'bg-primary') " ></div> } </div> <div class="min-w-0 flex-1 pt-0.5 pb-2"> <div class="flex flex-wrap items-center justify-between gap-1"> <p [class]=" 'text-xs font-semibold sm:text-sm ' + (stage.status === 'upcoming' ? 'text-muted-foreground' : 'text-foreground') " > {{ stage.title }} </p> <span class="text-muted-foreground font-mono text-xs tabular-nums">{{ stage.date }}</span> </div> <p class="text-muted-foreground mt-0.5 text-xs">{{ stage.description }}</p> </div> </div> } </div> </div> </div> <!-- 4 KPI Summary Cards --> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div ui-card class="border shadow-xs"> <div ui-card-content class="p-5"> <div class="flex flex-wrap items-center justify-between gap-2"> <p class="text-muted-foreground text-xs font-medium">Total Customs Value</p> <div class="bg-muted text-muted-foreground border-border/60 flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs" aria-hidden="true" > <lucide-icon [img]="Receipt" class="size-4" /> </div> </div> <div class="mt-3"> <p class="text-foreground text-2xl font-bold tracking-tight tabular-nums">$124,500.00 USD</p> <div class="mt-2 flex items-center gap-2"> <span ui-badge wrap variant="outline" class="px-1.5 py-0 text-xs font-medium">19 U.S.C. 1401a</span> <span class="text-muted-foreground truncate text-xs">Declared entered value</span> </div> </div> </div> </div> <div ui-card class="border shadow-xs"> <div ui-card-content class="p-5"> <div class="flex flex-wrap items-center justify-between gap-2"> <p class="text-muted-foreground text-xs font-medium">Total Duty Assessed</p> <div class="bg-muted text-muted-foreground border-border/60 flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs" aria-hidden="true" > <lucide-icon [img]="Scale" class="size-4" /> </div> </div> <div class="mt-3"> <p class="text-foreground text-2xl font-bold tracking-tight tabular-nums">$4,233.00</p> <div class="mt-2 flex items-center gap-2"> <span ui-badge wrap variant="secondary" class="px-1.5 py-0 text-xs font-medium">Tariff 3.4%</span> <span class="text-muted-foreground truncate text-xs">General Column 1 Rate</span> </div> </div> </div> </div> <div ui-card class="border shadow-xs"> <div ui-card-content class="p-5"> <div class="flex flex-wrap items-center justify-between gap-2"> <p class="text-muted-foreground text-xs font-medium">User Fees (MPF + HMF)</p> <div class="bg-muted text-muted-foreground border-border/60 flex size-8 shrink-0 items-center justify-center rounded-md border shadow-2xs" aria-hidden="true" > <lucide-icon [img]="FileCheck2" class="size-4" /> </div> </div> <div class="mt-3"> <p class="text-foreground text-2xl font-bold tracking-tight tabular-nums">$769.98</p> <div class="mt-2 flex items-center gap-2"> <span ui-badge wrap variant="outline" class="px-1.5 py-0 text-xs font-medium">19 CFR § 24</span> <span class="text-muted-foreground truncate text-xs">MPF $614.35 + HMF $155.63</span> </div> </div> </div> </div> <div ui-card class="border shadow-xs"> <div ui-card-content class="p-5"> <div class="flex flex-wrap items-center justify-between gap-2"> <p class="text-muted-foreground text-xs font-medium">Total Paid to US Customs</p> <div 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" aria-hidden="true" > <lucide-icon [img]="CreditCard" class="size-4" /> </div> </div> <div class="mt-3"> <p class="text-foreground text-2xl font-bold tracking-tight tabular-nums">$5,002.98</p> <div class="mt-2 flex items-center gap-2"> <span ui-badge wrap variant="success" class="px-1.5 py-0 text-xs font-medium">Paid in Full</span> <span class="text-muted-foreground truncate font-mono text-xs">ACH •••• 9210</span> </div> </div> </div> </div> </div> <!-- Duty & Tariff Assessment Breakdown Card --> <div ui-card class="border shadow-xs"> <div ui-card-header class="pb-4"> <div class="flex flex-wrap items-center justify-between gap-2"> <div> <h3 ui-card-title class="text-base font-semibold">Duty & Tariff Assessment Breakdown</h3> <p ui-card-description class="text-xs sm:text-sm"> Statutory tariff computation, user fees, and electronic clearinghouse payment settlement. </p> </div> <span ui-badge wrap variant="outline" class="text-xs font-medium"> Electronic Entry Summary · ACE Verified </span> </div> </div> <div ui-card-content> <div class="grid grid-cols-1 gap-6 lg:grid-cols-12"> <div class="space-y-4 lg:col-span-7"> <div class="space-y-3 text-sm"> <div class="flex flex-wrap items-center justify-between gap-2"> <div> <span class="text-foreground font-medium">Total Customs Value</span> <p class="text-muted-foreground text-xs">FOB Port of Origin basis under 19 U.S.C. 1401a</p> </div> <span class="text-foreground font-semibold tabular-nums">$124,500.00 USD</span> </div> <ui-separator /> <div class="flex flex-wrap items-center justify-between gap-2"> <div> <div class="flex items-center gap-2"> <span class="text-foreground font-medium">Total Duty Assessed</span> <span ui-badge wrap variant="secondary" class="px-1.5 py-0 text-xs font-medium">Tariff 3.4%</span> </div> <p class="text-muted-foreground text-xs">HTSUS Column 1 General Rate (8518 / 8544)</p> </div> <span class="text-foreground font-medium tabular-nums">$4,233.00</span> </div> <div class="flex flex-wrap items-center justify-between gap-2"> <div> <div class="flex items-center gap-2"> <span class="text-foreground font-medium">Merchandise Processing Fee (MPF)</span> <span ui-badge wrap variant="outline" class="px-1.5 py-0 text-xs font-medium">Max Capped</span> </div> <p class="text-muted-foreground text-xs">0.3464% ad valorem (statutory max $614.35 applies)</p> </div> <span class="text-foreground font-medium tabular-nums">$614.35</span> </div> <div class="flex flex-wrap items-center justify-between gap-2"> <div> <div class="flex items-center gap-2"> <span class="text-foreground font-medium">Harbor Maintenance Fee (HMF)</span> <span ui-badge wrap variant="outline" class="px-1.5 py-0 text-xs font-medium"> Port of Long Beach </span> </div> <p class="text-muted-foreground text-xs">0.1250% of entered commercial port value</p> </div> <span class="text-foreground font-medium tabular-nums">$155.63</span> </div> <ui-separator /> <div class="flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 pt-1"> <div> <span class="text-foreground text-base font-bold sm:text-lg">Total Paid to US Customs</span> <p class="text-muted-foreground text-xs">Duty + MPF + HMF full remittance</p> </div> <span class="text-foreground font-mono text-2xl font-bold tabular-nums sm:text-3xl"> $5,002.98 </span> </div> </div> </div> <div class="space-y-4 lg:col-span-5"> <div class="border-border bg-muted/30 space-y-3.5 rounded-lg border p-4 text-xs shadow-2xs"> <div class="flex items-center justify-between"> <div class="flex items-center gap-2"> <lucide-icon [img]="CreditCard" class="text-primary size-4" aria-hidden="true" /> <span class="text-foreground text-sm font-semibold">Payment & Settlement</span> </div> <span ui-badge wrap variant="success" class="gap-1 px-2 py-0.5 text-xs font-semibold"> <lucide-icon [img]="CheckCircle2" class="size-3" aria-hidden="true" /> Settled </span> </div> <div class="space-y-2 text-xs"> <div class="flex items-center justify-between"> <span class="text-muted-foreground">Payment Method:</span> <span class="text-foreground font-mono font-medium">Automated Clearinghouse ACH •••• 9210</span> </div> <div class="flex items-center justify-between"> <span class="text-muted-foreground">Settlement Date:</span> <span class="text-foreground font-mono font-medium tabular-nums">Aug 19, 2026 · 16:00 EST</span> </div> <div class="flex items-center justify-between"> <span class="text-muted-foreground">CBP Statement Ref:</span> <span class="text-foreground font-mono font-medium">CBP-STMT-2026-88319</span> </div> <div class="flex items-center justify-between"> <span class="text-muted-foreground">Customs Bond:</span> <span class="text-foreground font-medium">Continuous Bond ($50,000)</span> </div> <div class="flex items-center justify-between"> <span class="text-muted-foreground">Surety Code:</span> <span class="text-foreground font-mono font-medium">Surety 892 · Policy #CB-882190</span> </div> </div> <div class="border-border/60 border-t pt-2.5"> <p class="text-muted-foreground text-xs leading-relaxed"> Entry summary transmitted pursuant to 19 CFR § 141.68. Liquidation occurs 314 days from date of entry unless extended by CBP. </p> </div> </div> </div> </div> </div> </div> <!-- Declared Commodity Line Items Table Card --> <div ui-card class="border shadow-xs"> <div ui-card-header class="pb-3"> <div class="flex flex-wrap items-center justify-between gap-2"> <div> <h3 ui-card-title class="text-base font-semibold">Declared Commodity Line Items</h3> <p ui-card-description class="text-xs sm:text-sm"> Harmonized Tariff Schedule of the United States (HTSUS) classifications and entered commercial valuation. </p> </div> <span ui-badge wrap variant="outline" class="text-xs tabular-nums"> 3 Line Items Declared </span> </div> </div> <div ui-card-content class="p-0"> <div class="overflow-x-auto"> <table ui-table> <thead ui-table-header> <tr ui-table-row> <th ui-table-head class="w-[8%]">Line</th> <th ui-table-head class="w-[18%]">HS Code</th> <th ui-table-head class="w-[10%] text-center">Origin</th> <th ui-table-head class="w-[30%]">Commodity Description</th> <th ui-table-head class="text-right">Quantity</th> <th ui-table-head class="text-right">Unit Value</th> <th ui-table-head class="text-right">Entered Value</th> <th ui-table-head class="text-center">Tariff Rate</th> <th ui-table-head class="text-right">Assessed Duty</th> </tr> </thead> <tbody ui-table-body> @for (item of lineItems; track item.line) { <tr ui-table-row> <td ui-table-cell class="text-muted-foreground font-mono text-xs font-semibold"> {{ item.line }} </td> <td ui-table-cell> <div class="flex items-center gap-1.5"> <span class="text-foreground font-mono text-xs font-bold">{{ item.hsCode }}</span> </div> </td> <td ui-table-cell class="text-center"> <span ui-badge wrap variant="secondary" class="font-mono text-xs font-semibold"> {{ item.origin }} </span> </td> <td ui-table-cell> <div class="text-foreground text-xs font-medium sm:text-sm">{{ item.description }}</div> </td> <td ui-table-cell class="text-foreground text-right text-xs font-medium tabular-nums"> {{ item.quantity }} </td> <td ui-table-cell class="text-muted-foreground text-right font-mono text-xs tabular-nums"> {{ item.unitValue }} </td> <td ui-table-cell class="text-foreground text-right font-mono text-xs font-semibold tabular-nums"> {{ item.totalValue }} </td> <td ui-table-cell class="text-center"> <span ui-badge wrap variant="outline" class="text-xs font-semibold tabular-nums"> {{ item.dutyRate }} </span> </td> <td ui-table-cell class="text-success text-success text-right font-mono text-xs font-bold tabular-nums" > {{ item.dutyAmount }} </td> </tr> } </tbody> <tfoot ui-table-footer> <tr ui-table-row class="font-medium"> <td ui-table-cell colspan="4">Total Declared Line Items (3 Commodities)</td> <td ui-table-cell class="text-foreground text-right text-xs font-bold tabular-nums">5,220 pcs</td> <td ui-table-cell class="text-muted-foreground text-right text-xs">—</td> <td ui-table-cell class="text-foreground text-right font-mono text-xs font-bold tabular-nums"> $124,500.00 </td> <td ui-table-cell class="text-center"> <span ui-badge wrap variant="secondary" class="text-xs font-semibold">3.4% Blended</span> </td> <td ui-table-cell class="text-success text-success text-right font-mono text-xs font-bold tabular-nums" > $4,233.00 </td> </tr> </tfoot> </table> </div> </div> </div> </div> `, }) export class UiCustomsClearanceTrackerComponent { protected readonly Anchor = Anchor protected readonly Check = Check protected readonly CheckCircle2 = CheckCircle2 protected readonly CreditCard = CreditCard protected readonly Download = Download protected readonly FileCheck2 = FileCheck2 protected readonly FileText = FileText protected readonly Printer = Printer protected readonly Receipt = Receipt protected readonly Scale = Scale protected readonly ShieldCheck = ShieldCheck protected readonly Ship = Ship protected readonly stages = clearanceStages protected readonly lineItems = commodityLineItems @Input('class') className?: string get rootClass(): string { return cn('w-full space-y-6', this.className) } }src/app/components/blocks/customs-clearance-tracker/index.ts0.1 kB
export { UiCustomsClearanceTrackerComponent } from './customs-clearance-tracker.component'
Raw manifest:https://uipkge.dev/r/angular/customs-clearance-tracker.json