{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "freight-quote-calculator", "title": "Freight Quote Calculator", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/freight-quote-calculator/FreightQuoteCalculator.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n ArrowLeftRight,\n ArrowRight,\n Boxes,\n Check,\n CheckCircle2,\n Clock,\n Download,\n FileText,\n Info,\n Leaf,\n Package,\n Plane,\n Scale,\n Ship,\n Truck,\n Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\n\nexport interface FreightQuoteCalculatorProps {\n initialOrigin?: string\n initialDestination?: string\n initialPallets?: number\n initialLengthCm?: number\n initialWidthCm?: number\n initialHeightCm?: number\n initialGrossWeightKg?: number\n initialCurrency?: string\n className?: string\n}\n\n// Route Ports & Hubs\nconst ORIGIN_PORTS = [\n { code: 'CNSHA', name: 'Shanghai Port (CNSHA)', country: 'China', type: 'Marine & Air' },\n { code: 'CNNGB', name: 'Ningbo-Zhoushan Port (CNNGB)', country: 'China', type: 'Marine Port' },\n { code: 'SGSIN', name: 'Port of Singapore (SGSIN)', country: 'Singapore', type: 'Hub Port' },\n { code: 'DEHAM', name: 'Port of Hamburg (DEHAM)', country: 'Germany', type: 'Marine & Rail' },\n { code: 'NLRTM', name: 'Port of Rotterdam (NLRTM)', country: 'Netherlands', type: 'Main Gateway' },\n { code: 'JPTYO', name: 'Port of Tokyo (JPTYO)', country: 'Japan', type: 'Marine & Air' },\n]\n\nconst DESTINATION_PORTS = [\n { code: 'USLAX', name: 'Port of Los Angeles (USLAX)', country: 'United States', type: 'West Coast Gateway' },\n { code: 'USNYC', name: 'Port of New York & New Jersey (USNYC)', country: 'United States', type: 'East Coast Hub' },\n { code: 'USORD', name: 'Chicago O’Hare Logistics Hub (USORD)', country: 'United States', type: 'Inland Hub' },\n { code: 'GBFXT', name: 'Port of Felixstowe (GBFXT)', country: 'United Kingdom', type: 'Deep Sea Port' },\n { code: 'AUMEL', name: 'Port of Melbourne (AUMEL)', country: 'Australia', type: 'Marine Port' },\n { code: 'AEJEA', name: 'Jebel Ali Port (AEJEA)', country: 'United Arab Emirates', type: 'Middle East Hub' },\n]\n\n// Currencies\ninterface CurrencyConfig {\n code: string\n symbol: string\n label: string\n rate: number\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 CUSTOMS_USD = 150\nconst INSURANCE_USD = 85\nconst LIFTGATE_USD = 50\n\ntype FreightMode = 'ocean-fcl' | 'ocean-lcl' | 'air' | 'ground'\n\nexport function FreightQuoteCalculator({\n initialOrigin = 'CNSHA',\n initialDestination = 'USLAX',\n initialPallets = 6,\n initialLengthCm = 120,\n initialWidthCm = 80,\n initialHeightCm = 160,\n initialGrossWeightKg = 400,\n initialCurrency = 'USD',\n className,\n}: FreightQuoteCalculatorProps) {\n const [origin, setOrigin] = React.useState(initialOrigin)\n const [destination, setDestination] = React.useState(initialDestination)\n const [pallets, setPallets] = React.useState(initialPallets)\n const [lengthCm, setLengthCm] = React.useState(initialLengthCm)\n const [widthCm, setWidthCm] = React.useState(initialWidthCm)\n const [heightCm, setHeightCm] = React.useState(initialHeightCm)\n const [grossWeightKg, setGrossWeightKg] = React.useState(initialGrossWeightKg)\n const [selectedCurrency, setSelectedCurrency] = React.useState(initialCurrency)\n\n const [addCustoms, setAddCustoms] = React.useState(false)\n const [addInsurance, setAddInsurance] = React.useState(false)\n const [addLiftgate, setAddLiftgate] = React.useState(false)\n\n const [selectedMode, setSelectedMode] = React.useState('ocean-fcl')\n const [isBooked, setIsBooked] = React.useState(false)\n const [isDownloading, setIsDownloading] = React.useState(false)\n\n const swapRoute = () => {\n setOrigin((prev) => {\n const next = destination\n setDestination(prev)\n return next\n })\n }\n\n // Calculations\n const singlePalletVolumeCbm = React.useMemo(() => {\n const l = Number(lengthCm) || 0\n const w = Number(widthCm) || 0\n const h = Number(heightCm) || 0\n return (l * w * h) / 1_000_000\n }, [lengthCm, widthCm, heightCm])\n\n const totalVolumeCbm = React.useMemo(() => {\n const count = Number(pallets) || 0\n return count * singlePalletVolumeCbm\n }, [pallets, singlePalletVolumeCbm])\n\n const totalGrossWeightKg = React.useMemo(() => {\n const count = Number(pallets) || 0\n const unitWeight = Number(grossWeightKg) || 0\n return count * unitWeight\n }, [pallets, grossWeightKg])\n\n const airVolumetricWeightKg = React.useMemo(() => {\n return Math.round(totalVolumeCbm * (1000 / 6))\n }, [totalVolumeCbm])\n\n const currentCurrency = CURRENCIES[selectedCurrency] ?? CURRENCIES.USD\n\n const formatMoney = React.useCallback(\n (amountInUsd: number): string => {\n const converted = amountInUsd * currentCurrency.rate\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: currentCurrency.code,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }).format(converted)\n },\n [currentCurrency],\n )\n\n const fclContainersCount = Math.max(1, Math.ceil(pallets / 10))\n\n const oceanFclBaseUsd = fclContainersCount * 2850\n const oceanLclBaseUsd = Math.round((totalVolumeCbm || 1) * 140 + 130)\n const airFreightBaseUsd = Math.round((airVolumetricWeightKg || 100) * 4.18)\n const groundFreightBaseUsd = (Number(pallets) || 1) * 265\n\n const addonsTotalUsd =\n (addCustoms ? CUSTOMS_USD : 0) + (addInsurance ? INSURANCE_USD : 0) + (addLiftgate ? LIFTGATE_USD : 0)\n\n const activeBasePriceUsd = React.useMemo(() => {\n switch (selectedMode) {\n case 'ocean-fcl':\n return oceanFclBaseUsd\n case 'ocean-lcl':\n return oceanLclBaseUsd\n case 'air':\n return airFreightBaseUsd\n case 'ground':\n return groundFreightBaseUsd\n default:\n return oceanFclBaseUsd\n }\n }, [selectedMode, oceanFclBaseUsd, oceanLclBaseUsd, airFreightBaseUsd, groundFreightBaseUsd])\n\n const activeTotalPriceUsd = activeBasePriceUsd + addonsTotalUsd\n\n const activeTransitTime = React.useMemo(() => {\n switch (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 }, [selectedMode])\n\n const activeCarbonEmission = React.useMemo(() => {\n switch (selectedMode) {\n case 'ocean-fcl':\n return `${(1.2 * fclContainersCount).toFixed(1)} tCO2`\n case 'ocean-lcl':\n return `${(totalVolumeCbm * 0.087).toFixed(1)} tCO2`\n case 'air':\n return `${(airVolumetricWeightKg * 0.003125).toFixed(1)} tCO2`\n case 'ground':\n return `${(pallets * 0.26).toFixed(1)} tCO2`\n }\n }, [selectedMode, fclContainersCount, totalVolumeCbm, airVolumetricWeightKg, pallets])\n\n const handleBookQuote = () => {\n setIsBooked(true)\n setTimeout(() => {\n setIsBooked(false)\n }, 3500)\n }\n\n const handleDownloadPdf = () => {\n setIsDownloading(true)\n setTimeout(() => {\n setIsDownloading(false)\n }, 2000)\n }\n\n return (\n \n {/* Header Section */}\n
\n
\n
\n \n \n Multimodal Logistics\n \n \n Spot Rates Live\n \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 Selector */}\n
\n Currency:\n \n
\n
\n\n {/* Main 2-Column Layout */}\n
\n {/* Left Column: Input Form & Volumetric Calculator (7 cols) */}\n
\n {/* 1. Route Configuration Card */}\n \n \n
\n 1. Shipping Route\n International Corridors\n
\n \n Select origin loading port and destination discharge terminal.\n \n \n \n
\n {/* Origin */}\n
\n \n \n
\n\n {/* Swap Button */}\n
\n \n \n \n
\n\n {/* Destination */}\n
\n \n \n
\n
\n\n {/* Route Info Banner */}\n
\n
\n \n Transpacific Direct Corridor\n
\n Distance: ~5,800 NM (10,740 km)\n
\n \n \n\n {/* 2. Cargo Type & Mode Selector */}\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 {/* Ocean FCL */}\n setSelectedMode('ocean-fcl')}\n >\n
\n
\n \n
\n \n Recommended\n \n
\n
\n
Ocean FCL (Full Container)
\n
\n 20ft / 40ft dedicated sea freight container\n
\n
\n
\n Est. Transit: 14-18 days\n {formatMoney(oceanFclBaseUsd)}\n
\n \n\n {/* Ocean LCL */}\n setSelectedMode('ocean-lcl')}\n >\n
\n
\n \n
\n \n Economy\n \n
\n
\n
Ocean LCL (Shared)
\n
\n Consolidated sea freight priced by CBM volume\n
\n
\n
\n Est. Transit: 18-22 days\n {formatMoney(oceanLclBaseUsd)}\n
\n \n\n {/* Express Air Freight */}\n setSelectedMode('air')}\n >\n
\n
\n \n
\n \n Fastest\n \n
\n
\n
Express Air Freight
\n
\n Priority belly/freighter aircraft dispatch\n
\n
\n
\n Est. Transit: 3-5 days\n {formatMoney(airFreightBaseUsd)}\n
\n \n\n {/* Ground Freight */}\n setSelectedMode('ground')}\n >\n
\n
\n \n
\n \n Overland\n \n
\n
\n
Ground Freight
\n
\n Regional linehaul, FTL & pallet LTL trucking\n
\n
\n
\n Est. Transit: 5-7 days\n \n {formatMoney(groundFreightBaseUsd)}\n \n
\n \n
\n \n \n\n {/* 3. Package Dimensions & Volumetric CBM Calculator */}\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 {/* Dimensions Inputs Grid */}\n
\n
\n \n
\n setPallets(Math.max(1, parseInt(e.target.value, 10) || 1))}\n type=\"number\"\n min=\"1\"\n max=\"100\"\n className=\"pr-8 text-xs tabular-nums\"\n />\n \n pal\n \n
\n
\n\n
\n \n
\n setLengthCm(Math.max(1, parseInt(e.target.value, 10) || 1))}\n type=\"number\"\n min=\"10\"\n max=\"1000\"\n className=\"pr-8 text-xs tabular-nums\"\n />\n \n cm\n \n
\n
\n\n
\n \n
\n setWidthCm(Math.max(1, parseInt(e.target.value, 10) || 1))}\n type=\"number\"\n min=\"10\"\n max=\"1000\"\n className=\"pr-8 text-xs tabular-nums\"\n />\n \n cm\n \n
\n
\n\n
\n \n
\n setHeightCm(Math.max(1, parseInt(e.target.value, 10) || 1))}\n type=\"number\"\n min=\"10\"\n max=\"1000\"\n className=\"pr-8 text-xs tabular-nums\"\n />\n \n cm\n \n
\n
\n\n
\n \n
\n setGrossWeightKg(Math.max(1, parseInt(e.target.value, 10) || 1))}\n type=\"number\"\n min=\"1\"\n max=\"5000\"\n className=\"pr-8 text-xs tabular-nums\"\n />\n \n kg\n \n
\n
\n
\n\n {/* Computed Volumetric Display Cards */}\n
\n
\n \n \n Cargo Metric Computations\n \n Standard Euro/US Pallet Basis\n
\n\n
\n {/* Metric 1: Total Volume */}\n
\n
Total Volume
\n
\n {totalVolumeCbm.toFixed(2)} CBM\n
\n
\n {singlePalletVolumeCbm.toFixed(2)} m³ / unit\n
\n
\n\n {/* Metric 2: Actual Gross Weight */}\n
\n
Actual Gross Wt.
\n
\n {totalGrossWeightKg.toLocaleString('en-US')}{' '}\n kg\n
\n
\n {pallets} × {grossWeightKg} kg\n
\n
\n\n {/* Metric 3: Air Volumetric Weight */}\n
\n
Chargeable Wt. (Air)
\n
\n {airVolumetricWeightKg.toLocaleString('en-US')}{' '}\n kg\n
\n
Volumetric (1:6000)
\n
\n\n {/* Metric 4: Ocean Revenue Ton */}\n
\n
Ocean Revenue Ton
\n
\n {Math.max(totalVolumeCbm, totalGrossWeightKg / 1000).toFixed(2)}{' '}\n RT\n
\n
Max(CBM, Weight/T)
\n
\n
\n\n {/* Note */}\n

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

\n
\n \n \n\n {/* 4. Value-Added Services */}\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 {/* Service 1: Customs Clearance */}\n \n\n {/* Service 2: Cargo Insurance */}\n \n\n {/* Service 3: Liftgate Delivery */}\n \n \n \n
\n\n {/* Right Column: Sticky Instant Rate Quotes Card (5 cols) */}\n
\n \n \n
\n \n Instant Spot Rates\n \n \n \n Live Quote\n \n
\n\n {/* Route Preview */}\n
\n
\n {origin}\n \n {destination}\n
\n \n {pallets} Pallets · {totalVolumeCbm.toFixed(2)} CBM\n \n
\n\n {/* Primary Selected Quote Header */}\n
\n
Total Estimated Landed Freight Cost
\n
\n \n {formatMoney(activeTotalPriceUsd)}\n \n ({currentCurrency.code})\n
\n
\n \n \n Transit: {activeTransitTime}\n \n ·\n \n \n Est. {activeCarbonEmission}\n \n
\n
\n \n\n \n {/* Rate Quotes Comparison Cards */}\n
\n \n Compare Multimodal Options:\n \n\n {/* Option 1: Ocean FCL */}\n setSelectedMode('ocean-fcl')}\n >\n
\n
\n \n
\n
\n Ocean FCL (20ft Container)\n \n Recommended\n \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 {/* Option 2: Ocean LCL */}\n setSelectedMode('ocean-lcl')}\n >\n
\n
\n \n
\n
\n Ocean LCL (Shared)\n \n Economy\n \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 {/* Option 3: Express Air Freight */}\n setSelectedMode('air')}\n >\n
\n
\n \n
\n
\n Express Air Freight\n \n Fastest\n \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\n {/* Cost Breakdown Table */}\n
\n Itemized Breakdown\n
\n
\n Base Freight Carrier Rate\n {formatMoney(activeBasePriceUsd)}\n
\n {addCustoms && (\n
\n Customs Clearance Service\n +{formatMoney(CUSTOMS_USD)}\n
\n )}\n {addInsurance && (\n
\n All-Risk Cargo Insurance\n +{formatMoney(INSURANCE_USD)}\n
\n )}\n {addLiftgate && (\n
\n Destination Liftgate Equipment\n +{formatMoney(LIFTGATE_USD)}\n
\n )}\n
\n Bunker / Fuel Surcharge (BAF)\n Included\n
\n
\n
\n\n \n\n {/* Trust / Guarantee Points */}\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 {/* Book Button */}\n \n\n {/* Download PDF Button */}\n \n {!isDownloading ? : }\n {isDownloading ? 'Generating PDF Manifest...' : 'Download Detailed Quote PDF'}\n \n \n \n \n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/FreightQuoteCalculator.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/checkbox.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/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" ] }