{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "freight-quote-calculator", "title": "Freight Quote Calculator", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/freight-quote-calculator/freight-quote-calculator.component.ts", "content": "// Multimodal Air, Ocean, and Ground freight rate estimator with CBM volumetric weight\n// calculation, dynamic route pricing, value-added services, and live comparison quotes.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowLeftRight,\n ArrowRight,\n Boxes,\n Check,\n CheckCircle2,\n Clock,\n Download,\n FileText,\n Info,\n Leaf,\n LucideAngularModule,\n Package,\n Plane,\n Scale,\n Ship,\n Truck,\n Zap,\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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiCheckboxComponent } from '@/ui/checkbox/checkbox.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type FreightMode = 'ocean-fcl' | 'ocean-lcl' | 'air' | 'ground'\n\ninterface PortOption {\n code: string\n name: string\n}\n\ninterface CurrencyConfig {\n code: string\n symbol: string\n label: string\n rate: number\n}\n\nconst ORIGIN_PORTS: PortOption[] = [\n { code: 'CNSHA', name: 'Shanghai Port (CNSHA)' },\n { code: 'CNNGB', name: 'Ningbo-Zhoushan Port (CNNGB)' },\n { code: 'SGSIN', name: 'Port of Singapore (SGSIN)' },\n { code: 'DEHAM', name: 'Port of Hamburg (DEHAM)' },\n { code: 'NLRTM', name: 'Port of Rotterdam (NLRTM)' },\n { code: 'JPTYO', name: 'Port of Tokyo (JPTYO)' },\n]\n\nconst DESTINATION_PORTS: PortOption[] = [\n { code: 'USLAX', name: 'Port of Los Angeles (USLAX)' },\n { code: 'USNYC', name: 'Port of New York & New Jersey (USNYC)' },\n { code: 'USORD', name: 'Chicago O’Hare Logistics Hub (USORD)' },\n { code: 'GBFXT', name: 'Port of Felixstowe (GBFXT)' },\n { code: 'AUMEL', name: 'Port of Melbourne (AUMEL)' },\n { code: 'AEJEA', name: 'Jebel Ali Port (AEJEA)' },\n]\n\nconst CURRENCIES: Record = {\n USD: { code: 'USD', symbol: '$', label: 'USD ($)', rate: 1.0 },\n EUR: { code: 'EUR', symbol: '€', label: 'EUR (€)', rate: 0.92 },\n GBP: { code: 'GBP', symbol: '£', label: 'GBP (£)', rate: 0.79 },\n CNY: { code: 'CNY', symbol: '¥', label: 'CNY (¥)', rate: 7.23 },\n SGD: { code: 'SGD', symbol: 'S$', label: 'SGD (S$)', rate: 1.34 },\n}\n\nconst CURRENCY_LIST = [\n CURRENCIES['USD']!,\n CURRENCIES['EUR']!,\n CURRENCIES['GBP']!,\n CURRENCIES['CNY']!,\n CURRENCIES['SGD']!,\n]\n\nconst CUSTOMS_USD = 150\nconst INSURANCE_USD = 85\nconst LIFTGATE_USD = 50\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-freight-quote-calculator, [ui-freight-quote-calculator]',\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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCheckboxComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n
\n \n \n Multimodal Logistics\n \n Spot Rates Live\n
\n

\n Freight Rate & Cargo Quote Calculator\n

\n

\n Compare spot rates across Ocean FCL/LCL, Air Freight, and Ground Trucking with instant CBM volumetric\n analysis.\n

\n
\n
\n Currency:\n \n \n \n @for (curr of currencyList; track curr.code) {\n {{ curr.label }}\n }\n \n \n
\n
\n\n
\n \n
\n \n
\n
\n
\n

1. Shipping Route

\n International Corridors\n
\n

Select origin loading port and destination discharge terminal.

\n
\n
\n
\n
\n \n \n \n \n @for (p of originPorts; track p.code) {\n {{ p.name }}\n }\n \n \n
\n
\n \n \n \n
\n
\n \n \n \n \n @for (p of destinationPorts; track p.code) {\n {{ p.name }}\n }\n \n \n
\n
\n \n
\n \n Transpacific Direct Corridor\n
\n Distance: ~5,800 NM (10,740 km)\n
\n
\n
\n\n \n
\n
\n
\n

2. Cargo Freight Mode

\n Select primary transport\n
\n

\n Choose your preferred multimodal transit mode to evaluate rates.\n

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

3. Cargo Dimensions & Volumetric Weight

\n \n \n IATA 1:6 Standard\n \n
\n

\n Enter pallet quantity, unit dimensions, and individual gross weight.\n

\n
\n
\n
\n
\n \n
\n \n pal\n
\n
\n
\n \n
\n \n cm\n
\n
\n
\n \n
\n \n cm\n
\n
\n
\n \n
\n \n cm\n
\n
\n
\n \n
\n \n kg\n
\n
\n
\n\n
\n
\n \n \n Cargo Metric Computations\n \n Standard Euro/US Pallet Basis\n
\n
\n
\n
Total Volume
\n
\n {{ totalVolumeCbm().toFixed(2) }}\n CBM\n
\n
\n {{ singlePalletVolumeCbm().toFixed(2) }} m³ / unit\n
\n
\n
\n
Actual Gross Wt.
\n
\n {{ totalGrossWeightKg().toLocaleString('en-US') }}\n kg\n
\n
{{ pallets() }} × {{ grossWeightKg() }} kg
\n
\n
\n
Chargeable Wt. (Air)
\n
\n {{ airVolumetricWeightKg().toLocaleString('en-US') }}\n kg\n
\n
Volumetric (1:6000)
\n
\n
\n
Ocean Revenue Ton
\n
\n {{ oceanRevenueTon().toFixed(2) }}\n RT\n
\n
Max(CBM, Weight/T)
\n
\n
\n

\n \n \n Computed Total Volume ({{ totalVolumeCbm().toFixed(2) }} CBM) & Chargeable Weight ({{\n airVolumetricWeightKg().toLocaleString('en-US')\n }}\n kg) apply dynamically to quotes.\n \n

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

4. Value-Added Freight Services

\n Optional Add-ons\n
\n

\n Enhance shipment handling with customs, all-risk insurance, and destination equipment.\n

\n
\n
\n \n
\n \n
\n
\n Customs Clearance\n +{{ formatMoney(customsUsd) }}\n
\n

\n Export filing, ISF 10+2 documentation, automated customs broker import clearance.\n

\n
\n
\n \n \n
\n \n
\n
\n All-Risk Cargo Insurance\n +{{ formatMoney(insuranceUsd) }}\n
\n

\n Comprehensive door-to-door insurance coverage up to $100,000 against damage or loss.\n

\n
\n
\n \n \n
\n \n
\n
\n Liftgate at Delivery\n +{{ formatMoney(liftgateUsd) }}\n
\n

\n Hydraulic liftgate truck delivery for destinations without a dedicated loading dock.\n

\n
\n
\n \n
\n
\n
\n\n \n
\n
\n
\n
\n Instant Spot Rates\n \n \n Live Quote\n \n
\n
\n
\n {{ origin() }}\n \n {{ destination() }}\n
\n {{ pallets() }} Pallets · {{ totalVolumeCbm().toFixed(2) }} CBM\n
\n
\n
Total Estimated Landed Freight Cost
\n
\n {{\n formatMoney(activeTotalPriceUsd())\n }}\n ({{ selectedCurrency() }})\n
\n
\n \n \n Transit: {{ activeTransitTime() }}\n \n ·\n \n \n Est. {{ activeCarbonEmission() }}\n \n
\n
\n
\n
\n
\n Compare Multimodal Options:\n
\n
\n
\n \n
\n
\n Ocean FCL (20ft Container)\n Recommended\n
\n
Transit: 14-18 days · 1.2 tCO2
\n
\n
\n
\n
\n {{ formatMoney(oceanFclBaseUsd() + addonsTotalUsd()) }}\n
\n
Port-to-Port
\n
\n
\n
\n
\n
\n
\n \n
\n
\n Ocean LCL (Shared)\n Economy\n
\n
Transit: 18-22 days · 0.8 tCO2
\n
\n
\n
\n
\n {{ formatMoney(oceanLclBaseUsd() + addonsTotalUsd()) }}\n
\n
CFS-to-CFS
\n
\n
\n
\n
\n
\n
\n \n
\n
\n Express Air Freight\n Fastest\n
\n
Transit: 3-5 days · 4.8 tCO2
\n
\n
\n
\n
\n {{ formatMoney(airFreightBaseUsd() + addonsTotalUsd()) }}\n
\n
Airport-to-Airport
\n
\n
\n
\n
\n \n
\n Itemized Breakdown\n
\n
\n Base Freight Carrier Rate\n {{\n formatMoney(activeBasePriceUsd())\n }}\n
\n @if (addCustoms()) {\n
\n Customs Clearance Service\n +{{ formatMoney(customsUsd) }}\n
\n }\n @if (addInsurance()) {\n
\n All-Risk Cargo Insurance\n +{{ formatMoney(insuranceUsd) }}\n
\n }\n @if (addLiftgate()) {\n
\n Destination Liftgate Equipment\n +{{ formatMoney(liftgateUsd) }}\n
\n }\n
\n Bunker / Fuel Surcharge (BAF)\n Included\n
\n
\n
\n \n
    \n
  • \n \n Rate locked for 7 calendar days\n
    • \n
  • \n \n IATA & FMC compliant licensed forwarders\n
    • \n
  • \n \n Automated EDI customs documentation & bill of lading\n
    • \n
\n
\n
\n \n \n @if (!isDownloading()) {\n \n } @else {\n \n }\n {{ isDownloading() ? 'Generating PDF Manifest...' : 'Download Detailed Quote PDF' }}\n \n
\n
\n
\n
\n
\n `,\n})\nexport class UiFreightQuoteCalculatorComponent {\n protected readonly ArrowLeftRight = ArrowLeftRight\n protected readonly ArrowRight = ArrowRight\n protected readonly Boxes = Boxes\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Download = Download\n protected readonly FileText = FileText\n protected readonly Info = Info\n protected readonly Leaf = Leaf\n protected readonly Package = Package\n protected readonly Plane = Plane\n protected readonly Scale = Scale\n protected readonly Ship = Ship\n protected readonly Truck = Truck\n protected readonly Zap = Zap\n\n protected readonly originPorts = ORIGIN_PORTS\n protected readonly destinationPorts = DESTINATION_PORTS\n protected readonly currencyList = CURRENCY_LIST\n protected readonly customsUsd = CUSTOMS_USD\n protected readonly insuranceUsd = INSURANCE_USD\n protected readonly liftgateUsd = LIFTGATE_USD\n\n @Input() set initialOrigin(v: string) {\n if (v) this.origin.set(v)\n }\n @Input() set initialDestination(v: string) {\n if (v) this.destination.set(v)\n }\n @Input() set initialPallets(v: number | string) {\n const n = Number(v)\n if (n !== undefined && n !== null && !Number.isNaN(n)) this.pallets.set(n)\n }\n @Input() set initialLengthCm(v: number | string) {\n const n = Number(v)\n if (n !== undefined && n !== null && !Number.isNaN(n)) this.lengthCm.set(n)\n }\n @Input() set initialWidthCm(v: number | string) {\n const n = Number(v)\n if (n !== undefined && n !== null && !Number.isNaN(n)) this.widthCm.set(n)\n }\n @Input() set initialHeightCm(v: number | string) {\n const n = Number(v)\n if (n !== undefined && n !== null && !Number.isNaN(n)) this.heightCm.set(n)\n }\n @Input() set initialGrossWeightKg(v: number | string) {\n const n = Number(v)\n if (n !== undefined && n !== null && !Number.isNaN(n)) this.grossWeightKg.set(n)\n }\n @Input() set initialCurrency(v: string) {\n if (v) this.selectedCurrency.set(v)\n }\n @Input('class') className?: string\n\n readonly origin = signal('CNSHA')\n readonly destination = signal('USLAX')\n readonly pallets = signal(6)\n readonly lengthCm = signal(120)\n readonly widthCm = signal(80)\n readonly heightCm = signal(160)\n readonly grossWeightKg = signal(400)\n readonly selectedCurrency = signal('USD')\n\n readonly addCustoms = signal(false)\n readonly addInsurance = signal(false)\n readonly addLiftgate = signal(false)\n\n readonly selectedMode = signal('ocean-fcl')\n readonly isBooked = signal(false)\n readonly isDownloading = signal(false)\n private bookTimer: ReturnType | undefined\n private downloadTimer: ReturnType | undefined\n\n readonly singlePalletVolumeCbm = computed(() => {\n const l = Number(this.lengthCm()) || 0\n const w = Number(this.widthCm()) || 0\n const h = Number(this.heightCm()) || 0\n return (l * w * h) / 1_000_000\n })\n readonly totalVolumeCbm = computed(() => (Number(this.pallets()) || 0) * this.singlePalletVolumeCbm())\n readonly totalGrossWeightKg = computed(() => (Number(this.pallets()) || 0) * (Number(this.grossWeightKg()) || 0))\n readonly airVolumetricWeightKg = computed(() => Math.round(this.totalVolumeCbm() * (1000 / 6)))\n readonly oceanRevenueTon = computed(() => Math.max(this.totalVolumeCbm(), this.totalGrossWeightKg() / 1000))\n readonly fclContainersCount = computed(() => Math.max(1, Math.ceil((Number(this.pallets()) || 0) / 10)))\n readonly oceanFclBaseUsd = computed(() => this.fclContainersCount() * 2850)\n readonly oceanLclBaseUsd = computed(() => Math.round((this.totalVolumeCbm() || 1) * 140 + 130))\n readonly airFreightBaseUsd = computed(() => Math.round((this.airVolumetricWeightKg() || 100) * 4.18))\n readonly groundFreightBaseUsd = computed(() => (Number(this.pallets()) || 1) * 265)\n readonly addonsTotalUsd = computed(\n () =>\n (this.addCustoms() ? CUSTOMS_USD : 0) +\n (this.addInsurance() ? INSURANCE_USD : 0) +\n (this.addLiftgate() ? LIFTGATE_USD : 0),\n )\n readonly activeBasePriceUsd = computed(() => {\n switch (this.selectedMode()) {\n case 'ocean-fcl':\n return this.oceanFclBaseUsd()\n case 'ocean-lcl':\n return this.oceanLclBaseUsd()\n case 'air':\n return this.airFreightBaseUsd()\n case 'ground':\n return this.groundFreightBaseUsd()\n }\n })\n readonly activeTotalPriceUsd = computed(() => this.activeBasePriceUsd() + this.addonsTotalUsd())\n readonly activeTransitTime = computed(() => {\n switch (this.selectedMode()) {\n case 'ocean-fcl':\n return '14-18 days'\n case 'ocean-lcl':\n return '18-22 days'\n case 'air':\n return '3-5 days'\n case 'ground':\n return '5-7 days'\n }\n })\n readonly activeCarbonEmission = computed(() => {\n switch (this.selectedMode()) {\n case 'ocean-fcl':\n return `${(1.2 * this.fclContainersCount()).toFixed(1)} tCO2`\n case 'ocean-lcl':\n return `${(this.totalVolumeCbm() * 0.087).toFixed(1)} tCO2`\n case 'air':\n return `${(this.airVolumetricWeightKg() * 0.003125).toFixed(1)} tCO2`\n case 'ground':\n return `${(Number(this.pallets()) * 0.26).toFixed(1)} tCO2`\n }\n })\n\n get rootClass(): string {\n return cn('mx-auto w-full max-w-6xl space-y-8 p-4 sm:p-6 lg:p-8', this.className)\n }\n\n modeCardClass(mode: FreightMode): string {\n return cn(\n 'border-border focus-visible:ring-ring relative flex flex-col justify-between gap-3 rounded-lg border p-3.5 text-left transition-colors outline-none focus-visible:ring-2',\n this.selectedMode() === mode\n ? 'border-primary bg-primary/5 ring-primary ring-1'\n : 'hover:border-border/80 hover:bg-muted/30 bg-card',\n )\n }\n\n quoteOptionClass(mode: FreightMode): string {\n return cn(\n 'border-border hover:border-primary/50 cursor-pointer rounded-lg border p-3 transition-colors',\n this.selectedMode() === mode ? 'border-primary bg-primary/5 ring-primary ring-1' : 'bg-card',\n )\n }\n\n formatMoney(amountInUsd: number): string {\n const current = CURRENCIES[this.selectedCurrency()] ?? CURRENCIES['USD']!\n const converted = amountInUsd * current.rate\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: current.code,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(converted)\n }\n\n swapRoute(): void {\n const prev = this.origin()\n this.origin.set(this.destination())\n this.destination.set(prev)\n }\n\n setPallets(raw: string | number): void {\n this.pallets.set(Math.max(1, parseInt(String(raw), 10) || 1))\n }\n setLengthCm(raw: string | number): void {\n this.lengthCm.set(Math.max(1, parseInt(String(raw), 10) || 1))\n }\n setWidthCm(raw: string | number): void {\n this.widthCm.set(Math.max(1, parseInt(String(raw), 10) || 1))\n }\n setHeightCm(raw: string | number): void {\n this.heightCm.set(Math.max(1, parseInt(String(raw), 10) || 1))\n }\n setGrossWeightKg(raw: string | number): void {\n this.grossWeightKg.set(Math.max(1, parseInt(String(raw), 10) || 1))\n }\n\n handleBookQuote(): void {\n this.isBooked.set(true)\n clearTimeout(this.bookTimer)\n this.bookTimer = setTimeout(() => this.isBooked.set(false), 3500)\n }\n\n handleDownloadPdf(): void {\n this.isDownloading.set(true)\n clearTimeout(this.downloadTimer)\n this.downloadTimer = setTimeout(() => this.isDownloading.set(false), 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/freight-quote-calculator/freight-quote-calculator.component.ts" }, { "path": "packages/registry-angular/blocks/freight-quote-calculator/index.ts", "content": "export { UiFreightQuoteCalculatorComponent, type FreightMode } from './freight-quote-calculator.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/freight-quote-calculator/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/checkbox.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Multimodal Air, Ocean, and Ground freight rate estimator with CBM volumetric weight calculation, dynamic route pricing, value-added services, and live comparison quotes.", "categories": [ "logistics", "calculator" ] }